Elemen dan Tag HTML Dasar - Lummatun By Kang Mursi

Kursus: Membuat Website dari Nol

Poin 3: Elemen dan Tag HTML Dasar

Dalam bagian ini, Anda akan belajar tentang elemen dan tag HTML yang paling sering digunakan untuk membangun halaman web.

1. Apa Itu Elemen dan Tag dalam HTML?

Tag adalah tanda yang digunakan untuk menentukan elemen dalam HTML.
- Contoh: <p>, <h1>, <img>
Elemen adalah struktur yang terdiri dari tag pembuka, isi (jika ada), dan tag penutup.
- Contoh: <p>Ini adalah paragraf</p>

2. Struktur Dasar Elemen HTML

Setiap elemen HTML umumnya memiliki:

Tag Pembuka: Menandai awal elemen, misalnya <h1>.
Konten: Isi dari elemen, misalnya teks dalam paragraf.
Tag Penutup: Menandai akhir elemen, misalnya </h1>.
Elemen Self-Closing: Elemen yang tidak membutuhkan tag penutup, misalnya <img />.

3. Elemen HTML yang Paling Sering Digunakan

A. Elemen Teks

Digunakan untuk menampilkan teks pada halaman web.

Heading: <h1> sampai <h6> untuk judul dan subjudul.

<h1>Ini adalah Judul</h1>
<h2>Ini adalah Subjudul</h2>

Paragraf: <p> untuk teks biasa.
```
<p>Ini adalah paragraf pertama.</p>
```
Teks Tebal dan Miring: <b> (bold), <i> (italic), dan <strong> (teks penting).
```
<p><b>Teks Tebal</b> dan <i>Teks Miring</i></p>
```

B. Elemen Gambar dan Media

Digunakan untuk menampilkan gambar, video, dan audio.

Gambar:

<img src="gambar.jpg" alt="Deskripsi gambar">

Video:

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

C. Elemen Link dan Navigasi

Hyperlink: <a> digunakan untuk menghubungkan halaman lain.

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

Navigasi: <nav> digunakan untuk menu navigasi.

<nav>
  <a href="home.html">Home</a> |
  <a href="about.html">About</a>
</nav>

D. Elemen Daftar (List)

Daftar Tidak Berurutan (<ul>)

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

Daftar Berurutan (<ol>)

<ol>
  <li>Pertama</li>
  <li>Kedua</li>
</ol>

E. Elemen Formulir

Digunakan untuk interaksi pengguna, seperti input teks, tombol, dan lainnya.

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

4. Praktik: Membuat Halaman Web Sederhana

Peserta akan membuat halaman HTML sederhana yang berisi teks, gambar, dan tautan.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Website Sederhana</title>
</head>
<body>
  <h1>Selamat Datang di Kursus Web</h1>
  <p>Ini adalah contoh halaman web dengan HTML.</p>
  <img src="gambar.jpg" alt="Gambar contoh">
  <a href="https://www.example.com">Pelajari lebih lanjut</a>
</body>
</html>

Dengan memahami elemen-elemen dasar ini, Anda mampu membangun struktur halaman web yang baik.