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

Struktur Dasar
- Mendefinisikan kerangka dokumen web
- Mengorganisasi konten secara hierarkis
- Memberikan makna semantik pada konten
Integrasi dengan Teknologi Web Lain
- CSS untuk styling
- JavaScript untuk interaktivitas
- Media (gambar, video, audio)
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

XML
- HTML lebih spesifik untuk web
- XML lebih fleksibel dan dapat disesuaikan
- HTML memiliki tag predefinisi
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

Text Editor
- Visual Studio Code (Rekomendasi utama)
- Sublime Text
- Atom
- Notepad++
Fitur penting dalam text editor:
- Syntax highlighting
- Auto-completion
- Live preview
- Extensions/plugins
Web Browser
- Google Chrome (Rekomendasi utama)
- Mozilla Firefox
- Microsoft Edge
- Safari

1.2.2 Setup Lingkungan Pengembangan

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

Struktur Folder Proyek

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

1.2.3 Browser Developer Tools

Cara Mengakses
- Windows/Linux: F12 atau Ctrl + Shift + I
- macOS: Cmd + Option + I
- Klik kanan > Inspect Element
Fitur Utama
- Elements panel
- Console
- Network
- Sources
- Performance
- Application
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

HTML5
```
<!DOCTYPE html>
```

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

Tag html
- Elemen root dari dokumen HTML
- Atribut lang untuk menentukan bahasa
```
<html lang="id">
```

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>

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

Syntax Komentar

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

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

Apa kepanjangan dari HTML?
Sebutkan minimal 3 text editor yang bisa digunakan untuk menulis HTML!
Bagaimana cara mengakses developer tools di browser?
Apa fungsi dari tag <head>?
Bagaimana cara menulis komentar dalam HTML?

Referensi

Previousoutline NextBab 2: Elemen Dasar HTML

Last updated 1 year ago

hashtagBab 1: Pengenalan HTML

hashtag1.1 Apa itu HTML?

hashtag1.1.1 Definisi HTML

hashtag1.1.2 Sejarah HTML

hashtag1.1.3 Peran HTML dalam Pengembangan Web

hashtag1.1.4 Perbedaan HTML dengan Bahasa Markup Lainnya

hashtag1.2 Persiapan Belajar HTML

hashtag1.2.1 Software yang Dibutuhkan

hashtag1.2.2 Setup Lingkungan Pengembangan

hashtag1.2.3 Browser Developer Tools

hashtag1.3 Struktur Dasar HTML

hashtag1.3.1 Anatomi Dokumen HTML

hashtag1.3.2 DOCTYPE dan Versi HTML

hashtag1.3.3 Tag html, head, dan body

hashtag1.3.4 Komentar dalam HTML

hashtagLatihan Praktik

hashtagLatihan 1: Membuat Halaman HTML Pertama

hashtagLatihan 2: Menggunakan Developer Tools

hashtagLatihan 3: Organisasi Proyek

hashtagRingkasan Bab

hashtagQuiz Bab 1

hashtagReferensi