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! 😊
Komentar
Posting Komentar