Membuat Halaman Web Pertamamu dengan HTML: Panduan Lengkap untuk Pemula

Pernah ingin membuat website tapi bingung mulai dari mana? Tenang! Artikel ini akan membimbing kamu membuat halaman web pertamamu hanya dalam beberapa menit, tanpa perlu pengalaman coding sebelumnya.

1. Apa Itu HTML?

HTML (HyperText Markup Language) adalah bahasa dasar yang digunakan untuk membuat struktur sebuah halaman web. Semua website yang kamu buka di browser dibuat dengan HTML, bahkan yang tampilannya super keren!

2. Alat yang Dibutuhkan

Text Editor: Gunakan Notepad (Windows) atau VSCode (gratis & ringan)
Browser: Google Chrome, Mozilla Firefox, atau lainnya

Langkah penting: Simpan file kamu dengan ekstensi .html agar bisa dibuka di browser.

3. Struktur Dasar File HTML

Berikut struktur dasar file HTML yang wajib kamu pahami:

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <p>Ini halaman web pertamaku.</p>
  </body>
</html>

Penjelasan singkat:

<html> : Menandakan awal halaman web
<head> : Berisi judul & informasi lain (tidak terlihat di halaman)
<body> : Bagian yang terlihat, di sinilah kamu letakkan konten

4. Contoh Halaman Web Sederhana

Kita akan membuat halaman sederhana dengan teks, gambar, dan tautan:

<!DOCTYPE html>
<html>
  <head>
    <title>Web Pertamaku</title>
  </head>
  <body>
    <h1>Selamat Datang di Webku!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
    <img src="https://via.placeholder.com/300" alt="Contoh Gambar">
    <p>
      Kunjungi blog saya <a href="https://namablogkamu.blogspot.com">di sini</a>.
    </p>
  </body>
</html>

5. Bonus: Tambahkan Warna dengan CSS Sederhana

Kamu bisa mempercantik tampilan dengan CSS langsung di tag HTML:

<h1 style="color: blue;">Webku Keren!</h1>
<p style="font-size: 18px; color: gray;">Tampilan lebih menarik dengan CSS.</p>

6. Hasil Akhir Tampilan

Gambar di atas adalah contoh hasil dari kode yang kamu buat. Keren, kan?

7. Kesimpulan

Kamu baru saja membuat halaman web pertamamu dengan HTML! Sekarang kamu bisa mulai berkreasi: menambah gambar, teks, link, bahkan musik dan video. Yang penting, terus eksplorasi dan berani coba.

➡️ Apa Selanjutnya?

Di artikel berikutnya, kita akan belajar tentang layout menggunakan div dan CSS, agar halaman webmu makin rapi dan profesional.

Jangan lupa share artikel ini ke teman-temanmu yang ingin belajar coding dari nol!

Label: #belajarHTML, #webPemula, #codingDasar, #buatWebSendiri, #htmlpraktis

Cari Blog Ini

Mengenal HTML, CSS, dan JavaScript: Pondasi Utama Dunia Web