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; ">