More Related Content
What's hot (18)
Viewers also liked (17)
Similar to Praktikum pemrograman berbasis web (20)
Praktikum pemrograman berbasis web
- 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:
- 10. Ini adalah hasil dari keseluruhan