Membuat Layout Halaman Website memanfaatkan HTML 5 ~ Inspiration Zone

Tuesday, February 22, 2011

Membuat Layout Halaman Website memanfaatkan HTML 5

Posted by Riesh_16 on 3:44 AM

SINTAK untuk pembuatan LAYOUT yang memanfaatkan elemen pada HTML 5

Sintak studi kasus.css

#header {
height : 80px;
border : 1px solid green;
}

#nav{
height : 30px;
border : 1px solid blue;
}

#section{
height : 340px;
border : 1px solid red;
padding : 15px;
}

#sidebar{
float : left;
margin-right : 20px;
width : 800px;
height : 330px;
border : 1px dashed red;
}

#content{
float : left;
width : 329px;
height : 330px;
border : 1px dashed green;
}

#footer{
clear : both;
height : 30px;
border : 1px solid green;
}

Sintak untuk studi kasus.html adalah :

<!DOCTYPE HTML>
<html lang='en'>

<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href ="studi kasus.css" type="text/css"/>

</head>

<body>

<div id="header">
Header
</div>

<div id="nav">
Nav
</div>

<div id="section">

<div id="sidebar">
Sidebar
</div>

<div id="content">
Content
</div>
Section

</div>

<div id="footer">
Footer
</div>
</div>
</div>
</body>
</html>

Tampilan Layout berdasar sintak di atas adalah :