1. Laporan Pemrograman Berbasis Web
Oleh : Muhammad Rosidi
1210651071
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2014
2. 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.
CSS memiliki bebrapa keuntngan antara lain :
Memudahkan dalam penggantian format secara keseluruhan.
Lebih praktis.
Untuk mengubah tampilan web, tanpa mengubah layout utamanya.
Contoh Syntax dari CSS
Terdiri dari beberapa set peraturan yang memiliki: selector, property, value. selector
{property: value;}
Selector menunjukkan bagian mana yang hendak diatur/diformat. Property bagian dari
selector yang hendak diatur. Value adalah nilai dari pengaturannya.
Contoh sintaks CSS: h1 {color: red;}
Keterangan: Selector: h1 Property: color Value: red Terjemahan bahasa
manusia: mengatur color dari h1 ke red (warna merah)
Pengelompokan Selector
Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara
menggunakan pemisah koma. Misalkan mengatur tag-tag h1, h2, h3 menggunakan warna
merah, maka CSSnya menjadi: h1, h2, h3 {color: red;}
Multi Property
Untuk mengatur lebih dari satu property gunakan pemisah titik koma ( ; ) Contoh: h1,
h2, h3 { color: red; font-family: arial; font-size: 150%; }
Comment di CSS
3. Menggunakan syntax pembuka /* dengan penutup */ untuk menuliskan komentar di CSS.
Contoh: /* tulis komentar anda disini */
p { text-align: justify; /* tulis lagi komentar anda disini */ color: blue; font-family:
arial;
}
Ada 3 cara memasang CSS ke dalam HTML:
1. Inline CSS
2. Embedded CSS
3. Import CSS file
Inline
Kode CSS dituliskan langsung ke dalam tag HTML. Penulisan cara ini tidak
memerlukan selector dalam kode CSS. Cara ini sebaiknya hanya digunakan jika
memformat suatu elemen hanya satu kali. Contoh: <p style=“color:blue;”> isi paragraf.
</p>
Embedded
Menempelkan kode CSS diantara tag <head> dan </head> atau dapat juga diantara tag
<body> dan </body> Contoh: <head> <style type=“text/css”> p {color:blue;} </style>
</head>
Import
Kode CSS dituliskan pada file tersendiri berekstensi .css Kemudian file .css tersebut
diimport diantara tag <head> dan </head> Contoh: <head> <link rel="stylesheet"
type="text/css" href="css/style.css" media="screen" /> </head>
Pada kode href itulah yang merujuk pada file CSS, yaitu berada pada folder css dengan
nama file style.css
Class dan ID Selector
Pada contoh sebelumnya, penggunaan tag HTML sebagai selector.
Misalkan membuat kode CSS untuk tag <h1>, sintaks CSSnya h1 {color: red;}
Sehingga ketika menggunakan tag <h1> maka teksnya berwarna merah.
Jika membutuhkan format tersendiri untuk elemen tertentu bagaimana? Maka dibutuhkan
penentuan Class dan ID Selector.
4. Class Selector
Class selector adalah penulisan selector untuk sekelompok elemen yang sering digunakan
pada beberapa elemen. Format penulisan class selector: .nama_class_selector {property:
value;}
Deklarasi di HTML menggunakan atribut class. Contoh: <div
class="nama_class_selector"> dan diakhiri dengan tag </div>
Penulisan kode CSS: .tengah {text-align: center;} p.tengah {color: red;} h1.kiri
{color:blue;} h1.tengah {color:black;} Pemakaian kode CSS ke HTML: <p
class=“tengah”>Teks tengah akan berwarna merah</p> <div class="tengah"> <h1>Tag h1
tengah akan berwarna hitam</h1> </div> <h1 class="kiri">Tag h1 kiri akan berwarna
biru</h1>
Class ID
ID selector digunakan untuk menentukan format style pada elemen tunggal yang unik.
Menggunakan atribut id pada HTML, dan didefinisikan dengan tanda # pada sintaks CSS.
Saya akan membuat laporan css sederhana
Berikut potongan source code :
<html>
<head>
<style type="text/css">
table{
border-colapse:colapse;
border:1px solid black;
}
#menu{
height:40px;
width:960px;
background:url(bg-nav.jpg) repeat-x;
9. <div id="menu">
<table width="100%">
<tr>
<td align="center"><a
href="">Depan</a></td>
<td align="center"><b
href="">Profil</b></td>
<td align="center"><c
href="">Produk</c></td>
<td align="center"><d
href="">Kontak</d></td>
<td align="center"><e
href="">Forum</e></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="70%">
<div id="isi">
<h1 style="color:blue; font:bold 16px Candara,
Arial, Tahoma;"> Ayo Minum Susu</h1>
<img src="susu.jpg"/>
<p>Susu adalah sebuah cairan bergizi yang
dihasilkan oleh kelenjar susu dari mamalia betina.
Susu adalah sumber gizi utama bagi bayi
sebelum mereka dapat mencerna makanan padat.
Susu binatang (biasanya sapi) juga diolah
menjadi berbagai produk seperti mentega, yoghurt, es krim, keju, susu kental manis, susu
bubuk dan lain-lainnya untuk konsumsi manusia.
10. Semua orang di dunia ini membutuhkan susu
untuk menopang kehidupannya. Baik dari bayi sampai orang yang sudah lanjut usia.</p>
<p>Khasiat susu sapi ternyata banyak sekali.
Susu yang banyak digemari anak-anak ini disebut juga darah putih bagi tubuh karena
mengandung banyak viatmin dan berbagai macam asam amino yang baik bagi kesehatan
tubuh.
Dalam segelas susu terdapat antara lain:
<ul>
<li>Potasium, yang menggerakkan
pembuluh darah agar tetap stabil, menghindarkan Anda dari penyakit darah tinggi dan
jantung.</li>
<li>Zat besi, mempertahankan kulit tetap
bersinar.</li>
<li>Tyrosine, mendorong hormon
kegembiraan dan membuat tidur lebih nyenyak.</li>
<li>Kalsium, menguatkan tulang.</li>
<li>Magnesium, menguatkan jantung
dan sistem saraf sehingga tidak mudah lelah.</li>
<li>Yodium, meningkatkan kerja otak
cepat.</li>
<li>Seng, menyembuhkan luka dengan
cepat.</li>
<li>Vitamin B2, meningkatkan
ketajaman penglihatan.</li>
</ul>
</p>
</div>
</td>
<td width="30%" class="table-menu"></td>
</tr>
<tr>
11. <td colspan=2 height=50 class="footer">
<p style="color:blue; font:bold 12px candara, arial,
tahoma; text-align:center;"></p>
</td>
</tr>
</table>
</body>
</html>
Hasil dari source code sederhana di atas :
Sekian dari saya...
Terima kasihh
