Friday, February 26, 2010

Layout Web Sederhana Dengan Memanfaatkan <div>

Pada pemrograman web kita akan disuguhkan dalam penempatan fungsi <div>, penggunaan fungsi tersebut lumayan sedikit membuat kita berpikir, karena penempatan yang setting deffaultnya selalu pojok kiri ataupun pojok kanan.Pendekatan yang sangat tepat dalam penempatan, dan penggunaan fungsi <div> yakni dengan menggunakan CSS, apa itu CSS? Dalam posting sebelumnya saya telah membahas hal tersebut, klik disini untuk belajar apa itu CSS dibawah ini merupakan contoh sederhana dari sebuah desain web yang menggunakan fungsi <div>

Pembuatan desain seperti diatas lebih mudah dibuat dengan menggunakan CSS, dibawah ini merupakan code CSS dan Code HTMLnya untuk membuat desain web seperti diatas...
Code CSS yang disimpan dengan nama mod3tgs1.css:
#wrapper {
margin: auto;
width: 756px;
border: 1px solid Blue;
}
#header {
height: 70px;
border: 1px solid green;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#inner2 {
float: left;
width: 550px;
height: 330px;
border: 1px solid green;
}
#top{
height: 70px;
border: 1px solid red;
}
#content {
float: left;
margin-right: 20px;
width: 320px;
height: 250px;
border: 1px solid red;
}
#right {
float: right;
width: 205px;
height: 200px;
border: 1px solid green;
}
#footer {
clear: both;
height: 50px;
border: 1px solid green;
}


Selanjutnya merupakan kode HTMLnya:
<!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_Halaman_Web_By_DwiPriyatmoko</title>
<link rel="stylesheet" href="mod3tgs1.css" type="text/css" />
</head>

<body>
<div id="wrapper">
    <div id="header">
    Header</div>
    <div id="inner">
        <div id="sidebar">
        Sidebar
        </div>
        <div id="inner2">
            <div id="top">
            Top
            </div>
            <div id="content">
            Content
            </div>
            <div id="right">
            Right
            </div>
        </div>
    </div>
    <div id="footer">
    Footer
    </div>
</div>

</body>
</html>

Klik disini untuk mengunduh file html maupun file CSS-nya..

Terima kasih atas kunjungannya...semoga bermanfaat, jangan lupa comment'nya ya...mungkin kalau ada saran ataupun kritik...

2 comments:

Unknown on May 21, 2012 at 6:41 AM said...

ok mksh y pak :D

Fajry on June 26, 2012 at 12:04 PM said...

beserta penjelasan kode kode nya dong bro

Post a Comment

 

Hyato_Mahasiswa Malang