Berikut kita akan belajar pemrograman Web menggunakan Division...
Division merupakan suatu pendekatan yang efektif untuk memformat elemen-elemen HTML...
Ini adalah gambar hasil pemrograman Web yang saya buat menggunakan division..
CSS Script untuk membuat tampilan seperi diatas yaitu :
#wrapper {
margin: auto;
width: 900px;
border: 1px solid red;
}
#header {
height: 80px;
border: 1px solid blue;
}
#inner{
float: left;
width : 900px;
height : auto;
margin:5px 0;
border: 1px solid blue;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#inner1{
float: left;
width: 685px;
height: 330px;
margin-left : 5px;
border: 1px solid red;
}
#top{
float: left;
width: 683px;
height: 100px;
border: 1px solid green;
}
#maincontent {
float: left;
width: 500px;
height: 223px;
border: 1px solid black;
}
#right{
float : right;
width: 160px;
height: 150px;
border: 1px solid blue;
}
#footer {
clear: both;
height: 50px;
border: 1px solid magenta;
}
Script HTML untuk tampilan diatas yaitu:
<!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>Halaman Web 1</title>
<link rel="stylesheet" href="gaya1.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="inner">
<div id="sidebar">
SIDEBAR
</div>
<div id="inner1">
<div id="top">
TOP
</div>
<div id="maincontent">
CONTENT
</div>
<div id="right">
RIGHT
</div>
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
</html>
Selamat mencoba...
Semoga bermanfaat... ^_^
READ MORE - Pemrograman Web dengan Pemanfaatan Division
Division merupakan suatu pendekatan yang efektif untuk memformat elemen-elemen HTML...
Ini adalah gambar hasil pemrograman Web yang saya buat menggunakan division..
CSS Script untuk membuat tampilan seperi diatas yaitu :
#wrapper {
margin: auto;
width: 900px;
border: 1px solid red;
}
#header {
height: 80px;
border: 1px solid blue;
}
#inner{
float: left;
width : 900px;
height : auto;
margin:5px 0;
border: 1px solid blue;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#inner1{
float: left;
width: 685px;
height: 330px;
margin-left : 5px;
border: 1px solid red;
}
#top{
float: left;
width: 683px;
height: 100px;
border: 1px solid green;
}
#maincontent {
float: left;
width: 500px;
height: 223px;
border: 1px solid black;
}
#right{
float : right;
width: 160px;
height: 150px;
border: 1px solid blue;
}
#footer {
clear: both;
height: 50px;
border: 1px solid magenta;
}
Script HTML untuk tampilan diatas yaitu:
<!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>Halaman Web 1</title>
<link rel="stylesheet" href="gaya1.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="inner">
<div id="sidebar">
SIDEBAR
</div>
<div id="inner1">
<div id="top">
TOP
</div>
<div id="maincontent">
CONTENT
</div>
<div id="right">
RIGHT
</div>
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
</html>
Selamat mencoba...
Semoga bermanfaat... ^_^
