Anak Males – Kali ini kita akan belajar html untuk text formatting. Text formatting di HTML adalah proses mengubah tampilan teks agar lebih mudah dibaca atau lebih menarik.
Ada berbagai cara untuk menformat teks di HTML, seperti menggunakan tag-tag khusus untuk mengubah ukuran font, warna font, jenis font, gaya font (tebal, miring, dll.), dan lain-lain.
Coba Perhatikan Text berikut ini :
| Plain Text | Text Formatting |
|---|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. |
Apakah kamu lebih suka membaca teks yang terformat atau teks polos (plain text)? Teks yang terformat biasanya lebih mudah dibaca karena terdapat penegasan seperti teks tebal, miring, dan garis bawah.
Selain itu, saat kita mencari kata atau kalimat penting, mata kita lebih mudah menemukannya pada teks yang terformat daripada pada teks polos.
Oleh karena itu, dalam membuat website, ada baiknya menggunakan format teks. Di HTML (Hypertext Markup Language), terdapat tag-tag khusus yang digunakan untuk menformat teks. Bagaimana cara menggunakan tag-tag tersebut?
Mari kita bahas.
Membuat Text Tebal
Untuk membuat teks tebal di HTML, Anda dapat menggunakan tag <strong> atau tag <b>. Contoh penggunaannya adalah sebagai berikut:
<strong>Teks tebal ini akan ditampilkan dengan tebal.</strong>
<b>Teks tebal ini juga akan ditampilkan dengan tebal.</b>
Tag <strong> menunjukkan bahwa teks tersebut penting dan harus diberi perhatian khusus.
Sementara itu, tag <b> hanya menunjukkan bahwa teks tersebut harus ditampilkan dengan tebal, tanpa mengindikasikan apapun tentang kepentingan atau makna teks tersebut.
Kedua tag tersebut akan menghasilkan hasil yang sama, yaitu teks tebal.
Perhatikan bahwa tag <strong> dan <b> harus ditutup dengan tag penutup yang sesuai, yaitu </strong> dan </b>. Jangan lupa untuk selalu menutup tag yang Anda buka, karena ini penting untuk memastikan bahwa struktur dan formatting dokumen HTML Anda benar.
Sebagai alternatif, Anda juga dapat menggunakan atribut style pada tag <p> atau <span> untuk membuat teks tebal. Contohnya seperti ini:
<p style="font-weight: bold;">Teks tebal ini juga akan ditampilkan dengan tebal.</p>
<span style="font-weight: bold;">Teks tebal ini juga akan ditampilkan dengan tebal.</span>
Atribut style mengizinkan Anda untuk menambahkan styling CSS langsung ke dalam tag HTML, sehingga Anda dapat dengan mudah mengatur formatting teks tanpa harus menuliskan CSS di bagian terpisah.
Membuat Text Miring
Untuk membuat teks miring di HTML, Anda dapat menggunakan tag <em> atau tag <i>. Contoh penggunaannya adalah sebagai berikut:
<em>Teks miring ini akan ditampilkan dengan miring.</em>
<i>Teks miring ini juga akan ditampilkan dengan miring.</i>Tag <em> menunjukkan bahwa teks tersebut memiliki makna yang lebih kuat atau lebih penting daripada teks sekitarnya.
Sementara itu, tag <i> hanya menunjukkan bahwa teks tersebut harus ditampilkan dengan miring, tanpa mengindikasikan apapun tentang makna teks tersebut. Kedua tag tersebut akan menghasilkan hasil yang sama, yaitu teks miring.
Perhatikan bahwa tag <em> dan <i> harus ditutup dengan tag penutup yang sesuai, yaitu </em> dan </i>. Jangan lupa untuk selalu menutup tag yang Anda buka, karena ini penting untuk memastikan bahwa struktur dan formatting dokumen HTML Anda benar.
Sebagai alternatif, Anda juga dapat menggunakan atribut style pada tag <p> atau <span> untuk membuat teks miring. Contohnya seperti ini:
<p style="font-style: italic;">Teks miring ini juga akan ditampilkan dengan miring.</p>
<span style="font-style: italic;">Teks miring ini juga akan ditampilkan dengan miring.</span>Atribut style mengizinkan Anda untuk menambahkan styling CSS langsung ke dalam tag HTML, sehingga Anda dapat dengan mudah mengatur formatting teks tanpa harus menuliskan CSS di bagian terpisah.
Membuat Text Garis Bawah
Untuk membuat garis bawah di HTML, Anda dapat menggunakan tag <u>. Contoh penggunaannya adalah seperti ini:
<u>Teks ini akan ditampilkan dengan garis bawah.</u>
Tag <u> akan menampilkan teks dengan garis bawah di bawahnya. Perhatikan bahwa tag <u> harus ditutup dengan tag penutup </u>.
Jangan lupa untuk selalu menutup tag yang Anda buka, karena ini penting untuk memastikan bahwa struktur dan formatting dokumen HTML Anda benar.
Sebagai alternatif, Anda juga dapat menggunakan atribut style pada tag <p> atau <span> untuk membuat garis bawah. Contohnya seperti ini:
<p style="text-decoration: underline;">Teks ini juga akan ditampilkan dengan garis bawah.</p>
<span style="text-decoration: underline;">Teks ini juga akan ditampilkan dengan garis bawah.</span>
Atribut style mengizinkan Anda untuk menambahkan styling CSS langsung ke dalam tag HTML, sehingga Anda dapat dengan mudah mengatur formatting teks tanpa harus menuliskan CSS di bagian terpisah.
Cara Membuat Text Tercoret Di HTML
Untuk membuat teks tercoret di HTML, Anda dapat menggunakan tag <s>. Contoh penggunaannya adalah seperti ini:
<s>Teks ini akan ditampilkan dengan tercoret.</s>
Tag <s> akan menampilkan teks dengan garis coret di tengahnya. Perhatikan bahwa tag <s> harus ditutup dengan tag penutup </s>. Jangan lupa untuk selalu menutup tag yang Anda buka, karena ini penting untuk memastikan bahwa struktur dan formatting dokumen HTML Anda benar.
Sebagai alternatif, Anda juga dapat menggunakan atribut style pada tag <p> atau <span> untuk membuat teks tercoret. Contohnya seperti ini:
<p style="text-decoration: line-through;">Teks ini juga akan ditampilkan dengan tercoret.</p>
<span style="text-decoration: line-through;">Teks ini juga akan ditampilkan dengan tercoret.</span>
Atribut style mengizinkan Anda untuk menambahkan styling CSS langsung ke dalam tag HTML, sehingga Anda dapat dengan mudah mengatur formatting text tanpa harus menuliskan CSS di bagian terpisah.
Cara Membuat Pangkat Di HTML
Untuk membuat pangkat (atau eksponen) di HTML, Anda dapat menggunakan tag <sup> (untuk pangkat atas) atau tag <sub> (untuk pangkat bawah). Contoh penggunaannya adalah sebagai berikut:
<p>2<sup>3</sup> = 8</p>
<p>X<sub>1</sub> = 10</p>
Tag <sup> akan menampilkan teks dengan pangkat atas (diatas baris teks), sementara tag <sub> akan menampilkan teks dengan pangkat bawah (dibawah baris teks).
Perhatikan bahwa tag <sup> dan <sub> harus ditutup dengan tag penutup yang sesuai, yaitu </sup> dan </sub>. Jangan lupa untuk selalu menutup tag yang Anda buka, karena ini penting untuk memastikan bahwa struktur dan formatting dokumen HTML Anda benar.
Sebagai alternatif, Anda juga dapat menggunakan atribut style pada tag <p> atau <span> untuk membuat pangkat. Contohnya seperti ini:
<p style="vertical-align: super; font-size: smaller;">2<span style="vertical-align: super; font-size: smaller;">3</span> = 8</p>
<p style="vertical-align: sub; font-size: smaller;">X<span style="vertical-align: sub; font-size: smaller;">1</span> = 10</p>
Atribut style mengizinkan Anda untuk menambahkan styling CSS langsung ke dalam tag HTML, sehingga Anda dapat dengan mudah mengatur formatting teks tanpa harus menuliskan CSS di bagian terpisah.
Perhatikan bahwa dengan menggunakan atribut style, Anda juga dapat mengatur ukuran font pangkat dengan menggunakan properti font-size. Ini berguna jika Anda ingin mengatur ukuran font pangkat agar sesuai dengan ukuran font teks sekitarnya.
Cara Membuat Marker Text HTML
Untuk membuat marker (atau tanda panah) di HTML, Anda dapat menggunakan tag <mark>. Contoh penggunaannya adalah seperti ini:
<p>Teks ini <mark>ditandai</mark> dengan marker.</p>
Tag <mark> akan menampilkan teks dengan latar belakang berwarna yang berbeda dari teks sekitarnya. Perhatikan bahwa tag <mark> harus ditutup dengan tag penutup </mark>. Jangan lupa untuk selalu menutup tag yang Anda buka, karena ini penting untuk memastikan bahwa struktur dan formatting dokumen HTML Anda benar.
Sebagai alternatif, Anda juga dapat menggunakan atribut style pada tag <p> atau <span> untuk membuat marker. Contohnya seperti ini:
<p style="background-color: yellow;">Teks ini <span style="background-color: yellow;">ditandai</span> dengan marker.</p>
Atribut style mengizinkan Anda untuk menambahkan styling CSS langsung ke dalam tag HTML, sehingga Anda dapat dengan mudah mengatur formatting teks tanpa harus menuliskan CSS di bagian terpisah.
Perhatikan bahwa dengan menggunakan atribut style, Anda dapat mengatur warna latar belakang marker dengan menggunakan properti background-color. Anda juga dapat mengatur warna teks marker dengan menggunakan properti color, atau mengatur font marker dengan menggunakan properti font-family, font-size, dan lainnya.
Penutup
Baiklah, mungkin kita cukupkan terlebih dahulu untuk belajar html tentang text formatting. Sampai jumpa di tutorial berikutnya.