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

Related Posts:

  • Ekspor Database Untuk dapat mengekspor database harus masuk dulu ke phpMyAdmin, Caranya buka browser kemudian ketikkan  di URLnya: http://localhost/phpmyadmin/  sehingga akan muncul tampilan: Kemudian Klik… Read More
  • Install Mikrotik Dengan Winbox MikroTik RouterOS™ adalah sistem operasi dan yang dapat digunakan untuk menjadikan komputer manjadi router network yang handal, mencakup berbagai fitur lengkap untuk network dan w… Read More
  • Remote Komputer Dari Luar Jaringan LAN (via IP Public) Posted on 23rd November 2011 in mikrotik Kali ini saya sempatkan menulis catatan kecil yang mungkin sudah ba… Read More
  • XAMPP adalah merupakan paket instalasi webserver yang terdiri dari MySQL, PHP Dengan adanya paket webserver ini sungguh memudahkan bagi kita yang ingin membuat suatu website atau aplikasi web base dengan platform PHP. Kele… Read More
  • Assalamualaikum.Wr.Wb Di tutorial kali ini saya akan coba membahas bagaimana cara pembuatan Database MySql menggunakan fasilitas Xampp. Pada contoh ini Database nya masih sangat sederhana, sehingga mudah di mengerti oleh … Read More

0 comments: