LISTING 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. PRAKTIKUM
 Buatlah file baru bernama : modul_p81.html
 Kemudian Ketikkan Script berikut ini : (terdapat didalam modul)
 Jalankan modul_p81.html di browser, seharusnya hasilnya terlihat sbb :

Benar hasilnya sama seperti yang dicontohkan dalam modul

 Untuk menambah border, buatlah CSS berikut ini di dalam Tag head, dengan cara
modifikasilah file modul_p81.html pada bagian ….. sebagai berikut: (terdapat didalam
modul)
 Agar lebih menarik, lebar tabel kita buat menjadi full layar browser (100%) dan border
dibuat menjadi garis tunggal, dengan cara modifikasilah CSS sebagai berikut : (terdapat
didalam modul)
 Modifikasilah file modul_p81.html dengan menambahkan dua buah item minuman ke dalam
menu, sehingga jika dijalankan akan memiliki tampilan sebagai berikut : (terdapat didalam
modul)
Setelah menambahkan style CSS dan menambahkan list minumana kedalam tabel maka
hasilnya akan seperti berikut ini:

 Jenis Makanan dan Minuman dalam tabel tersebut terlihat berulang, kita akan gabungkan
baris-baris pada jenis, sehingga nantinya hanya akan ada 2 baris, baris yang atas berisi
tulisan Makanan, sedangkan yang bawah berisi tulisan minuman.
 Langkah : Copylah file modul_p81.html ke file modul_p82.html
 Kemudian modifikasilah file modul_p82.html menggunakan penggabungan baris : rowspan
sebagai berikut :
o Karena Makanan terdiri dari 3 baris, maka pada Cell makanan () yang pertama
ditambahkan atribut rowspan=”3”, kemudian Makanan di baris yang lain dihapus
karena sudah digabung dengan yg baris pertama
o Script modifikasi nya sebagai berikut : (terdapat didalam modul)

Menambahkaan rowspan pada tabel dan hasilnya seperti berikut:

Terlihat bahwa pada bagian makanan akan bergabung menjadi satu kolom.
  Modifikasilah file modul_p82.html untuk menggabung baris di bagian minuman juga
(perhatikan bahwa minuman hanya terdiri dari 2 baris). Sehingga jika dijalankan maka
hasilnya adalah sebagai berikut : (terdapat didalm modul)

 Buka lagi file modul_p82.html, lalu tambahkan Footer menggunakan tag tfoot (catatan :
peletakan tag ini sebenarnya tidak harus di paling bawah, bisa juga di atas atau sesudah ,
nanti saat di browser dis akan otomatis selalu muncul di paling bawah). Berikut ini
penambahan scriptnya : (terdapat didalm modul)
 Untuk menggabungkan ketiga kolom di footer, maka digunakan atribut colspan=”3”.
Langkahnya, modifikasilah bagian footer menjadi sebagai berikut

Hasilnya seperti berikut:

  Untuk mempraktikkan tag , akan dibuat supaya kolom bagian harga kita beri warna
kuning/yellow. Di HTML5, Tag ini tidak berhubungan dengan sehingga tidak dapat
digunakan untuk pengaturan alignment.
 Kolom harga terletak di kolom ketiga, brarti kita buat colgroup untuk melewatkan 2
kolom, kemudian baru ke kolom berikutnya kita atur warnanya. Langkah :
modifikasilah file modul_p82.html, di bawah tag <table> sebelum tag <thead>

Hasilnya:

Pada bagian harga memiliki backround berwarna kuning, dan jika pada <col span=”2”>
diganti menjadi <col span=”3”> seluruh background dari tabel menjadi warna kuning.