Pemrograman Berbasis WEb

CSS1. MaksudModul ini membahas bagaimana membuat tampilan web menggunakan CSS.2. Tujuana. Kita dapat menyesuaikan tampilan web dengan Script CSS.b. Kita dapat memahami tag / penulisan Script CSS3. Dasar Teori 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.4. ToolsDisini telah disiapkan sebuah tampilan web, tinggal bagaimana cara kita mengatur tampilan dan menyesuaikan dengan yang diharakan.

File yang ada didalamnya :

Kemudian kita buka file php, yaitu index.php dengan editor apa saja yang menurut anda itu nyaman dalam mengkode.

Dari tampilan web tersebut ada beberapa pembahasan cara merubah tampilan tersebut melalui script diatas, yaitu

1. Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis font, ukurannya sama dengan paragraph pertama)2. Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor , warna teks dan background-nya berubah.3. Isilah bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten (misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS anda4. Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman.

Pembahasan1. Menyesuaikan teks pada paragraf pertama

Untuk merubah tampilannya buka script,

Pada script nomor 1 untuk membuat id dimana padding atau jarak atas, kiri, kanan, dan bawah dengan 10px.Untuk id nomor 2 untuk mengatur format penulisan paragraf.Dengan penyesuaian : warna hitam, ukuran teks 11px model teks Candara, Arial, Tahoma, jarak bawah 5px.

Untuk menyesuaikan dengan paragraf pertama, tambahkan tag ,ul setelah p.

Maka hasilnya:

2. Membuat menu menjadi sebuah link.Pada script css ada fungsi untuk mengatur menu link.

1. #menu : untuk membuat background menggunakan gambar bg-nav.jpg dengan perulangan horisontal sesuai tinggi(height) dan lebar(width).2. #menu table : membuat table tanpa border.3. #menu a : tag a yaitu anchor untuk mengatur teks link.4. #menu a:hover : (hover) untuk mengatur fungsi link setelah disorot oleh kursor.5. #menu td : mengatur teks pada kolom menu.

Untuk membuat link pada menu navigasi kita buka script :

Tambahkan tag anchor dan penutup anchor pada menu-menu yang akan dijadikan sebuah link.

Hasilnya bisa lihat pada tampilan web.

3. Menambahkan Konten pada sidebar sebelah kanan.Tambahkan kode CSS didalam tag ..

Penjelasan :1. Membuat id #menu-sidebar yang akan mengatur pada kolom sebelah kanan.2. Membuat class judul : digunakan untuk membuat Tampilan Judul.3. Membuat id #li-judul a, dan #li-judul a:hover digunakan untuk mengatur aksi pada link.4. #li-sub : membuat tampilan awal dengan ukuran 14px.5. #li-sub a dan #li-sub a:hover untuk mengatur aksi pada link. (pada submenu)6. Untuk mengatur semua anchor /link pada semua halaman.Karena buan termasuk id(#) atau class(.)

Contoh :

Hasilnya :

4. Membuat Teks Judul pada HeaderTambahkan kode CSS didalam tag ..

Code diatas digunakan untuk membuat fungsi id header. Yaitu padding/jarak,Ukuran teks, warna teks, teks bercetak tebal, tinggi background, lebar background, dan kemudian background menggunakan image header.jpg.Kemudian ganti script header yang pertama

Menjadi Script header seperti dibawah ini

Maka hasilnya tampak seperti gambar dibawah ini

Kesimpulan :Dari beberapa percobaan diatas, banyak sekali cara yang dapat digunakan dalam membuat tampilan / mengatur tampilan dari tataletak, posisi, ukuran, warna, model teks, dll menggunakan CSS. Bahwasanya dalam mengkode, tiap orang itu berbeda, tergantung bagaimana alur logika dari masing-masing orang itu menggunakan. Seperti yang saya gunakan, bisa saja itu adalah cara yang paling mudah menurut saya. Dan bisa jadi pula menurut orang itu masih terlalu susah. Jadi, tergantung bagaimana logika kita.