Membuat Design Layout Website Dengan Tag Div
Halo gaes, pada tutorial sebelumnya aku membahas bagaimana menciptakan design layout website dengan tabel. Nah, kali ini masih dalam pembahasan yang sama yakni menciptakan layout website. Cuma bedanya disini kita akan mendesain layout website memakai tag div. Sebelum melangkah lebih lanjut ada baiknya agan membaca dulu postingan aku sebelumnya wacana bagaimana menciptakan design layout website dengan tabel. Jika sudah maka mari kita bahas lebih lanjut disini. Penggunaan tag div lebih efisien dibandingkan dengan tag tabel, sebab tidak memakai banyak tag di dalamnya. Layout sanggup kita sesuaikan impian kita dengan menambahkan css di dalamnya.
Simak codingnya berikut ini :
Buat file dengan nama index.html
<html> <head> <title>Desain Dengan CSS Bagian 2</title> <style> <!-- @import url(style.css); --> </style> </head> <body> <div id="badan_utama"> <div id="header"><h2>Selamat Datang Di Web Kami</h2></div> <div id="menu"> <ul class="list_menu"> <li><a href="#">Home</a></li> <li><a href="#">Profil</a></li> <li><a href="#">Galeri</a></li> <li><a href="#">Hubungi Kami</a></li> </ul> </div> <div id="wrapper"> <div id="content"> <h3>Teknis Publish Website</h3> <p align="justify">Publish web yakni cara untuk mempublikasikan web statis ataupun dinamis yang sudah kita buat biar sanggup dilihat oleh user melalui browser. Agar sanggup diakses oleh user untuk sebuah website, kita memerlukan domain dan hosting.</p> <p align="center">Bagi anda yang belum mengetahui apa itu domain, singkat dongeng domain yakni sebuah nama alamat yang nantinya akan dipakai user untuk mengakses, melihat atau menampilkan halaman web kita.</p> <p align="left">Domain diatur sedemikian rupa sehingga memudahkan kita dalam mengakses sebuah webserver, sebab kita tidak perlu lagi menuliskan alamat sebuah webserver dalam bentuk IP address.</p> <strong>Berikut cara mempublish website anda:</strong><br> <ol> <li>Mendapatkan domain</li> <li>Setting nama server di domain</li> <li>Mendapatkan hosting</li> <li>Upload website</li> <li>Instal database</li> <li>Tes hasil</li> </ol> </div> <div id="sidebar"> <h3>Ini potongan sidebar</h3> </div> </div> <div id="footer">Copyright By Wim Sonevel</div> </div> </body> </html>
Kemudian buat file css dan namai style.css
#badan_utama{ height:auto; width:800px; vertical-align:middle; box-shadow:0px 0px 5px #000; margin-bottom:0; margin-left:auto; margin-right:auto; margin-top:0; } #header{ background-color:#FF9900; text-align:left; padding-left:10px; height:100px; z-index:3; overflow:hidden; } #menu{ background-color:#999999; height:40px; width:100%; margin-top:5px; margin-bottom:5px; } #wrapper{ width:100%; z-index:3; background-color:#FFFFFF; height:auto; } #content{ float:left; height:auto; width:580px; padding:5px; margin-right:6px; z-index:4; font-size:12px; } #sidebar{ height:auto; background-color:#FFFFFF; text-align:left; width:200px; z-index:5; float:left; overflow:hidden; } #footer{ clear:both; height:20px; width:100%; z-index:7; background-color:#0099FF; font-size:11px; text-align:center; font-weight:bolder; } #header h2{ text-shadow:0px 0px 2px #000; } .list_menu{ float:left; margin:0px; padding:0px; width:100%; } .list_menu li{ padding:10px; height:auto; list-style-type:none; float:left; border-right-width:1px; border-right-style:solid; border-right-color:#FFFFFF; width:auto; text-align:center; } .list_menu li a{ text-decoration:none; } .list_menu li a:hover{ font-weight:bold; color:#h1h1h1; text-shadow:0px 0px 2px #000; } .list_menu li:hover{ background-color:#FFFFFF; } h3,h4,h5{ color:#FF9900; font-family:Georgia,"Times New Roman",Serif; font-size:14px; margin-bottom:5px; margin-left:5px; margin-top:5px; }
Jalankan file index.html di browser kemudian kesannya akan tampak sebagai berikut :
Sekian tutorial dari aku selamat mencoba dan semoga bermanfaat.
Happy Coding :)
Comments
Post a Comment