Beranda / html / Komputer / Pemrograman / Web

Pemformatan Teks HTML | Tutorial HTML 9

Oleh Sopyan Posting Komentar
Assalamualaikum sobat di artikel kali ini kami akan membagikan tutorial tentang pemformatan teks di HTML, berikut adalah tutorialnya.

Elemen Pemformatan Teks HTML

Di HTML terdapat beberapa elemen yang dapat kita gunakan untuk membuat teks dengan arti khusus.

Contoh Program 1 : Pemformatan Teks HTML

<!DOCTYPE html>
<html>
<body>
  <p><b>Ini teks bold</b></p>
  <p><i>Ini teks italic</i></p>
  <p>Ini <sub>subscript</sub> dan <sup>superscript</sup></p>
</body>
</html>

Hasil Program 1

Hasil Program 1 Pemformatan Teks HTML

Penjelasan Program 1

Contoh Program 1 : Pemformatan Teks HTML
  • Di baris 4 kita membuat paragraf yang bercetak tebal.
  • Di baris 5 kita membuat teks yang bercetak miring.
  • Di baris 6 kita membuat paragraf yang memiliki teks subskrip dan superskrip.
Berikut adalah beberapa tag yang dapat digunakan untuk pemformatan teks :
  • <sup> digunakan untuk teks superskrip.
  • <sub> digunakan untuk teks subskrip.
  • <ins> digunakan untuk teks yang disisipkan.
  • <del> digunakan untuk teks yang dihapus.
  • <small> digunakan untuk teks yang lebih kecil.
  • <mark> digunakan untuk teks yang ditandai.
  • <em> digunakan untuk teks yang ditekankan.
  • <i> digunakan untuk teks miring.
  • <strong> digunakan untuk teks penting.
  • <b> digunakan untuk teks tebal.

Elemen <strong> dan <b> HTML

Di HTML untuk membuat teks tebal yang bukan hal penting, kita bisa menggunakan tag <b>.

Contoh Program 2 : Elemen <b>

<!DOCTYPE html>
<html>
<body>
  <p>Ini adalah teks biasa</p>
  <p><b>Ini teks bold</b></p>
</body>
</html>

Hasil Program 2

Hasil Program 2 : Elemen <b>

Penjelasan Program 2

Contoh Program 2 : Elemen <b>
  • Di baris 4 kita membuat paragraf biasa.
  • Di baris 5 kita membuat paragraf yang bercetak tebal.
Untuk mendefinisikan teks yang penting dan tebal kita bisa menggunakan elemen <strong>.

Contoh Program 3 : Elemen <strong>

<!DOCTYPE html>
<html>
<body>
  <p>Ini teks biasa</p>
  <p><strong>Ini teks yang penting</strong></p>
</body>
</html>

Hasil Program 3

Hasil Program 3 Elemen <strong>

Penjelasan Program 3

Contoh Program 3 Elemen <strong>
  • Di baris 4 kita membuat paragraf.
  • Di baris 5 kita membuat paragraf yang memiliki teks yang penting.

Elemen <i> dan <em> HTML

Untuk membuat huruf miring yang mengekspresikan suara dan suasana hati, kita bisa menggunakan tag <i>.

Catatan : tag <i> biasanya digunakan untuk istilah teknis, pemikiran, frasa dari bahasa lain, dan lain-lain.

Contoh Program 4 : elemen <i>

<!DOCTYPE html>
<html>
<body>
 <p>Ini adalah teks biasa</p>
 <p><i>Ini teks italic</i></p>
</body>
</html>

Hasil Program 4

Hasil Program 4 Elemen <i>

Penjelasan Program 4

Contoh Program 4 Elemen <i>
  • Di baris 4 kita membuat paragraf biasa.
  • Di baris 5 kita membuat paragraf bercetak miring
Jika kita ingin membuat teks yang ditekankan (emphasized text), kita bisa menggunakan tag <em>, teks ini ditampilkan dengan huruf miring.

Catatan : dalam membaca emphasized text, pembaca teks ini biasanya membacanya dengan penekanan menggunakan tekanan verbal.

Contoh Program 5 : elemen <em>

<!DOCTYPE html>
<html>
<body>
  <p>Ini adalah teks biasa</p>
  <p><em>Ini adalah emphasized text</em></p>
</body>
</html>

Hasil Program 5

Hasil Program 5 Elemen <em>

Penjelasan Program 5

