Pengenalan HTML 3
Style

oleh: Suryo Adhy Chandra, ST

Tag Membuat Sytle

HTML memiliki fasilitas dasar untuk membuat styling. Styling atau gaya dalam bahasa indonesia, digunakan untuk membuat tampilan informasi dalam html menjadi lebih jelas.

Kita mungkin mengerti bahwa ketika kita membuat daftar peserta ekstra misalnya, kita mau membuat style:

Seorang anak sedang berlari kecil tetapi ada teman yang mau ikut berlari juga.
Ketika sampai di kelas mereka tidak langsung duduk tetapi minum air segar dan makan camilan.

Yuk segera kita mulai!

1. Penampil ukuran huruf
Penampil ukuran huruf bs ditandai dengan tag <h1>kalimat yang mau dibesarkan</h1>
ukuran h1 adalah ukurang yang paling besar dan kemudian paling kecil adalah h5, yaitu:

h1

h2

h3

h4

h5

2. Membuat posisi kalimat tengah
Untuk menampilkan posisi kalimat atau apapun ke tengah sangat mudah, yaitu dengan menggunakan tag:
  • Membuat ke tengah <center>kalimat yang mau ke tengah</center>

3. Membuat huruf jadi tebal, miring, garis bawah, garis tengah
Untuk membuat huruf atau kalimat atau kata menjadi tebal, miring, garis tengah atau garis bawah menggunakan tag:
  • Membuat tebal <b>kata yang mau ditebalkan</b>
  • Membuat miring <i>kata yang mau dicetak miring</i>
  • Membuat garis bawah <u>kalimat yang mau dikasih garis bawah</u>
  • Membuat garis tengah <s>kalimat yang mau dikasih garis tengah</s>

4. Membuat huruf menjadi seperti pangkat atau indeks
Untuk membuat huruf menjadi pangkat atau indeks menggunakan tag:
  • Membuat pangkat (di atas)<sup>kata yang mau jadikan pangkat</sup>
  • Membuat indeks (di bawah) <sub>kata yang mau dijadikan indeks</sub>

Tag lama dan tag modern

Tag seperti <b>, <i>, <u>, dan <s> bisa langsung dipakai dan hasilnya kelihatan seketika. Namun kamu perlu tahu bahwa HTML5 membedakan tampilan dari makna. Tag <strong> berarti "ini penting" dan <em> berarti "ini ditekankan". Browser biasanya menampilkannya tebal dan miring, tetapi pembaca layar akan membacakannya dengan nada yang berbeda. Jadi, bila kata itu memang penting, pilih strong; bila hanya ingin tampilan tebal, pakai b. Tag <center> yang ada di atas sebenarnya sudah dihapus dari standar HTML5, dan perataan tengah kini dilakukan memakai CSS atau Bootstrap.

Contoh penggunaan nyata

<h2>Pengumuman Lomba</h2>
<p>
    Lomba <strong>coding</strong> diadakan pada hari <em>Sabtu</em>.
    Biaya pendaftaran <s>Rp 20.000</s> menjadi Rp 10.000.
</p>
<p>Rumus luas persegi: L = s<sup>2</sup></p>
<p>Rumus air: H<sub>2</sub>O</p>
<p>Kata <mark>penting</mark> diberi stabilo, dan <small>catatan kecil</small> ditulis lebih mungil.</p>

Contoh di atas menunjukkan penggunaan yang wajar: s untuk harga lama yang dicoret, sup untuk pangkat dalam matematika, dan sub untuk indeks dalam rumus kimia. Tag <mark> memberi latar kuning seperti stabilo dan <small> mengecilkan huruf untuk catatan kaki.

Judul bukan sekadar pembesar huruf

Tag h1 sampai h6 membentuk kerangka dokumen seperti daftar isi buku: h1 untuk judul utama, h2 untuk bab, h3 untuk subbab, dan seterusnya. Satu halaman sebaiknya hanya punya satu h1. Jangan memakai h1 hanya karena ingin huruf besar, sebab mesin pencari memakai urutan judul untuk memahami isi halaman. Jika ingin huruf besar tanpa mengubah makna, gunakan CSS.

Kesalahan yang sering terjadi

Ringkasan

Gaya teks dasar dibuat dengan b, i, u, s, sup, dan sub. Untuk makna penting gunakan strong dan em. Judul membentuk struktur dokumen, bukan sekadar mengubah ukuran huruf.

Latihan

  1. Tulislah rumus 10 pangkat 3 dengan tag HTML.
    Lihat jawaban10<sup>3</sup>
  2. Apa beda <b> dan <strong>?
    Lihat jawabanKeduanya tampil tebal, tetapi strong membawa makna penting yang dikenali pembaca layar, sedangkan b hanya soal tampilan.
  3. Tag apa yang cocok untuk menulis rumus kimia CO2 dengan angka 2 di bawah?
    Lihat jawabanCO<sub>2</sub>
  4. Susunlah kerangka halaman "Hewan" dengan subbab "Mamalia" dan "Reptil".
    Lihat jawaban<h1>Hewan</h1>, lalu <h2>Mamalia</h2> dan <h2>Reptil</h2> masing-masing diikuti paragraf penjelasan.
← Kembali Ke Daftar Pelajaran HTML