Pages

Kamis, 04 Maret 2010

Pemrograman Web dengan Pemanfaatan Division

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... ^_^

2 komentar:

gondes mengatakan...

menarik jg untuk dicoba..
q baru buat blog nih..
tolong mampir dan kasih saran gitu..
http://actprogramming.wordpress.com/

Amijaya mengatakan...

Menarik, bikin posting tentang CSS 3, ato JQuery dong

Posting Komentar

 

UM Bloggers


Universitas Negeri Malang

Sample Text

Starting Point...

Bila aku harus mengulangi hidup ini, aku akan membuat kesalahan-kesalahan yang sama, tetapi aku pastikan bahwa aku menemukan kesalahan-kesalahan itu jauh lebih awal. Sehingga keberhasilan akan datang lebih awal menjemput dan meng'elukanku.
Aku tidak tahu takdirku, tetapi aku tahu hakku untuk berhasil.