Modul Praktikum

Desain Web ©Sofyan Thayf, 2021

Praktikum 2

MEMBANGUN WEBSITE

Kompetensi Dasar: Memahami konsep website dan prinsip-prinsip navigasi dalam website, serta
mampu membangun keterkaitan antar dokumen HTML untuk membentuk
website

1. Struktur Website
Pokok Bahasan:
2. Navigasi dalam Website

Indikator: 1. Mampu membuat keterkaitan antar dokumen HTML dalam website

2. Mampu merancang navigasi dalam website

Waktu: 2 x 50 menit (1 pertemuan)

A. RINGKASAN MATERI

Website
Website adalah sekumpulan dokumen HTML yang saling berkaitan dan membentuk satu rangkaian informasi tertentu,
sesuai dengan tujuan dari penyelenggara/pemilik website yang bisa jadi merupakan sebuah organisasi, perusahaan,
institusi, lembaga, komunitas, maupun perorangan, di mana informasi yang disajikan dalam sebuah website akan
berkaitan dengan penyelenggara atau produk/layanan dari penyelenggara.

Karena merupakan kumpulan dokumen HTML, maka dibutuhkan:

1. Cara untuk berpindah dari dokumen HTML yang satu ke dokumen HTML yang lain
2. Sarana untuk berpindah dari dokumen HTML yang satu ke dokumen HTML yang lain

Cara untuk berpindah dan kemana harus berpindah disebut navigasi, dan sarana untuk melakukan navigasi digunakan
fasilitas link atau hyperlink dalam dokumen HTML.

Navigasi
Adalah cara, metode, dan rute untuk melakukan penelusuran informasi dari serangkaian halaman dokumen HTML
yang membentuk sebuah website. Rancangan navigasi yang baik akan sangat berperan dalam mencapai tujuan dari
website, misalnya mendorong orang untuk membeli sebuah produk, mengajak orang untuk berdonasi, atau sekadar
mengajak orang untuk bergabung dalam sebuah komunitas. Diperlukan strategi yang baik dalam menyusun urutan
informasi sehingga mudah ditelusuri, runtut, jelas, hingga mencapai goal dari website.

Navigasi juga harus memberi kejelasan kepada pembaca di titik mana ia berada, apa yang bisa ia dapatkan pada
‘lokasi’ itu, dan ke mana ia bisa atau harus berpindah selanjutnya (termasuk bagaimana cara untuk kembali ke
halaman sebelumnya). Navigasi dapat disajikan dalam bentuk linked text, menu, elemen grafis, tombol, atau peta situs
(site map), dan semacamnya.

STMIK KHARISMA Makassar 1

Modul Praktikum
Desain Web ©Sofyan Thayf, 2021

Hyperlink
Hyperlink adalah sarana untuk melakukan navigasi di dalam sebuah website. Ciri utama dari dokumen web adalah
adanya hyperlink yang menghubungkan antara satu dokumen HTML dengan dokumen HTML lainnya untuk
membentuk rangkaian informasi yang saling melengkapi, baik dalam satu website atau dengan dokumen web lain di
luar web-site.

Untuk membentuk hyperlink, digunakan tag anchor <a> ... </a> dengan target link disebutkan dalam parameter
href sebagai parameter wajib dari tak anchor, dan label atau keterangan tentang hyperlink dituliskan di antara tag
<a> dan </a>.Contoh penggunaan dan penulisan hyperlink dapat dilihat pada Tabel 1.

Tabel 1 Penulisan elemen anchor / hyperlink <a>

Penulisan Elemen <a> Tujuan

<a href=”#namabookmark”>top</a> Link dengan target pada bookmark dalam
dokumen HTML yang sama
<a href=”pallubasa.html”>Balonku</a> Hyperlink ke dokumen lain dalam satu web-
site dan terletak pada folder yang sama
<a href=”tugas/tugas1.html”>Tugas 1</a> Hyperlink ke dokumen lain dalam satu web-
site dan terletak pada folder yang berbeda
(nama folder disebutkan)
<a href=”/”>Home</a> Hyperlink untuk kembali ke halaman indeks
(index.html) dari web-site
<a href=”http://outside.com”>Outside</a> Hyperlink ke halaman indeks dari web-site
lain
<a href=”http://outside.com/price.html”>Outside</a> Hyperlink ke halaman web tertentu dari
web-site lain
<a href=”http://outside.com” target=”_blank”> Hyperlink ke web-site lain dan
Outside</a> membukanya pada tab/window browser
yang baru

