PERTEMUAN 02 · HTML DASAR

Halaman profil, tahap demi tahap

Lanjutkan satu file index.html dari kerangka kosong sampai halaman profil lengkap.

Cara mengikuti: kerjakan sesuai urutan, simpan, lalu refresh browser. Ganti nama, foto, minat, dan target dengan milik sendiri. Area hijau pada kode lengkap menandai bagian yang ditambahkan atau ditata ulang; area tersebut dapat memuat konten lama yang tetap dipertahankan.

Gunakan kode lengkap untuk membandingkan hasil. Jika menyalinnya, ganti seluruh isi index.html, lalu sesuaikan kembali identitas Anda; jangan menempelkannya di bawah dokumen yang sudah ada.

PRAKTIKUM 01 · LANJUTKAN INDEX.HTML

Tahap 01 — Membuat Halaman HTML

Langkah kerja

Buat folder pertemuan-02-nim, lalu buka folder tersebut di Visual Studio Code.
Buat index.html dan isi kerangka HTML di bawah.
Ganti Nama Mahasiswa pada title dengan nama sendiri. Simpan dan buka file melalui browser.

Kerangka awal

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
</head>
<body>

</body>
</html>

Seluruh tahap menggunakan file index.html yang sama. Tidak perlu membuat file latihan terpisah.

Cek hasil: File index.html dapat dibuka dan judul tab sesuai nama Anda.

Kode lengkap setelah tahap 01

<!-- LANGKAH TAHAP 01
1. Buat folder bernama pertemuan-02-nim.
2. Buka folder tersebut melalui Visual Studio Code.
3. Buat file baru bernama index.html.
4. Isi index.html dengan kerangka berikut.
-->

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
</head>
<body>

</body>
</html>

Tahap 02 →

PRAKTIKUM 02 · LANJUTKAN INDEX.HTML

Tahap 02 — Heading

Langkah kerja

Lanjutkan index.html yang sama. Tambahkan heading di dalam body.
Gunakan nama, program studi, dan institusi sendiri pada h1, h2, dan h3.
Simpan, refresh browser, lalu bandingkan ukuran heading.

Bagian yang ditambahkan atau ditata ulang

<h1>Nama Mahasiswa</h1>
<h2>Mahasiswa Bisnis Digital</h2>
<h3>Institut Bisnis dan Teknologi Indonesia</h3>

Gunakan heading berdasarkan tingkat judul. CSS akan dipelajari pada pertemuan berikutnya.

Cek hasil: Identitas tampil sebagai heading dengan tingkatan berbeda.

Kode lengkap setelah tahap 02

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
</head>
<body>
  <!-- DITAMBAHKAN PADA TAHAP 02 -->
  <h1>Nama Mahasiswa</h1>
  <h2>Mahasiswa Bisnis Digital</h2>
  <h3>Institut Bisnis dan Teknologi Indonesia</h3>
  <!-- AKHIR TAMBAHAN TAHAP 02 -->
</body>
</html>

← Tahap 01 Tahap 03 →

PRAKTIKUM 03 · LANJUTKAN INDEX.HTML

Tahap 03 — Paragraf dan Format Teks

Langkah kerja

Setelah heading identitas, tambahkan judul Tentang Saya serta dua paragraf.
Gunakan strong untuk penekanan penting dan em untuk penekanan dalam kalimat.
Sesuaikan ceritanya dengan diri sendiri. Heading yang sudah ada tetap dipertahankan.

Bagian yang ditambahkan atau ditata ulang

<h2>Tentang Saya</h2>
<p>
  Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik
  mempelajari pengembangan web.
</p>
<p>
  Saya ingin membuat halaman yang
  <em>rapi dan mudah dipahami</em>.
</p>

Tambahkan judul Tentang Saya sekarang agar tahap semantik nanti hanya menata pembungkus.

Cek hasil: Dua paragraf tampil dengan strong dan em pada bagian yang tepat.

Kode lengkap setelah tahap 03

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
</head>
<body>
  <h1>Nama Mahasiswa</h1>
  <h2>Mahasiswa Bisnis Digital</h2>
  <h3>Institut Bisnis dan Teknologi Indonesia</h3>

  <!-- DITAMBAHKAN PADA TAHAP 03 -->
  <h2>Tentang Saya</h2>
  <p>
    Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik
    mempelajari pengembangan web.
  </p>
  <p>
    Saya ingin membuat halaman yang
    <em>rapi dan mudah dipahami</em>.
  </p>
  <!-- AKHIR TAMBAHAN TAHAP 03 -->
</body>
</html>

← Tahap 02 Tahap 04 →

