Laporan ini membahas tentang praktikum pemrograman terstruktur dengan CSS. CSS digunakan untuk mengatur format dan tampilan halaman web HTML. Laporan ini menjelaskan pengertian CSS, keuntungan menggunakan CSS, contoh modifikasi CSS untuk mengubah tampilan gambar, dan contoh kode CSS serta HTML yang digunakan.

1. Laporan Praktikum Pemrograman terstruktur
Pemrograman Berbasis Web
(CSS)
Oleh
(Ihdam Fikri)
(1210651236)
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2012/2013
Page 1 of 6

2. Laporan Praktikum Pemrograman terstruktur
CSS adalah . . .
• CSS adalah singkatan dari Cascading Style Sheets
• CSS adalah aliran dari suatu kode ke kode lain yang saling berhubungan
• CSS merupakan kumpulan kode-kode berurutan dan saling berhubungan untuk
mengatur format / tampilan suatu halaman HTML.
Keuntungan CSS . . .
• Memudahkan dalam penggantian format secara keseluruhan
• Lebih praktis
• Untuk mengubah tampilan web, tanpa mengubah layout utamanya
Dibawah ini adalah hasil modifikasi css. Gambar dibawah ini sebelum dimodifikasi.
Page 2 of 6

3. Laporan Praktikum Pemrograman terstruktur
Dan dibawah ini adalah gambar hasil modifkasi..
Page 3 of 6

4. Laporan Praktikum Pemrograman terstruktur
Dibawah ini adalah CSS dari html diatas
Table = untuk membuat table dalam css
border-colapse:colapse; //border tipe colapse
border:none; //tidak memiliki ketebalan
background-color:#2AAAFF;//ini adalah kode warna
height:40px; //tinggi menu
width:960px; //lebar menu
background:url(bg-nav.jpg) repeat-x; //merepeat
gambar .jpg
#menu a{color white//menunjukan bahwa wrna pth
#menu a:hover //berfungsi merubah
Height:40px //untuk mengeser menu (depan)dan dll
Center //menunjukkan font pada tengah”
Color //fff adalah kode warna putih
Font //tebal berukuran 14 dan tipe font
Padding //mengatur antara tepi border dan tulisan
#isi li //untuk membuat
a.link // tipe none artinya tidak menggunkan garis
a.visite //jika di target akan muncl garis
a.hover //jika ditarget akan muncul garis
a.active //jika di select akan muncul garis
//table-menu untuk
menampilkan disamping
Footer //
Page 4 of 6

5. Laporan Praktikum Pemrograman terstruktur
Dibawah ini adalah sourcode htmlnya
src=”header.jpg” // memanggil gmbar dan akan menampilkannya sperti ini
dan kolom dibawahnya <div id=”menu”> //adalah sebuah objek untuk memanggil atribut/printah
yang ada di css diatas dan herf= memanggil url
dan kolom selanjutnya untuk
<h1 style="color:blue; font:bold 16px Candara, Arial, Tahoma;"> Ayo Minum Susu</h1>
Font berwarna biru dab type bold sizenya 16 dengan type font diats untuk memunculkan kata
<img src="susu.jpg"/>
Adalah memanggil gambar dengan nama susu.jpg
Dan selanjutnya adalah paragraph
Page 5 of 6

6. Laporan Praktikum Pemrograman terstruktur
Itulah bagian-bagian yang ditampilakan dalam css maupun htmlnya. Sekian semoga bermanfaat apa
yang saya tulis ini
Page 6 of 6

7. Laporan Praktikum Pemrograman terstruktur
Itulah bagian-bagian yang ditampilakan dalam css maupun htmlnya. Sekian semoga bermanfaat apa
yang saya tulis ini
Page 6 of 6