Belajar HTML5: Panduan Interaktif Langkah Demi Langkah untuk Pemula

Pelajari HTML5 dengan panduan interaktif kami! Langkah demi langkah untuk pemula yang ingin menguasai web. Klik untuk mulai belajar sekarang!

By WGS INDONESIA
4.9/4.9
Indonesia
Rp 43,750.00 GRATIS
E-COURSE banner with text and icons representing Artificial Intelligence and video learning

Detail Pembelajaran

Belajar HTML5: Panduan Interaktif Langkah Demi Langkah untuk Pemula
  • Belajar HTML5, Panduan Interaktif, Pemula, Langkah Demi Langkah

Baca Online

Belajar HTML5: Panduan Interaktif Langkah Demi Langkah untuk Pemula

Daftar Isi

  1. Pengantar HTML5
  2. Struktur Dasar HTML
  3. Elemen dan Tag HTML
  4. Atribut HTML
  5. Membuat Paragraf dan Heading
  6. Menambahkan Gambar
  7. Membuat Link (Hyperlink)
  8. Membuat List (Daftar)
  9. Membuat Tabel
  10. Membuat Formulir
  11. Menambahkan Video dan Audio dengan HTML5
  12. Sumber Belajar dan Source Code

Pengantar HTML5

HTML5 adalah versi terbaru dari bahasa markup HTML yang digunakan untuk membuat halaman web. HTML5 membawa banyak fitur baru yang memudahkan pengembangan web modern, seperti dukungan multimedia, grafis, dan struktur dokumen yang lebih baik.

Dalam panduan ini, Anda akan belajar langkah demi langkah bagaimana membuat halaman web menggunakan HTML5, mulai dari struktur dasar hingga elemen-elemen penting yang sering digunakan.

Ilustrasi logo HTML5 modern berwarna oranye dengan latar belakang putih

Struktur Dasar HTML

Setiap halaman HTML memiliki struktur dasar yang harus dipahami. Berikut adalah contoh struktur dasar HTML5: 

<!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 di sini -->
  </body>
</html>

Penjelasan singkat:

  • <!DOCTYPE html> : Mendefinisikan dokumen sebagai HTML5.
  • <html lang="id"> : Elemen root dengan atribut bahasa Indonesia.
  • <head> : Bagian metadata, seperti judul dan pengaturan.
  • <body> : Tempat konten halaman ditampilkan.

Elemen dan Tag HTML

HTML terdiri dari elemen-elemen yang dibuka dan ditutup dengan tag. Contoh elemen paragraf: 

<p>Ini adalah paragraf pertama saya.</p>

Elemen bisa memiliki isi, atribut, dan bisa bersarang di dalam elemen lain.

Diagram yang menunjukkan struktur elemen HTML dengan tag pembuka dan penutup serta isi di tengah

Atribut HTML

Atribut memberikan informasi tambahan pada elemen HTML. Contoh atribut href pada tag <a> : 

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

Atribut biasanya ditulis di dalam tag pembuka dan memiliki nilai dalam tanda kutip.

Membuat Paragraf dan Heading

Paragraf dibuat dengan tag <p> , sedangkan heading menggunakan tag <h1> sampai <h6> . 

<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>

Heading membantu mengatur struktur dan hierarki konten pada halaman web.

Menambahkan Gambar

Untuk menambahkan gambar, gunakan tag <img> dengan atribut src dan alt . 

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

Contoh gambar dengan placeholder:

Gambar logo HTML5 berwarna oranye dengan latar belakang putih

Membuat List (Daftar)

Ada dua jenis list di HTML: ordered list ( <ol> ) dan unordered list ( <ul> ). 

<h3>Daftar Belanja</h3>
<ul>
  <li>Beras</li>
  <li>Gula</li>
  <li>Minyak Goreng</li>
</ul>

<h3>Langkah Pendaftaran</h3>
<ol>
  <li>Isi formulir</li>
  <li>Verifikasi email</li>
  <li>Selesai</li>
</ol>

Membuat Tabel

Tabel digunakan untuk menampilkan data dalam baris dan kolom. Contoh tabel sederhana: 

<table border="1">
  <thead>
    <tr>
      <th>Nama</th>
      <th>Umur</th>
      <th>Kota</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Andi</td>
      <td>25</td>
      <td>Jakarta</td>
    </tr>
    <tr>
      <td>Budi</td>
      <td>30</td>
      <td>Bandung</td>
    </tr>
  </tbody>
</table>
Nama Umur Kota
Andi 25 Jakarta
Budi 30 Bandung

Membuat Formulir

Formulir digunakan untuk mengumpulkan data dari pengguna. Contoh form sederhana: 

<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 />

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

Menambahkan Video dan Audio dengan HTML5

HTML5 menyediakan tag <video> dan <audio> untuk menampilkan media multimedia secara langsung di halaman web.

Contoh Video:

Contoh Audio:

Sumber Belajar dan Source Code

Berikut beberapa sumber belajar dan channel yang sangat direkomendasikan untuk memperdalam pemahaman HTML5 dan web development:

Source Code Contoh Halaman HTML5 Lengkap 

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Halaman HTML5</title>
  </head>
  <body>
    <h1>Halo Dunia</h1>
    <p>Ini adalah paragraf pertama saya.</p>
    <img src="https://placehold.co/600x300/png?text=Gambar+Contoh" alt="Gambar contoh dengan latar belakang abu-abu dan teks" />
    <a href="https://www.example.com">Kunjungi Example.com</a>
  </body>
</html>

Edukasi Terkait