Mendesain Layout Website dengan HTML dan CSS

Rabu, 09 Mei 2012 16.37 , | Posted by Nanang Gunawan
Kali ini kita akan membahas tentang bagaimana Mendesain Layout Website dengan HTML dan CSS.
Dalam mendesain website hal pertama yang kita lakukan adalah mendesain layout web tersebut.
Nah berikut adalah caranya:

Pertama kita rancang dulu bentuk/layout web ke dalam secarik kertas atau bisa menggunakan tool graphic seperti Photoshop, rancangan layout adalah sebagai berikut:


Perhatikan baik-baik penomoran pada kotak-kotak diatas, ketentuannya adalah sebagai berikut:

1. Kotak No 1 memiliki ID kotak1, di dalam kotak1 terdapat kotak2,kotak3,kotak4 dan kotak7.
2. Kotak No 2 memiliki ID kotak2, kotak 2 berfungsi sebagai header.
3. Kotak No 3 memiliki ID kotak3, kotak 3 berfungsi sebagai menu.
4. Kotak No 4 memiliki ID kotak4, di dalam kotak4 terdapat kotak5 dan kotak6.
5. Kotak No 5 memiliki ID kotak5, kotak 5 berfungsi sebagai sidebar kiri.
6. Kotak No 6 memiliki ID kotak6, kotak 6 berfungsi sebagai isi halaman.
7. Kotak No 7 memiliki ID kotak7, kotak 7 berfungsi sebagai footer.


ID tersebut  akan digunakan dalam HTML dan CCS yang akan kita buat nantinya.
Kemudian kita buat file misalnya file  index.html dengan script berikut:


<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <!-- Memanggil file css -->
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>         
        <div id="kotak1"><!-- Membuat Kotak 1-->
            <div id="kotak2">               
            </div>
            <div id="kotak3">             
            </div>
            <div id="kotak4">
                <div id="kotak5">              
                </div>
                <div id="kotak6">              
                </div>
            </div>
            <div id="kotak7">              
            </div>
        </div>
    </body>
</html>

Kemudian kita buat file css dengan nama style.css dengan isi sebagai berikut:



root { 
    display: block;
}
/*Membuat bentuk dari kotak1 samapai kotak 7*/
#kotak1{
    width:1000px;/*Lebar kotak*/
    height:757px;/*Tinggi kotak*/
    border:1px solid #cdcdcd; /*Border kotak*/
    background:#f0f3f6;/*Background/warna kotak*/
    margin:auto;/*Supaya kotak berada di tengah*/
}
#kotak2{
    width:980px;
    height:150px;
    border:1px solid #cdcdcd;
    background:#639fce;
    margin:auto;
    margin-top:5px;/*jarak kotak dengan kotak diatasnya di beri 5px*/
}
#kotak3{
    width:980px;
    height:40px;
    border:1px solid #cdcdcd;
    background:#2fb075;
    margin:auto;
    margin-top:5px;
}
#kotak4{
    width:980px;
    height:500px;
    border:1px solid #cdcdcd;
    background:#639fce;
    margin:auto;
    margin-top:5px;
}
#kotak5{
    width:240px;
    height:485px;
    border:1px solid #cdcdcd;
    background:#e6e2e2;
    float:left;/*Supaya kotak berada di pinggir kiri*/
    margin-left:5px;
    margin-top:5px;
}
#kotak6{
    width:720px;
    height:485px;
    border:1px solid #cdcdcd;
    background:#e6e2e2;
    float:left;
    margin-left:5px;
    margin-top:5px;
    margin-right:5px; 
}
#kotak7{
    width:980px;
    height:30px;
    border:1px solid #cdcdcd;
    background:#2fb075;
    margin:auto;
    margin-top:5px;
}

Ketika kita buka file index.html di browser maka akan tampil seperti gambar berikut:



Nah jadi deh layout webnya..
Untuk mendownload file lengkapnya silahkan donwload disini

Selamat mencoba!

12 Comments to Mendesain Layout Website dengan HTML dan CSS

Thanks gan infonya...
Tapi bagaimana ya membuat templete website berada di center and middle browser... Mohon penjelasannnya di Shoutbox blog saya ya http://www.hilal.web.id/p/buku-tamu.html

mantap mas ,, ini info yang bermanfaat mas pengen belajar tapi masih bingung hehehee

Thanks agan2 semua, semoga postnya bermanfaat :)

Bisa di edit gak mas templete dari postingan ini.. supaya posisinya jadi center + middle .... tadi sudah saya coba tapi templetenya gak center + middle... Bantuan di shotbox saya ya http://www.hilal.web.id/p/buku-tamu.html

sebenernya ini yang ane cari sob...., ane pengen banget belajar bahasa Html kek gini....., sayangnya agak susah n musti kudu ada yang mandu......, kalo sekedar baca takut pusing....., hehehehe....

@Hilal: itu templatenya posisinya udah center+middle kok mas, sampean pake browser apa yak? saya coba pake IE,Opera,Chrome,Mozilla bisa.

@kang obet: bener emang kadang agak susah kalo g ada yg mandu :)

nice posting, semoga sukses menjadi ahli web

wah bagus juga tutorialnya bisa dilihat nih gan dari template yang dipakai...

kalo yang di kotak4 heightnya di hilangkan,maka akan jadi sesuatu yang aneh, mohon solusinya

Terima Kasih Atas tutorialnya ..
artikel yang sangat bagus ..

stylesheetnya itu ko' ngumpet ya gan ...

alurnya gmna tuch ....!!!

ane blum ngerti

Poskan Komentar