LAPORAN PRAKTIKUM

PEMROGRAMAN WEB CLIENT

Disusun oleh :
NAMA : Diva Valdyan
NIM : 205610045
JURUSAN : Sistem Informasi 2

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN

KOMPUTER AKAKOM YOGYAKARTA
2021
A. TUJUAN
 Mahasiswa dapat mengatur CSS untuk Pembuatan Menu

B. PRAKTIKUM
 Jalankan Editor Notepad++ atau yang lain
 Bukalah file modul_p51.html yang telah anda buat sebelumnya, kemudian simpanlah
dengan nama file : modul_p61.html.
 Bukalah file : modul_p61.html dan modifikasilah bagian <div id=”menu_horisontal”>
sebagai berikut : (terdapat didalam Modul)
 kemudian pada bagian style, tambahkan CSS berikut ini: (didalam modul)

Berikut ini adalah hasilnya

Hasilnya terdaat list baru yang berada di tengah, masih berantakan karena belum mengatur
#menu_horizontal li nya.

 Kemudian tambahkan CSS berikut ini : (terdapat didalam modul)

 Jalankan di browser, amati perubahannya! apa fungsi css display:inline ?

Fungsi display:inline adalah menderetkan tulisan ke samping.

 Selanjutnya tambahkan CSS berikut ini : (didalam Modul)

 Jalankan di browser, seharusnya tampilan sekarang menjadi sbb : (didalam modul)
Benar hasilnya seperti di contoh.

 Untuk mengatur mouse hover (saat menu disentuh mouse), tambahkan CSS berikut
ini:
 Kemudian untuk melengkapi tampilan web tersebut, tambahkan pada bagian <div
id=”banner”> sbb : (catatan : file banner.jpg sudah anda copykan ke folder pict)
 Pada <div id=”footer”> dirubah sbb :
 Kemudian untuk style pada id #footer, modifikasilah menjadi sbb :

 Ketikkan Hal berikut ini di bagian content :

 Jalankan di browser, seharusnya tampilan menjadi sbb :

Benar hasilnya jadi seperti di contoh.

C. LATIHAN
 Lengkapi Link untuk tiap menu yang ada, masing-masing menuju ke file :
welcome.html, alam.html, kuliner.html, budaya.html, foto.html, about.html,
contact.html
 Simpanlah file modul_p61.html di atas menjadi bernama : welcome.html
  Simpan kembali file modul_p61.html tersebut menjadi bernama : alam.html
 Bukalah file alam.html, rubahlah isi <div id=”content”> menjadi berisi tentang
penjelasan mengenai wisata alam di DIY (isian bebas)
 Jalankan File welcome.html, kemudian klik menu Wisata Alam, seharusnya pada
bagian content akan muncul isi mengenai wisata alam.
Jawaban:
Membuat file sesuai ketentuan:

Mengubah file modul_P61 menjadi welcome.html dan alam.html:

Mengubah isi content dari alam.html:

Saat menjalankan file welcome.html perubahan tidak terjadi pada saat mengklik wisata
alam, itu dikarenakan belum memasukan link alam.html kedalam <a href> dalam file
welcome.html. caranya seperti berikut:
Caranya, ubahlah “#” pada menu_vertikal menjadi “alam.html”. save dan jalankan maka
hasilnya sbb:

Jika sudah mengganti “#” dengan “alam.html” saat mengarahkan pointer pada tulisan
“Wisata Alam” akan menjadi gambar diatas. Hasil akhirnya sbb:

Hasilnya content akan berubah, itu karena sebelumnya telah mengubah isi conten dari
alam.html, lalu dipindahkan ke dalam welcome.html. saat diclick akan diarahkan menuju isi
dari alam.html.

D. TUGAS
 Apa perbedaan utama untuk CSS dalam pembuatan menu horisontal dan menu
vertikal?
Perdbedaan utamanya terletak pada posisi penempatan menu itu sendiri, menu horizontal
berada di atas sedangkan menu vertikal artinya menurun kebawah.
  Buatlah Link dengan List yang menggunakan image custom, dengan contoh sebagai
berikut (anda boleh gunakan gambar/image bebas) : (didalam Modul)
Ini adalah scriptnya:

Ini adalah hasilnya:

E. KESIMPULAN
 Dengan ini mahasiswa mampu mengatur CSS untuk Pembuatan Menu.