Membuat Website Undangan Ulang Tahun Sederhana dengan HTML

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:

  1. Judul untuk memberitahukan bahwa ini adalah ulang tahun kalian.
  2. Gambar bertema ulang tahun.
  3. Daftar barang yang tamu perlu bawa.
  4. 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

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

Kustomisasi Tambahan

  1. Ubah Gambar: Ganti URL di src dengan gambar yang lebih personal.
  2. Daftar Tambahan: Tambahkan item lain di daftar, misalnya "topi pesta" atau "kamera."
  3. 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

Postingan Populer

Gambar

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...

Halo teman-teman! Kali ini, kita akan belajar bagaimana membuat website multi-halaman . Kalau sebelumnya kita hanya membuat satu halaman HTML saja, sekarang kita akan menambahkan halaman lain, seperti halaman "About" dan "Contact". Yuk, kita mulai! Apa Itu Website Multi-Halaman? Website multi-halaman adalah situs yang memiliki lebih dari satu file HTML. Contohnya: Halaman utama: index.html Halaman tentang: about.html Halaman kontak: contact.html Semua file ini disimpan dalam satu Project folder . Folder ini juga bisa berisi gambar, file CSS, atau file lainnya yang mendukung website. Cara Menautkan Halaman dengan Anchor Tag Untuk berpindah antar halaman, kita menggunakan anchor tag ( <a> ). Contoh: <a href="./about.html">Tentang Kami</a> Kode di atas akan membuat link yang mengarahkan pengguna ke file about.html . Catatan: ./ : Artinya file ada di folder yang sama dengan index.html . Kalau file ada di folder lain, gunak...

Gambar

Sebagai salah satu ruangan yang paling bekerja keras dan seringkali paling terlihat di rumah, perpaduan antara bentuk dan fungsi adalah kunci di dapur. Dapur yang indah dan fungsional dapat menjadi tempat yang menyenangkan untuk memasak, makan, dan berkumpul bersama keluarga dan teman.  Dalam postingan blog ini, saya akan membahas tujuh tren dapur teratas untuk tahun 2024. Tren-tren ini menggabungkan keindahan dan fungsionalitas untuk menciptakan dapur yang sempurna untuk memenuhi kebutuhan Anda. Batu alam yang tahan lama  Seiring munculnya risiko kesehatan yang terkait dengan batu buatan, pemilik rumah semakin memilih batu alam untuk lantai dan splashback mereka.  Granit khususnya mengalami "kebangkitan besar" berkat kekuatan dan daya tahannya. Granit adalah bahan yang sangat tahan lama dan tahan terhadap noda, goresan, dan suhu tinggi. Ini juga dapat dipersonalisasi dengan berbagai pola dan warna.  Dolomit dan kuarsit juga menjadi populer sebagai alternatif yang le...