Halo teman-teman!
Di pelajaran sebelumnya, kita sudah mengenal berbagai elemen dasar HTML seperti heading, paragraf, hingga self-closing tags. Sekarang saatnya kita mempraktikkan semuanya dalam sebuah proyek mini yang seru dan mudah, yaitu Movie Ranking.
Proyek ini membantu kita membuat sebuah halaman web sederhana berisi daftar film favorit—mirip dengan cara kritikus film legendaris Roger Ebert menampilkan ulasan film di websitenya. Selain seru, proyek ini juga membantu kita mengingat film-film terbaik yang pernah kita tonton.
Apa yang Akan Kita Buat?
Kita akan membuat halaman HTML sederhana berisi:
-
Judul website menggunakan elemen
<h1> -
Subjudul menggunakan
<h2> -
Pemisah bagian menggunakan
<hr /> -
Tiga judul film favorit menggunakan
<h3> -
Deskripsi singkat kenapa kita menyukai masing-masing film menggunakan paragraf
<p>
Struktur akhirnya akan mirip seperti:
-
H1: Judul situs
-
H2: Subjudul
-
HR: Pemisah bagian
-
H3 + P untuk setiap film (total tiga kali)
Cukup sederhana, tapi sangat berguna untuk memantapkan pemahaman kita tentang HTML dasar.
Langkah-Langkah Membangun Proyek
Ayo kita susun komponen-komponen HTML sesuai instruksi dari transkrip.
1. Tambahkan Judul Utama (<h1>)
Ini adalah elemen paling penting di halaman kita. Misalnya:
<h1>Top Movies of All Time</h1>
2. Tambahkan Subjudul (<h2>)
Subjudul memberi konteks tambahan.
<h2>My Best 3 Movies</h2>
3. Tambahkan Garis Pemisah (<hr />)
Elemen ini membantu memisahkan bagian header dari konten utama.
<hr />
4. Tambahkan Daftar Film Favorit
Setiap film menggunakan <h3> dan deskripsi menggunakan <p>.
Contoh:
<h3>Spirited Away</h3>
<p>Anime favorit dengan visual indah dan cerita mendalam.</p>
<h3>Ex Machina</h3>
<p>Film sci-fi keren dengan konsep AI yang memikat.</p>
<h3>Drive</h3>
<p>Sinematografi yang sangat cantik dan suasana yang khas.</p>
Setelah ini, halaman web Anda sudah memenuhi seluruh persyaratan proyek!
Bebas Berkreasi
Setelah selesai membuat versi dasar, silakan bereksperimen:
-
Tambahkan
<br />untuk variasi layout -
Tambahkan lebih banyak deskripsi atau film
-
Ubah gaya penulisan atau urutan film
-
Bahkan bisa tambahkan puisi tentang film favorit Anda
Intinya, gunakan proyek ini sebagai arena latihan HTML dasar.
Selamat ya teman-teman! Dengan menyelesaikan proyek Movie Ranking ini, kita sudah mempraktikkan berbagai elemen penting HTML: heading, paragraf, dan self-closing tags.
Di bagian selanjutnya, kita akan lanjut belajar HTML tingkat lanjut yang lebih seru lagi. Jadi tetap semangat belajar dan eksplorasi!
Comments
Post a Comment