Seperti apa huruf miringnya. Tag pemformatan teks HTML dasar - menyorot teks dalam huruf tebal dan miring; pilihan ukuran, warna dan font; paragraf dan tag judul

Miring adalah salah satu cara paling populer untuk menyorot suatu teks dan memberinya arti penting. Ini ideal untuk kutipan, catatan kaki, judul, dan nama diri. Ada dua tag khusus dalam HTML untuk menampilkan gaya miring. Di CSS, huruf miring dikontrol oleh properti font-style.

Miring atau miring?

Font yang sama mungkin tampak berbeda dalam gaya miring.

Gambar menunjukkan tiga blok teks yang diketik dengan font Playfair Display yang sama. Yang pertama bergaya romawi biasa, sedangkan yang kedua dan ketiga bergaya miring. Mereka dibuka di browser Google Chrome yang sama, tetapi tampilannya sangat berbeda.

Faktanya adalah beberapa font memiliki kumpulan karakter miringnya sendiri. Jika browser tidak memiliki akses ke kumpulan ini, tetapi menemukan teks yang seharusnya dicetak miring, browser akan mencoba mencetak miring sendiri.

Di blok kedua hanya ada versi yang diproses oleh browser, dan di blok ketiga ada versi miring asli dari font Playfair Display, yang memiliki gaya unik, lebih mirip tulisan tangan. Browser hanya memiringkan setiap karakter teks pada sudut tertentu, menirukan huruf miring.

Saat mengetahui cara membuat huruf miring dalam CSS atau HTML, penting untuk diingat bahwa dalam kasus font tertentu, Anda perlu memberi browser akses ke kumpulan huruf miringnya. Dalam beberapa kasus, hasil algoritma kemiringan browser mungkin tidak memuaskan.

HTML miring

Ada dua tag khusus untuk menampilkan teks miring dalam HTML: i (dari kata miring) dan em. Gaya fragmen teks yang diapit oleh salah satu deskriptor ini akan sama.

Perbedaannya terletak pada pemilihan logis. Tag em menunjukkan arti khusus dari fragmen tersebut. Hal ini penting bagi robot pencari dan pembaca layar, yang akan menyorot teks tertentu menggunakan intonasi.

properti gaya font

Di CSS, huruf miring dikontrol oleh pernyataan gaya font. Ini dapat mengambil salah satu dari tiga nilai dasar:

  • biasa - font biasa;
  • miring - gaya miring;
  • miring - gaya miring.

Saat ini, sebagian besar browser modern memperlakukan nilai miring dan miring dengan cara yang sama, tetapi nilai miring awalnya dianggap sebagai hasil algoritme khusus browser yang memiringkan setiap karakter ke kanan.

Jika font yang dicari tidak ditemukan oleh browser, maka tampilan italic akan sama persis dengan oblique.

Berbeda dengan tag em, tag ini tidak terlalu mementingkan pemilihan; melainkan sesuai dengan deskriptor i.

Contoh

Kutipan sering kali dicetak miring. Mari kita coba membuatnya terlihat bagus.

Kutipan ( gaya font: miring; batas kiri: 5px ungu solid; padding-kiri: 20px; )

Selain batas dekoratif di sebelah kanan dan indentasi, blok kutipan memiliki aturan gaya font dengan nilai miring.

Gunakan untuk mengatur huruf miring di CSS.

Sekarang kita akan mempelajari tag utama. Mari kita mulai dengan tag apa yang diperlukan pada halaman, membentuk strukturnya.

Memblokir. Struktur halaman sederhana

Halaman situs web adalah file teks biasa dengan ekstensi .html. Teks halaman HTML beserta tag disimpan di dalam file ini. File ini harus memiliki tag berikut: tag , yang harus berisi teks seluruh situs (semua yang ditulis di luar tag ini akan diabaikan oleh browser), dan di dalamnya harus ada dua tag lagi: tag untuk konten dan tag halaman layanan - untuk teks utama yang terlihat di layar browser.

Ke dalam konten layanan, yang terletak di dalam tag , ada banyak hal berbeda yang disertakan, tetapi untuk saat ini kita hanya memerlukan dua di antaranya. Ini adalah sebuah tanda , yang menentukan judul halaman, yang akan terlihat di tab browser, dan tag <meta>, yang menentukan pengkodean halaman (ditempatkan di atribut <b>rangkaian karakter</b> dan biasanya penting <b>utf-8</b>, lebih lanjut tentang ini di video, yang akan berada beberapa paragraf di bawah).</p> <p>Juga, sebelum tag <html>konstruksinya biasanya tertulis <b>doctype</b>, yang menunjukkan versi HTML tempat situs tersebut dibuat. Versi bahasa saat ini adalah nomor lima dan doctype-nya akan terlihat seperti ini -<!DOCTYPE html> .</p> <p>Jadi mari kita lihat struktur dasar halaman (untuk menjalankan contoh ini di browser, salin ke file teks dengan ekstensi <b>.html</b> dan buka di browser, jika Anda mengalami masalah, tonton video di bawah contoh):</p> <p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ini adalah judul judulnya Ini adalah konten utama halaman ini.

Lihat tautan ini untuk melihat seperti apa contoh ini di browser.

Saya rasa setelah Anda membaca tentang struktur dasar sebuah halaman, Anda masih sedikit bingung tentang seperti apa praktiknya. Oleh karena itu, saya membuat video khusus di mana saya akan menunjukkan kepada Anda cara membuat halaman HTML pertama Anda dan menjalankannya di browser (di dalamnya saya juga akan berbicara tentang judul halaman, tentang pengkodean, tentang desain kode). Tonton dan baru kemudian lanjutkan ke bacaan lebih lanjut:

Nah, sekarang, setelah mempelajari cara membuat halaman paling sederhana, kita akan melanjutkan mempelajari tag berguna yang harus digunakan di dalam tag . Ini akan menjadi tag untuk paragraf, judul, daftar, tautan, dan hal berguna lainnya. Jadi mari kita mulai.

Memblokir. Paragraf

Salah satu elemen utama halaman adalah paragraf. Mereka dapat dibandingkan dengan paragraf dalam sebuah buku - setiap paragraf dimulai pada baris baru dan memiliki apa yang disebut garis merah (ini adalah ketika baris pertama teks paragraf sedikit menjorok ke kanan). Secara default, tidak ada garis merah, tetapi mudah untuk membuatnya (lebih lanjut tentang ini nanti).

Paragraf dibuat menggunakan tag

Dengan demikian:

Ini adalah judul judulnya

Ini adalah sebuah paragraf.

Itu satu paragraf lagi.

Dan satu paragraf lagi.



Ini adalah sebuah paragraf.

Itu satu paragraf lagi.

Dan satu paragraf lagi.

Memblokir. Judul h1, h2, h3, h4, h5, h6

Selain paragraf, hal penting pada halaman tersebut adalah header. Mereka juga dapat dibandingkan dengan judul dari sebuah buku - setiap bab memiliki judulnya sendiri (judul bab tersebut) dan dibagi menjadi beberapa paragraf, yang juga memiliki judulnya sendiri. Nah, teks utama halaman itu terletak di paragraf.

Header dibuat menggunakan tag

,

,

,

,

,
. Mereka mempunyai tingkat kepentingan yang berbeda-beda. Dalam judul h1 harus ditempatkan judul seluruh halaman HTML, V h2- Nama blok halaman, masuk h3- nama subblok dan sebagainya.

Semua header dicetak tebal secara default dan memiliki ukuran berbeda (ini dapat diubah melalui CSS, tetapi akan dibahas lebih lanjut nanti). Lihat contoh:

Ini adalah judul judulnya

Judul h1

Judul h2

Judul h3

Judul h4

Judul h5
Judul h6

Ini adalah paragraf pertama.

Ini adalah paragraf kedua.

Ini adalah paragraf ketiga.



Beginilah tampilan kode di browser:

Judul h1

Judul h2

Judul h3

Judul h4

Judul h5
Judul h6

Ini adalah paragraf pertama.

Ini adalah paragraf kedua.

Ini adalah paragraf ketiga.

Memblokir. Berlemak

Anda sudah tahu bahwa header secara default berlemak. Namun, Anda dapat membuat teks biasa menjadi tebal - cukup masukkan ke dalam tag . Lihat contoh:

Ini adalah judul judulnya

Ini adalah teks normal, dan ini adalah berlemak teks.



Beginilah tampilan kode di browser:

Ini adalah teks normal, dan ini adalah berlemak teks.

harus digunakan di dalam beberapa tag lain, seperti paragraf. Dalam hal ini, paragraf membuat keseluruhan struktur halaman (paragraf dan judul), dan tag B membuat setiap bagian teks menjadi tebal.

Memblokir. Huruf miring

Selain berlemak, Anda juga bisa membuatnya huruf miring menggunakan tag :

Ini adalah judul judulnya

Ini adalah teks normal, dan ini adalah miring teks.



Beginilah tampilan kode di browser:

Memblokir. Daftar

Selain paragraf dan judul, ada elemen penting lainnya pada halaman ini - ini daftar. Elemen seperti itu mungkin sudah tidak asing lagi bagi semua pengguna Internet. Mereka mewakili daftar sesuatu (daftar) poin demi poin. Di samping setiap item dalam daftar biasanya terdapat lingkaran berisi (disebut penanda daftar).

Daftar dibuat menggunakan tag