A. Cascading Style Sheet
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen. Rekomendasi CSS menguraikan tiga jenis style:
1. Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
Untuk lebih menspesifikasikan pemberian style, kita bisa menggunakan atribut class atau id. Tekniknya, class dinotasikan dengan titik (.); id dinotasikan dengan pagar (#).
2. Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
Pendekatan ini mirip dengan embedded, kecuali style-nya diletakkan di file terpisah dan berekstensi css. Pemisahan style ini juga menjadikan pendekatan ini sangat efektif dan efisien, khususnya ketika akan digunakan oleh lebih dari satu dokumen.
3. Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.
B. Tipografi
Berkaitan dengan visualisasi teks, ada beragam style yang bisa kita berikan untuk menghasilkan bentuk sesuai keinginan.
1. Style Font
Ada beragam style yang bisa diterapkan pada teks, misalnya bentuk, ukuran, dan warna.
2. Mengatur Spasi
Properti style line-height memungkinkan kita untuk mengubah spasi standar dari suatu teks.
3. Initial Cap
Jika diperlukan, kita bisa mengatur huruf pertama dari paragraph merepresentasikan huruf besar (initial cap) seperti layaknya di majalah
C. Elemen-Elemen Halaman
CSS dapat digunakan untuk memformat elemen-elemen HTML apa pun, misalnya border dan padding.
1. Border
Properti border merepresentasikan batas dari suatu bidang area, misalnya paragraf. Properti ini menyediakan beberapa style yang bisa dimanfaatkan untuk membuat variasi border.
2. Padding
Seperti halnya di tabel, padding berfungsi untuk menetapkan jarak antara border dengan konten.
D. Link
CSS juga memungkinkan kita untuk mengatur style maupun perilaku dari suatu link. Sebagai contoh, kita bisa menghilangkan garis bawah yang normalnya ada di setiap link.
E. List
Kemampuan menarik lainnya dari CSS adalah memformat list menjadi struktur menu yang elegan.
F. Menggunakan Division
Pendekatan yang efektif untuk memformat elemen-elemen HTML—termasuk juga division—adalah dengan menggunakan CSS.
1. Ukuran Area
Seperti di kebanyakan elemen, kita bisa memanfaatkan atribut width dan height untuk menspesifikasikan ukuran area. Selain itu, atribut-atribut seperti padding dan margin juga bisa dimanfaatkan di sini.
2. Format Font
Di dalam suatu area, kita juga bisa menerapkan style spesifik yang tentunya akan terisolasi (unik) dengan keseluruhan area.
3. Posisi Area
Seperti halnya paragraf, elemen-elemen div akan menghasilkan area secara berurutan dari atas ke bawah. Adapun jika dikehendaki, kita bisa mengatur posisi area secara fleksibel dengan memanfaatkan atribut float CSS.
G. Membuat Kerangka
Kerangka dasar merupakan kulit luar atau pembungkus (wrapper) yang umumnya digunakan untuk menampung keseluruhan desain. Sederhananya, karakteristik utama dari kerangka ini adalah terletak di tengah web browser. Untuk menempatkan area kerangka berada di tengah—se cara horizontal—browser, kita dapat memanfaatkan atribut margin. Tekniknya, tetapkan nilai auto pada margin, di mana akan mengakibatkan posisi secara otomatis diatur di tengah.
H. Desain Layout
Setelah mempersiapkan wrapper, langkah selanjutnya adalah membuat desain layout. Sebagai contoh, kita akan membuat layout standar (header, menu, content, dan footer) dengan style terpisah.
Huff…akhirnya selesai juga ya teorinya…!!! Hehehe….
Ok…sekarang kita coba buat aplikasinya y…!!
sekarang kita akan membuat website dengan CSS secara sederhana dulu y…!!!
Sebelum kita menuliskan kode HTML-nya, kita tulis dulu CSS-nya….
Coba tuliskan source code berikut ini ya…:
#wrapper
{ margin:auto;
width:980px;
border:2px solid white;
}
#header
{ height:80px;
border:1px solid orange;
}
#inner
{ float:left;
margin:5px 0;
border:1px solid white;
}
#footer
{ clear:both;
height:50px;
border:1px solid purple;
}
#sidebar
{ float:left;
margin-right:10px;
width:200px;
height:400px;
border:1px solid blue;
}
#content
{ float:left;
width:760px;
height:400px;
border:1px solid white;
}
#content-top
{ clear:both;
margin:auto;
width:760px;
height:120px;
border:1px solid red;
}
#content-main
{ float:left;
margin:auto;
width:480px;
height:260px;
border:1px solid green;
}
#content-right
{ float:right;
margin:auto;
width:260px;
height:270px;
border: 1px solid yellow;
}
Kemudian simpan dengan nama “style.css”
Setelah kita menuliskan css tersebut, sekarang coba tuliskan kode HTML berikut ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
sidebar
</div>
<div id="content">
<div id="content-top">
Top Content
</div>
<div id="content-main">
Main Content
</div>
<div id="content-right">
Right Content
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
Maka tampilannya akan seperti ini :
Itu masih sederhana lho…
Sekarang kita coba yang agak rumit ya…!!!
seperti biasa, sebelum membuat kode html-nya, kita buat dulu css-nya, seperti berikut ini :
* { margin: 0; }
body { margin:5px auto; padding:0; font:0.72em/150% arial; }
#wrapper
{ margin:auto;
width:980px;}
#header
{ height:80px;
margin:0px auto;
background:#000;}
#header-content
{height:70px;
margin:auto;
background:#fff url(w90.jpg);}
#menu-top
{ font-size:small;
height:20px;
float:right;
padding:0px 50px;
font-weight:bold;}
#logo
{ float:left;
margin:10px 10px 10px 50px;
height:50px;}
#site-title h2
{ float:left;
padding:0px 10px;
height:30px;
margin:20px 0px;
font:2.1em/100% 'Verdana';
font-weight:
bold;}
#search
{ clear:right;
float:right;
margin:20px 50px 0px auto;
height:30px;
font-weight:bold;}
#inner
{ float:left;
margin:0px;}
#footer
{ clear:both;
height:60px;
background:#99FF33;}
#footer p { text-align:center;}
#sidebar
{ float:left;
width:200px;
height:400px;
background-color:#FFCC66}
#content
{ float:right;
width:780px;
height:400px;
background:#FFF}
#content-top
{ clear:both;
margin:auto;
width:780px;
height:170px;
background-image:url(paper.jpg)}
#content-main
{ float:left;
margin:auto;
width:480px;
height:240px;}
#content-main p, h3
{ padding: 10px 20px 0px 20px;
text-align:justify;}
.style1 {font-size:x-small}
#content-main hr{ width:440px;
color:#FF9900;
margin: 10px 20px 0px 20px;}
#content-right
{ float:right; margin:10px auto; width:260px;
border: 2px solid green; background:#99FF33}
#content-right h3{ padding: 10px 20px 0px 20px;
text-align:justify;}
#content-right ul{ padding: 10px 20px 20px 40px;
list-style:square;}
#leftmenu ul { width:200px; list-style-type:none;
padding:0; margin:0;}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active { padding-left:15px;
text-decoration:none;}
#leftmenu a { padding: 5px 0px 5px 15px; display:block;
background:#6cae15 no-repeat left center; margin: 0px 0px 1px; color:#000 }
#leftmenu a:hover { background:#5e9711 no-repeat left center; color:#fff}
Simpan dengan nama “layout.css”
Penamaan sangat berpengaruh dengan kode html yang akan kita tulis berikutnya. Tulis kode html berikut ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<link type="text/css" rel="stylesheet" href="layout.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="header-content">
<div id="menu-top">
Home | Sitemap | RSS | Contact | About Us
</div>
<div id="logo">
<img src="images[2].jpg" width="50" alt ="0"/>
</div>
<div id="site-title">
<h2>TEKNIK ELEKTRO</h2>
</div>
<div id="search">
Search : <input name="q" size="20" type="text"/>
</div>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content-top">
</div>
<div id="content-main">
<h3>Presentasi dari TecQuipment Ltd, UK</h3>
<hr />
<p class="style1">
Selasa, 02 Maret 2010
</p>
<p>
Hari Selasa kemarin (16/02/2010) Universitas Negeri Malang kedatangan tamu dari TecQuipment Ltd, United Kingdom. Tamu dari perusahaan produsen peralatan pendukung pembelajaran keteknikan ini bermaksud menjalin hubungan kerjasama sekaligus mempresentasikan produk-produknya. Secara kebetulan, lokasi kegiatan dipusatkan di Jurusan Teknik Elektro, tepatnya di Lab. Multimedia.Kegiatan presentasi selain dihadiri bapak ibu dosen Jurusan Teknik Elektro juga dihadiri oleh beberapa undangan dari jurusan-jurusan lain. [...]
</p>
</div>
<div id="content-right">
<h3>Events</h3>
<ul>
<li><a href="#">Lomba Fotografi</a></li>
<li><a href="#">Pelantikan KORPS ASISTEN</a></li>
<li><a href="#">Lomba Desain Grafis</a></li>
<li><a href="#">Seminar Nasional</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<br />
<p><b>© sushi_hana2@yahoo.com</b></p>
</div>
</div>
</body>
</html>
Maka akan muncul seperti ini :
nice inpoh... :)
BalasHapus