Membuat Website Undangan Ulang Tahun Sederhana dengan HTML

Home » Tutorials

Website Undangan Ulang Tahun dengan HTML Sederhana

Halo teman-teman!

Kali ini, kita akan mempraktekkan semua yang sudah dipelajari untuk membuat proyek kecil: Website Undangan Ulang Tahun. Kita akan menggabungkan elemen-elemen seperti heading, gambar, list, dan link untuk menciptakan undangan digital bergaya retro. Yuk, kita mulai!

Apa yang Akan Kita Buat?

Website ini akan berisi:

Judul untuk memberitahukan bahwa ini adalah ulang tahun kalian.
Gambar bertema ulang tahun.
Daftar barang yang tamu perlu bawa.
Link ke lokasi acara menggunakan Google Maps.

Contohnya nanti akan terlihat seperti ini:

Judul: "Ayo Rayakan Ulang Tahunku!"
Gambar: Balon warna-warni.
Daftar: Kado, makanan, dan minuman.
Link: Lokasi acara di Google Maps.

Langkah Membuat Website Undangan

1. Buat File HTML Baru

Buka teks editor seperti VS Code, buat file baru, dan simpan dengan nama index.html. Tambahkan struktur dasar HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Undangan Ulang Tahun</title>
</head>
<body>
</body>
</html>

2. Tambahkan Judul

Gunakan heading <h1> untuk judul utama:

<h1>Ayo Rayakan Ulang Tahunku!</h1>

3. Tambahkan Gambar

Gunakan elemen <img> untuk menambahkan gambar bertema ulang tahun. Jangan lupa tambahkan alt text untuk deskripsi gambar:

<img src="https://via.placeholder.com/300x200" alt="Balon warna-warni untuk pesta ulang tahun" />

4. Buat Daftar Barang yang Perlu Dibawa

Gunakan elemen <ul> untuk membuat daftar barang:

<h2>Apa yang Harus Dibawa:</h2>
<ul>
    <li>Kado</li>
    <li>Makanan ringan</li>
    <li>Minuman</li>
</ul>

5. Tambahkan Link ke Lokasi

Gunakan elemen <a> untuk membuat link ke lokasi acara:

<h2>Lokasi Acara:</h2>
<a href="https://goo.gl/maps/example" target="_blank">Klik di sini untuk melihat lokasi di Google Maps</a>

6. Hasil Akhir

Gabungkan semua bagian, dan kode lengkapnya akan terlihat seperti ini:

<!DOCTYPE html>
<html>
<head>
    <title>Undangan Ulang Tahun</title>
</head>
<body>
    <h1>Ayo Rayakan Ulang Tahunku!</h1>
    <img src="https://via.placeholder.com/300x200" alt="Balon warna-warni untuk pesta ulang tahun" />
    <h2>Apa yang Harus Dibawa:</h2>
    <ul>
        <li>Kado</li>
        <li>Makanan ringan</li>
        <li>Minuman</li>
    </ul>
    <h2>Lokasi Acara:</h2>
    <a href="https://goo.gl/maps/example" target="_blank">Klik di sini untuk melihat lokasi di Google Maps</a>
</body>
</html>

Cara Menjalankan Kode

Simpan file index.html.
Klik kanan file, pilih Open With, lalu buka dengan browser seperti Google Chrome.
Kalian akan melihat website undangan ulang tahun sederhana kalian! 🎉

Kustomisasi Tambahan

Ubah Gambar: Ganti URL di src dengan gambar yang lebih personal.
Daftar Tambahan: Tambahkan item lain di daftar, misalnya "topi pesta" atau "kamera."
Link Unik: Ganti URL Google Maps dengan lokasi acara kalian.

Kesimpulan
Keren kan? Dengan hanya menggunakan HTML sederhana, kalian bisa membuat undangan ulang tahun digital yang personal dan interaktif. Jangan lupa share hasil kalian dan beri tahu kami apa yang kalian buat. Sampai jumpa di pelajaran berikutnya! 😊