PRAKTIKUM 04 · LANJUTKAN INDEX.HTML

Tahap 04 — Tautan Eksternal

Langkah kerja

Di bawah paragraf, tambahkan judul Tautan dan satu link eksternal.
Isi href dengan alamat lengkap yang dimulai https://.
Klik link di browser dan pastikan menuju website yang dimaksud.

Bagian yang ditambahkan atau ditata ulang

<h2>Tautan</h2>
<p>
  <a href="https://instiki.ac.id">
    Kunjungi website INSTIKI
  </a>
</p>

Link ini menuju website lain. Link ke bagian halaman sendiri dipelajari setelah section dan id tersedia.

Cek hasil: Link eksternal dapat diklik dan menuju alamat yang benar.

Kode lengkap setelah tahap 04

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
</head>
<body>
  <h1>Nama Mahasiswa</h1>
  <h2>Mahasiswa Bisnis Digital</h2>
  <h3>Institut Bisnis dan Teknologi Indonesia</h3>

  <h2>Tentang Saya</h2>
  <p>
    Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik
    mempelajari pengembangan web.
  </p>
  <p>
    Saya ingin membuat halaman yang
    <em>rapi dan mudah dipahami</em>.
  </p>

  <!-- DITAMBAHKAN PADA TAHAP 04 -->
  <h2>Tautan</h2>
  <p>
    <a href="https://instiki.ac.id">
      Kunjungi website INSTIKI
    </a>
  </p>
  <!-- AKHIR TAMBAHAN TAHAP 04 -->
</body>
</html>

← Tahap 03 Tahap 05 →

PRAKTIKUM 05 · LANJUTKAN INDEX.HTML

Tahap 05 — Gambar dan Folder Aset

Langkah kerja

Buat folder assets/images di dalam folder proyek.
Masukkan foto sendiri dengan nama foto.jpg. Pastikan ekstensi sebenarnya sama dengan src.
Letakkan img setelah judul Tentang Saya, sebelum paragraf. Isi alt dengan keterangan foto sendiri.

pertemuan-02-nim/
├── index.html
└── assets/
    └── images/
        └── foto.jpg

Bagian yang ditambahkan atau ditata ulang

<img
  src="assets/images/foto.jpg"
  alt="Foto profil Nama Mahasiswa"
  width="220"
>

Urutan yang dipertahankan: judul Tentang Saya, foto, lalu paragraf.

Cek hasil: Foto muncul sebelum paragraf dan alt menjelaskan isi gambar.

Kode lengkap setelah tahap 05

<!-- STRUKTUR FOLDER TAHAP 05
pertemuan-02-nim/
├── index.html
└── assets/
    └── images/
        └── foto.jpg
-->

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
</head>
<body>
  <h1>Nama Mahasiswa</h1>
  <h2>Mahasiswa Bisnis Digital</h2>
  <h3>Institut Bisnis dan Teknologi Indonesia</h3>

  <h2>Tentang Saya</h2>

  <!-- DITAMBAHKAN PADA TAHAP 05 -->
  <img
    src="assets/images/foto.jpg"
    alt="Foto profil Nama Mahasiswa"
    width="220"
  >
  <!-- AKHIR TAMBAHAN TAHAP 05 -->
  <p>
    Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik
    mempelajari pengembangan web.
  </p>
  <p>
    Saya ingin membuat halaman yang
    <em>rapi dan mudah dipahami</em>.
  </p>

  <h2>Tautan</h2>
  <p>
    <a href="https://instiki.ac.id">
      Kunjungi website INSTIKI
    </a>
  </p>
</body>
</html>

← Tahap 04 Tahap 06 →

PRAKTIKUM 06 · LANJUTKAN INDEX.HTML

Tahap 06 — Daftar Tidak Berurutan

Langkah kerja

Sebelum bagian Tautan, tambahkan judul Minat Saya.
Gunakan ul sebagai pembungkus dan li untuk tiap minat.
Isi paling sedikit tiga minat pribadi, lalu cek simbol daftar di browser.

Bagian yang ditambahkan atau ditata ulang

<h2>Minat Saya</h2>
<ul>
  <li>Desain web</li>
  <li>Digital marketing</li>
  <li>Fotografi produk</li>
</ul>

ul dipakai untuk kumpulan poin yang tidak membutuhkan urutan.

Cek hasil: Minat pribadi tampil sebagai daftar tanpa penomoran.

