materi html
Tentu! Mari kita bahas materi tentang **HTML** (HyperText Markup Language) dari dasar hingga menengah.
## 1. Pengertian HTML
HTML adalah bahasa markup standar untuk membuat halaman web. HTML bukan bahasa pemrograman, melainkan bahasa markup yang menggunakan **tag** untuk mendefinisikan struktur konten.
## 2. Struktur Dasar HTML
```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman</title>
</head>
<body>
<!-- Konten halaman akan ditulis di sini -->
<h1>Selamat Datang</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>
```
## 3. Tag-Tag HTML Dasar
### Heading (Judul)
```html
<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Judul Lebih Kecil</h3>
<h4>Judul Kecil</h4>
<h5>Judul Lebih Kecil Lagi</h5>
<h6>Judul Paling Kecil</h6>
```
### Paragraf dan Teks
```html
<p>Ini adalah paragraf.</p>
<strong>Teks tebal (penting)</strong>
<b>Teks tebal (hanya visual)</b>
<em>Teks miring (penekanan)</em>
<i>Teks miring (hanya visual)</i>
<u>Teks bergaris bawah</u>
```
### Link
```html
<a href="https://www.example.com">Teks Link</a>
<a href="halaman2.html">Link ke halaman lain</a>
<a href="#section1">Link ke bagian dalam halaman</a>
```
### Gambar
```html
<img src="gambar.jpg" alt="Deskripsi gambar" width="300" height="200">
```
## 4. List (Daftar)
### Unordered List
```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
```
### Ordered List
```html
<ol>
<li>Item pertama</li>
<li>Item kedua</li>
<li>Item ketiga</li>
</ol>
```
## 5. Tabel
```html
<table border="1">
<tr>
<th>Nama</th>
<th>Usia</th>
<th>Kota</th>
</tr>
<tr>
<td>Andi</td>
<td>25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Budi</td>
<td>30</td>
<td>Bandung</td>
</tr>
</table>
```
## 6. Form
```html
<form action="/submit" method="POST">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="pesan">Pesan:</label>
<textarea id="pesan" name="pesan" rows="4"></textarea>
<label for="jenis-kelamin">Jenis Kelamin:</label>
<input type="radio" id="laki" name="jenis-kelamin" value="laki">
<label for="laki">Laki-laki</label>
<input type="radio" id="perempuan" name="jenis-kelamin" value="perempuan">
<label for="perempuan">Perempuan</label>
<button type="submit">Kirim</button>
</form>
```
## 7. Elemen Semantic HTML5
```html
<header>
<nav>Navigasi</nav>
</header>
<main>
<article>
<section>Bagian 1</section>
<section>Bagian 2</section>
</article>
<aside>Konten samping</aside>
</main>
<footer>Footer halaman</footer>
```
## 8. Atribut Penting
- `class`: Untuk styling CSS
- `id`: Identifier unik
- `style`: CSS inline
- `src`: Sumber file
- `href`: URL link
- `alt`: Teks alternatif gambar
## 9. Contoh Halaman HTML Lengkap
```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Saya</title>
<style>
body { font-family: Arial, sans-serif; }
.container { max-width: 800px; margin: 0 auto; }
</style>
</head>
<body>
<header>
<h1>Website Saya</h1>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
</header>
<main class="container">
<section id="home">
<h2>Selamat Datang</h2>
<p>Ini adalah halaman website pertama saya.</p>
<img src="welcome.jpg" alt="Gambar selamat datang" width="400">
</section>
</main>
<footer>
<p>© 2024 Website Saya. All rights reserved.</p>
</footer>
</body>
</html>
```
## 10. Best Practices
1. Selalu gunakan `<!DOCTYPE html>`
2. Gunakan atribut `alt` pada gambar
3. Gunakan elemen semantic
4. Validasi kode HTML
5. Gunakan indentasi yang konsisten
6. Komentari kode yang kompleks
Mau saya jelaskan lebih detail tentang bagian tertentu dari HTML?
Komentar
Posting Komentar