Salah satu aspek penting dari HTML adalah formatting teks, yaitu cara mengubah tampilan dan makna dari teks yang kita tulis di halaman web. Dengan formatting teks, kita dapat membuat teks kita lebih menonjol, lebih jelas, atau lebih sesuai dengan konteks.
|
| Gambar 11.1 : Ilustrasi Formatting Teks HTML |
Dalam artikel ini, kita akan membahas beberapa tag HTML yang dapat digunakan untuk formatting teks, yaitu:
Daftar Isi
Tag strong dan em
Tag strong dan em adalah tag HTML yang digunakan untuk memberikan penekanan pada teks tertentu. Tag strong membuat teks menjadi tebal, sedangkan tag em membuat teks menjadi miring. Contohnya:
<p>Saya <strong>semangat</strong> belajar <em>HTML</em>.</p>Hasilnya:
Saya semangat belajar HTML.
Tag strong dan em tidak hanya mengubah tampilan teks, tetapi juga maknanya. Tag strong menunjukkan bahwa teks tersebut penting atau serius, sedangkan tag em menunjukkan bahwa teks tersebut mengekspresikan perasaan atau nada suara. Tag strong dan em juga dapat digunakan bersama-sama untuk memberikan penekanan lebih kuat. Contohnya:
<p>Saya <strong><em>sangat semangat</em></strong> belajar <em><strong>HTML</strong></em>.</p>Hasilnya:
Saya sangat semangat belajar HTML.
Tag sup dan sub
Tag sup dan sub adalah tag HTML yang digunakan untuk membuat teks menjadi superscript atau subscript, yaitu teks yang berada di atas atau di bawah garis dasar teks normal. Tag sup membuat teks menjadi superscript, sedangkan tag sub membuat teks menjadi subscript. Contohnya:
<p>E = mc<sup>2</sup></p>
<p>H<sub>2</sub>O adalah rumus kimia dari air.</p>Hasilnya:
E = mc2
H2O adalah rumus kimia dari air.
Tag sup dan sub biasanya digunakan untuk menulis rumus matematika, kimia, atau fisika. Tag sup dan sub juga dapat digunakan untuk menulis catatan kaki, nomor halaman, atau simbol dagang. Contohnya:
<p>Buku ini ditulis oleh John Doe<sup>1</sup>.</p>
<p>Halaman ini adalah halaman ke-10<sub>2</sub>.</p>
<p>Produk ini dilindungi oleh merek dagang ®<sup>3</sup>.</p>Hasilnya:
Buku ini ditulis oleh John Doe1.
Halaman ini adalah halaman ke-102.
Produk ini dilindungi oleh merek dagang ®3.
Tag abbr dan acronym
Tag abbr dan acronym adalah tag HTML yang digunakan untuk menulis singkatan atau akronim, yaitu kata atau frasa yang dibentuk dari huruf-huruf awal dari kata-kata lain. Tag abbr digunakan untuk singkatan yang dapat dibaca sebagai kata, sedangkan tag acronym digunakan untuk akronim yang harus dibaca sebagai huruf-huruf terpisah. Contohnya:
<p>UNESCO adalah singkatan dari <abbr title="United Nations Educational, Scientific and Cultural Organization">United Nations Educational, Scientific and Cultural Organization</abbr>.</p>
<p>NASA adalah akronim dari <acronym title="National Aeronautics and Space Administration">National Aeronautics and Space Administration</acronym>.</p>Hasilnya:
UNESCO adalah singkatan dari United Nations Educational, Scientific and Cultural Organization.
NASA adalah akronim dari National Aeronautics and Space Administration.
Tag abbr dan acronym memiliki atribut title yang digunakan untuk menulis penjelasan lengkap dari singkatan atau akronim tersebut. Atribut title ini akan ditampilkan sebagai tooltip ketika kita menyorot teks yang menggunakan tag abbr atau acronym. Tag abbr dan acronym berguna untuk membuat teks kita lebih ringkas dan mudah dibaca, serta memberikan informasi tambahan bagi pembaca yang mungkin tidak familiar dengan singkatan atau akronim tersebut.
Tag mark dan del
Tag mark dan del adalah tag HTML yang digunakan untuk menandai teks yang relevan atau tidak relevan dengan konteks tertentu. Tag mark membuat teks menjadi berwarna kuning, sedangkan tag del membuat teks menjadi bergaris tengah. Contohnya:
<p>Ini adalah <mark>teks yang relevan</mark> dengan topik yang sedang dibahas.</p>
<p>Ini adalah <del>teks yang tidak relevan</del> dengan topik yang sedang dibahas.</p>Hasilnya:
Ini adalah teks yang relevan dengan topik yang sedang dibahas.
Ini adalah
teks yang tidak relevandengan topik yang sedang dibahas.
Tag mark dan del biasanya digunakan untuk menunjukkan perubahan, koreksi, atau pencarian pada teks. Tag mark dapat digunakan untuk menyoroti teks yang penting atau cocok dengan kata kunci pencarian, sedangkan tag del dapat digunakan untuk menunjukkan teks yang dihapus atau salah. Contohnya:
<p>Saya ingin membeli <mark>buku</mark> baru.</p>
<p>Saya ingin membeli <del>buku</del> sepeda baru.</p>Hasilnya:
Saya ingin membeli buku baru.
Saya ingin membeli
bukusepeda baru.
Tag ins dan q
Tag ins dan q adalah tag HTML yang digunakan untuk menulis teks yang dimasukkan atau dikutip dari sumber lain. Tag ins membuat teks menjadi bergaris bawah, sedangkan tag q membuat teks menjadi berada di antara tanda kutip. Contohnya:
<p>Saya menambahkan teks ini ke artikel: <ins>Teks ini dimasukkan oleh saya.</ins></p>
<p>Saya mengutip teks ini dari sumber lain: <q>Teks ini dikutip oleh saya.</q></p>Hasilnya:
Saya menambahkan teks ini ke artikel: Teks ini dimasukkan oleh saya.
Saya mengutip teks ini dari sumber lain:
Teks ini dikutip oleh saya.
Tag ins dan q biasanya digunakan untuk menunjukkan sumber, referensi, atau kutipan pada teks. Tag ins dapat digunakan untuk menunjukkan teks yang ditambahkan oleh penulis atau editor, sedangkan tag q dapat digunakan untuk menunjukkan teks yang diambil dari sumber lain. Tag ins dan q juga memiliki atribut cite yang dapat digunakan untuk menulis URL dari sumber asli. Contohnya:
<p>Saya menambahkan teks ini ke artikel: <ins cite="https://www.sobatcoder.com">Teks ini dimasukkan oleh saya.</ins></p>
<p>Saya mengutip teks ini dari sumber lain: <q cite="https://www.sobatcoder.com">Teks ini dikutip oleh saya.</q></p>Hasilnya:
Saya menambahkan teks ini ke artikel: Teks ini dimasukkan oleh saya.
Saya mengutip teks ini dari sumber lain:
Teks ini dikutip oleh saya.
Tag blockquote
Tag blockquote adalah tag HTML yang digunakan untuk menulis teks yang dikutip dari sumber lain dengan cara yang lebih menonjol dan rapi. Tag blockquote membuat teks menjadi berada di dalam kotak dengan indentasi dan margin. Contohnya:
<blockquote>
<p>HTML adalah bahasa markup yang digunakan untuk membuat halaman web.</p>
<p>HTML memiliki banyak tag yang dapat digunakan untuk menentukan struktur dan konten dari halaman web.</p>
</blockquote>Hasilnya:
HTML adalah bahasa markup yang digunakan untuk membuat halaman web.
HTML memiliki banyak tag yang dapat digunakan untuk menentukan struktur dan konten dari halaman web.
Tag blockquote biasanya digunakan untuk menulis kutipan panjang, seperti paragraf, puisi, atau dialog. Tag blockquote juga dapat digunakan bersama dengan tag q untuk menunjukkan sumber kutipan. Contohnya:
<blockquote cite="https://www.bing.com">
<p>HTML adalah bahasa markup yang digunakan untuk membuat halaman web.</p>
<p>HTML memiliki banyak tag yang dapat digunakan untuk menentukan struktur dan konten dari halaman web.</p>
<footer>- <q cite="https://www.sobatcoder.com">Sobat Coder</q>, Situs belajar programming</footer>
</blockquote>Hasilnya:
HTML adalah bahasa markup yang digunakan untuk membuat halaman web.
HTML memiliki banyak tag yang dapat digunakan untuk menentukan struktur dan konten dari halaman web.
Kesimpulan
Dalam artikel ini, kita telah membahas beberapa tag HTML yang dapat digunakan untuk formatting teks, yaitu:
- Tag strong dan em
- Tag sup dan sub
- Tag abbr dan acronym
- Tag mark dan del
- Tag ins dan q
- Tag blockquote
Dengan menggunakan tag-tag ini, kita dapat membuat teks kita lebih menarik, informatif, dan sesuai dengan konteks. Semoga artikel ini bermanfaat bagi teman-teman yang ingin belajar HTML dasar. Selamat mencoba!