Kode lengkap setelah tahap 06

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
</head>
<body>
  <h1>Nama Mahasiswa</h1>
  <h2>Mahasiswa Bisnis Digital</h2>
  <h3>Institut Bisnis dan Teknologi Indonesia</h3>

  <h2>Tentang Saya</h2>
  <img
    src="assets/images/foto.jpg"
    alt="Foto profil Nama Mahasiswa"
    width="220"
  >

  <p>
    Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik
    mempelajari pengembangan web.
  </p>
  <p>
    Saya ingin membuat halaman yang
    <em>rapi dan mudah dipahami</em>.
  </p>

  <!-- DITAMBAHKAN PADA TAHAP 06 -->
  <h2>Minat Saya</h2>
  <ul>
    <li>Desain web</li>
    <li>Digital marketing</li>
    <li>Fotografi produk</li>
  </ul>

  <!-- AKHIR TAMBAHAN TAHAP 06 -->

  <h2>Tautan</h2>
  <p>
    <a href="https://instiki.ac.id">
      Kunjungi website INSTIKI
    </a>
  </p>
</body>
</html>

← Tahap 05 Tahap 07 →

PRAKTIKUM 07 · LANJUTKAN INDEX.HTML

Tahap 07 — Daftar Berurutan

Langkah kerja

Setelah Minat Saya dan sebelum Tautan, tambahkan Target Belajar.
Gunakan ol dengan tiga li berisi target sendiri.
Perhatikan penomoran otomatis. Daftar minat sebelumnya tetap menggunakan ul.

Bagian yang ditambahkan atau ditata ulang

<h2>Target Belajar</h2>
<ol>
  <li>Memahami struktur HTML</li>
  <li>Menguasai CSS dasar</li>
  <li>Membuat website pribadi</li>
</ol>

ol dipakai ketika urutan atau penomoran bermakna.

Cek hasil: Target belajar tampil sebagai daftar bernomor.

Kode lengkap setelah tahap 07

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
</head>
<body>
  <h1>Nama Mahasiswa</h1>
  <h2>Mahasiswa Bisnis Digital</h2>
  <h3>Institut Bisnis dan Teknologi Indonesia</h3>

  <h2>Tentang Saya</h2>
  <img
    src="assets/images/foto.jpg"
    alt="Foto profil Nama Mahasiswa"
    width="220"
  >

  <p>
    Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik
    mempelajari pengembangan web.
  </p>
  <p>
    Saya ingin membuat halaman yang
    <em>rapi dan mudah dipahami</em>.
  </p>

  <h2>Minat Saya</h2>
  <ul>
    <li>Desain web</li>
    <li>Digital marketing</li>
    <li>Fotografi produk</li>
  </ul>

  <!-- DITAMBAHKAN PADA TAHAP 07 -->
  <h2>Target Belajar</h2>
  <ol>
    <li>Memahami struktur HTML</li>
    <li>Menguasai CSS dasar</li>
    <li>Membuat website pribadi</li>
  </ol>
  <!-- AKHIR TAMBAHAN TAHAP 07 -->

  <h2>Tautan</h2>
  <p>
    <a href="https://instiki.ac.id">
      Kunjungi website INSTIKI
    </a>
  </p>
</body>
</html>

← Tahap 06 Tahap 08 →

PRAKTIKUM 08 · LANJUTKAN INDEX.HTML

Tahap 08 — Elemen Header

Langkah kerja

Bungkus tiga heading identitas yang sudah ada dengan header id="beranda".
Pertahankan isi heading. Anda menambahkan pembungkus, bukan membuat identitas kedua.
Tutup header sebelum bagian Tentang Saya. Simpan dan periksa isi tetap tampil.

Bagian yang ditambahkan atau ditata ulang

<header id="beranda">
  <h1>Nama Mahasiswa</h1>
  <h2>Mahasiswa Bisnis Digital</h2>
  <h3>Institut Bisnis dan Teknologi Indonesia</h3>
</header>

Perubahan semantik tidak harus mengubah tampilan visual di browser.

Cek hasil: Hanya ada satu kelompok identitas di dalam header.

Kode lengkap setelah tahap 08

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
</head>
<body>
  <!-- DITAMBAHKAN PADA TAHAP 08 -->
  <header id="beranda">
    <h1>Nama Mahasiswa</h1>
    <h2>Mahasiswa Bisnis Digital</h2>
    <h3>Institut Bisnis dan Teknologi Indonesia</h3>
  </header>
  <!-- AKHIR TAMBAHAN TAHAP 08 -->

  <h2>Tentang Saya</h2>
  <img
    src="assets/images/foto.jpg"
    alt="Foto profil Nama Mahasiswa"
    width="220"
  >
  <p>
    Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik
    mempelajari pengembangan web.
  </p>
  <p>
    Saya ingin membuat halaman yang
    <em>rapi dan mudah dipahami</em>.
  </p>

  <h2>Minat Saya</h2>
  <ul>
    <li>Desain web</li>
    <li>Digital marketing</li>
    <li>Fotografi produk</li>
  </ul>

  <h2>Target Belajar</h2>
  <ol>
    <li>Memahami struktur HTML</li>
    <li>Menguasai CSS dasar</li>
    <li>Membuat website pribadi</li>
  </ol>

  <h2>Tautan</h2>
  <p>
    <a href="https://instiki.ac.id">
      Kunjungi website INSTIKI
    </a>
  </p>
