HTML Text Formatting ~ Pemrograman dan Teknologi

Sebelumnya saya sudah menulis tentang cara membuat paragraf dengan elemen p dan judulnya dengan elemen heading. Selanjutnya kalian mungkin ingin belajar cara mengubah teks menjadi miring, tebal, atau bergaris agar tulisan yang kalian tampilkan terlihat menarik. Seperti saat menggunakan elemen paragraf dan heading, untuk mengubah bentuk teks, kalian cukup mengapit teks yang ingin kalian ubah dengan pasangan tag yang ditujukan untuk memberikan efek tertentu atau "Text Formatting".

Di beberapa software Word Processor, kalian bisa menemukan bold, italic dan underline. Di dalam kode HTML kalian juga bisa menggunakan bold, italic dan underline. HTML menyediakan tag , , , <s>, dan tag-tag lainnya yang bisa digunakan untuk mengubah bentuk tulisan. Untuk lebih jelasnya, perhatikan contoh kode HTML di bawah ini!

<HTML>
<HEAD>
<title>HTML Pertamaku
</title>
</HEAD>
<BODY>
    <H2>Perkenalan</H2>
    <p>
        Nama saya <b>Geri</b>. Saya Lahir <i>18 OKTOBER 1988</i>. Saya sangat suka <u>bahasa dan pemrograman<u>.
    </p>
</BODY>
</HTML>

Pada kode HTML di atas, saya menulis nama saya dengan huruf yang dicetak tebal menggunakan tag dan pasangan tag penutupnya, yaitu . Kode HTML tersebut juga membuat tulisan "tanggal lahir" tercetak miring. Selain itu saya memberi garis bawah pada tulisan "bahasa dan pemrograman".

Selain b, i, u, dan s; masih banyak elemen HTML lainnya yang bisa kalian gunakan untuk mengubah tampilan tulisan. Berikut ini adalah elemen HTML yg biasa digunakan untuk mengubah format dan tampilan tulisan dalam HTML. Untuk melihat kegunaannya, bisa kalian mencoba sendiri dengan menerapkannya dalam kode HTML.

Nama Tag	Kegunaan
abbr	Mendefinisikan singkatan atau akronim
address	Mendefinisikan informasi kontak untuk penulis
b	Mendefinisikan teks tebal
bdi	Mengisolasi sebagian dari teks yan mungkin diformat dalam arah tulisan yang berbeda dari teks di sekitarnya.
bdo	memaksakan arah teks saat ini.
blockquote	Mendefinisikan sebuah bagian yang dikutip dari sumber lain
cite	mendefinisikan judul dari suatu hasil kerja
code	mendefinisikan suatu kode program
dfn	menampilkan definisi dari istilah
em	mendefinisikan emphasized text
i	mendefinisikan teks yang tercetak italic
ins	mendefinisikan sebuah teks yang sudah diselipkan ke dalam dokumen
kbd	Mendefinisikan input keyboard
mark	Mendefinisikan teks yang ditandai /di-highlight
pre	mendefinisikan preformatted text
q	mendefinisikan kutipan pendek
rp	mendefinisikan apa yang harus ditampilkan browser saat browser tidak mendukung ruby annotations
rt	mendefinisikan sebuah penjelasan atau pelafalan dari suatu karakter / huruf (untuk tipografi asia timur)
ruby	mendefinisikan "ruby annotation"(untuk tipografi asia timur)
s	Mendefinisikan teks yang salah atau dicoret
samp	Mendefinisikan output dari suatu contoh kode program
small	Mendefinisikan teks kecil
strong	Mendefinisikan teks penting
sub	Mendefinisikan teks subscript
sup	Mendefinisikan teks superscript
time	Mendefinisikan sebuah tanggal atau waktu
u	Mendefinisikan teks bergaris bawah
del	mendefinisikan teks yang sudah dihapus dari dokumen

Semua elemen HTML di atas terdiri dari sepasang tag pembuka dan tag penutup. Kalau kalian tidak ingat, perbedaan dari tag pembuka dan tag penutup adalah tanda garis miring (/). Contoh : penutup dari tag adalah , penutup dari tag adalah , dll. Kalian bisa meletakkan teks di antara kedua tag tersebut sebagai konten / isi dari elemen. Untuk lebih jelasnya, ayo kita coba satu persatu secara langsung!

<HTML>
<HEAD>
    <TITLE>HTMLku</TITLE>
</HEAD>
<BODY>
    <abbr>abbr</abbr>
    <p><address>address</address></p>
    <p><bdi>bdi</bdi></p>
    <p><bdo>bdo</bdo></p>
    <p><blockquote>blockquote</blockquote></p>
    <p><cite>cite</cite></p>
    <p><code>code</code></p>
    <p><dfn>dfn</dfn></p>
    <p><em>em</em></p>
    <p><ins>ins</ins></p>
    <p><kbd>kbd</kbd></p>
    <p><mark>mark</mark></p>
    <p><pre>pre</pre></p>
    <p><q>q</q></p>
    <p><rp>rp</rp></p>
    <p><rt>rt</rt></p>
    <p><ruby>ruby</ruby></p>
    <p><samp>samp</samp></p>
    <p><small>samp</small></p>
    <p><strong>strong</strong></p>
    <p><sub>sub</sub></p>
    <p><sup>sup</sup></p>
    <p><time>time</time></p>
    <p><del>del</del></p>
    <p><s>s</s></p>
</BODY>
</HTML>

Contoh di atas akan menampilkan beberapa tulisan yang diapit dengan tag dan . Selain itu, ada pasangan tag lainnya di dalamnya. Tulisan-tulisan tersebut bentuknya berbeda-beda karena ada pasangan tag yang mengapitnya.

Btw, kode HTML menganggap rentetan spasi sebagai satu spasi. Kalau kalian ingin menggunakan banyak spasi secara beruntun, kalian perlu mempelajari penggunaan karakter khusus dalam HTML. Tapi, saat ini cukup sampai di sini dulu.