Studi Kasus: Halaman Portfolio

Bagian ini merangkum penerapan berbagai elemen HTML dalam sebuah proyek kecil: website portfolio sederhana yang terdiri dari tiga halaman (index.html, projek.html, dan kontak.html).

Halaman Home (`index.html`)

Struktur Semantik

Halaman utama menggunakan elemen:

<header> dengan judul nama dan navigasi.
<main> dengan dua <section>: teks profil dan gambar.
<footer> untuk copyright.

Potongan kode:


<header>
  <a href="/">
    <h1 class="profile-name">Muhammad Satrio</h1>
  </a>
  <nav>
    <a href="/">Home</a>
    <a href="projek.html">Projek</a>
    <a href="kontak.html">Kontak</a>
  </nav>
</header>
 
<main class="profile-container">
  <section>
    <h2 class="profile-title">Hi, I'm Rio</h2>
    <p class="profile-subtitle">
      Lorem ipsum dolor sit amet consectetur adipisicing elit...
    </p>
  </section>
  <section>
    <img
      class="profile-image"
      src="images/profile.webp"
      alt="Muhammad Satrio Profile Picture"
      title="Muhammad Satrio"
      width="300"
    />
  </section>
</main>
 
<footer>
  <p>&copy; 2025 Muhammad Satrio</p>
</footer>

Konsep yang digunakan:

Heading (<h1>, <h2>).
Paragraf (<p>).
Gambar (<img> dengan alt, title, width).
Navigasi dengan link (<nav> dan <a>).

Halaman Projek (`projek.html`)

Halaman projek menampilkan daftar projek menggunakan kombinasi struktur semantik dan layout berbasis card.

Struktur utama:

<header>: sama seperti halaman lain.
<main> dengan class project-container.
<section class="project-list">: berisi beberapa project-card.

Potongan kode utama:


<main class="project-container">
  <h2 class="project-title">Projek Saya</h2>
  <p class="project-subtitle">
    Lorem ipsum dolor sit amet consectetur adipisicing elit...
  </p>
 
  <section class="project-list">
    <div class="project-card">
      <div class="project-image-container">
        <img src="images/html-banner.svg" alt="Thumbnail Project 1" />
      </div>
      <div class="project-content">
        <h3 class="project-name">Project 1</h3>
        <div class="project-body">
          <p class="project-description">
            Lorem ipsum dolor sit amet consectetur adipisicing elit...
          </p>
          <a href="https://github.com" class="project-link">View More &gt;</a>
        </div>
      </div>
    </div>
    <!-- card lainnya serupa -->
  </section>
</main>

Konsep yang terlihat:

Card project dibangun dengan <div> dan diatur stylenya dengan CSS.
Gambar thumbnail menggunakan file SVG.
Link menuju repository (contoh ke GitHub).

Halaman Kontak (`kontak.html`)

Halaman kontak menggabungkan teks penjelasan dan form kontak di satu halaman.

Struktur:

<header> dengan navigasi.
<main class="contact-container"> yang berisi:
- <div class="contact-info">: teks informasi.
- <form class="contact-form">: form input.

Potongan kode:


<main class="contact-container">
  <div class="contact-info">
    <h2 class="contact-title">Hubungi Saya</h2>
    <p class="contact-subtitle">
      Lorem ipsum dolor sit amet consectetur adipisicing elit...
    </p>
  </div>
 
  <form class="contact-form">
    <label for="nama">Nama</label>
    <input
      type="text"
      id="nama"
      name="nama"
      placeholder="Masukkan nama Anda"
      required
    />
 
    <label for="email">Email</label>
    <input
      type="email"
      id="email"
      name="email"
      placeholder="Masukkan email Anda"
      required
    />
 
    <label for="pesan">Pesan</label>
    <textarea
      id="pesan"
      name="pesan"
      placeholder="Tulis pesan Anda di sini..."
    ></textarea>
 
    <button type="submit">Kirim</button>
  </form>
</main>

Materi HTML yang diterapkan:

Struktur semantik halaman.
Heading dan paragraf.
Link navigasi.
Form dengan label, input, textarea, dan button.

Studi kasus ini menunjukkan bagaimana materi HTML dasar diterapkan secara utuh dalam sebuah website kecil.

Studi Kasus: Halaman Portfolio

Halaman Home (index.html)

Struktur Semantik

Halaman Projek (projek.html)

Halaman Kontak (kontak.html)

Halaman Home (`index.html`)

Halaman Projek (`projek.html`)

Halaman Kontak (`kontak.html`)