</body>
</html>

← Tahap 07 Tahap 09 →

PRAKTIKUM 09 · LANJUTKAN INDEX.HTML

Tahap 09 — Elemen Main dan Section

Langkah kerja

Tambahkan main setelah header untuk membungkus konten utama yang sudah ada.
Kelompokkan Tentang Saya beserta foto dan paragraf dalam section id="profil".
Bungkus bagian lainnya dengan section ber-id minat, target, dan tautan.
Pertahankan urutan dan isinya. Tahap ini menata struktur, bukan menambahkan ulang konten.

Struktur pembungkus

<main>
  <section id="profil">
    <!-- Judul Tentang Saya, foto, dan paragraf yang sudah ada -->
  </section>
  <section id="minat">
    <!-- Judul Minat Saya dan ul yang sudah ada -->
  </section>
  <section id="target">
    <!-- Judul Target Belajar dan ol yang sudah ada -->
  </section>
  <section id="tautan">
    <!-- Judul Tautan dan link eksternal yang sudah ada -->
  </section>
</main>

Contoh struktur memakai komentar sebagai penunjuk lokasi. Jangan menghapus konten lama; lihat kode lengkap bila ragu.

Cek hasil: Konten tetap lengkap dan berurutan dalam main serta empat section.

Kode lengkap setelah tahap 09

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
</head>
<body>
  <header id="beranda">
    <h1>Nama Mahasiswa</h1>
    <h2>Mahasiswa Bisnis Digital</h2>
    <h3>Institut Bisnis dan Teknologi Indonesia</h3>
  </header>

  <!-- DITAMBAHKAN PADA TAHAP 09 -->
  <main>
    <section id="profil">
      <h2>Tentang Saya</h2>
      <img
        src="assets/images/foto.jpg"
        alt="Foto profil Nama Mahasiswa"
        width="220"
      >
      <p>
        Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik
        mempelajari pengembangan web.
      </p>
      <p>
        Saya ingin membuat halaman yang
        <em>rapi dan mudah dipahami</em>.
      </p>
    </section>

    <section id="minat">
      <h2>Minat Saya</h2>
      <ul>
        <li>Desain web</li>
        <li>Digital marketing</li>
        <li>Fotografi produk</li>
      </ul>
    </section>

    <section id="target">
      <h2>Target Belajar</h2>
      <ol>
        <li>Memahami struktur HTML</li>
        <li>Menguasai CSS dasar</li>
        <li>Membuat website pribadi</li>
      </ol>
    </section>

    <section id="tautan">
      <h2>Tautan</h2>
      <p>
        <a href="https://instiki.ac.id">
          Kunjungi website INSTIKI
        </a>
      </p>
    </section>
  </main>
  <!-- AKHIR TAMBAHAN TAHAP 09 -->
</body>
</html>

← Tahap 08 Tahap 10 →

PRAKTIKUM 10 · LANJUTKAN INDEX.HTML

Tahap 10 — Elemen Footer

Langkah kerja

Tambahkan footer setelah penutup main dan sebelum penutup body.
Isi keterangan hak cipta, nama sendiri, dan keterangan praktikum.
Pertahankan seluruh isi header dan main.

Bagian yang ditambahkan atau ditata ulang

<footer>
  <p>
    &copy; 2026 Nama Mahasiswa.
    Dibuat untuk praktikum Web Programming.
  </p>
</footer>

Footer berada di luar main tetapi masih di dalam body.

Cek hasil: Footer tampil di bawah konten utama dengan nama sendiri.

