Anda di halaman 1dari 14

MAKALAH PEMRORAMAN WEB TENTANG CSS

NAMA NIM

: EDDY SATRIAWAN : 0910520027

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER BUMIGORA MATARAM 2011

Bab. I Pendahuluan Latar Belakang


CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi

Bab.II Dasar Teori


Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C). CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi. CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.

Bab.III Tugas pendahuluan


1. Pengaturan Latar belakang
<html> <head> <style type="text/css"> body { Background: #00ff00 url("gambar.gif") no-repeat fixed center center } </style> </head> <body> <p> <b>Catatan:</b> seperti background-attachment dan background-position tidak bisa digunakan dalam browser Netscape 4.0 </p> <p>Ada teks disini</p> <p>Tuliskan sekehendak kalian</p> <p>Terserah apa saja</p> <p>Yang penting ada tulisannya</p> </body> </html>

2.

Penanganan Font <html> <head> <style type="text/css"> p.normal {font-weight: normal} p.tebal {font-weight: bold} p.teballl {font-weight: 900} p.lengkap { font: italic small-caps 900 12px arial } </style> </head> <body> <p class="normal"> Perhatikan paragraf ini</p> <p class="tebal"> Bandingkan dengan paragraf diatasnya </p> <p class="teballl"> Bandingkan dengan yang ini juga</p> <p class="lengkap"> Paragraf dengan semua atribut font dimasukan </p> </body> </html>

3. Pembuatan Border
<html>

<head> <style type="text/css"> p.borderous { border-style: double; border-width: 5px 10px 1px medium; border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255) } </style> </head> <body> <p class="borderous"> <b>Catatan:</b> properti "border-color" dan "border-width" tidak dikenali oleh browser Internet Explorer bila digunakan secara langsung. Gunakan properti "border-style" untuk menyiapkan border dalam Internet Explorer.<br /> Internet Explorer 5.5 mendukung semua border style. Internet Explorer 4.0-5.0 tidak mendukung nilai "dotted" dan "dashed" </p> </body> </html>

4. Pengaturan Margin
<html> <head> <style type="text/css"> p.margin {margin: 2cm 4cm 3cm 80px;} </style>

</head> <body> <p> Yang ini adalah paragraf biasa tanpa pengaturan margin, sepertinya biasa saja. </p> <p class="margin"> Bandingkan dengan tampilan paragraf ini, Coba Anda kecilkan uuran window broser agar terlihat lebih jelas perbedaanya. </p> <p> This is a paragraph </p> </body> </html>

5. Mengatur padding pada sel tabel


<html> <head> <style type="text/css"> td {padding: 1.5cm;} td.value2 {padding: 0.5cm 2.5cm;} </style> </head> <body> <table border="1"> <tr> <td> Bandingkan dengan tampilan tabel ini. Padding atas dan bawah memiliki 0.5cm,

sedangkan padding kanan dan kiri nilainya 2.5cm. </td> </tr> </table> </body> </html>

6. Menggunakan List
<html> <head> <style type="text/css"> ul { list-style: square outside url("gambarkecil.gif");} </style> </head> <body>

BAB IV Implementasi
7. Pengaturan Latar belakang

8. Penanganan Font

9. Pembuatan Border

10.Pengaturan Margin

11.Mengatur padding pada sel tabel

12.Menggunakan List

13.Elemen latar depan dan latar belakang

14.Mengubah tampilan Link

BAB V Penutup : Kesimpulan


CSS adalah sebuah bahasa pemrograman untuk membuat sebuah halaman web. Anda perlu menuliskan kode melalui editor teks seperti NotePad dilingkungan Windows. Kita dapat mendesain program tersebut sesuai dengan keinginan kita. Dimana kita dapat memberikan warna Font, menampilkan gambar, membuat garis horizontal, dan lainnya.