Anda buka notepad++ anda atau bisa menggunakan semacam nya sesuai selera anda.
Copy pastekan html di bawah ini ke notepad anda :
<html>
<head>
<title>Membuar Layout Web</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="container">
<div id="header"> </div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="right">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
<head>
<title>Membuar Layout Web</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="container">
<div id="header"> </div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="right">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Keterangan : Kode di atas murni kode HTML dan anda telah membuat tag DIV dengan masing-masing di berikan selector ID.
Jika anda jalankan dengan klik 2 kali maka penampilan nya masih tidak karuan hanya tulisan dari content saja karena anda belum membuat kode CSS yang bertujuan mendesain tampilan dan halaman layout web anda.
Sekarang kita buat file CSS nya untuk membuat tampilan dari layout website anda.
Di bawah ini adalah kode file CSS :
*{ margin: 0; padding: 0; }
body { font-family: Arial, Helvetica, sans-serif;
}
#container{ width:1000px; margin:0 auto;
}
#header { background-image:url(images/header.jpg); background-repeat:no-repeat; background-position:center; background-color:#FFFF99; width:1000px; height:160px;
}
#menu{ background-color:#993300; width:1000px; height:35px; } #content { background-color:#EBEBEB; width:700px; float:left;
}
#right { width:300px; background-color:#EBEBEB; float:left;
}
#footer { background-image:url(images/footer.gif); width:1000px; height:128px; float:left;
}
body { font-family: Arial, Helvetica, sans-serif;
}
#container{ width:1000px; margin:0 auto;
}
#header { background-image:url(images/header.jpg); background-repeat:no-repeat; background-position:center; background-color:#FFFF99; width:1000px; height:160px;
}
#menu{ background-color:#993300; width:1000px; height:35px; } #content { background-color:#EBEBEB; width:700px; float:left;
}
#right { width:300px; background-color:#EBEBEB; float:left;
}
#footer { background-image:url(images/footer.gif); width:1000px; height:128px; float:left;
}
Keterangan :
Kode * {margin: 0;padding: 0;} memberikan perintah secara general bahwa margin dan padding dengan nilai 0.
Kode body {…} memberikan perintah untuk membuat font dari seluruh body dengan font arial, Helvetica, sans-serif.
Kode #container {…} untuk membuat kerangka dari halaman web dengan ukuran lebar 1.000 px dengan posisi di tengah karena margin nya 0 dan di buat auto.
Kode #header {…} untuk membentuk sebuah header dengan background gambar header.jpg tanpa perulangan gambar (no-repeat) posisi gambar di tengah dan di beri background warna kuning dengan ukuran lebar 1.000 px dan tinggi 160 px.
Kode #menu {…} untuk membuat menu navigasi dengan warna background #993300 dengan lebar 1.000 px dan tinggi 35 px.
Kode #content {…} untuk membuat kerangka lebar 700 px untuk artikel dengan background color dengan warna abu-abu (#EBEBEB) lalu penempatan posisi Float left (nempel/mengalir kekiri).
Kode #right {…} berarti kolom right dengan kerangka lebar 300 px dengan background color abu-abu dengan penempatan float Left.
Kode #footer {…} membuat footer dengan background image footer.gif, lebar 1.000 px, tinggi 128 px, penempatan Float left.
Selengkap nya sudah saya rangkumkan di sini :
1. Cara buat file html layout
2. Cara buat menu navigasi
3. Cara buat file html dari content
4. Cara buat file html colom right
5. Cara buat file html footer
Baca juga :
» Cara membuat template bawaan blogger menjadi responsive