Belajar HTML <div>

Last Update: 19 Feb 2013View: 190
<div> adalah element berbentuk kotak atau box di dalam website, dan digunakan untuk membuat page layout. Untuk membina element <div>, kita akan menggunakan <div> sebagai opening tag dan </div> sebagai closing tag.

Kod HTML

Berikut merupakan contoh kod HTML dengan element <div>.
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
  <body>
    <div>
      Ini adalah kandungan dalam div.
    </div>
  </body>
</html>

Paparan Web Browser

Web browser anda akan memberikan paparan element <div> seperti berikut.
google chrome iconinternet explorer web browser iconfirefox web browser iconopera web browser iconsafari web browser icon
Ini adalah kandungan dalam div

Kod HTML, CSS

Ini adalah contoh website layout menggunakan element <div>.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
  <body>
    <div style="width:100%;height:50px;background-color:#97C197;">
      Banner Website
    </div>
    <div style="width:15%;height:200px;background-color:#C3D8C3;float:left;">
      Menu
    </div>
    <div style="width:85%;height:200px;background-color:#E5EACC;float:right;">
      Kandungan Website
    </div>
    <div style="width:100%;height:50px;background-color:#BCBFAF;clear:both;">
      Footer Website
    </div>
  </body>
</html>

Paparan Web Browser

Web browser akan memberikan paparan page layout menggunakan element <div> seperti berikut.
google chrome iconinternet explorer web browser iconfirefox web browser iconopera web browser iconsafari web browser icon
Banner Website
Menu
Kandungan Website
Footer Website

0 comments: