HTML (HyperText Markup Language) adalah bahasa dasar untuk membangun halaman web. Semua halaman web di internet, dari yang paling sederhana hingga kompleks, dibangun menggunakan HTML sebagai fondasi utamanya.
1.
HTML adalah bahasa markah (markup language) yang digunakan untuk membuat struktur dan konten halaman web seperti teks, gambar, link, dan elemen lainnya.
Penjelasan:
2.
HTML5 memperkenalkan elemen semantik seperti:
3.
4.
5.
6.
Gunakan W3C Validator untuk memastikan kode HTML Anda valid.
HTML adalah pondasi utama dalam pengembangan web. Dengan menguasai HTML, Anda dapat melangkah lebih jauh ke CSS, JavaScript, dan framework modern. Latih kemampuan Anda dengan membuat berbagai proyek kecil dan eksplorasi elemen-elemen HTML lebih dalam.
1. 
Dasar HTML
1.1 Apa Itu HTML?
HTML adalah bahasa markah (markup language) yang digunakan untuk membuat struktur dan konten halaman web seperti teks, gambar, link, dan elemen lainnya.
1.2 Struktur Dasar HTML
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Selamat Datang</h1>
<p>Ini adalah paragraf pertama saya!</p>
</body>
</html>Penjelasan:
- <!DOCTYPE html>: Mendeklarasikan dokumen HTML5.
- <html>: Elemen root dari dokumen HTML.
- <head>: Berisi metadata.
- <title>: Judul halaman yang muncul di tab browser.
- <body>: Konten utama yang ditampilkan di browser.
1.3 Elemen HTML Umum
| Tag | Fungsi |
|---|---|
| <h1>–<h6> | Judul (Heading) |
| <p> | Paragraf |
| <a> | Tautan (Hyperlink) |
| <img> | Gambar |
| <ul>, <ol>, <li> | Daftar |
| <br>, <hr> | Pemisah baris dan garis horizontal |
2. 
Struktur Halaman HTML
2.1 Elemen Semantik HTML5
HTML5 memperkenalkan elemen semantik seperti:
HTML:
<header>Atas halaman</header>
<nav>Navigasi</nav>
<main>Konten utama</main>
<article>Artikel independen</article>
<aside>Konten samping</aside>
<footer>Kaki halaman</footer>2.2 Komentar HTML
HTML:
<!-- Ini adalah komentar -->3. 
Formatting & Multimedia
3.1 Format Teks
| Tag | Fungsi |
|---|---|
| <b>, <strong> | Tebal |
| <i>, <em> | Miring |
| <u> | Garis bawah |
| <mark> | Sorotan |
| <small> | Teks kecil |
3.2 Menyisipkan Gambar dan Video
HTML:
<img src="gambar.jpg" alt="Deskripsi Gambar">
<video controls>
<source src="video.mp4" type="video/mp4">
</video>4. 
Link, Tabel, dan Form
4.1 Tautan (Link)
HTML:
<a href="https://contoh.com" target="_blank">Kunjungi Situs</a>4.2 Tabel
HTML:
<table border="1">
<tr><th>Nama</th><th>Usia</th></tr>
<tr><td>Ani</td><td>25</td></tr>
</table>4.3 Formulir
HTML:
<form action="/submit" method="post">
<input type="text" name="nama" placeholder="Nama Anda">
<input type="submit" value="Kirim">
</form>5. 
Lanjutan HTML
5.1 Elemen Input Lanjutan (HTML5)
HTML:
<input type="email">
<input type="date">
<input type="range">5.2 Audio
HTML:
<audio controls>
<source src="musik.mp3" type="audio/mpeg">
</audio>5.3 Embed dan Iframe
HTML:
<iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>6. 
Tips Mahir HTML
6.1 Validasi HTML
Gunakan W3C Validator untuk memastikan kode HTML Anda valid.
6.2 Praktik SEO Dasar
- Gunakan heading secara berurutan
- Sertakan atribut alt pada gambar
- Gunakan tag semantik untuk struktur
6.3 HTML & CSS & JavaScript
- HTML → Struktur
- CSS → Gaya/Tampilan
- JavaScript → Interaktivitas
Penutup
HTML adalah pondasi utama dalam pengembangan web. Dengan menguasai HTML, Anda dapat melangkah lebih jauh ke CSS, JavaScript, dan framework modern. Latih kemampuan Anda dengan membuat berbagai proyek kecil dan eksplorasi elemen-elemen HTML lebih dalam.
