Daftar Isi

Pengantar HTML dan HTML5
Struktur Dasar Dokumen HTML
Elemen dan Tag HTML
Atribut HTML Penting
Fitur Baru di HTML5
Latihan 1: Membuat Halaman Web Sederhana
Latihan 2: Formulir Kontak
Sumber Belajar dan Channel Pembelajaran

1. Pengantar HTML dan HTML5

HTML (HyperText Markup Language) adalah bahasa standar yang digunakan untuk membuat halaman web. HTML5 adalah versi terbaru yang membawa banyak fitur baru dan peningkatan untuk membuat website lebih interaktif dan modern.

Dengan mempelajari HTML dan HTML5, Anda dapat membuat struktur halaman web, menambahkan teks, gambar, tautan, dan berbagai elemen multimedia.

Ilustrasi konsep HTML dan HTML5 dengan ikon kode dan browser

2. Struktur Dasar Dokumen HTML

Setiap halaman HTML memiliki struktur dasar yang harus dipahami:

<!DOCTYPE html> : Mendefinisikan tipe dokumen sebagai HTML5.
<html> : Elemen root yang membungkus seluruh konten.
<head> : Bagian untuk metadata, judul, dan link ke file eksternal.
<body> : Bagian utama yang berisi konten yang ditampilkan di browser.

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
  </body>
</html>

3. Elemen dan Tag HTML

HTML terdiri dari elemen yang dibuka dan ditutup dengan tag. Contohnya:

<h1>...</h1> untuk judul utama.
<p>...</p> untuk paragraf.
<a>...</a> untuk tautan.
<img /> untuk gambar (self-closing tag).

Contoh penggunaan tag:

<h1>Selamat Datang</h1>
<p>Ini adalah paragraf yang menjelaskan sesuatu.</p>
<a href="https://www.example.com">Kunjungi Website</a>
<img src="https://placehold.co/150x100/png?text=Gambar+Contoh" alt="Gambar contoh sebuah pemandangan gunung dengan langit biru cerah" />

4. Atribut HTML Penting

Atribut memberikan informasi tambahan pada elemen HTML. Contoh atribut yang sering digunakan:

href pada tag <a> untuk menentukan tautan.
src dan alt pada tag <img> untuk sumber gambar dan deskripsi alternatif.
id dan class untuk identifikasi dan styling.

Contoh penggunaan atribut:

<a href="https://www.google.com" target="_blank" rel="noopener">Google</a>
<img src="https://placehold.co/200x120/png?text=Logo+Google" alt="Logo Google berwarna biru, merah, kuning, dan hijau" />

5. Fitur Baru di HTML5

HTML5 memperkenalkan banyak elemen dan fitur baru yang memudahkan pembuatan website modern, antara lain:

<header> , <footer> , <nav> , <section> , dan <article> untuk struktur semantik.
Elemen multimedia seperti <video> dan <audio> tanpa plugin tambahan.
Formulir yang lebih kaya dengan input tipe baru seperti email , date , dan range .
Canvas untuk menggambar grafik secara dinamis.

Ilustrasi fitur HTML5 modern dengan ikon video, audio, dan struktur semantik

6. Latihan 1: Membuat Halaman Web Sederhana

Mari kita buat halaman web sederhana yang menampilkan judul, paragraf, gambar, dan tautan.

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Halaman Web Sederhana</title>
  </head>
  <body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Ini adalah paragraf pertama saya yang dibuat dengan HTML.</p>
    <img src="https://placehold.co/400x200/png?text=Gambar+Website" alt="Gambar ilustrasi halaman website dengan desain sederhana dan warna biru" />
    <p>Kunjungi <a href="https://www.example.com" target="_blank" rel="noopener">situs contoh</a> untuk belajar lebih lanjut.</p>
  </body>
</html>

Hasil tampilan:

Selamat Datang di Website Saya

Ini adalah paragraf pertama saya yang dibuat dengan HTML.

Gambar ilustrasi halaman website dengan desain sederhana dan warna biru

Kunjungi situs contoh untuk belajar lebih lanjut.

7. Latihan 2: Formulir Kontak

Berikut contoh formulir kontak sederhana menggunakan elemen HTML5:

<form action="#" 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="pesan">Pesan:</label>
  <textarea id="pesan" name="pesan" rows="4" required></textarea>

  <button type="submit">Kirim</button>
</form>

Hasil tampilan formulir: