Kursus IT Dasar HTML 011_Teks

HTML menyediakan banyak tag teks untuk kita gunakan saat membuat halaman web. Tag-tag ini dapat membantu kita mengorganisir dan memformat konten teks kita dengan lebih baik. Berikut adalah beberapa tag teks HTML yang umum digunakan.

Heading

Elemen heading digunakan untuk mendefinisikan judul atau subjudul dari dokumen HTML. Biasanya mewakili hierarki struktur dokumen. Ada enam level heading, dari h1 hingga h6, dan semakin tinggi levelnya, semakin penting heading tersebut.

Contoh:

1
<h1>Ini adalah heading h1</h1>
2
<h2>Ini adalah heading h2</h2>
3
...
4
<h6>Ini adalah heading h6</h6>

Efek:

[!Ringkasan]

• Pastikan elemen heading hanya digunakan untuk judul, tidak boleh digunakan hanya untuk tebal atau ukuran font besar.
• Mesin pencari menggunakan heading untuk mengindeks struktur dan konten halaman web Anda.
• Penggunaan elemen heading yang benar dapat membuat halaman lebih mudah dibaca dan diakses, sekaligus bermanfaat untuk SEO.
• Anda harus menggunakan h1 sebagai satu-satunya heading utama (paling penting), diikuti oleh h2 (penting kedua), kemudian h3, dan seterusnya.

Paragraf

Elemen paragraf digunakan untuk mendefinisikan struktur paragraf teks, membuat teks lebih terorganisir dan mudah dibaca. Ini menambahkan baris baru sebelum dan sesudah konten, mengelompokkan teks menjadi bagian-bagian independen, sehingga paragraf memiliki pemisahan yang jelas. Elemen paragraf terutama terdiri dari tag <p>, yang mewakili sebuah paragraf.

Contoh:

1
<p>Ini adalah sebuah paragraf.</p>
2
<p>Ini adalah paragraf lain.</p>

Efek:

[!Ringkasan]

• Dokumen HTML dapat berisi beberapa paragraf
• Browser secara otomatis menambahkan baris kosong sebelum dan sesudah paragraf
• Jangan lupa tag penutup (bahkan jika Anda lupa, sebagian besar browser akan menampilkannya dengan benar)
• Jika Anda tidak suka baris kosong yang ditambahkan oleh elemen paragraf dan ingin mengurangi jarak baris, gunakan tag <br>
• Secara default, jumlah karakter yang ditampilkan dalam satu baris kode dalam elemen paragraf ditentukan oleh lebar layar

Hyperlink

Elemen <a> digunakan untuk mendefinisikan hyperlink, memungkinkan pengguna untuk mengklik link dan menavigasi ke halaman atau sumber daya lainnya. Tag <a> biasanya berisi beberapa teks atau gambar, yang akan menjadi bagian yang dapat diklik dari link. Pada saat yang sama, kita menentukan alamat tujuan link melalui atribut href dari tag <a>. Hyperlink adalah fungsi dasar dalam HTML dan dapat menautkan ke bagian lain dari halaman web, ke halaman web lain, atau bahkan ke situs web lain.

Contoh:

1
<a href="https://www.zhaojian.net">zhaoJian.Net</a>

Efek:

Atribut hyperlink

• href: Menentukan URL tujuan link, ini adalah atribut paling penting dari link. Bisa berupa URL halaman web lain, URL file, atau URL sumber daya lainnya.
• target (opsional): Menentukan bagaimana link dibuka di browser. Nilai umum termasuk _blank (membuka link di tab atau jendela baru) dan _self (membuka link di tab atau jendela saat ini, status default).
• title (opsional): Menyediakan informasi teks tentang link, biasanya ditampilkan saat mouse melayang di atas link.
• rel (opsional): Menentukan hubungan dengan tujuan link, seperti nofollow (tidak mengikuti), noopener (tidak membuka konteks baru), noreferrer (tidak meneruskan informasi referensi), dll.
• class: Menentukan kelas CSS dari link.
• id: Menentukan ID CSS dari link.

Link jangkar

Pada halaman web yang panjang, kita mungkin ingin membuat link ke bagian tertentu di dalam halaman. Ini dapat dicapai melalui link jangkar. Pertama, kita perlu menggunakan atribut name atau id dari tag <a> untuk menandai posisi tujuan, kemudian dalam atribut href dari link, gunakan # ditambah nilai name atau id dari tujuan untuk membuat link.

Contoh:

