Scribd Logo
Upload

Welcome to Scribd!

  • Css Layout Menata Layout Web Dengan CSS

    Uploaded by

    Okie Moet
    14 views7 pages

    Original Title

    Css

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    14 views7 pages

    Css Layout Menata Layout Web Dengan CSS

    Uploaded by

    Okie Moet

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    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.

    Kali ini akan diplajari tentang bagaimana memanfaatkan pendekatan CSS agar menghasilkan web yang elegan dan menarik. Seperti terlihat pada gambar di bawah.

    Source Kode dari Web layout pada gambar di atas adalah sebagai berikut : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Desain Layout Sederhana</title> <link rel="stylesheet" href="my_style.css" type="text/css" /> <style type="text/css"> <!--

    #leftmenu ul { width: 180px; 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; margin: 0px 0px 1px; color: #ffffff; background-color: #CC9933; background-repeat: no-repeat; 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>

    <div id="inner"> <div id="sidebar"> <div id="leftmenu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">News &amp; Media</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">Tips &amp; 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.jpg" width="732" height="150" /></div> <div id="content"><strong> Beasiswa Non Reguler </strong> <br /> 23 Februari 2010 [07.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, sehingga bagi mahasiswa non reguler di sarankan untuk segera mendaftarkan diri di A3 untuk mengambil formulir pendaftaran<br /> Read more... </div>

    <div id="right"><strong>Beasiswa</strong><br /> <ul> <li>PT.Gudang Garam</li> <li>PT.Sampoerna</li>

    <li>Telkom</li> <li>PLN</li> <li>Pemerintah pusat</li> </ul> </div> </div> </div> <div id="footer"> <div align="center"> <p>&copy; Teknik Elektro UM, Malang, Indonesia </p> </div> </div> </div> </body> </html>

    Untuk source kode CSSnya adalah sebagai berikut :

    #wrapper { margin: auto; width: 914px; } #header { height: 80px; background-image: url(header30.jpg); } #inner {

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

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

    You might also like