Prasasti indah dalam html. Perataan teks HTML berdasarkan tengah, lebar, dan lekukan. Tag HTML yang menentukan perataan dan lekukan teks

Cara memasukkan teks ke dalam halaman HTML? Ada yang khusus untuk ini tag HTML untuk teks.

Ada enam tingkatan judul dalam HTML. Mereka ditambahkan menggunakan tag

-

. Pada saat yang sama

Ini adalah pos tingkat pertama, ini yang terbesar.

Contoh pembuatan header:

Judul tidak bergantung satu sama lain dengan cara apa pun. Anda dapat menambahkan judul tingkat mana pun di mana pun Anda membutuhkannya.

Pemula terkadang tidak dapat menjawab pertanyaan - berapa banyak judul tingkat pertama yang ada dalam satu halaman. Di Internet, saya berulang kali menemukan informasi yang tidak lengkap dan tidak dapat diandalkan tentang topik ini. Oleh karena itu, saya memutuskan untuk mempertimbangkan masalah ini secara mendetail.

Jumlah tag per halaman berfungsi

tidak mempunyai efek apa pun. Anda dapat menambahkannya sebanyak yang Anda suka. Tetapi mesin pencari memiliki sikap negatif terhadap fakta bahwa ada lebih dari satu judul tingkat pertama dalam satu halaman. Oleh karena itu, jika Anda ingin mempromosikan situs Anda di mesin pencari, maka hanya boleh ada satu judul tingkat pertama di setiap halaman. Kesimpulan: sebaiknya segera dibiasakan untuk tidak memasang tag lebih dari satu

ke halaman. Bagaimanapun, HTML memiliki seluruh tingkatan judul. Untuk tata letak halaman apa pun, ini cukup untuk menyorot tag

untuk satu tajuk saja.

Ayat

Menandai

Membuat paragraf teks. Memiliki padding di bagian atas dan bawah untuk memisahkan satu paragraf dengan paragraf lainnya. Selain itu, dimungkinkan untuk mengatur indentasi baris pertama. Semua ini dikontrol menggunakan CSS.

Menandai

Menandai Ini adalah tag baris untuk menyisipkan teks. Biasanya digunakan ketika Anda perlu menyorot bagian teks dengan cara tertentu.

Misalnya, mari kita sorot bagian teks dengan warna merah.

Bagian teks yang diperlukan ada di dalam tag . Untuk membuatnya menjadi merah, tag memiliki kumpulan atribut style, yang menentukan gaya. Karena bekerja dengan gaya tercakup dalam tutorial CSS, saya tidak akan menjelaskan cara kerja atribut ini di sini. Tambahkan saja ke tag seperti yang tertulis di contoh.

Menandai

Menandai

Digunakan untuk tipe khusus teks yang penting untuk mempertahankan pemformatan.  Teks di dalam tag ini ditampilkan di halaman persis seperti yang muncul di kode halaman.  Ini mempertahankan semua spasi dan jeda baris.  Teks muncul dalam font monospace, namun ini dapat diubah menggunakan gaya.

Memilih teks

HTML memiliki tag untuk menyorot teks. Tag Dan membuat font tebal. Meskipun tag ini memiliki beberapa perbedaan, secara umum tag tersebut terlihat sama di halaman. Tag Dan sorot teks yang dicetak miring. Ada tandanya , yang membuat teks bergaris bawah, namun penggunaannya tidak disarankan.

Contoh pemilihan teks:

21
22
23
24

Tipe tebal Tipe tebal Font miring Font miring

Teks dapat disorot menggunakan gaya. Setiap orang memutuskan sendiri cara menyorot teks, menggunakan tag atau gaya.

Tag lainnya

Kami melihat tag HTML khusus untuk teks. Namun teks tersebut juga dapat berisi banyak tag lain yang menambahkan konten ke halaman. Anda bahkan dapat menempelkan teks di luar tag apa pun dan teks itu akan tetap muncul di layar. Namun dalam praktiknya, tidak ada yang melakukan hal ini, karena teks tidak dapat dimanipulasi di luar tag. Oleh karena itu, semua teks tentu saja harus terkandung dalam tag. Dan ketika Anda mempelajari CSS, Anda akan dapat mendefinisikannya penampilan teks.

Kebetulan Anda perlu menampilkan gambar dan menambahkan judul (frasa pendek). Ada parameter berikut untuk ini:

Align="top" – menyelaraskan teks ke bagian atas gambar.
align="bottom" – menyelaraskan teks ke bawah.
align="middle" – menyelaraskan teks ke tengah.

Di bawah ini adalah kode yang menunjukkan pengoperasian parameter yang dijelaskan di atas.

<html> <kepala > <judul > Gambar dan teksjudul > kepala > <tubuh > <hal><gambar src="gambar/htmlbeer0.jpg" lebar= "100" tinggi= "180" sejajarkan= "atas" /> Lebah yang cantikhal> <kawan><kawan> <hal><gambar src="gambar/htmlbir1.jpg" lebar= "120" tinggi= "180" sejajarkan= "tengah" /> Lebah yang sangat lucuhal> <kawan><kawan><kawan> <hal><gambar src="gambar/htmlbir2.jpg" lebar= "160" tinggi= "180" sejajarkan= "dasar" /> Tidak ada juga.hal> tubuh > html>

Lebah yang cantik

Lebah yang sangat lucu

Tidak ada juga.


Sekarang mari kita lihat cara menampilkan gambar dengan banyak teks.
Ada dua pilihan:

Align="left" – gambar "membungkus teks" di sebelah kiri.
align="right" – gambar “membungkus teks” di sebelah kanan.

Agar lebih jelas, tuliskan kode berikut:

<html> <kepala > <judul > Gambar HTML di kiri – teks di kananjudul > kepala > <tubuh > <gambar src="gambar/htmlmatahari.jpg" sejajarkan= "kiri" lebar= "140" tinggi= "124" /> <besar> Mataharibesar> <kawan> <hal>> Mungkin ada teks di sini yang berisi informasi tentang Matahari.hal> <kawan><kawan> <gambar src="gambar/htmlbulan.jpg" sejajarkan= "Kanan" lebar= "140" tinggi= "124" /> <besar> Bulanbesar> <kawan> <hal> Di sini Anda dapat menyisipkan artikel ilmiah tentang Bulan.hal> tubuh > html> Matahari

Bentuk Matahari mendekati bola ideal dengan diameter 1.392.000 km. Ini sesuai dengan orbit Bulan dan masih memiliki banyak ruang tersisa. Faktanya, lebih dari satu juta planet seperti Bumi bisa muat dengan nyaman di dalam Matahari. Ditambah lagi, jika Anda dapat mengendarai mobil melintasi permukaannya dengan kecepatan 88 km/jam, Anda memerlukan waktu 5 setengah tahun untuk sekali mengelilingi Matahari (tanpa berhenti). Namun ukuran Matahari tidak konstan. Penelitian modern menunjukkan bahwa diameter Matahari mengecil sekitar 1 meter per jam. Jika fenomena ini terjadi pada satu abad terakhir, maka Matahari yang kita lihat sekarang berukuran 800 km lebih kecil dari Matahari yang dilihat nenek moyang kita. Mungkin kontraksi matahari ini adalah bagian dari goyangan jangka panjang yang membantu menstabilkan pelepasan energi yang sangat besar.

Bulan

Ini adalah satu-satunya satelit alami Bumi. Massa Bulan adalah 0,0123 massa Bumi (kira-kira 1/81) atau 7,6.1022 kg. Diameter Bulan sedikit lebih besar dari seperempat diameter Bumi (0,273) atau 3.476 km. Bulan menerangi Bumi 500.000 kali lebih lemah dari Matahari). Di Bulan tidak ada atmosfer yang kita kenal, tidak ada sungai dan danau, tumbuhan dan organisme hidup. Gravitasi di Bulan enam kali lebih kecil dibandingkan di Bumi. Siang dan malam dengan perubahan suhu hingga 300 derajat berlangsung selama dua minggu.


Tetapi seperti yang Anda lihat, mungkin teks dan gambarnya terlalu berdekatan. Untuk mengatasinya, Anda hanya perlu menetapkan beberapa nilai yang diinginkan untuk ketebalan bingkai dan warna seperti latar belakang.

<html> <kepala > <judul > Mengeluarkan gambar ke halaman HTMLjudul > kepala > <tubuh > <gambar src="gambar//htmlEclipse.jpg" alt=sejajarkan= "kiri" lebar= "160" tinggi= "130" style="perbatasan: 8px padat #ffffff;"/> <besar>besar> <kawan> <hal> Artikel tentang Gerhana Matahari.hal> tubuh > html>

Fenomena astronomi dimana Bulan menutupi (gerhana) seluruh atau sebagian Matahari dari pandangan pengamat di Bumi. Gerhana matahari hanya mungkin terjadi pada bulan baru, ketika sisi Bulan yang menghadap Bumi tidak diterangi dan Bulan sendiri tidak terlihat. Gerhana hanya mungkin terjadi jika bulan baru terjadi di dekat salah satu dari dua titik bulan (titik perpotongan orbit tampak Bulan dan Matahari), tidak lebih dari sekitar 12 derajat dari salah satunya.

Dalam html, ukuran font memainkan peran penting. Ini memungkinkan Anda untuk menarik perhatian pengguna informasi penting, diposting di halaman situs. Meski yang penting bukan hanya ukuran hurufnya, tapi juga warna, ketebalannya, bahkan keluarganya.

Tag dan atribut saat bekerja dengan font html

Bahasa hypertext memiliki berbagai alat untuk bekerja dengan font. Bagaimanapun, pemformatan teks adalah tugas utama html.

Alasan diciptakannya bahasa HTML adalah masalah menampilkan aturan pemformatan teks di browser.


Mari kita lihat tag yang digunakan untuk bekerja dengan font dalam HTML dan atributnya. Yang utama adalah tagnya . Dengan menggunakan nilai atributnya, Anda dapat mengatur beberapa karakteristik font:

  • warna – mengatur warna teks;
  • size – ukuran font dalam satuan konvensional.

Nilai atribut positif dari 1 hingga 7 didukung.

  • face – digunakan untuk mengatur jenis font teks yang akan digunakan di dalam tag . Beberapa nilai didukung, dipisahkan dengan koma.

Hanya teks yang terletak di antara bagian tag font berpasangan yang diformat. Teks lainnya ditampilkan dalam font default standar.

Juga di html ada sejumlah tag berpasangan yang hanya menentukan satu aturan pemformatan. Ini termasuk:

  • — mengatur font tebal di html. Menandai tindakan serupa dengan yang sebelumnya;
  • — ukurannya lebih besar dari standar;
  • — ukuran font lebih kecil;
  • — teks miring (miring). Label serupa ;
  • — teks dengan garis bawah;
  • - dicoret;
  • — menampilkan teks hanya dalam huruf kecil;
  • - dalam huruf besar.

Teks biasa

Teks tebal

Teks tebal

Lebih dari biasanya

Kurang dari biasanya

Huruf miring

Huruf miring

Dengan garis bawah

Dicoret

Kemampuan atribut gaya

Selain tag yang dijelaskan, masih ada beberapa cara lagi untuk mengubah font di html. Salah satunya adalah dengan menggunakan atribut style generik. Dengan menggunakan nilai propertinya, Anda dapat mengatur gaya tampilan font:

1) font-family – properti mengatur keluarga font. Dimungkinkan untuk membuat daftar beberapa nilai.
Mengubah font dalam html ke nilai berikutnya akan terjadi jika keluarga sebelumnya tidak disetel sistem operasi pengguna.

Sintaks penulisan:

keluarga font: nama font [, nama font[, ...]]

2) ukuran font – ukurannya diatur dari 1 hingga 7. Ini adalah salah satu cara utama Anda dapat memperbesar font dalam HTML.
Sintaks penulisan:

ukuran font: ukuran absolut | ukuran relatif | arti | minat | mewarisi

Anda juga dapat mengatur ukuran font:

  • Dalam piksel;
  • Secara absolut ( xx-kecil, x-kecil, kecil, sedang, besar);
  • Dalam persen;
  • Dalam poin (pt).

Ukuran font:7

Ukuran font: 24 piksel

Ukuran font: x-besar

Ukuran font: 200%

Ukuran font: 24pt

3) font-style – mengatur gaya penulisan font. Sintaksis:

gaya font: normal | miring | miring | mewarisi

