Postingan

PWD 2 - Praktik Elemen HTML Lanjutan dan Navigasi Halaman Web

Diterbitkan Diperbarui
Oleh Aulia Syarif Aziz 3 menit baca

Berikut Modul Praktikum Tahap 2 Proyek dengan struktur yang sama seperti Modul Praktikum Tahap 1, sehingga konsisten untuk digunakan sebagai rangkaian modul praktikum mata kuliah Pemrograman Web Dasar.

A. Tujuan Praktikum

Setelah menyelesaikan praktikum ini, mahasiswa mampu:

  1. Membuat beberapa halaman web dalam satu proyek website.
  2. Menggunakan elemen hyperlink untuk menghubungkan antar halaman.
  3. Menyusun navigasi sederhana pada website.
  4. Menggunakan elemen list untuk menampilkan informasi terstruktur.
  5. Menampilkan gambar pada halaman web.

B. Deskripsi Proyek Semester

Mahasiswa akan membangun:

Website Company Profile & Sistem Pendaftaran Online Sederhana

Pada Tahap 2, proyek dikembangkan dengan menambahkan:

  • Halaman tambahan (multi-page website)
  • Navigasi antar halaman
  • Konten layanan perusahaan
  • Penambahan gambar pada halaman web

Output tahap ini adalah website dengan beberapa halaman yang saling terhubung.

C. Persiapan Alat dan Software

Mahasiswa wajib menyiapkan:

  1. Text Editor

    • Visual Studio Code (direkomendasikan)
    • Notepad++
    • Sublime Text

  2. Browser

    • Google Chrome
    • Mozilla Firefox

  3. Proyek dari Praktikum Tahap 1

Struktur proyek sebelumnya:

1
2
3
4
5
6

web-company-profile/
│
├── index.html
└── assets/
    ├── css/
    └── js/

D. Langkah-Langkah Praktikum

LANGKAH 1 – Menambahkan Halaman Baru

Tambahkan dua halaman baru pada folder proyek:

1
2

profil.html
layanan.html

Struktur proyek sekarang menjadi:

1
2
3
4
5
6
7
8
9

web-company-profile/
│
├── index.html
├── profil.html
├── layanan.html
│
└── assets/
    ├── css/
    └── js/

LANGKAH 2 – Membuat Struktur HTML pada Halaman Baru

Isi file profil.html dengan struktur HTML berikut:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Profil Perusahaan</title>
</head>
<body>

<h1>Profil Perusahaan</h1>

<p>
PT Maju Jaya Teknologi merupakan perusahaan yang bergerak
di bidang pengembangan perangkat lunak dan solusi digital.
</p>

</body>
</html>

Lakukan hal yang sama untuk layanan.html.

LANGKAH 3 – Membuat Navigasi Website

Buka file index.html.

Tambahkan navigasi di bagian atas halaman:

1
2
3
4
5
6
7

<nav>
    <a href="index.html">Beranda</a> |
    <a href="profil.html">Profil</a> |
    <a href="layanan.html">Layanan</a>
</nav>

<hr>

Lakukan hal yang sama pada semua halaman agar navigasi konsisten.

LANGKAH 4 – Menambahkan Daftar Layanan

Buka file layanan.html.

Tambahkan konten berikut:

1
2
3
4
5
6
7
8

<h2>Layanan Kami</h2>

<ul>
    <li>Pengembangan Website</li>
    <li>Pengembangan Aplikasi Mobile</li>
    <li>Konsultasi Teknologi Informasi</li>
    <li>Pembuatan Sistem Informasi</li>
</ul>

LANGKAH 5 – Menambahkan Gambar

Buat folder baru:

1

assets/images

Struktur proyek sekarang:

1
2
3
4
5
6
7
8
9
10

web-company-profile/
│
├── index.html
├── profil.html
├── layanan.html
│
└── assets/
    ├── images/
    ├── css/
    └── js/

Letakkan satu gambar logo perusahaan di folder tersebut.

Misalnya:

1

logo.png

Tambahkan kode berikut di halaman profil.html.

1
2
3

<h2>Logo Perusahaan</h2>

<img src="assets/images/logo.png" alt="Logo Perusahaan" width="200">

LANGKAH 6 – Menguji Navigasi Website

Lakukan pengujian berikut:

  1. Buka index.html pada browser
  2. Klik menu Profil
  3. Klik menu Layanan
  4. Pastikan semua halaman dapat diakses dengan benar

Jika semua halaman dapat dibuka tanpa error, maka navigasi telah berhasil dibuat.

E. Standar Kode yang Wajib Dipenuhi

Mahasiswa wajib memastikan:

  • Struktur HTML5 lengkap
  • Navigasi tersedia pada semua halaman
  • Penulisan tag HTML menggunakan huruf kecil
  • Indentasi kode rapi
  • Penggunaan atribut alt pada gambar

F. Tugas

Tambahkan halaman baru:

1

kontak.html

Isi halaman tersebut dengan informasi:

  • Alamat perusahaan
  • Nomor telepon
  • Email

Tambahkan juga link menuju halaman tersebut pada menu navigasi.

G. Refleksi Praktikum

Jawab pertanyaan berikut secara singkat:

  1. Apa fungsi elemen <a> dalam HTML?
  2. Mengapa navigasi harus konsisten pada setiap halaman website?
  3. Apa fungsi atribut alt pada elemen <img>?

H. Output yang Harus Dikumpulkan

Mahasiswa mengumpulkan laporan praktikum yang menampilkan:

  1. Kode file index.html, profil.html, dan layanan.php
  2. Screenshot tampilan di web browser.
  3. Jawaban dari soal refleksi di atas.

Format pengumpulan:

1

Nama_NIM_Pertemuan2.zip

Tahap berikutnya akan menambahkan form pendaftaran online pada website.

Materi Kuliah, Pemrograman Web Dasar
kuliah web
Postingan ini dilisensikan di bawah CC BY 4.0 oleh penulis.