Belajar Dasar HTML: Membuat Halaman Web Pertama Anda dalam 5 Menit!

Pernah ingin membuat website sendiri tetapi bingung harus mulai dari mana? Tenang! Dengan HTML, Anda bisa membuat halaman web sederhana hanya dalam 5 menit. HTML (HyperText Markup Language) adalah bahasa dasar untuk membangun struktur website.

Dalam panduan ini, Anda akan belajar:
✔️ Apa itu HTML dan bagaimana cara kerjanya?
✔️ Struktur dasar dokumen HTML
✔️ Tag HTML penting yang wajib diketahui
✔️ Membuat halaman web pertama Anda

Mari mulai! 🚀

1. Apa Itu HTML?

HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman web. Setiap elemen di website (teks, gambar, tombol) dibangun menggunakan tag HTML.

Contoh sederhana:

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
</body>
</html>

Bagaimana HTML Bekerja?

Browser membaca kode HTML dan menampilkannya sebagai halaman web.
HTML terdiri dari tag (contoh: <h1>, <p>) yang memberi tahu browser bagaimana menampilkan konten.

2. Struktur Dasar HTML

Setiap dokumen HTML memiliki struktur standar:

<!DOCTYPE html> <!-- Deklarasi tipe dokumen -->
<html> <!-- Tag pembuka dokumen HTML -->
<head> <!-- Bagian metadata (judul, CSS, dll) -->
    <title>Judul Halaman</title>
</head>
<body> <!-- Konten yang ditampilkan di browser -->
    <h1>Heading Utama</h1>
    <p>Paragraf teks.</p>
</body>
</html>

Penjelasan:

<!DOCTYPE html> → Memberi tahu browser bahwa ini adalah dokumen HTML5.
<html> → Elemen utama yang membungkus seluruh halaman.
<head> → Berisi informasi meta seperti judul, link CSS, dan SEO.
<body> → Tempat semua konten yang terlihat di website.

3. Tag HTML Penting yang Wajib Diketahui

✔️ Heading (`<h1>` sampai `<h6>`)

Digunakan untuk judul dan subjudul.

<h1>Judul Utama</h1> <!-- Ukuran terbesar -->
<h2>Subjudul</h2>
<h3>Sub-subjudul</h3>

✔️ Paragraf (`<p>`)

Untuk menampilkan teks dalam bentuk paragraf.

<p>Ini adalah contoh paragraf.</p>

✔️ Link (`<a>`)

Membuat hyperlink ke halaman lain.

<a href="https://codekreasi.com">Kunjungi CodeKreasi</a>

✔️ Gambar (`<img>`)

Menampilkan gambar di halaman web.

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

✔️ Daftar (List)

Daftar tidak berurut (<ul>)

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Daftar berurut (<ol>)

<ol>
    <li>Langkah pertama</li>
    <li>Langkah kedua</li>
</ol>

✔️ Tombol (`<button>`)

Membuat tombol yang bisa diklik.

<button>Klik Saya!</button>

4. Membuat Halaman Web Pertama dalam 5 Menit!

Langkah 1: Buka Text Editor

Anda bisa menggunakan:

Notepad (Windows)
TextEdit (Mac)
VS Code (Rekomendasi)

Langkah 2: Salin Kode HTML Berikut

<!DOCTYPE html>
<html>
<head>
    <title>Website Pertamaku</title>
</head>
<body>
    <h1>Selamat Datang di Website Saya!</h1>
    <p>Halo! Ini adalah halaman web pertama saya.</p>
    <a href="https://google.com">Kunjungi Google</a>
    <img src="https://via.placeholder.com/150" alt="Contoh Gambar">
    <button>Klik Ini!</button>
</body>
</html>

Langkah 3: Simpan sebagai File `.html`

Klik File > Save As
Beri nama website-pertama.html
Pastikan format disimpan sebagai All Files (bukan .txt).

Langkah 4: Buka di Browser

Buka file yang sudah disimpan dengan klik 2x (akan terbuka di browser default).
Atau, drag file ke browser (Chrome, Firefox, dll).

🎉 Selamat! Anda sudah membuat website pertama!

5. Tips Lanjutan untuk Pemula

Gunakan VS Code untuk fitur auto-complete HTML.
Pelajari CSS untuk mempercantik tampilan website.
Cek Validasi HTML di https://validator.w3.org/.

Kesimpulan

Anda baru saja belajar cara membuat halaman web sederhana dengan HTML dalam 5 menit! 🚀

Ingin belajar lebih lanjut?
✅ Kunjungi CodeKreasi.com untuk tutorial HTML, CSS, dan JavaScript.
✅ Coba tambahkan lebih banyak tag HTML seperti tabel (<table>) dan form (<form>).

Punya pertanyaan? Tulis di komentar! 😊

codekreasi

Cari Blog Ini