BelajarAIdotid kembali hadir di Part 2 untuk membahas hal-hal penting yang akan membuat halaman HTML kamu jadi lebih hidup: penggunaan atribut, menampilkan gambar, menautkan link, dan menyisipkan komentar!
Apa Itu Atribut dalam HTML?
Atribut digunakan untuk memberikan informasi tambahan pada tag HTML. Atribut selalu ditulis di dalam tag pembuka dan berbentuk pasangan nama dan nilai, seperti nama="nilai".
Contoh umum:
<p title="Ini tooltip">Arahkan kursor ke sini!</p>
Ketika kursor diarahkan ke paragraf tersebut, maka akan muncul tooltip bertuliskan "Ini tooltip".
Atribut Penting yang Harus Kamu Tahu
| Atribut | Fungsi | Contoh |
|---|---|---|
| href | Untuk menentukan tujuan link | <a href="https://belajaraidotid.com">Link</a> |
| src | Menentukan sumber gambar | <img src="gambar.jpg"> |
| alt | Alternatif teks jika gambar gagal dimuat | <img src="foto.png" alt="Foto Profil"> |
| title | Menampilkan informasi tambahan (tooltip) | <p title="Contoh paragraf">Teks</p> |
| style | Menambahkan gaya CSS langsung | <p style="color:red;">Merah</p> |
Menampilkan Gambar di HTML
Untuk menyisipkan gambar, gunakan tag <img> yang bersifat self-closing (tidak memiliki penutup).
<img src="gambar.jpg" alt="Deskripsi gambar" width="300" height="200">
- src: alamat atau nama file gambar
- alt: deskripsi alternatif gambar (untuk SEO dan aksesibilitas)
- width dan height: untuk mengatur ukuran gambar
Membuat Link (Tautan)
HTML menggunakan tag <a> untuk membuat tautan atau hyperlink.
<a href="https://belajaraidotid.com" target="_blank">Kunjungi BelajarAIdotid</a>
- href: menentukan URL tujuan
- target="_blank": membuka link di tab baru
Link ke Halaman Lokal
Jika kamu punya file HTML lain di folder yang sama, kamu bisa tautkan seperti ini:
<a href="profil.html">Lihat Profil</a>
Menambahkan Komentar di HTML
Komentar tidak akan terlihat oleh pengguna browser. Ini berguna untuk memberi catatan dalam kode:
<!-- Ini adalah komentar -->
Gunakan komentar untuk memberi penjelasan kode kepada diri sendiri atau tim di masa depan.
Contoh Mini Project
Coba buat halaman HTML sederhana seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Tentang Saya</title>
</head>
<body>
<h1>Halo, saya programmer pemula</h1>
<p>Saya belajar HTML di <a href="https://belajaraidotid.com">BelajarAIdotid</a></p>
<img src="foto.jpg" alt="Foto Profil" width="200">
<!-- Gambar profil saya di atas -->
</body>
</html>
Kesimpulan Part 2
Pada bagian ini, kamu telah belajar:
- Apa itu atribut dan bagaimana cara penggunaannya
- Cara menyisipkan gambar ke dalam halaman HTML
- Membuat tautan ke situs lain dan ke halaman lokal
- Menggunakan komentar untuk dokumentasi kode
Nantikan Part 3 di mana kita akan membahas tentang struktur daftar (list), tabel, dan form dasar dalam HTML!
Terus semangat belajar di BelajarAIdotid, bro!
___&___
