Sebuah Website sering kali menampilkan konten dalam beberapa kolom (seperti mejalah atau koran).
Contoh :
AKU INGIN BELAJAR PROGRAM
Foxpro
Visual Basic
HTML
Visual Basic
HTML
Salam U-DT
Blog ini dibuat untuk membantu anda yang ingin belajar sendiri tanpa guru
Memang agak sulit, namun apabila kita bersungguh - sungguh maka kita pasti bisa, kunci utama yang harus dipegang adalah NIAT kita.
Copyright
© tahu-programs.blogspot.com
Tata letak HTML menggunakan elemen <div>
Tata letak HTML menggunakan elemen <div>
<Div> elemen sering digunakan sebagai alat tata letak,
karena dengan mudah dapat diposisikan dengan CSS.
|
Beberapa contoh elemen menggunakan 4 <div> untuk membuat kolom tata letak :
Contoh
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
Foxpro<br>
Visual Basic<br>
HTML<br>
</div>
<div id="section">
<h1>Salam U-DT</h1>
<p>
Blog ini dibuat untuk membantu anda yang ingin belajar sendiri tanpa guru
</p>
<p>
Memang agak sulit, namun apabila kita bersungguh - sungguh maka kita pasti bisa, kunci utama yang harus dipegang adalah NIAT kita.</p>
</div>
<div id="footer">
Copyright © tahu-programs.blogspot.com</div>
</body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
Foxpro<br>
Visual Basic<br>
HTML<br>
</div>
<div id="section">
<h1>Salam U-DT</h1>
<p>
Blog ini dibuat untuk membantu anda yang ingin belajar sendiri tanpa guru
</p>
<p>
Memang agak sulit, namun apabila kita bersungguh - sungguh maka kita pasti bisa, kunci utama yang harus dipegang adalah NIAT kita.</p>
</div>
<div id="footer">
Copyright © tahu-programs.blogspot.com</div>
</body>
CSS-nya
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
Mungkin cukup sekian,
Semoga Bermanfaat...........!!!
0 comments:
Post a Comment