Format Teks HTML
Dalam sebuah paragraf atau kalimat sering kita jumpai “kata atau kalimat” yang ditulis berbeda dengan lainnya. Hal ini dimaksudkan untuk memberi penekanan pada kata atau kalimat yang dibedakan. Untuk mendapatkan gambaran tentang huruf miring dan tebal dapat membaca Pedoman Umum Bahasa Indonesi (PUEBI).
Dalam latihan ini kita akan belajar membuat teks tebal, miring, dan garis bawah dalam halaman web menggunakan HTML.
Huruf Tebal
Huruf tebal dapat dipakai untuk menegaskan bagian-bagian karangan, seperti judul buku, bab, atau subbab.
Tag yang digunakan untuk membuat teks tebal di HTML adalah tag <b> (bold) dan tag <strong>.
Pada latihan berikut, dalam sebuah kalimat ada beberapa kata yang dijadikan huruf tebal:
“Ali Cikande! Anak cikande yang baru gede horeee! bisa Membuat huruf tebal.”
Ketik atau kopas code dibawah ini pada teks editor Notepad++.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Huruf Tebal HTML</title>
</head>
<body>
<h1>Huruf Tebal HTML</h1>
<p>
<strong>Ali Cikande!</strong> Anak cikande yang baru gede <b>horeee! bisa</b>
Membuat huruf tebal.
</p>
</body>
</html>
|
Hasilnya:
Huruf Miring
Huruf miring dipakai untuk menuliskan judul buku, nama majalah, atau nama surat kabar yang dikutip dalam tulisan, termasuk dalam daftar pustaka.
Teks miring di HTML dapat kita buat dengan tag <i> (italic) dan juga tag <em> (emphasis).
Ketik atau kopas code dibawah ini pada teks editor Notepad+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Huruf Miring di HTML</title>
</head>
<body>
<h1>Huruf Miring HTML</h1>
<p>
Saya sudah membaca buku <i>Salah Asuhan</i> karangan Abdoel Moeis,
<em>untuk menarik perhatian</em> pembaca lainnya. Majalah <i>Poedjangga Baroe </i> menggelorakan semangat kebangsaan
<em>di Indonesia</em>.
</p>
</body>
</html>
|
Hasilnya:
Huruf Garis Bawah
Garis bawah (underline) yaitu garis yang ditempatkan di bawah kata atau kalimat. Menurut KBBI, garis bawah yaitu garis yang dibuat di bawah tulisan (huruf, kata, kalimat, dan sebagainya) untuk menyatakan bahwa kata (kalimat dan sebagainya) yang diberi garis itu penting.
Garis bawah di HTML dapat kita buat dengan tag <u> (underlaine) atau juga tag <ins> (insert).
Ketik atau kopas code dibawah ini pada teks editor Notepad++
- 1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!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>Garis bawah </u>(underline) yaitu garis yang ditempatkan di bawah kata atau kalimat. <del>kalau ini kata yang di coret</del><ins>ini juga garis bawah</ins>.
</p>
</body>
</html>
|
Hasilnya:
Pada contoh di atas, kita menggunakan tag <del> untuk membuat teks tercoret. Lalu diikuti dengan teks yang ditambahkan (insert).
Huruf Tercoret
Teks tercoret memiliki arti teks yang dihapus. Biasanya untuk memberitahu pembaca bahwa teks tersebut tidak dipakai atau dihapus.
Tag untuk membuat huruf tercoret di HTML adalah tag <s> (strikethrough) atau bisa juga dengan tag <del> (delete).
Contoh:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Huruf Tercoret HTML</title>
</head>
<body>
<h1>Huruf Tercoret HTML</h1>
<p>
Kata atau kalimat yang <s>tercoret</s> memberitahukan pada pembaca tentang peninjauan kembali pada teks tersebut. Tag berikut juga <del>Mencoret kata</del>
<ins>dan tag ini menggaris bawahi</ins> kata yang diinginkan.
</p>
</body>
</html>
|
Hasilnya:
Membuat Pangkat HTML
Pangkat biasanya digunakan pada rumus. Ada dua jenis pangkat yang bisa dibuat di HTML, yakni pangkat yang berada di atas (superscript) dan pangkat di bawah (subscript).
Tag untuk membuat pangkat di HTML adalah tag <sup> dan <sub>.
· <sup> untuk membuat pangkat di atas
· <sub> untuk membuat pangkat di bawah
Contoh:
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Membuat Pangkat di HTML</title>
</head>
<body>
<h1>Membuat Pangkat di HTML</h1>
<p>
3<sup>2</sup>= 9.
</p>
</body>
</html>
|
Hasilnya:
Membuat Marker
Marker bisanya digunakan untuk menandai teks yang penting atau kata kunci yang penting. Marker di HTML dapat kita buat dengan tag <mark>.
Contoh:
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menyoroti Teks/Marker HTML</title>
</head>
<body>
<h1>Menyoroti Teks/ Marker HTML</h1>
<p>
Teks yang <mark>disoroti atau diberi terangi </mark>menandai bagian teks yang penting.
</p>
</body>
</html>
|
Hasilnya:
Semoga sukses.
Related Post:
Suryanto Tabrani dan Seno Adjie
0 Komentar