Contoh Program 5 Elemen <em>
  • Di baris 4 kita membuat paragraf biasa.
  • Di baris 5 kita membuat paragraf yang memiliki teks yang ditekankan (emphasized).

Elemen <small> HTML

Untuk membuat teks dengan ukuran kecil, kita bisa menggunakan tag <small>.

Contoh Program 6 : Elemen <small>

<!DOCTYPE html>
<html>
<body>
  <p>Ini adalah teks biasa</p>
  <p><small>Ini teks lebih kecil</small></p>
</body>
</html>

Hasil Program 6

Hasil Program 6 Elemen <small>

Penjelasan Program 6

Contoh Program 6 Elemen <small>
  • Di baris 4 kita membuat paragraf biasa.
  • Di baris 5 kita membuat paragraf yang memiliki ukuran yang lebih kecil.

Elemen <mark> HTML

Untuk membuat teks yang disorot atau ditandai, kita bisa menggunakan tag <mark>.

Contoh Program 7 : Elemen <mark>

<!DOCTYPE html>
<html>
<body>
  <p>Ini teks biasa</p>
  <p>Ini teks yang <mark>ditandai</mark></p>
</body>
</html>

Hasil Program 7

Hasil Program 7 Elemen <mark>

Penjelasan Program 7

Contoh Program 7 Elemen <mark>
  • Di baris 4 kita membuat paragraf biasa.
  • Di baris 5 kita membuat paragraf yang memiliki teks yang ditandai.

Elemen <del> HTML

Kita bisa membuat teks yang dicoret menggunakan tag <del>.

Contoh Program 8 : Elemen <del>

<!DOCTYPE html>
<html>
<body>
  <p>Teks ini adalah teks yang <del>dicoret</del></p>
</body>
</html>

Hasil Program 8

Hasil Program 8 Elemen <del>

Penjelasan Program 8

Contoh Program 8 Elemen <del>
  • Di baris 4 kita membuat paragraf yang memiliki teks yang dicoret.

Elemen <ins> HTML

Untuk membuat teks yang digaris bawahi kita bisa menggunakan tag <ins>.

Contoh Program 9 : Elemen <ins>

<!DOCTYPE html>
<html>
<body>
  <p>Ini teks yang <ins>digaris bawahi</ins></p>
</body>
</html>

Hasil Program 9

Hasil Program 9 Elemen <ins>

Penjelasan Program 9

Contoh Program 9 Elemen <ins>
  • Di baris 4 kita membuat paragraf yang memiliki teks yang digaris bawahi.

Elemen <sub> HTML

Untuk membuat teks subskrip (teks yang berada setengah dibawah huruf normal), kita bisa menggunakan tag <sub>.

Contoh Program 10 : Elemen <sub>

<!DOCTYPE html>
<html>
<body>
  <p>Ini adalah teks <sub>subskrip</sub></p>
</body>
</html>

Hasil Program 10

Hasil Program 10 Elemen <sub>

Penjelasan Program 10

Contoh Program 10 Elemen <sub>
  • Di baris 4 kita membuat paragraf yang memiliki teks subskrip.

Elemen <sup> HTML

Untuk membuat teks superskrip (teks yang berada setengah diatas teks normal), kita bisa menggunakan tag <sup>.

Contoh Program 11 : Elemen <sup>

<!DOCTYPE html>
<html>
<body>
  <p>Ini adalah teks <sup>superskrip</sup></p>
</body>
</html>

Hasil Program 11

Hasil Program 11 Elemen <sup>

Penjelasan Program 11

Contoh Program 11 Elemen <sup>
  • Di baris 4 kita membuat paragraf yang memiliki teks superskrip.

Elemen Pemformatan Teks HTML

Berikut adalah daftar elemen pemformatan teks yang telah kita pelajari.

Tag Deskripsi
<b> Mendefinisikan teks tebal
<i> Mendefinisikan teks italic
<em> Mendefinisikan Teks yang ditekankan
<small> Mendefinisikan teks berukuran kecil
<strong> Mendefinisikan teks penting
<sub> Mendefinisikan teks subskrip
<sup> Mendefinisikan teks superskrip
<ins> Mendefinisikan teks yang digaris bawahi
<del> Mendefinisikan teks yang dicoret
<mark> Mendefinisikan teks yang ditandai


Itulah tutorial mengenai pemformatan teks HTML dari kami semoga tutorial kali ini dapat membantu kalian lebih memahami mengenai HTMl, sampai jumpa di artikel selanjutnya...




Posting Komentar untuk "Pemformatan Teks HTML | Tutorial HTML 9"