Di dalam sebuat web terdapat 4 urutan atau kerangka web yaitu, Header, Sidebar, Section (body), Footer.
Header : Kepala website. Tempat letak judul web, logo web dan lain sebagainya.
Sidebar : Tempat letaknya menu, konten, dan lain sebagainya.
Section (Body) : Merupakan bagian tubuh dari sebuah website, tempat dimana artikel atau postingan akan tampil.
Footer : Merupakan bagian untuk penulisan sebuah Hak Cipta sebuah website.
Berikut Syntax CSS dasar untuk membuat tampilan web atau layout :
<!DOCTYPE html>
<html>
<head>
<style>
#wrapper{
width: 100%;
margin: 0 auto;
}
#header {
background-color:#1abc9c;
color:#2c3e50;
text-align:left;
padding:10px;
font-family:Century;
}
#sidebar {
line-height:30px;
background-color:#16a085;
height:500px;
width:200px;
float:right;
padding:5px;
text-align:center;
}
#body{
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:#1abc9c;
color:#2c3e50;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head><body>
<div id=”wrapper”>
<div id=”header”>
<h1>Cari Kode</h1>
</div><div id=”sidebar”>
Home<br>
About<br>
</div><div id=”body”>
<h2>Posting</h2>
<p>
(Body) Isi dari postingan
</p>
</div><div id=”footer”>
Copyright Carikode.com
</div>
<body>
<html>
Untuk penulisan syntax di atas gunakan Internal Style, Bagi teman – teman cari kode yang belum tahu silahkan baca artikel sebelumnya tentang “Menghubungkan HTML dengan CSS”.
ini hasil outputnya :
Source : http://www.carikode.com
Rismawan Junandia