Embedded: properti style diletakkan di dalam satu blok di dokumenHTML.
Inline: properti style diterapkan secara langsung per baris atau per elemenHTML.
Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.
Ginama sich caranya bikin CSS??
OK, hal pertama yang harus kita persiapkan adalah wrapper, langkah selanjutnya adalah membuat desain layoutnya.dengan style terpisah. Gampangkan!!! Hehehee..
Ni, dibawah uda gue contohin gmn bikinnya di simpan dengan nama mystyle.css
NB: rahasia...ini soal ujian lho....hehehehe
mystyle.css
#wrapper {
margin: auto;
width: 1000px;
border: 1px solid black;
background: green;
}
#top {
margin:auto ;
width: 999px;
height:25px;
border: 1px solid blue;
background: blue;
}
#right {
float: right;
width: 200px;
height: 20px;
background: green;
border: 2px solid black;
margin: 3px 5px 0px 0px ;
}
#right2 {
clear: both;
float: right;
width: 200px;
height: 130px;
background: grey;
border: 2px solid black;
margin: 0px 5px 0px 0px ;
}
#right3 {
clear: both;
float: right;
width: 200px;
height: 20px;
background: green;
border: 2px solid black;
margin: 3px 5px 0px 0px ;
}
#right4 {
clear: both;
float: right;
width: 200px;
height: 160px;
background: black;
border: 2px solid black;
margin: 0px 5px 5px 0px ;
}
#content {
margin: 0px 0px 0px 40px;
width: 700px;
height: 340px;
img float left padding 2px 2px 2px 2px;
border: 2px solid grey;
}
#header {
clear: both;
background-image:url(header3.jpg);
height: 70px;
border: 0px solid blue;
}
#footer {
clear: both;
height: 50px;
border: 1px solid black ;
background-image:url(footer2.jpg);
}
margin: auto;
width: 1000px;
border: 1px solid black;
background: green;
}
#top {
margin:auto ;
width: 999px;
height:25px;
border: 1px solid blue;
background: blue;
}
#right {
float: right;
width: 200px;
height: 20px;
background: green;
border: 2px solid black;
margin: 3px 5px 0px 0px ;
}
#right2 {
clear: both;
float: right;
width: 200px;
height: 130px;
background: grey;
border: 2px solid black;
margin: 0px 5px 0px 0px ;
}
#right3 {
clear: both;
float: right;
width: 200px;
height: 20px;
background: green;
border: 2px solid black;
margin: 3px 5px 0px 0px ;
}
#right4 {
clear: both;
float: right;
width: 200px;
height: 160px;
background: black;
border: 2px solid black;
margin: 0px 5px 5px 0px ;
}
#content {
margin: 0px 0px 0px 40px;
width: 700px;
height: 340px;
img float left padding 2px 2px 2px 2px;
border: 2px solid grey;
}
#header {
clear: both;
background-image:url(header3.jpg);
height: 70px;
border: 0px solid blue;
}
#footer {
clear: both;
height: 50px;
border: 1px solid black ;
background-image:url(footer2.jpg);
}
SETELAH ITU
LANJUTKAN DENGAN
Buat isi bagian –bagian kerangka dari web wang akan dibuat
Simpan dengan nama Desain Layout1.html
<!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">
<table width="993" height="35">
<tr>
<td> <h2> <p align="left"><font color="white"face="Verdana">ARTHA WEB</font> </b> <h2></td>
<td><b><h4 align="right">
<form name="form1" method="post" action="">
<label>Search
<input type="text" name="textfield">
</label>
</form>
<h4> </td>
</tr>
</table>
</div>
<div id="top">
<tr id="main">
<td><a href="index.html"> Home |</a></td>
<td><a href="#">Sitemap |</a></td>
<td><a href="#">RSS |</a></td>
<td><a href="contact.html">Contact |</a></td>
<td><a href="aboutus.html">About Us</a></td>
</tr>
</div>
<div id="right">KATEGORI</div>
<div id="right2">
<ul id="main">
<li><a href="index.html"> Program</a></li>
<li><a href="#">News & Media</a></li>
<li><a href="tutorial.html">Tutorial</a></li>
<li><a href="trik&tips.html">Trik& Tips</a></li>
</ul>
</div>
<div id="right3">LOGIN</div>
<div id="right4">
<form action="" method="post">
<table align="left" bgcolor="#000000" border="0" cellpadding="" cellspacing="0" width="10%">
<tr>
<td> <font color="white"face="TIME NEW ROMAN" size"10"> user id: </font></td>
</tr>
<tr>
<td><input type="text" /></td>
</tr>
<tr>
<td> <p align="left"><font color="white"face="TIME NEW ROMAN" size"10">password:</font> </td>
</tr>
<tr>
<td><input type="text" /></td>
</tr>
<tr>
<td> <input type="submit" value="login" /> </td>
</tr>
</table>
</form>
</div>
<div id="content"><marquee behavior="scroll">"Selamat Datang Di tutorial ARTMUSIC"</marquee> <hr/>
<p> </p>
<b>KARAKTERISTIK SIBANEZ PRESTIGE SEVEN STRINGS<br/></b>
<br/><img src="on.jpg"align="left" />
IBANEZ PRESTIGE 7 STRINGS (New Tremolo)
- basswood with
- flamed ash top body
- wizard II neck
- jumbo 24 frets
- edge pro bridge
- psnd1 (h) neck pu
- psnd2 (h) bridge pu
- cosmo black hardware.</br>
komentar:
SEMI tremolo sudah dipakai
di gitar ini, keren dan stabil.
gitar bisa dilihat di Planet Musik
Arteri Pondok Indah.
pickup IBANEZ PRESTIGE 7 STRINGS
konfigurasi h-h, tanpa single
coil atau hanya dua humbucker type demarcio
dan kayu pada bodinya dua lapis.
gitar ini cocok untuk semi pro
yang akan segera mengganti
pickupnya dengan tipe yang
spesifik. Ya buat temen temen yang berminat
bisa segera hubungi numb 085731610296
di jamin barang memuaskan...mulus rek........!!!!
tidak pernah keluar kamar.
HARGA.Rp 4.650.000,- NEGO
BY ART MUSIC</br>
</div>
<div id="footer"><h6 align="right">SIXSTRINGS'BLOG (arthaindra25@gmail.com)</h6></div>
</div>
</body>
</html>
"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">
<table width="993" height="35">
<tr>
<td> <h2> <p align="left"><font color="white"face="Verdana">ARTHA WEB</font> </b> <h2></td>
<td><b><h4 align="right">
<form name="form1" method="post" action="">
<label>Search
<input type="text" name="textfield">
</label>
</form>
<h4> </td>
</tr>
</table>
</div>
<div id="top">
<tr id="main">
<td><a href="index.html"> Home |</a></td>
<td><a href="#">Sitemap |</a></td>
<td><a href="#">RSS |</a></td>
<td><a href="contact.html">Contact |</a></td>
<td><a href="aboutus.html">About Us</a></td>
</tr>
</div>
<div id="right">KATEGORI</div>
<div id="right2">
<ul id="main">
<li><a href="index.html"> Program</a></li>
<li><a href="#">News & Media</a></li>
<li><a href="tutorial.html">Tutorial</a></li>
<li><a href="trik&tips.html">Trik& Tips</a></li>
</ul>
</div>
<div id="right3">LOGIN</div>
<div id="right4">
<form action="" method="post">
<table align="left" bgcolor="#000000" border="0" cellpadding="" cellspacing="0" width="10%">
<tr>
<td> <font color="white"face="TIME NEW ROMAN" size"10"> user id: </font></td>
</tr>
<tr>
<td><input type="text" /></td>
</tr>
<tr>
<td> <p align="left"><font color="white"face="TIME NEW ROMAN" size"10">password:</font> </td>
</tr>
<tr>
<td><input type="text" /></td>
</tr>
<tr>
<td> <input type="submit" value="login" /> </td>
</tr>
</table>
</form>
</div>
<div id="content"><marquee behavior="scroll">"Selamat Datang Di tutorial ARTMUSIC"</marquee> <hr/>
<p> </p>
<b>KARAKTERISTIK SIBANEZ PRESTIGE SEVEN STRINGS<br/></b>
<br/><img src="on.jpg"align="left" />
IBANEZ PRESTIGE 7 STRINGS (New Tremolo)
- basswood with
- flamed ash top body
- wizard II neck
- jumbo 24 frets
- edge pro bridge
- psnd1 (h) neck pu
- psnd2 (h) bridge pu
- cosmo black hardware.</br>
komentar:
SEMI tremolo sudah dipakai
di gitar ini, keren dan stabil.
gitar bisa dilihat di Planet Musik
Arteri Pondok Indah.
pickup IBANEZ PRESTIGE 7 STRINGS
konfigurasi h-h, tanpa single
coil atau hanya dua humbucker type demarcio
dan kayu pada bodinya dua lapis.
gitar ini cocok untuk semi pro
yang akan segera mengganti
pickupnya dengan tipe yang
spesifik. Ya buat temen temen yang berminat
bisa segera hubungi numb 085731610296
di jamin barang memuaskan...mulus rek........!!!!
tidak pernah keluar kamar.
HARGA.Rp 4.650.000,- NEGO
BY ART MUSIC</br>
</div>
<div id="footer"><h6 align="right">SIXSTRINGS'BLOG (arthaindra25@gmail.com)</h6></div>
</div>
</body>
</html>
MAKA HASILNYA ADALAH.....!!!!
Tidak ada komentar:
Posting Komentar