Membuat Website Daftar Film Favorit dengan HTML Sederhana

Home » Tutorials

Halo teman-teman!

Setelah belajar berbagai elemen HTML seperti heading, paragraf, dan void elements, sekarang waktunya kita menggabungkan semuanya dalam sebuah proyek sederhana. Kita akan membuat website daftar film favorit!

Proyek ini seru banget karena kalian bisa menampilkan film-film yang kalian suka, sekaligus melatih kemampuan HTML. Yuk, kita mulai!

Tujuan Proyek

Website yang akan kita buat adalah daftar film favorit kalian. Minimal harus ada:

Judul utama menggunakan <h1>.
Subjudul menggunakan <h2>.
Garis pemisah menggunakan <hr>.
Daftar tiga film favorit menggunakan <h3>.
Deskripsi kenapa kalian suka film tersebut dalam sebuah paragraf (<p>).

Langkah-Langkah Membuat Website

1. Buat Struktur Dasar HTML

Kita mulai dengan membuat file baru bernama index.html, lalu tambahkan struktur dasar HTML seperti ini:

<!DOCTYPE html>
<html>
<head>
    <title>Film Favoritku</title>
</head>
<body>
</body>
</html>

2. Tambahkan Judul Utama

Gunakan <h1> untuk membuat judul utama. Misalnya:

<h1>Film Favoritku Sepanjang Masa</h1>

3. Tambahkan Subjudul

Gunakan <h2> untuk subjudul. Misalnya:

<h2>3 Film yang Harus Kamu Tonton!</h2>

4. Tambahkan Garis Pemisah

Gunakan <hr> untuk memisahkan bagian judul dari daftar film.

<hr>

5. Tambahkan Daftar Film

Gunakan <h3> untuk nama film, dan <p> untuk deskripsi kenapa kalian suka film tersebut.

Contohnya:

<h3>Spirited Away</h3>
<p>Film animasi dengan visual memukau dan cerita yang penuh makna. Salah satu karya terbaik Studio Ghibli!</p>

<h3>Ex Machina</h3>
<p>Sebuah film sci-fi yang cerdas dan menegangkan. Aku suka konsep AI-nya yang sangat menarik!</p>

<h3>Drive</h3>
<p>Film ini memiliki sinematografi yang luar biasa dan cerita yang emosional. Ryan Gosling benar-benar memukau!</p>

Hasil Akhir Kodenya

Setelah semua langkah selesai, file HTML kalian akan terlihat seperti ini:

<!DOCTYPE html>
<html>
<head>
    <title>Film Favoritku</title>
</head>
<body>
    <h1>Film Favoritku Sepanjang Masa</h1>
    <h2>3 Film yang Harus Kamu Tonton!</h2>
    <hr>
    <h3>Spirited Away</h3>
    <p>Film animasi dengan visual memukau dan cerita yang penuh makna. Salah satu karya terbaik Studio Ghibli!</p>
    <h3>Ex Machina</h3>
    <p>Sebuah film sci-fi yang cerdas dan menegangkan. Aku suka konsep AI-nya yang sangat menarik!</p>
    <h3>Drive</h3>
    <p>Film ini memiliki sinematografi yang luar biasa dan cerita yang emosional. Ryan Gosling benar-benar memukau!</p>
</body>
</html>

Tugas Tambahan

Kreasikan website kalian! Tambahkan elemen-elemen lain seperti break (<br>), lebih banyak paragraf, atau bahkan daftar film tambahan.
Screenshot hasil kalian! Cobalah lihat hasilnya di browser, lalu ambil tangkapan layar untuk menunjukkan kreasi kalian.

Kesimpulan
Proyek ini adalah cara seru untuk mempraktikkan dasar-dasar HTML. Selain belajar, kalian juga bisa berbagi rekomendasi film favorit dengan teman-teman!

Sampai jumpa di pelajaran berikutnya, di mana kita akan melangkah lebih jauh dengan HTML. Selamat mencoba!