Cascading Style Sheet

Label:

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:
• Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
• Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
• Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.
Selain mengulas tentang pemanfaatan CSS, bagian ini juga menekankan pada pembuatan desain dengan menggunakan division. Bagaimanapun, untuk menghasilkan desain halaman web yang baik, penggunaan tabel tidak disarankan dan sebagai gantinya adalah dengan memanfaatkan division.

Contoh pembuatan desain layout
Untuk membuat desain layout halaman web dengan menggunakan HTML, maka ikutilah langkah-langkah berikut ini :
1. Pertama-tama, kita membuat kerangkanya terlebih dahulu sesuai dengan keinginan kita.
a. Ketikkan kode berikut ini:
#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}
#header {
height: 80px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#content {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}
#Top {
float:right;
width: 544px;
height:90px;
border: 1px solid red;
}
#Bottom {
float:right;
width: 544px;
height:238px;
border: 1px solid green;
}
#Left {
float:Left;
width: 330px;
height: 230px;
border: 1px solid red;
}
#Right {
float:right;
margin-left: 20px;
width: 190px;
height: 150px;
border: 1px solid red;
}
#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}
b. Simpan dengan nama mystyle.css

2. Selanjutnya ketikkan kode berikut ini juga :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Desain Layout</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />

</head>
<div id = "wrapper">
<div id="header">
header
</div>

<div id="inner">
<div id="sidebar">
Sidebar
</div>

<div id="content">
<div id="Top">
Top
</div>
<div id="Bottom">
<div id="Left">
Content
</div>
<div id="Right">
Right
</div>
</div>
</div>
</div>

<div id="footer">
Footer
</div>
</div>
</body>
</html>
Simpan file dalam bentuk html (Desain.html)

3. Buka file html, maka hasilnya sebagai berikut:


4. Langkah selanjutnya adalah membuat isi dari setiap kolom-kolom yang telah ada, misalnya dengan cara mengetikkan kode berikut ini:
#wrapper {
margin: auto;
width: 1000px;
border: 1px solid white;
}
#header {
height: 100px;
background: white;
border: 1px solid white;
}
#inner {
float: left;
margin: 3px 0;
border: 1px solid white;
}
#sidebar {
float: left;
margin-right: 5px;
width: 175px;
height: 357px;
background: #CCFF99;
border: 1px solid white;
}
#top {
float: left;
width: 813px;
height: 135px;
background: #FFFFCC;
border: 1px solid white;
}
#content {
float: left;
margin-right: 5px;
width: 450px;
height: 220px;
background: #FFFFCC;
border: 1px solid white;
}
#right {
float: right;
width: 357px;
height: 165px;
background: #CCFF99;
border: 1px solid white;
}
#footer {
clear:both;
height: 50px;
background: #6cae15;
border: 1px solid white;
}
#leftmenu ul {
width: 175px;
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: #ffffff;
}
#leftmenu a:hover {
background: #5e9711 no-repeat left center; color: #ffffff
}
#box1 {
float: left;
margin-right:10px;
width: 170px;
height: 40px;
<!-- background: #99CC00; -->
border: 1px solid #99CC00;
}
#box2{
float: right;
margin-right: 20px;
margin-top: 7px;
width: 60px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#box3{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 35px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#box5{
float: right;
margin-right: 15px;
margin-top: 7px;
width: 100px;
height: 20px;
background: #FFFFFF;
border: 1px solid #99CC00;
}
#box6{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 50px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#box7 {
float: left;
margin-right: 5px;
margin-top: 2px;
width: 490px;
height: 85px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box8 {
float: left;
margin-right: 3px;
margin-top: 5px;
width: 450px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box9 {
float: left;
margin-right: 0px;
margin-top: 5px;
width: 400px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
Simpan dengan nama missal cobatgs.css

5. Dan mengetikkan kode berikut pada file html-nya :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="cobatgs.css" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<div id = "box1">
<img src="UM.jpg" alight center = 400>
</div>
<div id = "box7">
<img src="3.jpg" width = 812>
</div>
<div id = "box5">
</div>
<div id = "box6"><font color="black"> Search :
</div>
<div id = "box2">
<a href="link.html"> <font color="black"> Contact</a></p>
</div>
<div id = "box3">
<a href="link.html"><font color="black"> Home</a></p>
</div>

</div>

<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News & Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips & Tricks</a></li>
<li><a href="#">Downloads</a></li>
</ul>
</div>
</div>
<div id="top">
<div id = "box8">
<img src="1.jpg" width = 810>
</div>

</div>
<div id="content">
<b>Selamat Datang.....<br/></b>
<br/>


Seminar Nasional Electrical, Informatic and It's Education 2009 (SNEIE 2009)
merupakan konferensi tahunan yang diadakan oleh Jurusan Teknik Elektro Universitas Negeri Malang (TE UM).
Seminar ini diadakan sebagai sarana diskusi dan komunikasi antarpara akademisi, praktisi, dan peneliti.
Secara khusus, SNEIE mencakup bidang keilmuan Elektronika, Elektro (Tenaga), Informatika, dan Kependidikan.
Namun demikian, tak menutup kemungkinan bidang-bidang lain yang masih relevan untuk memberikan kontribusi.
<br/>


</div>
<div id="right">
<b>Event :</b>
<ul>
<li>Lomba Mawapres </li>
<li>Lomba Desain Web </li>
<li>Seminar Nasional (SNEIE 2009) </li>

</div>
</div>
<div id="footer">
<h3 align="center"><b>@ 2010 Teknik Elektro UM Malang Indonesia</b></h3>
</div>
</div>
</body>
</html>

Buka file html, maka hasilnya sebagai berikut:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Video Pembelajaran "Perakitan Komputer"