Pr!!Nc33$$.WuL@n

Kamis, 29 April 2010

BIKIN KALKULATOR

Yuk qta bkin kalkulator sederhana,,,caranya begini

</SPAN></CODE></P><P><CODE><SPAN style="font-size:10.0pt;line-height:115%; mso-fareast-font-family:Calibri;mso-ansi-language:IN;mso-fareast-language:EN-US; mso-bidi-language:AR-SA"><!DOCTYPE html<BR><BR>PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<BR><BR>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><BR><BR><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><BR><BR><BR><head><BR><BR> <title>Studi Kasus_KALKULATOR</title><BR><BR></head><BR><BR><BR><body><BR><BR><BR> <script language="JavaScript" type="text/javascript"><BR><BR><!--<BR><BR>function getTextValue() {<BR><BR> var myForm = document.form1;<BR><BR> <BR><BR> var pil = myForm.opr.value<BR><BR> <BR><BR> <BR><BR> var Hasil;<BR><BR> if (pil == "*") { <BR><BR> Hasil = parseInt(myForm.op1.value) * parseInt(myForm.op2.value);<BR><BR> }<BR><BR> if (pil == "/") { <BR><BR> Hasil = parseInt(myForm.op1.value) / parseInt(myForm.op2.value);<BR><BR> }<BR><BR> if (pil == "+") { <BR><BR> Hasil = parseInt(myForm.op1.value) + parseInt(myForm.op2.value);<BR><BR> }<BR><BR> if (pil == "-") { <BR><BR> Hasil = parseInt(myForm.op1.value) - parseInt(myForm.op2.value);<BR><BR> }<BR><BR> <BR><BR><BR> myForm.hasil.value = Hasil;<BR><BR>}<BR><BR>//--><BR><BR></script><BR><BR><BR><form name="form1" action="#"><BR><BR><BR><input type="text" name="op1" size=10 /><BR><BR><BR><select name="opr"><BR><BR> <option value="*">*</option><BR><BR> <option value="/">/</option><BR><BR> <option value="+">+</option><BR><BR> <option value="-">-</option><BR><BR></select> <BR><BR><BR><input type="text" name="op2" size=10 /><BR><BR><BR><input type="button" value="=" onclick="getTextValue()" /><BR><BR><BR><input type="text" name="hasil" /><BR><BR><BR></form><BR><BR><BR></body><BR><BR></html></SPAN></CODE>  <P class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto; line-height:normal"><CODE><SPAN style="font-size:10.0pt;mso-fareast-font-family: Calibri">

