Panduan HTML Lanjut: Membuat Website Multi-Halaman, Tabel Kompleks, dan Multimedia

Mengelola Multi-Page (Banyak Halaman) di Website

Dalam membuat website, kita sering membutuhkan lebih dari satu halaman. Untuk membuat website dengan banyak halaman, kita perlu:

Menambahkan hyperlink di setiap file
Memasukkan nama file halaman tujuan di atribut href

Contoh Kasus

Bayangkan kita sedang mengerjakan proyek dengan kebutuhan:

Website harus memiliki 2 halaman: Home dan Picture
Halaman Home dan Picture harus saling terhubung

Solusi: Tambahkan navigasi di setiap halaman untuk berpindah antar file.

Home Page (index.html)

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Home</title>
</head>
<body>
  <main>
    <nav>
      <a href="index.html">Home</a>
      <a href="picture.html">Picture</a>
    </nav>
    <h1>Home Page</h1>
  </main>
</body>
</html>

Picture Page (picture.html)

<nav>
  <a href="index.html">Home</a>
  <a href="picture.html">Picture</a>
</nav>
<h1>Picture Page</h1>

Menyisipkan Gambar (Image) di HTML

Untuk menyisipkan gambar ke halaman HTML, gunakan tag <img>. Tag ini adalah single tag yang tidak memerlukan tag penutup.

Atribut Penting Tag Image

Atribut	Fungsi
src	Menunjukkan lokasi/sumber gambar
alt	Teks alternatif yang ditampilkan jika gambar error
width	Lebar gambar (dalam pixel atau persen)
height	Tinggi gambar (dalam pixel atau persen)

Cara Menambahkan Gambar

Metode 1 (Gambar Lokal/Static):

Download gambar dan beri nama (ingat namanya)
Letakkan gambar di folder yang sama dengan file HTML
Masukkan nama gambar di atribut src

Metode 2 (Gambar Online):

Dapatkan URL gambar dari internet
Masukkan link tersebut di atribut src

Contoh Penggunaan

<!-- Gambar lokal dengan ukuran tertentu -->
<img src="flower.jpg" alt="Bunga" width="100" height="100">

<!-- Gambar lokal tanpa ukuran -->
<img src="rose.jpg" alt="Gambar mawar">

<!-- Gambar dari internet -->
<p>
  <img 
    src="https://www.w3schools.com/images/w3schools_green.jpg" 
    alt="Contoh gambar online">
</p>

Figure dan Figcaption

Untuk memberikan keterangan pada gambar, gunakan tag <figure> dan <figcaption>:

<h4>Ini adalah gambar random</h4>
<figure>
  <img src="https://picsum.photos/100" 
       alt="Gambar Random dari Internet" 
       style="width:20%">
  <figcaption>Gambar 1 - Gambar Random Online</figcaption>
</figure>

Relative URL vs Absolute URL

Ada dua cara untuk menentukan lokasi file dalam HTML:

Relative URL

URL dengan lokasi relatif terhadap posisi file saat ini.

Contoh struktur folder:

TEST/
├── pages/
│   ├── about.html
│   └── contact.html
└── index.html

Di index.html:

<a href="pages/about.html">About</a>
<a href="pages/contact.html">Contact</a>

Di about.html (untuk kembali ke home):

<a href="../index.html">Back to Home</a>

Absolute URL

URL dengan lokasi absolute/lengkap dari root (biasanya dimulai dari disk, contoh: C:).

Di index.html:

<a href="C:\Users\HTML\pages\about.html">About</a>
<a href="C:\Users\HTML\pages\contact.html">Contact</a>

Di about.html:

<a href="C:\Users\HTML\index.html">Back to Home</a>

Rekomendasi: Gunakan Relative URL karena lebih fleksibel dan mudah dipindahkan.

Menggunakan Gambar sebagai Link

Sangat mudah menggunakan gambar sebagai link. Cukup letakkan tag image di antara tag anchor:

<a href="https://www.example.com">
  <img src="/path/to/image.jpg" alt="Klik untuk ke website"/>
</a>

Tag Picture untuk Gambar Responsif

Tag <picture> lebih fleksibel karena bisa menggunakan lebih dari satu gambar berdasarkan ukuran layar dengan atribut media.

