Format Teks Pada HTML

Menulis dokumen menggunakan Microsoft Word tentulah berbeda dengan menulis dokumen di jendela browser. Walupun editor HTML canggih yang beredar saat ini telah melengkapi dirinya dengan tombol-tombol instan siap pakai untuk menebalkan teks, memiringkan, mengatur ukuran huruf dan sebagainya namun sebenarnya di balik itu semua, editor HTML itu sangan mengandalkan kehadiran tag. Dengan demikian, untuk menebalkan teks, misalnya, editor HTML canggih semacam Dremaweaver akan membubuhkan tag <b> dan </b> di antara teks yang akan dipertebal tampilannya.

Pada tulisan kali ini, kita mencoba belajar tentang semantic tag, yaitu tag-tag yang berfungsi untuk menenentukan fungsi sebuah teks yang ada di dalam desain website kita. Semantic tag berbeda dengan tag pada umumnya yang secara khusus mengatur bagaimana teks itu akan tampak pada jendela browser. Sedangkan semantic tag lebih mengarah pada fungsi teks itu.

Membuat Headings

Apa itu heading? secara sederhana, heading berfungsi seperti judul pada sebuah dokumen. Bukan judul yang muncul di title bar seperti yang kita buat menggunakan tag <title> namun lebih seperti judul yang ada di dalam dokumen itu sendiri. Untuk membuat heading, HTML menyiapkan enam buah tingkatan heading, mulai dari yang terbesar, yaitu <h1> sampai terkecil <h6>.

Untuk membantu Anda memahami bagaimana ukuran font antara <h1> sampai <h6> akan muncul browser, tulislah script dibawah ini :

Membuat Efek Tebal dan Miring pada Teks

Teks tebal dan teks miring sudah lama dipakai untuk memberi penekanan pada sebuah kata atau kalimat agar pembaca memperhatikan teks itu dengan lebih intens. Untuk membuat efek tebal, bisa menggunakan two sided tag <b>..</b>. Teks diantara tag tersebut akan menjadi lebih tebal dibanding teks-teks lainnya. Sedangkan kalau ingin memiringkan teks (italic), maka gunakan two sided tag <i>...</i>. Apabila lupa menutup tag itu, misalnya lupa menulis </b> atau </i> maka seluruh teks setelah tag <b> atau <i> akan menjadi tebal atau miring.
Cobalah tulis script di bawah ini dan lihatlah hasilnya di jendela browser :