P. 1
Css

Css

|Views: 4|Likes:
Published by Okie Moet

More info:

Published by: Okie Moet on Oct 21, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

11/20/2013

pdf

text

original

CSS LAYOUT Menata Layout Web dengan CSS Isu tentang layouting dalam desain Web yang akhir

-akhir ini mencuat (setelah hadirnya CSS2), adalah penggunaan CSS untuk mendesain layout dan tampilan pada sebuah situs Web. Kedua teknik ini memiliki kelebihan dan kekurangan masingmasing. Fakta Menggunakan Tabel:
• •

Lebih mudah untuk digunakan dibandingkan dengan CSS Layout Proses desain layout tabel lebih mudah menggunakan editor WYSIWYG seperti Dreamweaver atau Frontpage Tabel dapat “rusak” dalam beberapa browser yang biasa kita gunakan, yang menyebabkan disfungsi dalam layout. Meningkatkan jumlah tag HTML yang tidak perlu, hingga akan menaikan ukuran file.

Penggunaan CSS CSS dikenal sebagai alat untuk memformat tampilan pada halaman HTML, namun kini dengan muculnya CSS2 dan dukungan browser-browser terbaru, CSS sering dipergunakan untuk pemposisian dan layouting halaman Web. Fakta Menggunakan CSS:

Telah didukung oleh kebanyakan browser versi baru, tapi tidak didukung oleh browser-browser versi lama. Lebih fleksibel dalam penempatan posisi layout. Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran file. Dapat menampilkan konten utama terlebih dahulu, sementara gambar dan lainlain dapat ditampilkan sesudahnya.

• •

css" type="text/css" /> <style type="text/css"> <!-- .0 Transitional//EN" "http://www.w3. Seperti terlihat pada gambar di bawah.Kali ini akan diplajari tentang bagaimana memanfaatkan pendekatan CSS agar menghasilkan web yang elegan dan menarik.w3.dtd"> <html xmlns="http://www. Source Kode dari Web layout pada gambar di atas adalah sebagai berikut : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Desain Layout Sederhana</title> <link rel="stylesheet" href="my_style.org/TR/xhtml1/DTD/xhtml1-transitional.

background-position: left center. } #leftmenu a:hover { background: #CC6600 no-repeat left center. color: #ffffff } --> </style> </head> <body> <div id="wrapper"> <div id="header"></div> . padding:0. list-style-type:none. } #leftmenu a:link. } #leftmenu a { padding: 5px 0px 5px 15px. #leftmenu a:visited. margin:0. #leftmenu a:active { padding-left: 15px. text-decoration: none.#leftmenu ul { width: 180px. display: block. margin: 0px 0px 1px. background-color: #CC9933. background-repeat: no-repeat. color: #ffffff.

.Gudang Garam</li> <li>PT.Sampoerna</li> .jpg" width="732" height="150" /></div> <div id="content"><strong> Beasiswa Non Reguler </strong> <br /> 23 Februari 2010 [07. Tricks</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">Photo Galerry</a></li> </ul> </div> </div> <div id="inner2"> <div id="top"><img src="foto. Media</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">Tips &amp.43]<br /> <p align="justify">Universitas Negeri Malang (UM) menyelenggarakan program beasiswa untuk mahasiswa non reguler dengan syarat mengajukan PKM untuk di lombakan di antar fakultas. </div> <div id="right"><strong>Beasiswa</strong><br /> <ul> <li>PT.. sehingga bagi mahasiswa non reguler di sarankan untuk segera mendaftarkan diri di A3 untuk mengambil formulir pendaftaran<br /> Read more.<div id="inner"> <div id="sidebar"> <div id="leftmenu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">News &amp.

Teknik Elektro UM. } #inner { .jpg). } #header { height: 80px. width: 914px. Malang. Indonesia </p> </div> </div> </div> </body> </html> Untuk source kode CSSnya adalah sebagai berikut : #wrapper { margin: auto. background-image: url(header30.<li>Telkom</li> <li>PLN</li> <li>Pemerintah pusat</li> </ul> </div> </div> </div> <div id="footer"> <div align="center"> <p>&copy.

padding: 20px. } #right { float: right. . } #inner2 { float: left. height: 293px. clear: none. } #content { width: 470px. height: 150px. border: 1px solid #CC6600. } #top { width: 732px. height: 514px. float: left.float: left. margin-right: 0px. width: 180px. margin: 0px. } #sidebar { float: left. background-color: #FFFFB7.

height: 150px. } #footer { clear: both.width: 200px. } . height: 50px. padding: 10px. background-color: #FFFF99. background-color: #CC6600. border: 1px solid blue. border: 1px solid #CC9900.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->