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 diharapkan mampu memahami dan menggunakan CSS

B. PRAKTIKUM

 Jalankan Editor Notepad++ Buatlah File baru dan simpanlah dengan nama file :
modul_p41.html
 Ketikkan script berikut ini : (Script ada didalam modul)
 Jalankan file modul_p41.html di browser dan amati hasilnya.

Yang terjadi hanya menampilkan “Menu Horizontal” sampai “Footer”.

 Di dalam Tag Head pada script di atas, tambahkan hal berikut ini: (script ada didalam
modul)
 Jalankan file modul_p41.html di browser.
 Amati hasilnya!,
Yang terjadi tulisan “Menu Horizontal” berpindah ketengah dan memiliki background
berwarna.

o Gantilah max-width:1000px pada baris 11, menjadi width:1000px. Jalankan kembali!,

apa perbedaan width dengan max-width?
o berilah tanda komentar pada baris 7, sehingga menjadi : /* margin:auto */ kemudian
jalankan kembali! apa fungsi margin:auto?
o Hilangkan kembali tanda komentarnya.

Fungsi margin:auto berguna jika ingin sebuah elemen otomatis rata kanan dan kiri secara
horizontal.

 Tambahkan hal berikut ini pada script di atas: (terdapat didalam modul)
 Jalankan file modul_p41.html di browser.
 Amati hasilnya,
o gantilah baris 22, menjadi : position:static, jalankan kembali! apa
perbedaan position:absolute yang memiliki parent dengan
position:relative dan position:static?
o kembalikan baris 22 menjadi : position:relative.

Setelah ditambahkan header, slogan, dan gambar.

Bisa dilihat hasilnya “Slogan” menjadi berwarna dan memiliki ruang lebih dan gambar
bergeser ke sebelah kanan me miliki warna kuning dan masing masiing memiliki tulisan
berwarna hitam.

Setelah mengubah positition:relative menjadi position:static, layout berubah berantakan.

Slogan, menu horizontal, dan gambar menyatu sehingga memberi kesan berantakan.

 Tambahkan hal berikut ini pada script di atas: (terdapat didalam modul)
 Jalankan file modul_p41.html di browser.
 Amati hasilnya,
Yang terjadi “menu vertikal” dan “banner” berapa di sebelah kiri dan sudah memiliki kolom
dan warna masing-masing.

 Tambahkan hal berikut ini pada script di atas: (terdapat dalam modul)
 Jalankan file modul_p41.html di browser.
 Amati hasilnya!

Setelah ditambahkan “content” dan “footer”.

Terlihat bagian content dan footer dimana content berada di tengah atas dan footer berad
dibawah yang memiliki ukuran dan warna yang berbeda.

o Kembali ke bagian sebelumnya, pada css id #kiri berilah tanda komentar pada baris
51 menjadi : /* float:left */ kemudian jalankan kembali! apa yg terjadi terhadap div
id=”content” ?
o hapus kembali tanda komentar di baris 51 !
o Gunakan Scrollbar untuk melihat hingga bagian footer, perhatikan apakah menu
horisontal yang terdapat di bagian atas menghilang?

Setelah diganti.

Hasilnya “content” menggantikan posisi “footer” dan “footer” berada dibawah jauh dari
“content” dan Menu horizontal diatas tidak menghilang.

 Modifikasilah CSS untuk bagian menu_horisontal menjadi : (terdapat dalam modul)

 Terdapat 3 baris baru yang ditambahkan, yaitu baris 17,18 dan 19. Jalankan kembali
di browser, kemudian lakukan scrolling. Amati apa yang sekarang terjadi pada menu
horisontal!
Setelah ditambah 3 baris baru

Yang terjadi “menu horizontal” merapat ke sebelah kiri lalu “slogan” mendapatkan
background warna kuning sama seperti gambar.
C. LATIHAN

 Buatlah file baru bernama : modul_l41.html, kemudian ketikkan script yang

menghasilkan tampilan sbb : (terdapat didalam modul)
D.TUGAS

 Jelaskan fungsi attribut position disertai contoh!

 Jelaskan arti dari: border:”1px solid black” !
 Jelaskan atribut :
o background-color
o color
o margin

Jawaban:

1. Fungsi attribut position adalah untuk menentukan posisi suatu elemen. Contohnya
pada praktik. position:fixed, saat melakukan scroll tulisan “menu_horizontal” akan
mengikuti seiring dengan berjalannya scroll.
2. Artinya memberikan garis batas berwarna hitam, contohnya pada praktk bagian
“menu_horizontal” disisi tepinya terdapat garis berwarna hitam
3. Background-color digunakan untuk menambahkan background warna pada setiap
kolom.
Color digunakan untuk mewarnai tulisan yang terdapat didalam kolom
Margin digunakan untuk mengatur sisi atau mengatur jarak elemen HTML

E.KESIMPULAN

 Dengan ini mahasiswa memahami bagaimana menggunakan css, mengetahui elemen

– elemen pada css, dan memahami layout yang bisa dibuat sebagai referensi
pembuatan website.