8
Laporan Praktikum Pemrograman terstruktur Pemrograman Berbasis Web (CSS) Oleh (Ihdam Fikri) (1210651236) JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH JEMBER Page 1 of 8

Ihdam fikri 1210651236 css

Embed Size (px)

Citation preview

Page 1: Ihdam fikri 1210651236 css

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

Page 2: Ihdam fikri 1210651236 css

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.

Dan dibawah ini adalah gambar hasil modifkasi..

Page 2 of 6

Page 3: Ihdam fikri 1210651236 css

Laporan Praktikum Pemrograman terstruktur

Dibawah ini adalah CSS dari html diatas

Page 3 of 6

Page 4: Ihdam fikri 1210651236 css

Laporan Praktikum Pemrograman terstruktur

Table = untuk membuat table dalam cssborder-colapse:colapse; //border tipe colapseborder:none; //tidak memiliki ketebalanbackground-color:#2AAAFF;//ini adalah kode warna

height:40px; //tinggi menuwidth:960px; //lebar menubackground: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 dllCenter //menunjukkan font pada tengah”Color //fff adalah kode warna putihFont //tebal berukuran 14 dan tipe font

Padding //mengatur antara tepi border dan tulisan

#isi li //untuk membuat

a.link // tipe none artinya tidak menggunkan garisa.visite //jika di target akan muncl garisa.hover //jika ditarget akan muncul garisa.active //jika di select akan muncul garis

//table-menu untuk menampilkan disamping

Footer //

Page 4 of 6

Page 5: Ihdam fikri 1210651236 css

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

Page 6: Ihdam fikri 1210651236 css

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