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 pemanfaatan css:
Dalam contoh ini kita akan belajar mengimplementasikan ccs. Dan bagaimana ya kita membuat supaya terbentuk tabel sebagai berikut ya????????????????
Supaya menghasilkan seperti tabel tersebut langkah pertama tuliskan script berikut pada note pad dan simpan dengan format . html
<!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="latihan.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="top">
Top
</div>
<div id="content">Content
</div>
<div id="right">
Right
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Langkah kedua setelah kita menuliskan kode tersebut buat kerangka atau link yang nantinya dapat terhubung dengan kode program di atas dan simpan dengan nama latihan.css
#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;}
#header {
height: 85px;
border: 1px solid blue;}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;}
#sidebar {
float: left;
margin-right: 20px;
width: 200px;
height: 357px;
border: 1px solid red;}#top {
float: left;
width: 524px;
height: 120px;
border: 1px solid red;}
#content {
float: left;
margin-right: 20px;
width: 275px;
height: 235px;
border: 1px solid green;}
#right {
float: right;
width: 227px;
height: 180px;
border: 1px solid red;}
#footer {
clear: both;
height: 75px;
border: 1px solid blue;}
dari pembuatan tabel atau kolom diatas dapat dikembangkan sesuai dengan keinginan kita sebagai contoh kita dapat menambahkan isi maupun foto di dalam kolom supaya tampilan lebih menarik, la !!!!!!!!! terus bagaimana ya caranya biar bisa menarik. Caranya begini dari tabel yang kita buat tadi kita kembangkan dan caranya sama seperti pembuatan tadi ya.
Contoh pengembangan :
Langkanya tulis kode html dan css-nya kdenya sebagai berikut :
Kode htmlnya
<!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="belajar css.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id = "box1">
<img src="logo_sc.jpg">
</div>
<div id = "box7">
<img src="header.jpg">
</div>
<div id = "box5">
</div>
<div id = "box6"><font color="black"> Search :
</div>
<div id = "box2">
<a href="link.html"> <font color="black">About Us</a></p>
</div>
<div id = "box3">
<a href="link.html"><font color="black"> Profil</a></p>
</div>
<div id = "box4">
<a href="link.html"><font color="black"> Foto</a></p>
</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="#">Articel</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
</ul>
</div>
</div>
<div id="top">
<div id = "box8">
<img src="edu.jpg">
</div><div id = "box9">
<img src="motorku.jpg"></div>
</div>
<div id="content">
<b> Grafik 2D <br/></b>
<br/>
Fitur Java 2D yang diperkenalkan pada platform Java 2 membawa dampak
peningkatan kemampuan yang signifikan di bidang grafis. Dengan dukungan
keunikan bahasa pemrograman Java, API 2D ini menawarkan pilihan atraktif
untuk menghasilkan beragam aplikasi grafis.. <br/></div>
<div id="right">
<b>lomba:</b>
<ul>
<li>Pelaksanaan lomba akan dimulai hari rabu" </li>
</div>
</div>
<div id="footer">
<h3 align="center"><b>email: Sincan_um@yahoo.co.id</b></h3>
</div>
</div>
</body>
</html>
dan kode cssnya sebagai berikut:
#wrapper {
margin: auto;
width: 1000px;
border: 1px solid white;
}
#header {
height: 100px;
background: grey;
border: 1px solid white;
}
#inner {
float: left;
margin: 1px 0;
border: 1px solid white;
}
#sidebar {float: left;
margin-right: 5px;
width: 175px;
height: 350px;
background: grey;
border: 1px solid white;
}
#top {
float: left;
width: 813px;
height: 200px;
background: black;
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: 91px;
height: 98px;
background: #FFFFFF;
border: 1px solid white;
}
#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;
}
#box4{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 32px;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: 49px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box8 {
float: left;
margin-right: 3px;
margin-top: 5px;
width: 406px;
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;
}
Eit!!!!!!!!!!!! Jangan lupa nama foto dan css-nya harus sama dengan yang ditulis lo
Tidak ada komentar:
Posting Komentar