Proyek Pertemuan 11-14

Tiga Proyek Praktis: Peta, Video, dan Portofolio Interaktif

1

Proyek 1: Halaman Kontak dengan Peta

Tujuan: Proyek ini fokus pada penggunaan <iframe> untuk menyematkan konten eksternal (Google Maps) dan JavaScript internal untuk menampilkan informasi secara dinamis.

Tampilan Hasil Proyek

Lokasi Kantor Kami

Temukan kami di pusat kota.

Kode Lengkap & Penjelasan

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Kontak Kami</title>
</head>
<body>
  <h1>Lokasi Kantor Kami</h1>
  <p>Temukan kami di pusat kota.</p>
  
  <!-- Iframe untuk menyematkan peta -->
  <iframe src="..." width="100%" height="300"></iframe>
  
  <button id="tombolAlamat">Tampilkan Alamat Lengkap</button>
  <p id="infoAlamat"></p>

  <script>
    document.getElementById('tombolAlamat').addEventListener('click', () => {
      document.getElementById('infoAlamat').textContent = 'Jl. Merdeka No. 1, Jakarta Pusat';
    });
  </script>
</body>
</html>
2

Proyek 2: Halaman Pemutar Video

Tujuan: Proyek ini menunjukkan cara menyematkan video dari YouTube dan menggunakan elemen <head> untuk optimasi, seperti favicon dan meta description.

Tampilan Hasil Proyek

Video Tutorial HTML

Tonton video di bawah ini untuk belajar dasar-dasar HTML dalam 10 menit.

Kode Lengkap & Penjelasan

<!DOCTYPE html>
<html lang="id">
<head>
  <!-- Meta tags untuk SEO dan tampilan di mesin pencari -->
  <meta charset="UTF-8">
  <meta name="description" content="Belajar dasar HTML dengan video tutorial.">
  <title>Video Tutorial HTML</title>
  
  <!-- Ikon untuk tab browser -->
  <link rel="icon" href="images/favicon.png" type="image/png">
</head>
<body>
  <h1>Video Tutorial HTML</h1>
  <p>Tonton video di bawah ini untuk belajar dasar-dasar HTML dalam 10 menit.</p>
  
  <!-- Iframe untuk menyematkan video YouTube -->
  <iframe width="560" height="315" src="https://www.youtube.com/embed/kUMe1FH4CHE"></iframe>
</body>
</html>
3

Proyek 3: Portofolio dengan Skrip Eksternal

Tujuan: Proyek ini mengajarkan praktik terbaik dengan memisahkan logika JavaScript ke dalam file eksternal (.js) dan menghubungkannya ke file HTML menggunakan tag <script src="...">.

Tampilan Hasil Proyek

Foto Profil

Nama Saya

Web Developer

Kode Lengkap & Penjelasan

Anda perlu membuat dua file: portofolio.html dan scripts.js.

File: portofolio.html

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Portofolio Saya</title>
</head>
<body>
  <div id="kartu-profil">
    <img src="..." alt="Foto Profil">
    <h1 id="nama">Nama Saya</h1>
    <p id="status">Web Developer</p>
    <button id="tombolUbah">Ubah Tema</button>
  </div>
  
  <!-- Menghubungkan ke file JavaScript eksternal -->
  <script src="scripts.js"></script>
</body>
</html>

File: scripts.js

// Ambil elemen yang dibutuhkan
const tombol = document.getElementById('tombolUbah');
const nama = document.getElementById('nama');
const status = document.getElementById('status');

// Tambahkan event listener ke tombol
tombol.addEventListener('click', () => {
  // Ubah teks dan warna
  nama.textContent = 'Tema Diubah!';
  status.style.color = 'blue';
});