Berikut ini aplikasi untuk meng-upload file dengan aturan: file yang di-upload hanya boleh berekstensi “zip” dan “pdf”. Ukuran file yang diupload maksimal 2 Mb. Jika tidak mengikuti aturan tersebut, file tidak akan berhasil di-upload dan akan muncul pesan kegagalan. Sebelumnya, kita harus membuat folder yang diberi nama “upload” di folder dimana kita menyimpan script-nya.
Nach nich sour codenya

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><BR><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><BR><head><BR><title>Upload File</title><BR></head><BR><body><BR><form action="<?php $_SERVER['PHP_SELF'];?>"<BR>method="post" enctype="multipart/form-data"><BR>File: <input type="file" name="f1" /><BR><input type="submit" name="submit" value="Upload" /><BR></form><BR><?php<BR>if (isset($_POST['submit']) && isset($_FILES['f1'])) {<BR>//Lokasi upload, misal di subdir upload<BR>$dir = './upload/';<BR>$file = $_FILES['f1']['tmp_name'];<BR>$name = $_FILES['f1']['name'];<BR>$info = pathinfo($name);<BR>// mengatur ukuran file nyang diupload maksimal 2 MB<BR>$size = filesize ($file);<BR>if ($size > 102400){<BR>exit('UKURAN FILE TERLALU GEDHE, CARI NYANG LAEN');<BR>}<BR>//mengatur ekstensi file yang boleh diupload, yaitu pdf dan zip<BR>$ext = $info['extension'];<BR>// hanya pdf atau zip<BR>if(($ext == 'pdf') || ($ext == 'zip')) {<BR>//echo 'File: ', $info<BR>//Memastikan file tidak kosong<BR>if (!is_uploaded_file($file)) {<BR>exit('GAG ADA FILE...');<BR>}<BR>//Upload ke server<BR>if (!move_uploaded_file($file, $dir.$name)) {<BR>echo 'Unable to upload file';<BR>} else {<BR>echo 'FILE BERHASIL DI-UPLOAD';<BR>}<BR>} else {<BR>echo('CUMAN BOLEH UPLOAD PDF atau ZIP');<BR>}<BR>}<BR>?><BR></body><BR></html><BR><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>  <title>Upload File</title></head><BR><body><BR><form action="<?php $_SERVER['PHP_SELF'];?>"method="post" enctype="multipart/form-data"><BR>File: <input type="file" name="f1" /> <input type="submit" name="submit" value="Upload" /></form><BR><?php<BR>if (isset($_POST['submit']) && isset($_FILES['f1'])) { //Lokasi upload, misal di subdir upload $dir = './upload/'; $file = $_FILES['f1']['tmp_name']; $name = $_FILES['f1']['name'];  $info = pathinfo($name);<BR>// mengatur ukuran file nyang diupload maksimal 2 MB $size = filesize ($file);  if ($size > 102400){ exit('UKURAN FILE TERLALU GEDHE, CARI NYANG LAEN'); }  //mengatur ekstensi file yang boleh diupload, yaitu pdf dan zip $ext = $info['extension']; // hanya pdf atau zip if(($ext == 'pdf') || ($ext == 'zip')) { <BR>//echo 'File: ', $info  //Memastikan file tidak kosong  if (!is_uploaded_file($file)) { exit('GAG ADA FILE...'); }  //Upload ke server if (!move_uploaded_file($file, $dir.$name)) {  echo 'Unable to upload file'; } else {  echo 'FILE BERHASIL DI-UPLOAD'; }  } else {echo('CUMAN BOLEH UPLOAD PDF atau ZIP');}<BR>}<BR>?><BR></body></html><BR></SPAN></CODE>  <P class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto; line-height:normal"><CODE><SPAN style="font-size:10.0pt;mso-fareast-font-family: Calibri">

Nach hasilnya kayak gni

Jumat, 23 April 2010

BIKIN FORM PEMESANAN

Yuuukkk,,, Bikin Form Pemesanan!!!

Dengan pemrograman berbasis web kita dapat membuat form pemesanan,,, form ni lebih memudahkan pengelola restaurant dalam menghitung apa ja yang dibeli, And custumer dapat dengan mudah memeriksa uang yang hrus dibyarkan,,,dr pada ngmong tyus mending lgsung bikin ja,,,

Gini nich source codenya,,,

</font></span></code><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"</div><div>"http://www.w3.org/TR/frameset.dtd"></div><div><html lang="en"></div><div><head></div><div><title>Form Pemesanan</title></div><div></head></div><div><body></div><div><script language="JavaScript" type="text/javascript"></div><div>function jumlah() {</div><div>var myForm = document.form1;</div><div>var spagetti = 12000 * eval(myForm.order1.value);</div><div>var ayam goreng kriuk = 10000 * eval(myForm.order2.value);</div><div>var sate daging = 15000 * eval(myForm.order3.value);</div><div>var lemon tea = 5000 * eval(myForm.order4.value);</div><div>var special milk shake = 7000 * eval(myForm.order5.value);</div><div>var hasil = spagetti+ayam goreng kriuk+sate daging+lemon tea+special milk shake;</div><div>if (hasil > 50000) {</div><div>    myForm.total.value = hasil;</div><div>    myForm.diskon.value = 10000;</div><div>    myForm.bayar.value = hasil - eval(myForm.diskon.value);</div><div> } else {</div><div>    myForm.total.value = hasil;</div><div>    myForm.diskon.value = 0;</div><div>    myForm.bayar.value = hasil - eval(myForm.diskon.value);</div><div> }</div><div>}</div><div>function resetForm(){</div><div>document.form1.reset();</div><div>}</div><div></script></div><div><form name="form1" action="#"></div><div><font  size="6">WULAN'Z RESTAURANT</font></div><div><table border="2" cellspacing=0 cellpadding=5 ></div><div><colgroup align="center"></div><div><colgroup align="center"></div><div><colgroup align="center"></div><div><thead valign="middle"></div><div><tr></div><div><th width="35"><font color="black" size="4">No</font></div><div><th width="200"><font color="black" size="4">Makanan/Minuman</font></div><div><th width="180"><font color="black" size="4">Harga Satuan</font></div><div><th width="100"><font color="black" size="4">Pesan</font></div><div></tr></div><div><tbody></div><div><tr></div><div><td>1<td>spagetti<td>@<input  type="text"    value="12000" disabled="true"/><td></div><div><input  type="text"  name="order1" value="0" onChange="jumlah()"/></div><div></tr></div><div><tr></div><div><td>2<td>ayam goreng kriuk<td>@<input  type="text"    value="10000" disabled="true"/><td></div><div><input  type="text"  name="order2" value="0" onChange="jumlah()" /></div><div></tr></div><div><tr></div><div><td>3<td>sate daging<td>@<input  type="text"   value="15000" disabled="true"/> <td></div><div><input  type="text"  name="order3" value="0" onChange="jumlah()"/></div><div></tr></div><div><tr></div><div><td>4<td>lemon tea<td>@<input  type="text"   value="5000" disabled="true"/></div><div><td><input  type="text"  name="order4" value="0" onChange="jumlah()" /></div><div></tr></div><div><tr></div><div><td>5<td>special milk shake<td>@<input  type="text"   value="7000" disabled="true"/> <td></div><div><input  type="text"  name="order5" value="0" onChange="jumlah()"/></div><div></tr></div><div><tr></div><div><td colspan=3 align="right">Jumlah Total<td><input  type="text"  name="total"  disabled="true"/></div><div></tr></div><div><tr></div><div><td colspan=3 align="right">Diskon<td><input  type="text"  name="diskon" disabled="true" /></div><div></tr></div><div><tr></div><div><td colspan=3 align="right">Jumlah Bayar<td><input  type="text"  name="bayar"  disabled="true"/></div><div></tr></div><div></table></div><div><br/></div><div><input type="button" value="CANCEL" onClick="resetForm()" /></div><div></form></div><div></body></div><div></html> </div><div><code><span style="font-size:10.0pt;line-height:115%; mso-fareast-font-family:Calibri;mso-ansi-language:IN;mso-fareast-language:EN-US; mso-bidi-language:AR-SA"><font class="Apple-style-span" color="#20124D"></font></span></code> <span class="Apple-style-span" style="font-family: monospace; font-size: 13px; ">



Nach klu udah hasilnya kayak Gni!!!!!

Kamis, 22 April 2010

Membuat Form Login

Belajar Bikin Form Login With PHP

Pemrosesan form (form processing) merupakan operasi mendasar pada aplikasi web. Dalam konteks pengembangan aplikasi web dinamis, langkah ini pasti akan dilakukan. Sebagai contoh, untuk menerima masukan dari user, tentu diperlukan sekali form isian dan cara pemrosesannya. Begitu pula halnya ketika administrator ingin masuk ke sistem, tentu memerlukan suatu antarmuka penghubung. Intinya, keberadaan form dan pemrosesannya mutlak diperlukan dalam membangun aplikasi web yang interaktif.
Pada aplikasi web, teknik pengiriman form dapat dilakukan melalui tiga metode: POST, GET, dan kombinasi keduanya. Dalam konteks PHP, parameter-parameter GET dapat dibaca melalui superglobal $_GET, sedangkan POST melalui $_POST. Selain itu, keduanya juga dapat dibaca menggunakan $_REQUEST.

Dari pada kebanyakan teori mending belajar langsung,,,,yuk kita bikin form login dengan id misalnya wulan n passwordnya fatah,,,hehehe. Dengan spesifiksi :

Terdapat scripting JavaScript untuk validasi awal (field tidak boleh kosong, masukan id dan password harus huruf).

Jika field kosong dan langsung di-submit, kembalikan fokus kursor ke field pertama (id)

Ada validasi sisi server (dari PHP) untuk memastikan bahwa nilai field adalah string.

Jika nilai id dan password sesuai dengan pre-defined value di variabel, munculkan pesan selamat datang dan cetak nilai id. Sebaliknya, jika tidak sesuai, tampilkan pesan kegagalan.

BEGINI SOURCE CODENYA

</span></code></span><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><!DOCTYPE html</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><head> <title>Login Form</title></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><script language="javascript" type="text/javascript"></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">function cek(){</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">var user= document.getElementById('userid').value;</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">var pass= document.getElementById('passwd').value;</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">if(user.replace(/^\s+|\s+$/g, '')==''){</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">alert('Username Harus Diisi!');</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">return false;</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">}</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">if(pass.replace(/^\s+|\s+$/g, '')==''){</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">alert('Password Harus diisi!');</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">return false;</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">}</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">return true;</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">}</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><br></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"></script></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"></head></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><br></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><body bgcolor="red"></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><form name="login" method="post" action="<?php $_SERVER['PHP_SELF'];?>"></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><p align="center"><? echo $status;?></p></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><br></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><table width="500" border="6" align="center" bgcolor="yellow" rules="groups" cellpadding="8" cellspacing="5"></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><tr></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><td width="50"> </td></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><td align="left"><font size="10" face="Comic Sans ms" color="#06F9E0">Login</font></td></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"></tr></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><tbody ></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><tr><td width="50"> </td><td><font size="4" face="verdana">Username</font></td></tr></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><tr><td width="50"> </td><td><input type="text" name="userid" size="50" id="userid" /></td></tr></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><tr><td width="50"> </td><td><font size="4" face="verdana">Password</font></td></tr></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><tr><td width="50"> </td><td><input type="password" name="passwd" size="50" id="passwd" /></td></tr></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><tr><td width="50"> </td><td><input name="submit" type="submit" onClick="return cek()" value="LOGIN" /></td></tr></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><br></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"></table></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"></form></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><?php</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">if (is_string($_POST['userid'])){</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">if ($_POST['userid']=='wulan'){echo 'Selamat Datang ' .$_POST['userid']; }</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">else{echo 'Username Anda Salah!!!';}</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">}</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">if (is_string($_POST['userid'])){</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">if ($_POST['passwd']=='fatah'){echo '<br/>Password Anda ' .$_POST['passwd']; }</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">else{echo '<br/>Password Anda Salah!!!';}</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">}</span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">?></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><br></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"></body></span></font></div><div><font class="Apple-style-span" color="#FF0000" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"></html></span></font><span class="Apple-style-span" style="font-family: monospace; font-size: 13px; ">

Hasilnya Begini NICH...

Rabu, 31 Maret 2010

Cascading Style Sheet

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:

· 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.

Keuntungan menggunakan CSS

· Memisahkan presentastion sebuah dokumen dari content document itu sendiri.

· Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web

· Mempercepat proses rendering/pembacaan HTML.

Yukk,,, kita coba buat desain layout halaman web seperti contoh dibawah ini dengan memanfaatkan division.

Nich source codex,,,,,

1. bikin file css nya

</span></code></p><p class="MsoNormal" style="text-align: justify;margin-top: 0cm; margin-right: 18pt; margin-left: 18pt; margin-bottom: 0.0001pt; text-indent: -18pt; vertical-align: baseline; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">#wrapper {</span></font></p></font><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">margin: auto;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">width: 750px;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">border: 1px solid red;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">}</span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><br></span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">#header {</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">height: 80px;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">border: 1px solid blue;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">}</span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><br></span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">#inner {</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">float: left;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">margin: 5px 0;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">border: 1px solid black;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">}</span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><br></span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">#sidebar {</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">float: left;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">margin-right: 20px;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">width: 180px;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">height: 330px;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">border: 1px solid red;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">}</span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><br></span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">#top {</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">float:</span></font><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">left;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">width:</span></font><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">544px;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">height:</span></font><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">80px;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">border:</span></font><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">1px solid yellow;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">}</span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><br></span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">#content {</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">float: left;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">width: 300px;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">height: 250px;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">border: 1px solid green;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">}</span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><br></span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">#right {</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">float:</span></font><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">right;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">width:</span></font><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">200px;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">height:</span></font><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">150px;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">border:</span></font><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">1px solid red;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">}</span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><br></span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">#footer {</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">clear: both;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">height: 50px;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">border: 1px solid blue;</span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">}</span></font><span class="Apple-style-span" style="line-height: normal; font-family: monospace; font-size: 13px; ">






Step Kedua kita bkin file htmlx..




</span></code><!DOCTYPE html</span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"></span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><br></span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><head></span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><title>Retno wulandari</title></span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><link rel="stylesheet" href="style.css" type="text/css"/></span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"></head></span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><body></span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><br></span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><div id="wrapper"></span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">  </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><div id="header"></span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">   </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">Header</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">  </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"></div></span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">  </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><div id="inner"></span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">   </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><div id="sidebar"></span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">   </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">Sidebar</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">   </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"></div></span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">   </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><div id="top"></span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">   </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">Top</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">   </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"></div></span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">   </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><div id="content"></span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">   </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">Content</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">   </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"></div></span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">   </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><div id="right"></span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">   </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">Right</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">   </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"></div></span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">  </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"></div></span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">  </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><div id="footer"></span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">   </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">Footer</span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;">  </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"></div></span></font></p><p class="separator" style="text-align: justify;clear: both; "><span class="Apple-tab-span" style="white-space:pre"><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"> </span></font></span><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"></div></span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"></body></span></font></p><p class="separator" style="text-align: justify;clear: both; "><font class="Apple-style-span" face="monospace" size="3"><span class="Apple-style-span" style="font-size: 13px; line-height: 14px;"></html></span></font><span class="Apple-style-span" style="line-height: normal; font-family: monospace; font-size: 13px; ">



Sebagai latihan kedua yuk bkin web yang lebih aktraktif kayak gni,,,




Sourcex kayak gni nich,,,,
Sama ja kyak yang tadi step2x,,,,,,
1.bkin file css dlu
</span></code><span class="Apple-style-span" style="line-height: 14px;">#wrapper {</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">margin: auto;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">width: 750px;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">border: 2px solid green;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">}</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;"><br></span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">#header {</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">height: 80px;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">border: 1px solid green;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">background: #000 url(header30.jpg);</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">}</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;"><br></span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">#logo{</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">margin : 0px 10px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">height: 60px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">width: 60px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">}</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;"><br></span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">#text{</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">margin : -30px 100px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">color: red;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">font-family: verdana;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">font-size: 24px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">font-weight: bold;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">}</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;"><br></span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">#home{</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">margin : -60px 455px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">color: blue;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">font-family: garamond;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">font-size: 14px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">}</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;"><br></span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">#about{</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">margin : -60px 685px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">color: blue;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">font-family: garamond;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">font-size: 14px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">}</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;"><br></span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">#sitemap{</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">margin : 45px 515px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">color: blue;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">font-family: garamond;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">font-size: 14px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">}</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;"><br></span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">#contact{</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">margin : 45px 630px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">color: blue;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">font-family: garamond;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">font-size: 14px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">}</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;"><br></span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">#RSS{</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">margin : -60px 580px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">color: blue;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">font-family: garamond;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">font-size: 14px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">}</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;"><br></span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">#search{</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">margin : -10px 400px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">color: blue;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">font-family: garamond;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">font-size: 18px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">width:50px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">height:20px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">}</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;"><br></span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">#kotakcari{</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">margin: -20px 455px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">}</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;"><br></span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">#inner {</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">float: left;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">margin: 0px;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">}</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;"><br></span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">#sidebar {</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">float: left;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">margin-right: 0px;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">width: 180px;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">height: 332px;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">border: 2px solid red;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">background-color: aqua;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">}</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;"><br></span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">#top {</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">float:</span><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">left;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">width:</span><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">562px;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">height:</span><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">80px;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">border:</span><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">2px red;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">}</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;"><br></span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">#content {</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">float: left;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">width: 340px;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">height: 250px;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">}</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;"><br></span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">#right {</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">float:</span><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">right;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">width:</span><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">220px;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">height:</span><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">150px;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">border:</span><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">2px solid red;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">background-color: purple;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">}</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;"><br></span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">#footer {</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">clear: both;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">height: 50px;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">border: 2px solid green;</span></p><p style="text-align: justify;"><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="line-height: 14px;"> </span></span><span class="Apple-style-span" style="line-height: 14px;">background-color: red;</span></p><p style="text-align: justify;"><span class="Apple-style-span" style="line-height: 14px;">}</span><span class="Apple-style-span" style="font-size: 13px; ">






Step ke 2 bkin file HTMLx...



</span></code><span class="Apple-style-span" style="line-height: 14px;"><!DOCTYPE html</span></p><div class="MsoNormal"><p><span class="Apple-style-span" style="line-height: 14px;"><o:p></o:p></span></p></div><p class="separator" style="clear: both; text-align: justify;"><font class="Apple-tab-span" style="white-space: pre;"><font class="Apple-style-span" face="monospace" size="3"><font class="Apple-style-span" style="font-size: 13px; line-height: 14px;"></font></font></font></p><font class="Apple-tab-span" style="white-space: pre;"><font class="Apple-style-span" face="monospace" size="3"><font class="Apple-style-span" style="font-size: 13px; line-height: 14px;"><p><span class="Apple-style-span" style="white-space: normal;">PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</span></p><p><span class="Apple-style-span" style="white-space: normal;">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span></p><p><span class="Apple-style-span" style="white-space: normal;"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"></span></p><p><span class="Apple-style-span" style="white-space: normal;"><br></span></p><p><span class="Apple-style-span" style="white-space: normal;"><head></span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-style-span" style="white-space: normal;"><title>retno wulandari 2</title></span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-style-span" style="white-space: normal;"><link rel="stylesheet" href="style1.css" type="text/css"/></span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-style-span" style="white-space: normal;"><style type="text/css"></span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-style-span" style="white-space: normal;"><!--</span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-style-span" style="white-space: normal;">#sidebar ul {</span></p><p><span class="Apple-tab-span" style="white-space:pre">  </span><span class="Apple-style-span" style="white-space: normal;">width: 180px;</span></p><p><span class="Apple-tab-span" style="white-space:pre">  </span><span class="Apple-style-span" style="white-space: normal;">list-style-type:none;</span></p><p><span class="Apple-tab-span" style="white-space:pre">  </span><span class="Apple-style-span" style="white-space: normal;">padding:0; margin:0;</span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-style-span" style="white-space: normal;">}</span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-style-span" style="white-space: normal;">#sidebar a:link, #leftmenu a:visited, #leftmenu a:active {</span></p><p><span class="Apple-tab-span" style="white-space:pre">  </span><span class="Apple-style-span" style="white-space: normal;">padding-left: 15px;</span></p><p><span class="Apple-tab-span" style="white-space:pre">  </span><span class="Apple-style-span" style="white-space: normal;">text-decoration: none;</span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-style-span" style="white-space: normal;">}</span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-style-span" style="white-space: normal;">#sidebar a {</span></p><p><span class="Apple-tab-span" style="white-space:pre">  </span><span class="Apple-style-span" style="white-space: normal;">padding: 5px 0px 5px 15px; display: block;</span></p><p><span class="Apple-tab-span" style="white-space:pre">  </span><span class="Apple-style-span" style="white-space: normal;">background: #6cae15 no-repeat left center;</span></p><p><span class="Apple-tab-span" style="white-space:pre">  </span><span class="Apple-style-span" style="white-space: normal;">margin: 0px 0px 1px; color: #ffffff;</span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-style-span" style="white-space: normal;">}</span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-style-span" style="white-space: normal;">#sidebar a:hover {</span></p><p><span class="Apple-tab-span" style="white-space:pre">  </span><span class="Apple-style-span" style="white-space: normal;">background: #5e9711 no-repeat left center;</span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-style-span" style="white-space: normal;">}</span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-style-span" style="white-space: normal;">--></span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-style-span" style="white-space: normal;"></style></span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-style-span" style="white-space: normal;"></head></span></p><p><span class="Apple-style-span" style="white-space: normal;"><body></span></p><p><span class="Apple-style-span" style="white-space: normal;"><br></span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-style-span" style="white-space: normal;"><div id="wrapper"></span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre">  </span><span class="Apple-style-span" style="white-space: normal;"><div id="header"></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><div id="logo"> <img src="UM.bmp"  alt="background" height="80" width="80"/></div></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><div id="text"> TEKNIK ELEKTRO<div id="search">Search</div><div id="kotakcari" ><input type="text"/></div></div></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><div id="home">Home</div></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><div id="sitemap">Sitemap</div></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><div id="RSS">RSS</div></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><div id="contact">Contact</div></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><div id="about">About Us</div></span></p><p><span class="Apple-tab-span" style="white-space:pre">  </span><span class="Apple-style-span" style="white-space: normal;"></div></span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre">  </span><span class="Apple-style-span" style="white-space: normal;"><div id="inner"></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><div id="sidebar"></span></p><p><span class="Apple-tab-span" style="white-space:pre">    </span><span class="Apple-style-span" style="white-space: normal;"><ul></span></p><p><span class="Apple-tab-span" style="white-space:pre">     </span><span class="Apple-style-span" style="white-space: normal;"><li><a href="#">Home</a></li></span></p><p><span class="Apple-tab-span" style="white-space:pre">     </span><span class="Apple-style-span" style="white-space: normal;"><li><a href="#">News & Media</a></li></span></p><p><span class="Apple-tab-span" style="white-space:pre">     </span><span class="Apple-style-span" style="white-space: normal;"><li><a href="#">Tutorial</a></li></span></p><p><span class="Apple-tab-span" style="white-space:pre">     </span><span class="Apple-style-span" style="white-space: normal;"><li><a href="#">Tips & Tricks</a></li></span></p><p><span class="Apple-tab-span" style="white-space:pre">     </span><span class="Apple-style-span" style="white-space: normal;"><li><a href="#">Downloads</a></li></span></p><p><span class="Apple-tab-span" style="white-space:pre">     </span><span class="Apple-style-span" style="white-space: normal;"><li><a href="#">Photo Galerry</a></li></span></p><p><span class="Apple-tab-span" style="white-space:pre">    </span><span class="Apple-style-span" style="white-space: normal;"></ul></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"></div></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><div id="top"></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><img src="foto.jpg" width="564" height="80" alt="" /></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"></div></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><div id="content"></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><strong>Sejarah Blog</strong><br/></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;">Blog adalah kependekan dari Weblog, istilah yang pertama kali digunakan oleh Jorn Barger</span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;">pada bulan Desember 1997. Jorn Barger menggunakan istilah Weblog untuk menyebut</span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;">kelompok website pribadi yang selalu diupdate secara kontinyu dan berisi link-link ke website</span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;">lain yang mereka anggap menarik disertai dengan komentar-komentar mereka sendiri. <br/><br/></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><strong>Read More...</strong></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"></div></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><div id="right"></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><strong>Event</strong><br/></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><ul></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><li>Lomba Panjat Tiang Listrik</li></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><li>Lomba Tarik Kabel</li></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><li>Balap Karung 10 km</li></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"></ul></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"></div></span></p><p><span class="Apple-tab-span" style="white-space:pre">  </span><span class="Apple-style-span" style="white-space: normal;"></div></span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre">  </span><span class="Apple-style-span" style="white-space: normal;"><div id="footer"></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"><div align="center"><br/></span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;">©2010 Teknik Elektro UM, Malang, Indonesia</span></p><p><span class="Apple-tab-span" style="white-space:pre">   </span><span class="Apple-style-span" style="white-space: normal;"></div></span></p><p><span class="Apple-tab-span" style="white-space:pre">  </span><span class="Apple-style-span" style="white-space: normal;"></div></span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-style-span" style="white-space: normal;"></div></span></p><p><span class="Apple-style-span" style="white-space: normal;"></body></span></p><p><span class="Apple-style-span" style="white-space: normal;"></html></span><span class="Apple-style-span" style="line-height: normal; ">