Bab 1 – Pengertian HTML

HTML, singkatan dari HyperText Markup Language, adalah bahasa markup standar yang digunakan untuk membuat halaman web di internet. HTML bukan bahasa pemrograman; ia tidak bisa melakukan perhitungan, logika, atau manipulasi data secara langsung. Sebaliknya, HTML berfungsi untuk memberi struktur dan arti pada konten, sehingga browser seperti Chrome, Firefox, atau Edge tahu bagaimana menampilkan teks, gambar, tautan, dan elemen lain di layar pengguna.

Sejarah Singkat HTML

HTML pertama kali dikembangkan oleh Tim Berners-Lee pada tahun 1991 di CERN. Tujuannya sederhana: membuat cara standar untuk berbagi dokumen di jaringan global yang kita kenal sekarang sebagai World Wide Web. Sejak saat itu, HTML berkembang pesat hingga versi terbaru saat ini yaitu HTML5, yang mendukung multimedia, animasi, dan interaktivitas modern.

Diagram Struktur Dasar HTML

HTMLHEADBODYTitle, MetaTeks, Gambar, Link

Tag dan Elemen HTML

HTML menggunakan tag untuk menandai konten. Tag biasanya berpasangan: pembuka <tag> dan penutup </tag>. Contohnya:

<h1>Judul Halaman</h1>
<p>Ini adalah paragraf pertama.</p>

Beberapa tag penting yang harus dikuasai pemula:

  • <h1> sampai <h6> → Judul dan subjudul
  • <p> → Paragraf
  • <ul> dan <li> → Daftar
  • <a> → Tautan / link
  • <img> → Gambar
  • <div> → Kontainer / pembungkus elemen

Struktur Dasar Halaman HTML

Contoh halaman HTML minimal:

<!DOCTYPE html>
<html>
<head>
    <title>Halaman Saya</title>
</head>
<body>
    <h1>Halo Dunia</h1>
    <p>Ini adalah paragraf pertama.</p>
</body>
</html>

Penjelasan Struktur:

  • <!DOCTYPE html> → Memberitahu browser bahwa ini HTML5
  • <html> → Pembungkus seluruh halaman
  • <head> → Metadata, title, link CSS, script
  • <body> → Isi konten yang tampil di layar

Ilustrasi Penggunaan HTML

Misalkan kita ingin membuat profil sederhana:

<h1>Nama Saya: Andi</h1>
<p>Hobi: Membaca buku dan belajar teknologi</p>
<a href="https://www.google.com">Kunjungi Google</a>
<img src="https://via.placeholder.com/150" alt="Contoh Gambar">

Latihan Bab 1

Coba buat file baru bernama latihan_bab1.html dan tulis kode seperti di atas.

  • Tambahkan satu gambar menggunakan tag <img>
  • Buat satu subjudul baru menggunakan <h2>
  • Buat daftar hobi menggunakan <ul> dan <li>
  • Buat satu link ke situs favoritmu

Mini Project Bab 1

Buat halaman profil mini:

  • Nama lengkap
  • Foto profil (placeholder)
  • Deskripsi singkat
  • Daftar hobi
  • Link media sosial atau website