PRAKTIKUM PEMROGRAMAN BERBASIS WEB

PENGENALAN CSS

Disusun oleh:

(Andika Navian)

(1210651212)

JURUSAN TEKNIK INFORMATIKAFAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH JEMBER

2012/2013

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

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.

1. Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis font, ukurannya sama dengan paragraf pertama)

//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:

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 :

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:

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:

// Untuk kode script diatas untuk menambahkan tulisan dibagian paling dibawah header.

Dan ini hasilnya:

source code

Ini adalah hasil dari keseluruhan