<picture>
  <source media="(min-width: 650px)" srcset="gambar-besar.jpg">
  <source media="(min-width: 450px)" srcset="gambar-sedang.jpg">
  <img src="gambar-kecil.jpg" alt="Fallback Image" style="width: auto;"/>
</picture>

Dengan kode di atas:

Layar >= 650px akan menampilkan gambar-besar.jpg
Layar >= 450px akan menampilkan gambar-sedang.jpg
Layar kecil akan menampilkan gambar-kecil.jpg (fallback)

Menyisipkan Video di HTML

Untuk menambahkan video di halaman HTML, gunakan tag <video> dengan tag <source> di dalamnya.

Atribut Tag Video

Atribut	Fungsi
autoplay	Video otomatis diputar saat halaman dimuat
controls	Menampilkan kontrol (play, pause, volume, dll)
preload	Mengatur cara video dimuat (auto, metadata, none)
width	Lebar video
height	Tinggi video
loop	Video diputar ulang terus menerus
muted	Video dimulai tanpa suara

Contoh Penggunaan Video

<video width="320" height="240" controls autoplay>
  <source 
    src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" 
    type="video/mp4"/>
  Browser Anda tidak mendukung tag video.
</video>

Menyisipkan Audio di HTML

Untuk menambahkan audio di halaman HTML, gunakan tag <audio> dengan tag <source> di dalamnya.

Atribut Tag Audio

Atribut	Fungsi
autoplay	Audio otomatis diputar saat halaman dimuat
controls	Menampilkan kontrol audio
preload	Mengatur cara audio dimuat
loop	Audio diputar ulang terus menerus
muted	Audio dimulai tanpa suara

Contoh Penggunaan Audio

<audio controls autoplay>
  <source 
    src="http://www.sousound.com/music/healing/healing_01.mp3" 
    type="audio/mp3"/>
  Browser Anda tidak mendukung tag audio.
</audio>

Menambahkan Subtitle pada Video

Kita bisa menambahkan subtitle jika memiliki file subtitle dalam format .vtt. Gunakan tag <track> di dalam tag video atau audio.

Atribut Tag Track

Atribut	Nilai	Deskripsi
default	default	Menentukan track ini sebagai default
kind	captions, chapters, descriptions, metadata, subtitles	Menentukan jenis text track
label	text	Menentukan judul text track
src	URL	URL file track (wajib diisi)
srclang	language_code	Bahasa track (wajib jika kind="subtitles")

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles_id.vtt" kind="subtitles" srclang="id" label="Indonesian">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

Catatan: File subtitle harus dijalankan di web server lokal agar berfungsi dengan baik.

Membuat Tabel di HTML

Untuk membuat tabel di HTML, gunakan kombinasi tag berikut:

Tag	Fungsi
`<table>`	Membuat tabel
`<tr>`	Membuat baris (table row)
`<td>`	Membuat sel/kolom data (table data)
`<th>`	Membuat sel header (table header)

Contoh Tabel Sederhana

<table>
  <tr>
    <td>Baris 1: Kolom 1</td>
    <td>Baris 1: Kolom 2</td>
    <td>Baris 1: Kolom 3</td>
  </tr>
  <tr>
    <td>Baris 2: Kolom 1</td>
    <td>Baris 2: Kolom 2</td>
    <td>Baris 2: Kolom 3</td>
  </tr>
</table>

Tabel dengan Header

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

Struktur Tabel Semantik

Untuk tabel yang lebih terstruktur, gunakan tag semantik:

Tag	Fungsi
`<thead>`	Mengelompokkan bagian header tabel
`<tbody>`	Mengelompokkan bagian body/isi tabel
`<tfoot>`	Mengelompokkan bagian footer tabel

Keuntungan menggunakan tag semantik: jika tabel panjang dan dicetak, header dan footer akan muncul di setiap halaman.

<table>
  <thead>
    <tr>
      <th>NIM</th>
      <th>Nama Mahasiswa</th>
      <th>Jurusan</th>
      <th>Nilai</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001202200001</td>
      <td>John Doe</td>
      <td>Informatika</td>
      <td>90</td>
    </tr>
    <tr>
      <td>001202200002</td>
      <td>Jane Doe</td>
      <td>Informatika</td>
      <td>80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td>Total</td>
      <td>170</td>
    </tr>
  </tfoot>
