Panduan Awal HTML: Tag Dasar
Hai teman-teman pengembang web masa depan! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini ke dunia HTML. Sebagai seseorang yang telah mengajar ilmu komputer selama lebih dari satu dekade, saya bisa katakan bahwa HTML adalah seperti kerangka website - itu menyediakan struktur yang menjadi dasar bagi semua yang lain dibangun di atasnya. Jadi, mari kita masuk dan jelajahi tag dasar yang akan membentuk dasar keterampilan pemrograman web Anda!
Apa Itu HTML?
HTML singkatan dari HyperText Markup Language. Itu adalah bahasa standar yang digunakan untuk membuat halaman web. P想象kan itu sebagai rencana bangunan rumah - itu mengatakan kepada browser bagaimana menstrukturkan dan menampilkan konten di halaman web.
Anatomi Dokumen HTML
Sebelum kita melompat ke tag tertentu, mari kita lihat struktur dasar dokumen HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Web Pertamaku</title>
</head>
<body>
<!-- Konten Anda disini -->
</body>
</html>mari kitauraikan ini:
-
<!DOCTYPE html>mendeklarasikan bahwa ini adalah dokumen HTML5. -
<html>adalah elemen akar halaman HTML. -
<head>berisi informasi meta tentang dokumen. -
<body>menentukan badan dokumen, yang berisi semua konten yang terlihat.
Contoh Tag HTML Dasar
Sekarang, mari kita jelajahi beberapa tag HTML paling umum yang Anda akan gunakan. Saya akan memberikan contoh dan penjelasan untuk masing-masing.
1. Judul
HTML menyediakan enam tingkat judul, dari <h1> (paling penting) hingga <h6> (paling kurang penting).
<h1Ini adalah Judul Utama</h1>
<h2Ini adalah Judul Sekunder</h2>
<h3Ini adalah Judul Tersier</h3>Tag ini tidak hanya membuat teks lebih besar tetapi juga membantu mesin pencari mengerti struktur konten Anda. P想象kan mereka sebagai judul bab dalam buku!
2. Paragraf
Tag <p> digunakan untuk menentukan paragraf.
<pIni adalah paragraf. Itu dapat mengandung beberapa kalimat dan bahkan memanjang ke beberapa baris dalam kode HTML Anda, tapi itu akan ditampilkan sebagai blok teks tunggal di browser.</p>Tips: Selalu gunakan tag <p> untuk paragraf, tidak hanya untuk spacing. Itu membantu dengan aksesibilitas dan SEO!
3. Tautan
Tautan dibuat menggunakan tag <a> (ancor).
<a href="https://www.example.com">Klik di sini untuk mengunjungi Example.com</a>Atribut href menentukan URL halaman yang dituju oleh tautan. Ingat, tautan adalah seperti pintu di website Anda - mereka memungkinkan pengguna untuk menavigasi dari satu halaman ke halaman lain!
4. Gambar
Gambar ditambahkan menggunakan tag <img>.
<img src="cat.jpg" alt="Anak kucing yang lucu duduk di jendela">Atribut src menentukan path ke file gambar, sedangkan alt menyediakan teks alternatif bagi pembaca layar atau jika gambar gagal dimuat. Selalu sertakan teks alt deskriptif - itu seperti memberikan suara bagi gambar Anda!
5. Daftar
HTML mendukung daftar berurutan (ternomor) dan daftar tak berurutan (bulet).
Daftar tak berurutan:
<ul>
<li>Apel</li>
<li>Buah banana</li>
<li>Ceri</li>
</ul>Daftar berurutan:
<ol>
<li>Bangun tidur</li>
<li>Sikat gigi</li>
<li>Makan pagi</li>
</ol>Daftar adalah bagus untuk mengatur informasi. Saya suka memikirkan mereka sebagai bullet point dalam presentasi!
6. Penekanan dan Kekuatan
Gunakan <em> untuk penekanan ( biasanya ditampilkan dalam huruf miring) dan <strong> untuk kekuatan penting ( biasanya ditampilkan dalam huruf tebal).
<p>Saya <em>benar-benar</em> menyukai mengajar HTML. Itu sangat <strong>penting</strong> untuk pengembangan web!</p>Tag ini menambahkan makna ke teks Anda, bukan hanya gaya. Itu seperti menambahkan nada dan penekanan ke suara Anda saat berbicara!
7. Pemisah Baris dan Garis Horizontal
kadang-kadang Anda perlu menambahkan pemisah baris tanpa memulai paragraf baru. Itu di mana <br> digunakan:
<p>Mawar merah,<br>Biru violet,<br>HTML adalah menakjubkan,<br>Dan Anda juga begitu!</p>Untuk menambahkan garis horizontal, gunakan tag <hr>:
<pIni adalah akhir dari satu bagian.</p>
<hr>
<pIni adalah awal bagian lainnya.</p>Pikirkan <br> sebagai return lembut pada papan ketik Anda, dan <hr> sebagai menggambar garis pada kertas untuk memisahkan bagian.
Tabel Metode HTML
Berikut adalah tabel yang menggabungkan tag HTML dasar yang kita diskusikan:
| Tag | Deskripsi | Contoh |
|---|---|---|
<h1> hingga <h6>
|
Judul | <h1>Judul Utama</h1> |
<p> |
Paragraf | <pIni adalah paragraf.</p> |
<a> |
Tautan | <a href="https://example.com">Tautan</a> |
<img> |
Gambar | <img src="image.jpg" alt="Deskripsi"> |
<ul> |
Daftar Tak Berurutan | <ul><li>Item</li></ul> |
<ol> |
Daftar Berurutan | <ol><li>Pertama</li></ol> |
<em> |
Penekanan | <em>Teks Ditekankan</em> |
<strong> |
Kekuatan Penting | <strong>Teks Penting</strong> |
<br> |
Pemisah Baris | Baris 1<br>Baris 2 |
<hr> |
Garis Horizontal | <hr> |
Ingat, HTML tentang struktur dan makna. Ketika Anda berlatih, Anda akan mulai melihat bagaimana blok dasar ini bersatu untuk menciptakan halaman web penuh. Itu seperti belajar alfabet sebelum menulis cerita pertama Anda - sekali Anda menguasai dasar ini, dunia pengembangan web terbuka untuk Anda!
Saya harap panduan ini telah membantu Anda memulai perjalanan HTML Anda. Terus berlatih, tetap kurang curiga, dan jangan takut untuk mencoba. Sebelum Anda tahu, Anda akan menciptakan halaman web yang menakjubkan yang Anda dapat banggakan untuk membagikan ke dunia. Selamat coding!
Credits: Image by storyset