Belajar membuat web dengan CSS (2) ~ Dream's Zone

Setelah sebelumnya kita telah membuat tampilan web dengan CSS dan tag HTML. Sekarang kita aplikasikan tag tersebut dengan mengisi (fill) dari setiap tag tadi, seperti contoh berikut:

Source code untuk kode html-nya adalah sebagai berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" lang="en"> <head> <title>Studi CSS-2</title> <link type="text/css" rel="stylesheet" href="3_2.css"> </head> <body> <div id="wrapper"> <div id="header"> <div id="header-content"> <div id="menu-top"> Home | Sitemap | RSS | Contact | About Us </div> <div id="logo"> <img src="UM3D.png" width="50" alt="" /> </div> <div id="site-title"> <h2>TEKNIK ELEKTRO</h2> </div> <div id="search"> Search : <input name="q" size="20" type="text"> </div> </div> </div> <div id="inner"> <div id="sidebar"> <div id="leftmenu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">News and Media</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Tips and Tricks</a></li> <li><a href="#">Download</a></li> </ul> </div> </div> <div id="content"> <div id="content-top"> </div> <div id="content-main"> <h3>Presentasi dari TecQuipment Ltd, UK</h3> <hr /> Rabu, 3 Maret 2010 Voice over Internet Protocol (VoIP), atau dengan nama lainnya Internet Telephony adalah suatu teknologi untuk mentransmisikan data termasuk yang berupa data biasa, suara ataupun video secara real time melalui internet (saluran IP). Dalam aplikasi transmisi suara, VoIP merupakan kandidat kuat untuk menggantikan jaringan telepon konvensional yang menggunakan PaBX (Privat Branch Exchange). Hal ini dikarenakan biayanya yang lebih murah terutama untuk koneksi interlokal dan internasional (jarak jauh). Apalagi sekarang dikatakan bahwa kualitas dari layanan VoIP ini dapat melebihi kualitas layanan jaringan konvensional. </div> <div id="content-right"> <h3>Events</h3> <ul> <li><a href="#">Lomba Fotografi</a></li> <li><a href="#">Pelantikan KORPS ASISTEN</a></li> <li><a href="#">Lomba Desain Grafis</a></li> <li><a href="#">Seminar Nasional</a></li> </ul> </div> </div> </div> <div id="footer"> © 2010 Teknik Elektro UM. Malang, Indonesia. </div> </div> </body></html>

Sedangkan untuk source code css-nya (simpan dengan nama 3_2.css) seperti berikut:

* { margin: 0; } body { margin:5px auto; padding:0; font:0.72em/150% verdana; } #wrapper { margin:auto; width:980px;} #header { height:80px; margin:0px auto;background:#000;} #header-content{height:70px; margin:auto; background:#fff url(2.gif);} #menu-top { font-size:small; height:20px; float:right; padding:0px 50px; font-weight:bold;} #logo { float:left; margin:10px 10px 10px 50px; height:50px;} #site-title h2{ float:left; padding:0px 10px; height:30px; margin:20px 0px; font:2.1em/100% 'Verdana'; font-weight: bold;} #search { clear:right; float:right; margin:20px 50px 0px auto; height:30px; font-weight:bold;} #inner { float:left; margin:0px;} #footer { clear:both; height:60px; background:#99FF33;} #footer p { text-align:center;} #sidebar { float:left; width:200px; height:400px; background-color:#FFCC66} #content { float:right; width:780px; height:400px; background:#FFF} #content-top { clear:both; margin:auto; width:780px; height:180px; background-image:url(skype.jpg)} #content-main { float:left; margin:auto; width:480px; height:240px;} #content-main p, h3{ padding: 10px 20px 0px 20px; text-align:justify;} .style1 {font-size:x-small} #content-main hr{ width:440px; color:#FF9900; margin: 10px 20px 0px 20px;} #content-right { float:right; margin:10px auto; width:260px; border: 2px solid green; background:#99FF33} #content-right h3{ padding: 10px 20px 0px 20px; text-align:justify;} #content-right ul{ padding: 10px 20px 20px 40px; list-style:square;} #leftmenu ul { width:200px; list-style-type:none; padding:0; margin:0;} #leftmenu a:link, #leftmenu a:visited, #leftmenu a:active { padding-left:15px; text-decoration:none;} #leftmenu a { padding: 5px 0px 5px 15px; display:block; background:#6cae15 no-repeat left center; margin: 0px 0px 1px; color:#000 } #leftmenu a:hover { background:#5e9711 no-repeat left center; color:#fff}

Dream's Zone

Rabu, Maret 3

Belajar membuat web dengan CSS (2)

0 comments:

Posting Komentar

Wahyu Penjual Mimpi

Labels

Ping Me!!

Blog Archive

pengunjung

Followers

Translate