Bab 1: Pengenalan HTML

Bab 1: Pengenalan HTML

1.1 Apa itu HTML?

1.1.1 Definisi HTML

HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk membuat dan menyusun halaman web. HTML bukan bahasa pemrograman, melainkan bahasa markup yang mendefinisikan struktur konten dalam sebuah website.

1.1.2 Sejarah HTML

  • 1989: Tim Berners-Lee menciptakan World Wide Web

  • 1991: Dokumentasi HTML pertama dipublikasikan

  • 1995: HTML 2.0 diluncurkan

  • 1997: HTML 3.2 menjadi rekomendasi W3C

  • 1999: HTML 4.01 dirilis

  • 2014: HTML5 menjadi rekomendasi W3C resmi

  • Sekarang: HTML Living Standard yang terus berkembang

1.1.3 Peran HTML dalam Pengembangan Web

  1. Struktur Dasar

    • Mendefinisikan kerangka dokumen web

    • Mengorganisasi konten secara hierarkis

    • Memberikan makna semantik pada konten

  2. Integrasi dengan Teknologi Web Lain

    • CSS untuk styling

    • JavaScript untuk interaktivitas

    • Media (gambar, video, audio)

  3. Aksesibilitas

    • Memungkinkan akses universal ke konten web

    • Mendukung screen readers dan assistive technology

    • Basis untuk pengoptimalan SEO

1.1.4 Perbedaan HTML dengan Bahasa Markup Lainnya

  1. XML

    • HTML lebih spesifik untuk web

    • XML lebih fleksibel dan dapat disesuaikan

    • HTML memiliki tag predefinisi

  2. Markdown

    • HTML lebih kompleks dan powerful

    • Markdown lebih sederhana dan mudah dibaca

    • HTML memberikan kontrol lebih detail

1.2 Persiapan Belajar HTML

1.2.1 Software yang Dibutuhkan

  1. Text Editor

    • Visual Studio Code (Rekomendasi utama)

    • Sublime Text

    • Atom

    • Notepad++

    Fitur penting dalam text editor:

    • Syntax highlighting

    • Auto-completion

    • Live preview

    • Extensions/plugins

  2. Web Browser

    • Google Chrome (Rekomendasi utama)

    • Mozilla Firefox

    • Microsoft Edge

    • Safari

1.2.2 Setup Lingkungan Pengembangan

  1. Instalasi Text Editor

    1. Download Visual Studio Code
2. Install sesuai sistem operasi
3. Install extensions yang direkomendasikan:
   - Live Server
   - HTML Snippets
   - Auto Rename Tag
   - HTML CSS Support

  2. Struktur Folder Proyek

    my-website/
├── index.html
├── images/
├── css/
└── js/

1.2.3 Browser Developer Tools

  1. Cara Mengakses

    • Windows/Linux: F12 atau Ctrl + Shift + I

    • macOS: Cmd + Option + I

    • Klik kanan > Inspect Element

  2. Fitur Utama

    • Elements panel

    • Console

    • Network

    • Sources

    • Performance

    • Application

  3. Penggunaan Developer Tools

    • Inspeksi elemen

    • Debug HTML dan CSS

    • Analisis performa

    • Testing responsif design

1.3 Struktur Dasar HTML

1.3.1 Anatomi Dokumen HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halaman</title>
</head>
<body>
    <!-- Konten website di sini -->
</body>
</html>

1.3.2 DOCTYPE dan Versi HTML

  1. HTML5

    <!DOCTYPE html>

  2. Versi Sebelumnya (untuk referensi)

    <!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1.3.3 Tag html, head, dan body

  1. Tag html

    • Elemen root dari dokumen HTML

    • Atribut lang untuk menentukan bahasa

    <html lang="id">

  2. Tag head

    • Metadata dokumen

    • Link ke resource eksternal

    • Title halaman

    <head>
    <meta charset="UTF-8">
    <meta name="description" content="Deskripsi halaman">
    <title>Judul Halaman</title>
    <link rel="stylesheet" href="style.css">
</head>

  3. Tag body

    • Konten yang ditampilkan di browser

    • Struktur halaman

    • Elemen-elemen visual

    <body>
    <header>
        <h1>Judul Website</h1>
    </header>
    <main>
        <p>Konten utama</p>
    </main>
    <footer>
        <p>Footer website</p>
    </footer>
</body>

1.3.4 Komentar dalam HTML

  1. Syntax Komentar

    <!-- Ini adalah komentar -->
<!-- 
    Komentar 
    multi-line 
-->

  2. Best Practices Penggunaan Komentar

    • Dokumentasi kode

    • Penjelasan bagian kompleks

    • Temporary commenting untuk debugging

    • Pembagian section

Latihan Praktik

Latihan 1: Membuat Halaman HTML Pertama

Buatlah file HTML sederhana dengan struktur dasar yang mencakup:

  • Doctype HTML5

  • Tag html dengan atribut lang

  • Head section dengan meta tags

  • Body section dengan heading dan paragraf

Latihan 2: Menggunakan Developer Tools

  • Buka sebuah website

  • Inspect elemen menggunakan developer tools

  • Modifikasi konten menggunakan elements panel

  • Amati perubahan yang terjadi

Latihan 3: Organisasi Proyek

Buatlah struktur folder untuk proyek web sederhana dengan:

  • File index.html

  • Folder images, css, dan js

  • File README.md untuk dokumentasi

Ringkasan Bab

  • HTML adalah bahasa markup untuk membuat struktur website

  • Persiapan meliputi text editor dan browser

  • Developer tools sangat penting untuk pengembangan

  • Struktur dasar HTML terdiri dari DOCTYPE, html, head, dan body

  • Komentar membantu dokumentasi dan organisasi kode

Quiz Bab 1

  1. Apa kepanjangan dari HTML?

  2. Sebutkan minimal 3 text editor yang bisa digunakan untuk menulis HTML!

  3. Bagaimana cara mengakses developer tools di browser?

  4. Apa fungsi dari tag <head>?

  5. Bagaimana cara menulis komentar dalam HTML?

Referensi

PreviousoutlineNextBab 2: Elemen Dasar HTML

Last updated