📋 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
<!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
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Ini adalah paragraf normal.</p>
Text Formatting
<strong>Bold text</strong>
<em>Italic text</em>
<u>Underlined text</u>
<mark>Highlighted text</mark>
🔗 Links dan Images
Hyperlinks
<a href="https://www.example.com">Klik di sini</a>
<a href="about.html">Halaman About</a>
Images
<img src="gambar.jpg" alt="Deskripsi gambar">
<img src="https://example.com/image.jpg" alt="Online image">
📊 Tables dan Forms
Basic Table
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Forms
<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
<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
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Browser Anda tidak mendukung tag video.
</video>
Audio
<audio controls>
<source src="music.mp3" type="audio/mpeg">
Browser Anda tidak mendukung tag audio.
</audio>
📱 Advanced Layout
Flexbox
<div style="display: flex; justify-content: space-between;">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Grid
<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
<script>
// Menyimpan data
localStorage.setItem('username', 'john_doe');
// Mengambil data
const username = localStorage.getItem('username');
</script>
Geolocation
<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
<button aria-label="Close menu">✕</button>
<div role="alert">Pesan penting!</div>
Alt Text
<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
<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
<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! 🚀