1. **Apa itu HTML?**
- HTML (HyperText Markup Language) adalah bahasa yang digunakan untuk membuat struktur dari sebuah halaman web. HTML terdiri dari elemen-elemen yang membentuk komponen seperti teks, gambar, link, form, dan lainnya.
2. **Struktur Dasar HTML**
- Setiap halaman HTML memiliki struktur dasar berikut:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of the Document</title>
</head>
<body>
<!-- Konten HTML ada di sini -->
</body>
</html>
```
- Elemen penting dalam struktur ini:
- `<!DOCTYPE html>`: Mendefinisikan jenis dokumen sebagai HTML5.
- `<html>`: Elemen utama yang membungkus semua konten halaman.
- `<head>`: Berisi informasi metadata seperti charset, title, dan link ke stylesheet.
- `<body>`: Tempat semua konten yang ditampilkan kepada pengguna (teks, gambar, dll).
3. **Elemen Dasar HTML**
- **Heading**: Untuk judul atau heading dalam halaman web.
- Contoh:
```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
```
- **Paragraph**: Elemen untuk membuat paragraf.
- Contoh:
```html
<p>This is a paragraph of text.</p>
```
- **List**: Membuat daftar berurutan atau tidak berurutan.
- **Unordered List (ul)**:
```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
```
- **Ordered List (ol)**:
```html
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
```
- **Links**: Menambahkan hyperlink untuk navigasi.
- Contoh:
```html
<a href="https://www.example.com">Go to Example</a>
```
- **Images**: Menambahkan gambar ke halaman web.
- Contoh:
```html
<img src="image.jpg" alt="Description of the image">
```
4. **Form dan Input**
- Form digunakan untuk menerima data dari pengguna (seperti login, registrasi, dll).
- Contoh sederhana form:
```html
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
```
- **Input Types** yang sering digunakan:
- `text`, `email`, `password`, `checkbox`, `radio`, `submit`, dll.
Contoh Kode HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of the Document</title>
</head>
<body>
<!-- Konten HTML ada di sini -->
<h1>JUDUL PEMBELAJARAN FRONT END DEVELOPER</h1>
<h2> Materi Dasar HTML </h2>
<p>Dalam Materi Merupakan Pembelajaran Front End Developer. Ini adalah paragraf Teks Pertama Dalam halaman HTML</p>
<p>Dalam Materi Merupakan Pembelajaran Front End Developer. Ini adalah paragraf Teks Kedua halaman HTML</p>
<ul>
<li>Ini Daftar 1</li>
<li>Ini Daftar 2</li>
<li>Ini Daftar 3</li>
</ul>
<!-- Perbaikan pada tag <a> -->
<a href="https://chatgpt.com">Chat GPT</a>
<!-- Perbaikan pada tag <img> -->
<img src="gambar.jpg" alt="ini contoh link gambar">
<form action="/submit" method="POST">
<p>Form Pendaftaran</p>
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Daftar">
</form>
</body>
</html>