B. PERSIAPAN PRAKTIKUM

1. Perangkat Keras
a. Perangkat komputer
2. Perangkat Lunak (ter-install di komputer, dan siap digunakan)
a. Text/code editor, dianjurkan menggunakan VSCode
b. Web Browser (Google Chrome, Mozila Firefox)
3. Dari tugas praktikum sebelumnya
a. Buat halaman resep baru untuk minimal 15 resep nusantara selain yang dikerjakan dalam praktikum 1.
b. Cari, download dan simpan gambar/foto yang dianggap cocok untuk menjadi feature image (gambar
ilustrasi) dari setiap halaman web resep nusantara yang ditulis (total 16 resep). Simpan semua
foto/gambar dalam folder img.

STMIK KHARISMA Makassar 2

Modul Praktikum
Desain Web ©Sofyan Thayf, 2021

C. KEGIATAN PRAKTIKUM

Rancangan Navigasi
Kita akan membuat website Master Chef Nusantara seperti pada diagram navigasi dalam Gambar 1

Resep Khas Info bahan

Daerah khas

index.html

Tentang Biodata
Website Pembuat
Website

Gambar 1 Rancangan Navigasi Website Master Chef Nusantara

Membuat file index website

1. Buat file index.html yang berisi daftar 16 menu kuliner nusantara sesuai dengan koleksi resep Anda

2. Untuk memudahkan pencarian resep dan navigasi, urutkan daftar resep berdasarkan abjad judul secara
ascending (A-Z), sehingga menjadi seperti pada Listing 1. (Daftar judul resep akan berbeda sesuai koleksi
masing-masing)
Listing 1 index.html yang telah diurutkan

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Master Chef Nusantara</title>
</head>
<body>
<h1>Master Chef Nusantara</h1><hr>

<ol>
<li>Barobo</li>
<li>Kado Minyak</li>
<li>Kapurung</li>
<li>Nasu Cemba</li>
<li>Nasu Palekko</li>
<li>Pallu Basa</li>
<li>Pallu Mara</li>
<li>Parape</li>
<li>Sop Konro</li>
<li>Sop Saudara</li>
<li>Toppa Lada</li>
</ol>

STMIK KHARISMA Makassar 3

Modul Praktikum
Desain Web ©Sofyan Thayf, 2021

</body>
</html>

3. Pastikan koleksi file HTML untuk setiap resep sudah lengkap

4. Tambahkan tag anchor ( <a> .. </a> ) pada setiap judul resep untuk membuat link ke file resep (lihat
contoh pada Listing 2)

Listing 2 Penambahan tag Anchor pada judul resep untuk membuat link

...
<ol>
<li><a href="barobo.html">Barobo</a></li>
<li><a href="kadominyak.html">Kado Minyak</a></li>
<li><a href="kapurung.html">Kapurung</a></li>
...

Silahkan lihat hasilnya pada browser dan lakukan pengujian apakah link bekerja dengan benar
Lanjutkan membuat link untuk semua koleksi resep

Membuat ‘jalan pulang’

5. Pada bagian awal body dari setiap file HTML resep, tambahkan kode seperti pada contoh dalam Listing 3
Listing 3 Link untuk kembali ke halaman depan

...
<body>

<a href="index.html">&lt;&lt; Daftar Resep</a><hr>

<h1>Master Chef Nusantara Indonesia</h1>

<h2>Coto Makassar</h2>

...

Pertanyaan:
1. Apa efek dari kode &lt;
2. Apa efek dari elemen <hr>

Melengkapi website

STMIK KHARISMA Makassar 4

Modul Praktikum
Desain Web ©Sofyan Thayf, 2021

