Membuat Website Daftar Film Favorit dengan HTML Sederhana

Membuat Website Daftar Film Favorit dengan HTML Sederhana

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:

  1. Judul utama menggunakan <h1>.
  2. Subjudul menggunakan <h2>.
  3. Garis pemisah menggunakan <hr>.
  4. Daftar tiga film favorit menggunakan <h3>.
  5. 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! 

Comments

Postingan Populer

Image

Superingan is a Blogger template designed with simplicity and functionality in mind, offering a clean and user-friendly platform for professional websites. This theme is perfect for various website types, including personal blogs, online magazines, news websites, and portfolios. Features: Responsive Design: Your website will look its best across all devices, from desktops and laptops to tablets and smartphones. Customizable Colors: Easily change the template's colors to match your branding or preferences. Custom Headers: Upload your own header image to add a personal touch to your website. Custom Menus: Create and manage your website's navigation menus with ease. Widget Areas: Add widgets to display additional content and features on your website's sidebar. Clean HTML & CSS Code: The template is built with clean and well-structured code, making it easy to learn and customize further. Superingan is an ideal choice for those seeking a professional website with a sim...

Image

Calculate Business Loan Payments, Interest, and Total Cost Easily and Accurately Loan Amount (USD) Annual Interest Rate (%) Loan Term (Years) Extra Monthly Payment (USD) Reset Calculate Hi everyone! If you're looking for extra capital to launch a startup or expand your existing business, it's important to know how much you'll need to repay—monthly and overall. Don’t commit to a loan without understanding the full picture. That’s where our Online Business Loan Calculator comes in handy. This tool is designed for business owners, entrepreneurs, or anyone seeking a full breakdown of a loan. It helps you calculate monthly payments, total interest, repayment period, and overall cost automatically with just a few simple inputs. How to Use the Business Loan Calculator Fill in the following fields based on your situation: Loan Amount (USD): Ent...

Hi everyone! Let’s explore CSS Grid together—a powerful feature that helps us build two-dimensional layouts on the web. In this guide, we’ll start from the basics and work our way up to controlling the size and position of elements with more flexibility. If you're already familiar with Flexbox, Grid will feel like a fun and useful complement! CSS Grid is perfect for building complex layouts like dashboards, photo galleries, or any page that requires a clean structure both horizontally and vertically. Let’s dive in! What is Grid? By adding display: grid to an element, we turn it into a grid container . While Flexbox works in one direction (horizontal or vertical), Grid works in both—columns and rows simultaneously. Grid was introduced to solve layout challenges that couldn’t easily be handled by Flexbox or older techniques like float . Think of Grid as a two-dimensional layout system that gives you full control over element placement and sizing. Why Use Grid? Great for la...