Nilai:

  • normal – ejaan normal;
  • miring – miring;
  • miring – font miring ke kanan;
  • mewarisi – mewarisi ejaan elemen induk.

Contoh cara mengubah font di html menggunakan properti ini:

gaya font:mewarisi

gaya font: miring

gaya font: normal

gaya font: miring

4) font-variant – mengubah semua huruf kapital menjadi huruf kapital. Sintaksis:

varian font: normal | topi kecil | mewarisi

Contoh cara mengubah font di html dengan properti ini:

varian font:mewarisi

varian font: normal

varian font: huruf kecil

5) font-weight – memungkinkan Anda mengatur ketebalan teks (saturasi). Sintaksis:

berat font: tebal|lebih tebal|lebih ringan|normal|100|200|300|400|500|600|700|800|900

Nilai:

  • tebal – mengatur font html menjadi tebal;
  • lebih berani – lebih berani dibandingkan normal;
  • lebih ringan – kurang jenuh dibandingkan normal;
  • normal – ejaan normal;
  • 100-900 – mengatur ketebalan font dalam jumlah yang setara.

berat font: tebal

font-weight:lebih tebal

font-weight: lebih ringan

berat font: normal

berat font:900

berat font:100

properti font html dan warna font

Font adalah properti kontainer lainnya. Di dalamnya, ia menggabungkan nilai beberapa properti yang dimaksudkan untuk mengubah font. sintaks font:

font: ukuran font font-keluarga | mewarisi

Nilainya juga dapat diatur ke font yang digunakan oleh sistem dalam label pada berbagai kontrol:

  • keterangan – untuk tombol;
  • ikon – untuk ikon;
  • menu - menu;
  • kotak pesan – untuk kotak dialog;
  • teks kecil – untuk kontrol kecil;
  • bilah status – font bilah status.

font:ikon

font: keterangan

font:menu

font:kotak pesan

teks kecil

font: bilah status

font: miring 50px tebal "Times New Roman", Times, serif

Untuk mengatur warna font pada html bisa anda gunakan properti warna. Ini memungkinkan Anda untuk mengatur warna, baik menggunakan kata kunci maupun format RGB. Dan juga dalam kode heksadesimal.

Tag HTML yang menentukan perataan dan lekukan teks

Teks yang dibenarkan digunakan dalam tipografi

Contoh di bawah ini menunjukkan cara menyelaraskan teks menjadi lebar halaman:

sejajarkan = "kiri" sejajarkan = "kanan"

Jumlah pekerja yang bekerja di sektor jasa dan penyebaran informasi terus bertambah setiap hari. Jika simbol abad yang lalu adalah pertanian dan pabrik, maka simbol abad ke-21 saat ini adalah kantor yang dilengkapi komputer yang memiliki akses arus informasi.

sejajarkan = "ratakan" sejajarkan = "tengah"

Jumlah pekerja yang bekerja di sektor jasa dan penyebaran informasi terus bertambah setiap hari. Jika simbol abad yang lalu adalah pertanian dan pabrik, maka simbol abad ke-21 saat ini adalah kantor yang dilengkapi komputer yang memiliki akses arus informasi.

Jumlah pekerja yang bekerja di sektor jasa dan penyebaran informasi terus bertambah setiap hari. Jika simbol abad yang lalu adalah pertanian dan pabrik, maka simbol abad ke-21 saat ini adalah kantor yang dilengkapi komputer yang memiliki akses arus informasi.

Nilai justify memastikan keseragaman menyelaraskan teks ke kanan dan kiri, itu lebarnya. Metode ini banyak digunakan dalam percetakan.

Menyelaraskan teks dalam HTML ke tengah dan lebar

Sejajarkan teks dalam HTML di tengah, teks di kanan:

Hasil:

Atribut dan nilai

  • align="left" - mendefinisikan perataan teks kiri(bawaan).
  • sejajarkan="tengah" - menyelaraskan teks ke tengah.
  • sejajarkan="kanan" - menyelaraskan teks ke kanan.

Sejajarkan | Indentasi teks HTML

teks HTML dan lekukannya di sebelah kiri halaman

Kami akan memproduksi lekukan teks di sebelah kiri dengan dua cara:

Hasil:

Lihat di jendela baru.