Daftar Isi
- Pengenalan HTML
- Fundamental HTML
- Links dan Images
- Tables dan Forms
- Semantic HTML
- Media dan Embedding
- Advanced Layout
- HTML5 APIs
- Accessibility
- Best Practices & Optimization
Pengenalan HTML
Apa itu HTML?
HTML (HyperText Markup Language) adalah bahasa markup standar untuk membuat halaman web. Ini adalah fondasi dari semua website yang ada di internet.
Struktur Dasar HTML
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html><html> <head> <title>Judul Website</title> </head> <body> <h1>Hello World!</h1> <p>Ini adalah paragraf pertamaku.</p> </body></html> |
Tools yang Dibutuhkan
- Text Editor (VS Code, Sublime Text, Atom)
- Web Browser (Chrome, Firefox, Safari)
Fundamental HTML
Elements dan Tags
- Tags selalu diawali dengan < dan diakhiri dengan >
- Kebanyakan tags memiliki opening dan closing tag
- Contoh:
<p>Ini paragraf</p>
Heading dan Paragraf
1 2 3 4 | <h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><p>Ini adalah paragraf normal.</p> |
Text Formatting
1 2 3 4 | <strong>Bold text</strong><em>Italic text</em><u>Underlined text</u><mark>Highlighted text</mark> |
Links dan Images
Hyperlinks
1 2 | <a href="https://www.example.com">Klik di sini</a><a href="about.html">Halaman About</a> |
Images
1 2 | <img src="gambar.jpg" alt="Deskripsi gambar"><img src="https://example.com/image.jpg" alt="Online image"> |
Tables dan Forms
Basic Table
1 2 3 4 5 6 7 8 9 10 | <table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr></table> |
Forms
1 2 3 4 5 6 7 8 9 | <form action="/submit" method="POST"> <label for="nama">Nama:</label> <input type="text" id="nama" name="nama"> <label for="email">Email:</label> <input type="email" id="email" name="email"> <button type="submit">Kirim</button></form> |
Semantic HTML
Struktur Semantic
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <header> <nav> <!-- Navigation menu --> </nav></header><main> <article> <section> <!-- Content sections --> </section> </article> <aside> <!-- Sidebar content --> </aside></main><footer> <!-- Footer content --></footer> |
Media dan Embedding
Video
1 2 3 4 | <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> Browser Anda tidak mendukung tag video.</video> |
Audio
1 2 3 4 | <audio controls> <source src="music.mp3" type="audio/mpeg"> Browser Anda tidak mendukung tag audio.</audio> |
Advanced Layout
Flexbox
1 2 3 4 5 | <div style="display: flex; justify-content: space-between;"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div></div> |
Grid
1 2 3 4 5 | <div style="display: grid; grid-template-columns: 1fr 1fr 1fr;"> <div>Grid Item 1</div> <div>Grid Item 2</div> <div>Grid Item 3</div></div> |
HTML5 APIs
Local Storage
1 2 3 4 5 6 7 | <script> // Menyimpan data localStorage.setItem('username', 'john_doe'); // Mengambil data const username = localStorage.getItem('username');</script> |
Geolocation
1 2 3 4 5 6 7 8 9 10 | <script> if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } function showPosition(position) { console.log("Latitude: " + position.coords.latitude); console.log("Longitude: " + position.coords.longitude); }</script> |
Accessibility
ARIA Labels
1 2 | <button aria-label="Close menu">✕</button><div role="alert">Pesan penting!</div> |
Alt Text
1 | <img src="icon.png" alt="Icon menu utama"> |
Best Practices & Optimization
Clean Code
- Gunakan indentasi yang konsisten
- Berikan komentar yang jelas
- Gunakan nama class/id yang deskriptif
SEO Basics
1 2 3 4 5 | <head> <title>Judul yang SEO-friendly</title> <meta name="description" content="Deskripsi halaman yang menarik"> <meta name="keywords" content="html, tutorial, belajar"></head> |
Performance Tips
- Optimasi ukuran gambar
- Minify HTML
- Gunakan lazy loading untuk gambar
1 | <img src="large-image.jpg" loading="lazy" alt="Lazy loaded image"> |
Kesimpulan
HTML adalah fondasi penting dalam pengembangan web. Dengan menguasai semua konsep di atas, kamu sudah siap untuk membuat website yang terstruktur, accessible, dan optimal.
Langkah Selanjutnya
- Pelajari CSS untuk styling
- Explore JavaScript untuk interaktivitas
- Praktek dengan membuat project nyata
- Ikuti perkembangan teknologi web terbaru
Happy coding!