Pada artikel sebelumnya, kita sudah membahas pengenalan html. Sekarang kita akan melanjutkan materi yang kemarin. Dalam artikel ini, kita akan membahas tentang pemformatan teks dalam html.
Pemformatan teks memiliki jenisnya, misalnya teks tebal, teks miring, teks garis bawah, teks berwarna, teks superscript, teks suberscript, dan teks yang memiliki background berwarna. Bagaimana sih cara membuatnya ? Yukk kita pelajari bersama dibawah ini
1. Teks Paragraf Html
Dalam Html, kita bisa membuat sebuah paragraf. Untuk membuat sebuah paragraf, kita bisa menggunakan tag <p> dengan penutup tag nya </p>. Contoh membuat paragraf menggunakan tag <p> seperti kodingan dibawah ini
<!DOCTYPE html>
<html>
<head>
<title> Contoh Paragraf dalam Html </title>
</head>
<body>
<p> Selamat Datang Teman Teman </p>
</body>
</html>
Dalam html, kita bisa membuat enter atau barisan baru. Untuk membuat enter dalam html, kita bisa menggunakan tag <br>. Berikut ini adalah contoh kodingan membuat barisan baru menggunakan tag <br>
<!DOCTYPE html>
<html>
<head>
<title> Contoh Enter dalam Html </title>
</head>
<body>
<p>
Teks Ini Merupakan Barisan Pertama
<br>
Teks Ini Merupakan Barisan Kedua
<br>
Teks Ini Merupakan Barisan Ketiga
<br>
Teks Ini Merupakan Barisan Keempat
<br>
Teks Ini Merupakan Barisan Kelima
</p>
</body>
</html>
Kita bisa membuat garis dalam html dengan tag <hr>. Fungsi dari garis adalah untuk memisahkan bagian bagian tertentu. Berikut ini adalah contoh codingan nya
<!DOCTYPE html>
<html>
<head>
<title> Contoh Garis dalam Html </title>
</head>
<body>
<hr>
<p> Selamat Datang di Nusa Pixel Digital </p>
<hr>
<p> Selamat Datang di Nusa Pixel Digital </p>
<hr>
</body>
</html>
Untuk membuat heading dalam html, kita bisa menggunakan tag <h1> sampai tag <h6>. Tag pertama adalah <h1>, <h2>, <h3>, <h4>, <h5>, dan terakhir <h6>
- <h1> : heading level 1 yang ukuran nya 200% dari ukuran normal
- <h2> : heading level 2 yang ukuran nya 150% dari ukuran normal
- <h3> : heading level 3 yang ukuran nya 117% dari ukuran normal
- <h4> : heading level 4 yang ukuran nya 100% dari ukuran normal
- <h5> : heading level 5 yang ukuran nya 83% dari ukuran normal
- <h6> : heading level 6 yang ukuran nya 67% dari ukuran normal
<!DOCTYPE html>
<html>
<head>
<title> Contoh Heading dalam Html </title>
</head>
<body>
<h1> Ini adalah heading pertama </h1>
<h2> Ini adalah heading kedua </h2>
<h3> Ini adalah heading ketiga </h3>
<h4> Ini adalah heading keempat </h4>
<h5> Ini adalah heading kelima </h5>
<h6> Ini adalah heading keenam </h6>
</body>
</html>
Dalam html, kita bisa membuat teks tebal menggunakan tag <b>. Selain menggunakan tag <b>, kita juga bisa menggunakan tag <strong>. Berikut ini adalah contoh codingan nya
<!DOCTYPE html>
<html>
<head>
<title> Contoh Teks Tebal dalam Html </title>
</head>
<body>
<b> Selamat Datang di Blog Nusa Pixel Digital </b>
<br>
<strong> Selamat Datang di Blog Nusa Pixel Digital </strong>
</body>
</html>
6. Teks Miring dalam Html
Dalam html, kita bisa membuat tulisan miring. Untuk menggunakan tulisan miring, kita bisa menggunakan tag <i> dan <em>. Berikut ini adalah contoh codingan nya
<!DOCTYPE html>
<html>
<head>
<title> Contoh Teks Miring dalam Html </title>
</head>
<body>
<i> Selamat Datang di Blog Nusa Pixel Digital </i>
<br>
<em> Selamat Datang di Blog Nusa Pixel Digital </em>
</body>
</html>
7. Teks Garis Bawah dalam Html
Dalam html, kita bisa membuat teks yang memiliki garis bawah. Untuk membuat teks bergaris bawah, kita bisa membuatnya dengan tag <u> dan tag <ins>. Berikut ini adalah contoh codingannya
<!DOCTYPE html>
<html>
<head>
<title> Contoh Teks Garis Bawah dalam Html </title>
</head>
<body>
<u> Selamat Datang di Blog Nusa Pixel Digital </u>
<br>
<ins> Selamat Datang di Blog Nusa Pixel Digital </ins>
</body>
</html>
8. Teks Coret dalam Html
Dalam html, kita bisa membuat teks yang dicoret dengan garis. Untuk membuatnya, kita bisa menggunakan tag <s> dan tag <del>. Berikut ini adalah contoh codingan nya.
<!DOCTYPE html>
<html>
<head>
<title> Contoh Teks Garis Bawah dalam Html </title>
</head>
<body>
<s> Selamat Datang di Blog Nusa Pixel Digital </s>
<br>
<del> Selamat Datang di Blog Nusa Pixel Digital </del>
</body>
</html>
9. Teks Superscript dalam Html
Teks Superscript merupakan teks kecil yang yang berada diatas, contohnya adalah seperti pangkat dalam pelajaran matematika. Untuk membuat teks superscript, kita bisa menggunakan tag <sup> beserta penutupnya </sup>. Contoh codingan nya seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title> Contoh Superscript dalam Html </title>
</head>
<body>
<p> Selamat Datang di <sup> Blog Nusa Pixel Digital </sup></p>
</body>
</html>
Teks Suberscript merupakan kebalikan dari Teks Superscript. Jika superscript adalah teks kecil yang berada diatas, maka suberscript adalah teks kecil yang berada dibawah. Biasanya teks suberscript digunakan dalam pelajaran kimia. Untuk membuat teks suberscript, kita bisa menggunakan tag <sub> dengan tag penutupnya </sub>. Berikut ini adalah contoh codingan nya.
<!DOCTYPE html>
<html>
<head>
<title> Contoh Subercript dalam Html </title>
</head>
<body>
<p> Selamat Datang di <sub> Blog Nusa Pixel Digital </sub></p>
</body>
</html>