Kode lengkap setelah tahap 10

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
</head>
<body>
  <header id="beranda">
    <h1>Nama Mahasiswa</h1>
    <h2>Mahasiswa Bisnis Digital</h2>
    <h3>Institut Bisnis dan Teknologi Indonesia</h3>
  </header>

  <main>
    <section id="profil">
      <h2>Tentang Saya</h2>
      <img
        src="assets/images/foto.jpg"
        alt="Foto profil Nama Mahasiswa"
        width="220"
      >
      <p>
        Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik
        mempelajari pengembangan web.
      </p>
      <p>
        Saya ingin membuat halaman yang
        <em>rapi dan mudah dipahami</em>.
      </p>
    </section>

    <section id="minat">
      <h2>Minat Saya</h2>
      <ul>
        <li>Desain web</li>
        <li>Digital marketing</li>
        <li>Fotografi produk</li>
      </ul>
    </section>

    <section id="target">
      <h2>Target Belajar</h2>
      <ol>
        <li>Memahami struktur HTML</li>
        <li>Menguasai CSS dasar</li>
        <li>Membuat website pribadi</li>
      </ol>
    </section>

    <section id="tautan">
      <h2>Tautan</h2>
      <p>
        <a href="https://instiki.ac.id">
          Kunjungi website INSTIKI
        </a>
      </p>
    </section>
  </main>

  <!-- DITAMBAHKAN PADA TAHAP 10 -->
  <footer>
    <p>
      &copy; 2026 Nama Mahasiswa.
      Dibuat untuk praktikum Web Programming.
    </p>
  </footer>
  <!-- AKHIR TAMBAHAN TAHAP 10 -->
</body>
</html>

← Tahap 09 Tahap 11 →

PRAKTIKUM 11 · LANJUTKAN INDEX.HTML

Tahap 11 — Navigasi Internal dan Hasil Akhir

Langkah kerja

Di dalam header, setelah heading identitas, tambahkan nav.
Cocokkan href #profil, #minat, #target, dan #tautan dengan id section yang sudah ada.
Tambahkan link #beranda di bagian Tautan untuk kembali ke header.
Uji semua link. Jika halaman terlalu pendek untuk bergeser, kecilkan tinggi browser; pastikan id tetap cocok.

Bagian yang ditambahkan atau ditata ulang

  <nav aria-label="Navigasi utama">
    <a href="#profil">Profil</a> |
    <a href="#minat">Minat</a> |
    <a href="#target">Target Belajar</a> |
    <a href="#tautan">Tautan</a>
  </nav>

    <p><a href="#beranda">Kembali ke bagian atas</a></p>

Kode lengkap tahap ini menunjukkan hasil seluruh proses. Personalisasi tetap menggunakan identitas Anda.

Cek hasil: Navigasi internal cocok dengan id; seluruh konten tetap lengkap.

Kode lengkap setelah tahap 11

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
</head>
<body>
  <header id="beranda">
    <h1>Nama Mahasiswa</h1>
    <h2>Mahasiswa Bisnis Digital</h2>
    <h3>Institut Bisnis dan Teknologi Indonesia</h3>

    <!-- DITAMBAHKAN PADA TAHAP 11 -->
    <nav aria-label="Navigasi utama">
      <a href="#profil">Profil</a> |
      <a href="#minat">Minat</a> |
      <a href="#target">Target Belajar</a> |
      <a href="#tautan">Tautan</a>
    </nav>
    <!-- AKHIR TAMBAHAN NAVIGASI TAHAP 11 -->
  </header>

  <main>
    <section id="profil">
      <h2>Tentang Saya</h2>
      <img
        src="assets/images/foto.jpg"
        alt="Foto profil Nama Mahasiswa"
        width="220"
      >
      <p>
        Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik
        mempelajari pengembangan web.
      </p>
      <p>
        Saya ingin membuat halaman yang
        <em>rapi dan mudah dipahami</em>.
      </p>

    </section>

    <section id="minat">
      <h2>Minat Saya</h2>
      <ul>
        <li>Desain web</li>
        <li>Digital marketing</li>
        <li>Fotografi produk</li>
      </ul>
    </section>

    <section id="target">
      <h2>Target Belajar</h2>
      <ol>
        <li>Memahami struktur HTML</li>
        <li>Menguasai CSS dasar</li>
        <li>Membuat website pribadi</li>
      </ol>
    </section>

    <section id="tautan">
      <h2>Tautan</h2>
      <p>
        <a href="https://instiki.ac.id">
          Kunjungi website INSTIKI
        </a>
      </p>

      <!-- DITAMBAHKAN PADA TAHAP 11 -->
      <p><a href="#beranda">Kembali ke bagian atas</a></p>
      <!-- AKHIR TAMBAHAN TAHAP 11 -->
    </section>
  </main>

  <footer>
    <p>
      &copy; 2026 Nama Mahasiswa.
      Dibuat untuk praktikum Web Programming.
    </p>
  </footer>
</body>
</html>

← Tahap 10 Lihat contoh hasil pertemuan