1
<a href="#a1">Lompat ke a1</a>
2
<!-- Di sini konten yang cukup untuk menggulir atau <br> dihilangkan -->
3
<a name="a1">Beberapa konten</a>

Efek:

Setelah mengklik hyperlink “Lompat ke a1”, halaman akan melompat ke bagian “konten a1”.

Link email

Selain menautkan ke halaman web lain, tag <a> juga dapat menautkan ke alamat email. Dengan menambahkan mailto: sebelum nilai atribut href, dapat dibuat link yang ketika diklik akan meluncurkan klien email default pengguna dan membuat email baru.

Contoh:

1
<a href="mailto:757118@qq.com">Kirim email ke 757118@qq.com</a>

Efek:

Mengklik hyperlink ini, sistem akan meluncurkan klien email default dan membuat email baru yang ditujukan ke 757118@qq.com.

[!Ringkasan]

• Ketika Anda menggerakkan pointer mouse ke sebuah link di halaman web, panah akan berubah menjadi tangan kecil.
• Hyperlink tidak harus berupa teks, gambar atau elemen HTML lainnya juga dapat menjadi link.
• Secara default, link akan muncul di browser dalam bentuk berikut: Link yang belum dikunjungi ditampilkan dalam font biru dengan garis bawah. Link yang telah dikunjungi ditampilkan dalam warna ungu dengan garis bawah. Saat mengklik link, link ditampilkan dalam warna merah dengan garis bawah.

Baris baru

Elemen baris baru <br> digunakan untuk menyisipkan karakter baris baru dalam teks, memaksa teks untuk pindah ke baris baru.

Contoh:

1
Ini adalah baris teks.<br>Ini adalah baris teks lainnya.

Efek:

[!Ringkasan]

• Garis miring / dalam tag <br> bersifat opsional. Dalam HTML 4, tag <br /> harus menyertakan garis miring; Dalam HTML 5, garis miring bersifat opsional.

Tebal

Elemen <b> adalah tag gaya teks dasar yang digunakan untuk mengatur teks menjadi tebal, tetapi tanpa penekanan semantik pada teks. Elemen <strong> adalah tag semantik yang digunakan untuk mengekspresikan penekanan teks, biasanya browser akan menampilkannya dalam bentuk tebal.

Contoh:

1
Ini adalah teks biasa
2
<b>Ini adalah teks tebal</b>
3
<strong>Ini adalah teks tebal dengan penekanan semantik</strong>

Efek:

Miring

Elemen <i> digunakan untuk mewakili efek teks miring, tetapi tanpa penekanan semantik pada teks. Elemen <em> digunakan untuk mewakili teks miring, biasanya digunakan untuk menekankan pentingnya teks atau menciptakan efek visual.

Contoh:

1
Ini adalah teks biasa
2
<i>Ini adalah teks miring</i>
3
<em>Ini adalah teks miring dengan penekanan semantik</em>

Efek:

Garis bawah

Elemen garis bawah <u> digunakan untuk mewakili teks bergaris bawah.

Contoh:

1
Ini adalah teks dengan <u>garis bawah</u>

Efek:

[!Ringkasan]

• Dalam HTML 5, elemen garis bawah <u> telah ditinggalkan. Ini berarti masih merupakan elemen HTML yang valid, tetapi penggunaannya tidak disarankan.

Garis coret

Elemen garis coret <del> digunakan untuk menampilkan teks yang telah dihapus atau usang. Browser biasanya menambahkan garis horizontal melalui teks ini.

Contoh:

1
Ini adalah teks <del>tercoret</del>

Efek:

[!Ringkasan]

• Dalam HTML5, elemen garis coret <del> telah ditinggalkan. Ini berarti masih merupakan elemen HTML yang valid, tetapi penggunaannya tidak disarankan.

Sorotan

Elemen <mark> digunakan untuk menandai bagian dari teks untuk menyorot atau menandai bagian teks tersebut. Biasanya, teks yang ditandai oleh elemen <mark> akan disorot dengan latar belakang kuning untuk membuatnya lebih menonjol dalam dokumen.

Contoh:

1
Ini adalah teks <mark>tersorot</mark>

Efek:

Subskrip dan superskrip

Elemen <sub> mewakili teks subskrip (subscript), elemen <sup> mewakili teks superskrip (superscript). Elemen subskrip dan superskrip biasanya digunakan dalam skenario matematika, rumus kimia, tanggal, suhu, dll.

Contoh:

1
H<sub>2</sub>O adalah rumus molekul air.
2
2<sup>10</sup> sama dengan 1024.

Efek: