Pertemuan 2

Cover

Melanjutkan pembelajaran tentang teknologi web dan pengembangan website.

Gallery

What is HTML?

📝 Apa itu HTML?

HTML = HyperText Markup Language
Bahasa untuk membuat struktur website
Seperti " blueprint " dari rumah
Browser membaca HTML dan menampilkan hasilnya

💡 Analogi: HTML = Kerangka bangunan, CSS = Cat & dekorasi

Building Block Analogy

🏗️ HTML Tags = Building Blocks

<header> = Atap/Kepala (Logo, judul)

<nav> = Tangga (Navigasi menu)

<main> = Ruang utama (Konten penting)

<footer> = Taman belakang (Info kontak)

Semantic HTML Tags

🏷️ Semantic HTML Tags

<header> - Bagian atas (judul, logo)
<nav> - Menu navigasi
<main> - Konten utama
<section> - Bagian konten
<article> - Artikel/post
<aside> - Sidebar/info tambahan
<footer> - Bagian bawah (contact, copyright)

Code Example

💻 Structure HTML Basic

                    <!DOCTYPE html>
                    
                    <html>
                    
                      <head>
                    
                        <title>My Gallery</title>
                    
                      </head>
                    
                      <body>
                    
                        <
                    
                      header
                    
                    >
                    
                          <h1>My Art Gallery</h1>
                    
                        </
                    
                      header
                    
                    >
                    
                        <
                    
                      main
                    
                    >...</
                    
                      main
                    
                    >
                    
                        <
                    
                      footer
                    
                    >...</
                    
                      footer
                    
                    >
                    
                      </body>
                    
                    </html>

Catatan: Setiap tag punya opening <tag> dan closing </tag>

Live Code Along

⚡ Live Coding Together

Step 1: Buka text editor
Create file baru → Save as


                        index.html

Step 2: Copy structure di atas
Paste HTML template lengkap

Step 3: Save & buka di browser
Double-click file → Lihat hasilnya!

Student Activity

🎯 Your Activity

Update file HTML kalian dengan struktur semantic:
Tambahkan <header>, <main>, <footer> tags
Tambahkan judul & paragraf
Use <h1> untuk title, <p> untuk deskripsi
Save & test
Open di browser → check struktur di Developer Tools (F12)