Dokumen tersebut merupakan materi praktikum pemrograman berbasis web yang membahas pengenalan CSS. Tujuannya adalah agar mahasiswa memahami HTML, CSS, dan bisa mengimplementasikan keduanya. Dijelaskan pengertian CSS sebagai aliran kode yang menata halaman web, serta manfaatnya untuk merubah tampilan tanpa harus mengubah satu per satu halaman. Diuraikan pula pengertian HTML, PHP, dan MySQL beserta fungsinya.

1. PRAKTIKUM PEMROGRAMAN BERBASIS WEB
PENGENALAN CSS
Disusunoleh:
(Rifkillah Suaibi)
(1210651183)
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2012/2013

2. 1. Tujuan
· Mahasiswa memahami tentang HTML
· Mahasiswa memahami CSS
· Mahasiswa bisa mengimplementasikan hasil dari HTML dan CSS
2. Dasar Teori
CSS (Cascading Style Sheet)
CSS adalah singkatan dari Cascading Style Sheets. CSS adalah aliran dari suatu kode ke kode
lain yang di kembangkan untuk menata pangaturan halaman pada web.
Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk
tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda
harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi
trebuchet.
Singkatnya dengan CSS anda dapat merubah fon, Warna background serta besar kecilnya
huruf atau fon dll dari halaman Web atau HTML.
HTML (Hyper Text MarkUp Language)
HTML (Hypertext Markup Language) adalah bahasa dari World Wide Web yang
dipergunakan untuk menyusun dan membentuk dokumen agar dapat ditampilkan pada
program browser.
Tiap kali kita mengakses dokumen web, maka sesungguhnya kita mengakses dokumen
seseorang yang ditulis dengan menggunakan format HTML. Beberapa orang merasa
keberatan jika dikatakan HTML adalah sebuah bahasa pemrograman karena struktur yang
dimilikinya dianggap terlalu sederhana, kode-kode dibaca oleh browser baris per baris, dari
atas ke bawah. HTML juga tidak memiliki ‘looping’ seperti bahasa pemrograman lain.
Pada HTML dipergunakan hypertext link atau hubungan antara teks dan dokumen lain.
Dengan demikian pembaca dokumen bisa melompat dari satu dokumen ke dokumen yang
lain dengan mudah.
PHP MySql
Pengertian PHP PHP adalah bahasa pemrograman script yang paling banyak dipakai saat ini.
PHP banyak dipakai untuk memrogram situs web dinamis, walaupun tidak.
Pengertian di atas dengan jelas menggambarkan definisi dari PHP. Namun akan lebih mudah
dipahami jika sebutakan beberapa kemampuan atau kelebihan yang dimiliki PHP. Berikut ini
adalah beberapa kelebihan PHP yang diucapkan pengembang … Install juga server database

3. MySQL. tentu saja anda tidak boleh lupa menginstall PHP dan library koneksi PHP –
MySQL. Paket software yang murah di install adalah phpTriad, WAMP, XAMPP yang berisi
software yang diperlukan mencakup Apache MySql Adalah program data base yang
dibutuhkan oleh PHP, dimana file web yang akan ditampilkan seperti data2 pengunjung dan
data web anda akan disimpan pada database.
Apa Itu CSS?
CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading
itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke
kode lain yang saling berhubungan.
Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah:
kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format /
tampilan suatu halaman HTML.
Keuntungan Penggunaan CSS
Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial
untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet,
anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial
menjadi trebuchet.
Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda
cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke
trebuchet.
Jadi, keuntungan menggunakan CSS, lebih praktis!
Kekurangan Penggunaan CSS
Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-
kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di
browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser
dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar
tampilan web anda terlihat baik di semua browser.

4. 1. Ubahlahteksdalam list (kandungansusu) sehingga property font (warna, jenis font,
ukurannyasamadenganparagrafpertama)

5. //Setting style dengancolor:black; font:14pxCandra,Arial,Tahoma; dan padding-bottom:
14px.
Code <li> berfungsi untuk mebuat bullet Library.
dengan menggunakan script css. Untuk mengubah teks yang ada pada list(kandunganSusu).
Hasilnya:

6. 2. Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor, warna
teks dan background-nya berubah.
//Untuk mengubah warna panel jika kursor diarahkan didalam teks hanya menambahkan code
<td
align="center"><a href="">Depan</a></td>
begituseterusnya.
Dan ini hasilnya :

7. 3. Isilah bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten
(misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS anda (tidak ada CSS
berarti juga TIDAK ADA NILAI)
// Code diatas menunjukkan untuk menambahkan tulisan atau artikel yang ada dalam halaman
sebelah kiriyang ada diweb.
Hasilnya:

8. 4. Tambahkanlahteks/ tulisan yang proporsional di bagian header halaman
//Untuk kode script diatas untuk menambahkan tulisan dibawah header.
Header AdalahtempatJudul website yang biasanyaberadadiposisiteratasdari webpage.
Dan ini hasilnya:

9. //Untuk kode script diatas untuk menambahkan tulisan dibagian paling dibawah header.
Dan ini hasilnya:
source code

12. Ini adalah hasil dari keseluruhan