1. PRAKTIKUM PEMROGRAMAN BERBASIS WEB
PENGENALAN CSS
Disusun oleh:
(Andika Navian)
(1210651212)
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. aliran dari suatu kode ke kode lain yang
saling berhubungan. kumpulan kode-kode yang berurutan dan saling berhubungan untuk
mengatur format / tampilan suatu halaman HTML.
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
3. adalah beberapa kelebihan PHP yang diucapkan pengembang … Install juga server database
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. Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis font,
ukurannya sama dengan paragraf pertama)
5. //Setting style dengan color:black; font:14px Candra,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>
begitu seterusnya.
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 kiri yang ada diweb.
Hasilnya:
8. 4. Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman
// Untuk kode script diatas untuk menambahkan tulisan dibawah header.
Header Adalah tempat Judul website yang biasanya berada diposisi teratas dari webpage.
Dan ini hasilnya:
9. // Untuk kode script diatas untuk menambahkan tulisan dibagian paling dibawah header.
Dan ini hasilnya:
