2.3 Belajar HTML [ Text Formatting ]

pada tanggal

Text Formatting Di HTML 







Beberapa bentuk Teks

- Teks Tebal
- Teks Miring
- Garis pada teks
- Teks Tercoret

Berikut ini merupakan cara-cara untuk membuat teks seperti diatas :

Membuat Teks Tebal

Teks tebal biasanya digunakan untuk memberikan penegasan pada teks tertentu, misalnya seperti judul, subjudul, huruf penting, dll.

Tag yang digunakan untuk membuat teks tebal di HTML adalah tag <b> (bold) dan tag <strong>. Kamu bebas mau pakai yang mana saja, hasilnya akan sama-sama tebal.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Tebal di HTML</title>
</head>
<body>
  <h1>Text Tebal di HTML</h1>
  <p>
    <strong>Teks formatting itu penting!</strong> Karena dapat membuat tulisan 
    terlihat lebih menarik sehingga akan membuat <b>pengunjung senang</b> 
    membacanya.
  </p>
</body>
</html>

Hasilnya:

Contoh teks tebal di HTML

Membuat Teks Miring

Teks miring biasanya digunakan untuk menegaskan sebuah kata atau istilah baru. Teks miring di HTML dapat kita buat dengan tag <i> (italic) dan juga tag <em> (emphasis).

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Miring di HTML</title>
</head>
<body>
  <h1>Text Miring di HTML</h1>
  <p>
    Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks,
    sehingga akan <em>menarik perthatian</em> pembaca. Biasanya
    digunakan pada <i>istilah asing</i> atau kata serapan dari 
    <em>bahasa daerah</em>.
  </p>
</body>
</html>

Hasilnya:

Contoh Teks Miring

Membuat Garis Bawah pada Teks

Garis bawah biasanya digunakan untuk menandai teks yang disisipkan atau teks yang mimiliki arti penting dibandingkan teks normal lainnya.

Garis bawah di HTML dapat kita buat dengan tag <u> (underlaine) atau juga tag <ins> (insert).

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Garis Bawah di HTML</title>
</head>
<body>
  <h1>Garis Bawah di HTML</h1>
  <p>
    <u>Text formatting itu penting</u>, karena dapat membuat teks terlihat
    lebih menarik dibandingkan <del>text biasa</del> <ins>plain text</ins>.
  </p>
</body>
</html>

Hasilnya:

Contoh teks garis bawah

Pada contoh di atas, kita menggunakan tag <del> untuk membuat teks tercoret. Lalu diikuti dengan teks yang ditambahkan (insert).


Membuat Teks Tercoret

Teks tercoret memiliki arti teks yang dihapus. biasanya untuk memberitahu pembaca bahwa teks tersebut tidak dipakai atau dihapus.

Tag untuk membuat teks tercoret di HTML adalah
tag  <s> (strikethrough) atau bisa juga dengan tag <del>(delete)

Contoh :


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Tercoret di HTML</title>
</head>
<body>
  <h1>Text Tercoret di HTML</h1>
  <p>
    Coretlah teks yang tidak <s>dibutuhkan</s> terpakai, ini bisa memberitahu 
    pembaca tentang perbaikan dari teks tersebut. Kadang juga teks <del>tercoret</del> 
    <ins>yang dicoret</ins>, diperbaiki dengan menambahkan teks dengan garis bawah.
  </p>
</body>
</html>

Hasilnya:

Contoh teks tercoret di HTMl


Komentar

Posting Komentar