Pemrograman Web dengan HTML untuk Kelas 3 SMA
### Apa Itu HTML?
HTML (HyperText Markup Language) adalah bahasa markah standar untuk membuat halaman web. HTML menggunakan serangkaian elemen atau tag untuk menyusun konten, seperti teks, gambar, tautan, dan elemen multimedia lainnya. HTML adalah fondasi dari setiap halaman web yang kamu lihat di internet.
### Struktur Dasar Dokumen HTML
Setiap dokumen HTML memiliki struktur dasar yang harus diikuti:
1. **Deklarasi `<!DOCTYPE html>`**
* Memberitahu browser bahwa dokumen ini adalah dokumen HTML5.
* Ditempatkan di baris paling atas dokumen.
```html
<!DOCTYPE html>
```
2. **Tag `<html>`**
* Elemen akar yang membungkus seluruh konten HTML.
* Harus memiliki tag pembuka `<html>` dan tag penutup `</html>`.
```html
<html>
...
</html>
```
3. **Tag `<head>`**
* Berisi informasi meta tentang dokumen, seperti judul halaman, tautan ke stylesheet (CSS), dan metadata lainnya.
* Tidak ditampilkan langsung di halaman web.
```html
<head>
<title>Judul Halaman</title>
<link rel="stylesheet" href="style.css">
</head>
```
4. **Tag `<body>`**
* Berisi semua konten yang akan ditampilkan di halaman web, seperti teks, gambar, video, dan elemen lainnya.
```html
<body>
<h1>Selamat Datang!</h1>
<p>Ini adalah paragraf pertama.</p>
</body>
```
### Elemen-Elemen HTML Penting
Berikut adalah beberapa elemen HTML yang paling sering digunakan:
* **Tag Heading (`<h1>` sampai `<h6>`)**
* Digunakan untuk membuat judul dan subjudul. `<h1>` adalah judul utama, sedangkan `<h6>` adalah judul yang paling kecil.
```html
<h1>Judul Utama</h1>
<h2>Subjudul</h2>
```
* **Tag Paragraf (`<p>`)**
* Digunakan untuk membuat paragraf teks.
```html
<p>Ini adalah sebuah paragraf teks.</p>
```
* **Tag Tautan (`<a>`)**
* Digunakan untuk membuat tautan (link) ke halaman web lain atau bagian lain dari halaman yang sama.
* Atribut `href` menentukan tujuan tautan.
```html
<a href="https://www.example.com">Kunjungi Example</a>
```
* **Tag Gambar (`<img>`)**
* Digunakan untuk menyisipkan gambar ke dalam halaman web.
* Atribut `src` menentukan sumber gambar (URL atau path file).
* Atribut `alt` memberikan teks alternatif jika gambar tidak dapat ditampilkan.
```html
<img src="gambar.jpg" alt="Deskripsi gambar">
```
* **Tag Daftar (`<ul>`, `<ol>`, `<li>`)**
* `<ul>` (unordered list): Membuat daftar tanpa urutan (bullet points).
* `<ol>` (ordered list): Membuat daftar dengan urutan (angka atau huruf).
* `<li>` (list item): Menentukan setiap item dalam daftar.
```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>Pertama</li>
<li>Kedua</li>
</ol>
```
* **Tag Div (`<div>`)**
* Digunakan sebagai wadah generik untuk mengelompokkan elemen-elemen HTML.
* Sering digunakan bersama dengan CSS untuk mengatur tata letak dan tampilan.
```html
<div>
<p>Ini adalah bagian dari div.</p>
</div>
```
* **Tag Span (`<span>`)**
* Mirip dengan `<div>`, tetapi digunakan untuk mengelompokkan bagian kecil dari teks atau elemen inline.
```html
<p>Ini adalah <span style="color:red;">teks merah</span> dalam paragraf.</p>
```
* **Tag Tabel (`<table>`, `<tr>`, `<td>`, `<th>`)**
* `<table>`: Membuat tabel.
* `<tr>` (table row): Membuat baris dalam tabel.
* `<td>` (table data): Membuat sel data dalam baris.
* `<th>` (table header): Membuat sel header dalam baris.
```html
<table>
<tr>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
</tr>
</table>
```
* **Tag Form (`<form>`, `<input>`, `<button>`, `<textarea>`, `<select>`)**
* `<form>`: Membuat formulir untuk mengumpulkan data dari pengguna.
* `<input>`: Membuat berbagai jenis input fields (text, password, email, dll.).
* `<button>`: Membuat tombol.
* `<textarea>`: Membuat area teks multi-baris.
* `<select>`: Membuat dropdown list.
```html
<form action="/submit" method="post">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<button type="submit">Kirim</button>
</form>
```
### Atribut HTML
Atribut memberikan informasi tambahan tentang elemen HTML. Atribut selalu ditulis dalam tag pembuka dan memiliki format `nama="nilai"`.
Contoh:
```html
<img src="gambar.jpg" alt="Deskripsi gambar" width="500">
```
Dalam contoh di atas:
* `src` adalah atribut yang menentukan sumber gambar.
* `alt` adalah atribut yang memberikan teks alternatif.
* `width` adalah atribut yang menentukan lebar gambar.
### Contoh Kode HTML Sederhana
Berikut adalah contoh kode HTML lengkap untuk membuat halaman web sederhana:
```html
<!DOCTYPE html>
<html>
<head>
<title>Halaman Web Sederhana</title>
</head>
<body>
<h1>Selamat Datang di Halaman Saya!</h1>
<p>Ini adalah contoh halaman web menggunakan HTML.</p>
<img src="gambar.jpg" alt="Contoh gambar">
<a href="https://www.example.com">Kunjungi Example</a>
</body>
</html>
```
### Tips Belajar HTML
* **Praktik Langsung:** Coba buat halaman web sendiri dengan berbagai elemen HTML.
* **Referensi:** Gunakan dokumentasi HTML online seperti MDN Web Docs.
* **Inspeksi Elemen:** Gunakan fitur "Inspect Element" di browser untuk melihat kode HTML dari halaman web yang ada.
* **Eksperimen:** Jangan takut mencoba hal-hal baru dan memodifikasi kode yang ada.
Semoga catatan ini membantumu memahami dasar-dasar pemrograman web dengan HTML ya! Selamat belajar dan mencoba!
0 komentar:
Posting Komentar