</table>

Hasil Preview:

NIM	Nama Mahasiswa	Jurusan	Nilai
001202200001	John Doe	Informatika	90
001202200002	Jane Doe	Informatika	80
		Total	170

Menggabungkan Sel Tabel (Merge Cells)

Untuk menggabungkan sel, gunakan atribut colspan (gabung kolom) atau rowspan (gabung baris) dengan nilai berupa jumlah sel yang akan digabung.

Colspan - Menggabungkan Kolom

<table border="1">
  <tr>
    <td colspan="2">Kolom 1 dan 2 digabung</td>
    <td>Kolom 3</td>
  </tr>
  <tr>
    <td>Kolom 1</td>
    <td>Kolom 2</td>
    <td>Kolom 3</td>
  </tr>
</table>

Rowspan - Menggabungkan Baris

<table border="1">
  <tr>
    <td rowspan="2">Baris 1 dan 2 digabung</td>
    <td>Baris 1: Kolom 2</td>
  </tr>
  <tr>
    <td>Baris 2: Kolom 2</td>
  </tr>
</table>

Contoh Kombinasi Colspan dan Rowspan

<table border="1">
  <tr>
    <td rowspan="2">Baris 1 & 2: Kolom 1</td>
    <td colspan="2">Baris 1: Kolom 2 & 3</td>
    <td>Baris 1: Kolom 4</td>
    <td>Baris 1: Kolom 5</td>
  </tr>
  <tr>
    <td>Baris 2: Kolom 2</td>
    <td>Baris 2: Kolom 3</td>
    <td>Baris 2: Kolom 4</td>
    <td>Baris 2: Kolom 5</td>
  </tr>
</table>

Hasil Preview:

Baris 1 & 2: Kolom 1	Baris 1: Kolom 2 & 3		Baris 1: Kolom 4	Baris 1: Kolom 5
Baris 1 & 2: Kolom 1	Baris 2: Kolom 2	Baris 2: Kolom 3	Baris 2: Kolom 4	Baris 2: Kolom 5

Menambahkan Border pada Tabel

Secara default, tabel HTML tidak memiliki border. Ada beberapa cara menambahkan border:

Cara 1: Atribut border (cara lama)

<table border="1">
  ...
</table>

Cara 2: Menggunakan CSS (direkomendasikan)

Letakkan kode berikut di dalam tag <head>:

<style>
  table, tr, td, th {
    border: 1px solid black;
    border-collapse: collapse;
  }
  td, th {
    padding: 10px;
  }
</style>

Catatan: border-collapse: collapse; digunakan agar border tidak ganda.

Atribut ID dan Name

Best practice dalam membuat HTML adalah menambahkan atribut id dan/atau name pada tag HTML, terutama jika ingin membedakan atau memanipulasi elemen tersebut.

<span id="myText">Sebuah Teks</span>
<p name="myParagraph">Sebuah Paragraf</p>

Keuntungan menggunakan id dan name:

Memudahkan styling dengan CSS
Memudahkan manipulasi dengan JavaScript
Memudahkan pengolahan data form

Latihan: Membuat Tabel Kompleks

Cobalah membuat tabel seperti berikut dengan menggunakan colspan dan rowspan yang tepat:

A		B
D	E
	F

Petunjuk:

Sel A menggunakan colspan="2"
Sel B menggunakan rowspan="3"
Sel D menggunakan rowspan="2"

Kesimpulan

Dalam tutorial ini, kita telah mempelajari:

Multi-Page Handling - Cara menghubungkan beberapa halaman HTML
Menyisipkan Gambar - Tag img dengan atribut src, alt, width, height
Relative vs Absolute URL - Perbedaan dan kapan menggunakannya
Picture Tag - Gambar responsif berdasarkan ukuran layar
Video HTML5 - Tag video dengan berbagai atribut kontrol
Audio HTML5 - Tag audio untuk menyisipkan file suara
Subtitle/Track - Menambahkan subtitle pada video
Tabel HTML - Membuat tabel dengan table, tr, td, th
Struktur Tabel Semantik - thead, tbody, tfoot
Merge Cells - Menggabungkan sel dengan colspan dan rowspan

Langkah Selanjutnya: Pelajari CSS untuk mempercantik tampilan tabel dan elemen HTML lainnya!