Didiek
Posted on
• HTML

HTML - Elemen Teks

Author

Oke, setelah bagian html dasar selasai dibaca dan dipahami, kita lanjut pembelajarannya yaa..📚✏️

pada bagian ini kita akan membahas elemen teks yang ada pada HTML, untuk elemen teks ini terdiri dari beberapa bagian :

1. Heading / Judul

pada bagian Heading / judul HTML menyediakan 6 tingkat heading dari <h1> tingkat paling besar hingga <h6> tingkat paling kecil berikut contohnya.

<h1>Judul Utama</h1>
<h2>Subjudul</h2>
<h3>Sub-subjudul</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

📌 Penting untuk kamu tahu:

  • Gunakan hanya satu <h1> per halaman karena heading akan membantu SEO dan aksesibilitas website yang kamu buat.

kita lanjut ke bagian Paragraf

2. Paragraf

Bagian ini digunakan untuk menulis sebuah paragraf, contoh kode html nya seperti ini:

<p>Ini adalah paragraf pertama saya dalam HTML.</p>

tidak perlu ada penjelasan apa-apa lagi yaa hehee, kita lanjut ke bagian

3. Line Break dan Garis Horizontal

Oke, jadi gini:

Line break <br> itu fungsinya buat pindah ke baris baru tanpa bikin paragraf baru. Kayak kita pencet "Enter" sekali di keyboard.

Horizontal rule <hr> itu buat bikin garis pemisah horizontal di halaman web. Biasanya dipakai buat memisahkan bagian konten biar rapi.

Halo, ini baris pertama.<br>
Ini baris kedua.
<hr>
Ini teks setelah garis.

kalo kamu penasaran bagaimana tampilan kode di atas, kamu bisa coba nanti ya setelah membaca tulisan ini sampai akhir, kita lanjut dulu ke bagian

4. Pemformatan Teks

HTML menyediakan tag untuk menekankan atau menonjolkan teks tertentu, seperti berikut ini.

Tag Fungsi Penulisan Kode Preview
<strong> Teks tebal (penekanan penting) <strong>Penting!</strong> Penting!
<b> Teks tebal (tanpa penekanan makna) <b>Tebal biasa</b> Tebal biasa
<em> Miring (penekanan makna) <em>Penting juga</em> Penting juga
<i> Miring biasa (gaya) <i>Gaya saja</i> Gaya saja
<u> Garis bawah <u>Teks digarisbawahi</u> Teks digarisbawahi
<mark> Menyoroti teks (highlight) <mark>Disorot</mark> Disorot
<small> Teks lebih kecil <small>Catatan kecil</small> Catatan kecil
<del> Teks dicoret <del>Harga lama</del> Harga lama
<ins> Teks ditambahkan (digaris bawah) <ins>Harga baru</ins> Harga baru
<sub> Teks subskrip (bawah) H<sub>2</sub>O H2O
<sup> Teks superskrip (atas) 10<sup>2</sup> 102

Oke untuk bagian teks elemen rasanya cukup, semoga bisa mudah dipahami, dan jika kamu mau praktikan kamu bisa coba dengan menuliskan kode dibawah ini, simpan dengan elemen-teks.html dan nanti filenya kamu buka dengan browser chrome atau browser lainnya. berikut kode yang perlu kamu masukan ke elemen-teks.html :

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Elemen Teks</title>
</head>
<body>
    <h1>Judul Utama Halaman</h1>
    <p>Ini adalah paragraf pertama. <strong>Teks ini penting</strong>, sedangkan <i>ini hanya gaya miring.</i></p>

    <p>Harga lama: <del>Rp100.000</del> <br>
    Harga baru: <ins>Rp75.000</ins></p>

    <hr>

    <h2>Subjudul</h2>
    <p>Air terdiri dari H<sub>2</sub>O dan rumus luas lingkaran adalah πr<sup>2</sup>.</p>
</body>
</html>

Setelah terbuka di browser, kamu akan melihat berbagai jenis teks ditampilkan dengan gaya berbeda, terimakasih.

Related posts