Komponen-komponen Html [1] — Creative Lembah Arafah

Komponen HTML adalah elemen-elemen dasar yang digunakan untuk membuat struktur halaman web. HTML (HyperText Markup Language) adalah bahasa markup yang berfungsi untuk menyusun dan menampilkan konten di browser. Berikut adalah beberapa komponen utama dalam HTML:

1. Elemen Dasar

<!DOCTYPE html>
Deklarasi tipe dokumen, biasanya ditulis di awal file HTML untuk memberi tahu browser bahwa dokumen menggunakan HTML5.
<html>
Elemen root yang membungkus semua elemen HTML lainnya.
<head>
Bagian dokumen yang berisi informasi metadata seperti judul, charset, link stylesheet, dan script.
<body>
Bagian utama dokumen tempat konten yang ditampilkan di browser berada.

2. Struktur Dokumen

<title>
Menentukan judul dokumen yang muncul di tab browser.
<meta>
Memberikan metadata seperti charset (<meta charset="UTF-8">), deskripsi, atau viewport.

3. Elemen Teks

Heading (<h1> sampai <h6>)
Digunakan untuk judul dengan ukuran berbeda.
```
<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
```
Paragraph (<p>)
Untuk paragraf teks.
```
<p>Ini adalah paragraf.</p>
```
Bold & Italic
- Bold: <b> atau <strong>
- Italic: <i> atau <em>

4. Daftar (List)

Ordered List (<ol>)
Daftar bernomor.

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

Unordered List (<ul>)
Daftar tanpa nomor.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

5. Tabel

Untuk menyusun data dalam bentuk tabel.

<table>
  <tr>
    <th>Nama</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>25</td>
  </tr>
</table>

6. Media

Gambar (<img>)
Menampilkan gambar.

<img src="image.jpg" alt="Deskripsi Gambar">

Video (<video>)
Menampilkan video.

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

7. Formulir (Forms)

Untuk input dari pengguna.

<form action="/submit" method="POST">
  <label for="name">Nama:</label>
  <input type="text" id="name" name="name">
  <button type="submit">Kirim</button>
</form>

8. Link dan Navigasi

Hyperlink (<a>)
Untuk membuat tautan.

<a href="https://example.com">Kunjungi</a>

Navigasi (<nav>)
Biasanya digunakan untuk menu navigasi.

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>

9. Div dan Span

<div>
Untuk membungkus elemen menjadi sebuah blok.
<span>
Untuk membungkus elemen dalam baris.

Berikut penjelasan lengkap tentang dasar-dasar tag HTML dan atribut HTML, cocok untuk pemula yang ingin memahami struktur HTML tanpa CSS.

📄 Struktur Dasar 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 Dasar Tag HTML

Tag	Keterangan
`<!DOCTYPE html>`	Mendeklarasikan bahwa ini adalah dokumen HTML5
`<html>`	Elemen root dari dokumen HTML
`<head>`	Berisi metadata: judul, charset, link, script, dll
`<title>`	Judul halaman yang tampil di tab browser
`<body>`	Isi utama halaman web (yang terlihat di browser)

📚 Tag HTML Umum

Tag	Fungsi
`<h1>` sampai `<h6>`	Heading (judul besar ke kecil)
`<p>`	Paragraf
`<br>`	Baris baru
`<hr>`	Garis horizontal
`<a href="...">`	Tautan (link)
`<img src="..." alt="...">`	Gambar
`<ul>`, `<ol>`, `<li>`	Daftar (tak berurut, berurut, item)
`<table>`, `<tr>`, `<td>`, `<th>`	Tabel
`<input>`, `<button>`, `<form>`	Formulir

⚙️ Apa itu Atribut HTML?

Atribut digunakan untuk memberikan informasi tambahan pada elemen HTML. Semua atribut ditulis di tag pembuka.

Contoh:

<a href="https://google.com" target="_blank">Kunjungi Google</a>

Atribut	Fungsi
`href`	Alamat tujuan tautan
`target="_blank"`	Buka di tab baru
`src`	Sumber file (untuk `<img>`, `<script>`, dll)
`alt`	Teks alternatif jika gambar tidak tampil
`type`	Tipe input atau button
`value`	Nilai default elemen form
`name`, `id`, `class`	Identifikasi dan styling (digunakan dalam JS/CSS)
`disabled`, `checked`, `selected`	Atribut boolean (tidak perlu nilai)

🧪 Contoh Kombinasi Atribut

<img src="foto.jpg" alt="Foto profil" width="200" height="200">
<input type="text" placeholder="Masukkan nama" name="nama" required>

📝 Kesimpulan

HTML dibangun dari tag pembuka & penutup (kecuali tag kosong seperti <br>, <img>)
Atribut menambahkan info/aturan ke tag
HTML saja tidak bisa membuat halaman indah — untuk desain digunakan CSS
Interaksi ditambahkan lewat JavaScript