HTML Dasar

HTML Dasar: Belajar Elemen Penting HTML untuk Pemula

HTML (HyperText Markup Language) adalah bahasa dasar untuk membuat halaman web. HTML digunakan untuk menyusun konten seperti teks, gambar, link, dan banyak lagi. Dalam materi ini, kamu akan belajar elemen-elemen dasar HTML berikut:

Dokumen HTML dasar
Heading (judul)
Paragraf
Link (tautan)
Gambar (images)

1. Struktur Dasar Dokumen HTML

Setiap halaman HTML dimulai dengan struktur dasar berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    <!-- Konten halaman di sini -->
  </body>
</html>

Penjelasan:

<!DOCTYPE html> → Menandakan ini adalah dokumen HTML5
<html> → Tag utama yang membungkus seluruh isi halaman
<head> → Berisi informasi tentang halaman, seperti judul dan meta data
<title> → Judul yang muncul di tab browser
<body> → Tempat semua konten yang terlihat di browser

2. Heading (Judul)

HTML memiliki 6 tingkatan heading, dari <h1> (paling besar) sampai <h6> (paling kecil). Heading digunakan untuk memberi struktur dan judul pada konten.

<h1>Ini Heading 1</h1>
<h2>Ini Heading 2</h2>
<h3>Ini Heading 3</h3>

Catatan: Gunakan heading secara berurutan dan sesuai struktur konten (misalnya <h1> untuk judul utama, <h2> untuk subjudul, dst).

3. Paragraf

Untuk menulis teks atau paragraf biasa, gunakan tag <p>.

<p>Ini adalah paragraf pertama saya.</p>
<p>HTML sangat mudah dipelajari dan menyenangkan!</p>

Tips: Jangan gunakan tag heading untuk paragraf. Gunakan <p> agar struktur halaman tetap rapi dan semantik.

4. Link (Tautan)

Untuk membuat tautan ke halaman lain atau ke situs lain, gunakan tag <a> dengan atribut href.

<a href="https://www.google.com">Kunjungi Google</a>

Penjelasan:

href adalah tempat kamu menuliskan alamat tujuan link
Teks di antara tag <a> akan menjadi link yang bisa diklik

Kamu juga bisa membuat link ke halaman lain di website kamu, misalnya:

<a href="tentang.html">Tentang Kami</a>

5. Gambar (Images)

Untuk menampilkan gambar di halaman web, gunakan tag <img> dengan atribut src dan alt.

<img src="gambar.jpg" alt="Deskripsi Gambar" width="300">

Penjelasan:

src adalah alamat atau path gambar
alt adalah teks alternatif yang ditampilkan jika gambar gagal dimuat
width (opsional) untuk mengatur lebar gambar

Kamu juga bisa menampilkan gambar dari internet:

<img src="https://example.com/logo.png" alt="Logo Website">

Kesimpulan

Berikut adalah rangkuman elemen-elemen HTML dasar yang telah kita pelajari:

Elemen	Fungsi
`<html>`	Membungkus seluruh dokumen
`<head>`	Informasi halaman (tidak ditampilkan)
`<body>`	Konten utama yang ditampilkan
`<h1>` sampai `<h6>`	Heading atau judul
`<p>`	Paragraf
`<a>`	Tautan/link
`<img>`	Gambar

Dengan memahami elemen-elemen dasar ini, kamu sudah bisa mulai membuat halaman web sederhana sendiri. Selanjutnya, kamu bisa mempelajari CSS untuk mempercantik tampilan dan JavaScript untuk membuat web lebih interaktif.