6. Lakukan browsing untuk mencari informasi tentang bahan utama atau bahan yang spesifik dari setiap koleksi
resep, kutip dan ringkas isinya menjadi informasi daerah dalam file HTML yang diberi nama sesuai nama
bahannya, misalnya dagingsapi.html untuk resep khas yang bahan utamanya menggunakan daging sapi
(contoh lihat Gambar 4). Download dan simpan fotonya (bila ada) beri nama sesuai namanya, misalnya
dagingsapi.jpg.

Gambar 2 Browsing untuk mencari informasi bahan utama/khas dari resep

7. Edit file HTML resep untuk menambahkan link ke halaman yang menampilkan bahan utama/khas dari resep,
seperti contoh dalam Listing 4.
Listing 4 Link ke halaman tentang bahan utama/khas

...

<body>
<h2>Kuliner Makassar - Pallu Basa</h2>

<p>Pallu basa adalah makanan tradisional Makassar, Sulawesi Selatan.

Seperti Coto Mangkasara (Coto Makassar), Pallubasa juga terbuat dari
<a href="dagingsapi.html">daging sapi</a> dan jeroan (isi dalam perut) sapi
atau kerbau. Namun kini kuliner ini telah berkembang menjadi pallu basa
ayam dan pallu basa kepala ikan. Proses memasaknya pun hampir sama dengan
Coto Makassar yang lebih terkenal, yakni jeroan direbus dalam
waktu lama. Setelah matang, jeroan ditambah dengan daging itu diiris-iris,
kemudian ditaruh/dihidangkan dalam mangkuk yang lebih enak jika disajikan
panas atau hangat.</p>

<h3>Bahan-bahan:</h3>
<ul>
<li><a href="dagingsapi.html">Daging sapi</a> - 250 gram</li>
<li>Kaldu sapi - 600 ml</li>
<li>Kelapa parut, sangrai lalu haluskan hingga berminyak - 30 gram</li>
<li>Serai, memarkan - 1 batang</li>
<li>Lengkuas, memarkan - 2 cm</li>

STMIK KHARISMA Makassar 5

Modul Praktikum
Desain Web ©Sofyan Thayf, 2021

<li>Gula merah - 1 sdt</li>

<li>Kayu manis - 1 cm</li>
<li>Cengkeh - 4 buah</li>
<li>Air asam - 30 ml</li>
<li>Garam - 1 sdt</li>
<li>Penyedap rasa (opsional) - 1 sdt</li>
<li>Minyak, untuk menumis - 3 sdm</li>
</ul>

...

</body>
</html>

Periksa hasilnya melalui browser dan uji apakah link berhasil menampilkan halaman yang benar. Contoh
hasilnya seperti terlihat dalam Gambar 3 dan Gambar 4.

Pertanyaan:
Apa efek dan manfaat dari option target="_blank" pada tag <a> ?

Gambar 3 Halaman resep Pallubasa yang sudah diberi link terkait bahan utama

STMIK KHARISMA Makassar 6

Modul Praktikum
Desain Web ©Sofyan Thayf, 2021

Gambar 4 Contoh halaman Informasi bahan utama/khas

D. TUGAS SELANJUTNYA

1. Lengkapi Informasi bahan selengkap mungkin untuk semua koleksi resep Anda.
Ada resep yang menggunakan bahan utama/khas yang sama, cukup di-link ke satu halaman informasi bahan.

2. Sesuai dengan rancangan navigasi yang digambarkan pada Gambar 1 di bagian awal kegiatan praktikum ini,
buat halaman Tentang Website yang berisi penjelasan: apa tujuan website Master Chef Nusantara ini dibuat,
dalam rangka apa pembuatannya, apa manfaatnya, siapa pembuatnya (nama Anda, WAJIB ADA), dan informasi
lain yang dianggap perlu. Beri nama file about.html.
Buat link dari halaman index.html untuk menampilkan halaman Tentang Website ini (about.html). Jangan lupa
buat jalan pulang.

3. Buat halaman Biodata yang berisi biodata singkat Anda, beri nama file biodataku.html, dan buat link dari nama
Anda yang ditulis pada halaman Tentang Website.

STMIK KHARISMA Makassar 7