MODUL 11 BEKERJA DENGAN TAG

Pada modul ini, Praktikan akan mengetahui dan memahami tentang fungsi dan cara menggunakan tag<div> yaitu metoda untuk mengelompokkan konten web sesuai yang dibutuhkan.

Tag <div> merupakan salah satu tag terpenting pada HTML saat ini dan terusdigunakan pada HTML versi terbaru karena kemampuannya dalam mengelompokkan konten-konten web sesuai dengan yang dibutuhkan. Tag <div> akan bernilai maksimal jika digabungkan dengan Cascading Style Sheet (CSS).

Secara umum sintaknya adalah : <div [atribut]> konten </div>

Perhatikan contoh berikut :

<div>Ini Contoh Penggunaan Tag div</div>

Jika ini di eksekusi maka akan tampil tulisan “Ini Contoh Penggunaan Tag div” dengan tampilan biasa-biasa saja. Agar lebih menarik dan dapat tampil sesuai kebutuhan, maka dapat ditambahkan css pada tagnya dengan perintah style. Perhatikan contoh berikut :

background: #DEFAA9 ini adalah perintah untuk membuat warna latar belakang, jika dieksekusi akan tampil seperti berikut :

Menarik bukan, sekarang mari kita tambahkan area untuk header dan footer. Gunakan kode berikut :

Hasilnya akan seperti berikut :

Dari pembahasan diatas dapat disimpulkan bahwa penerapan tag <div> akan berdaya guna jika dikolaborasikan dengan css. Juga terlihat perbedaannya dengan tag <frame>, ataupun tag table yang juga dapat dimanfaatkan dalam mengelompokkan konten web.

PRAKTIKUM

Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil kesimpulan.

Silahkan Anda buat scrip HTML untuk tampilan berikut :

1.    Menu di sebelah kanan


KontenMenu

2.   Menu dan iklan di sebelah kiri

Menu Konten
  Iklan  

3. Menu dan iklan di sebelah kiri + footer

Menu Konten
  Iklan  
Footer

4. Menu sebelah kiri + footer+ Iklan di sebelah kanan

Menu Konten iklan
Footer

5.  Gabungan

LogoHeaderGambar
Ucapan Selamat Datang
Menu

KontenIklan
Footer

Silahkan Anda tulis kode berikut :

<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>

<body>

<div id=”header”>

<h1>Padang dalam Berita</h1>

</div>

<div id=”nav”>

Walikota<br>

Camat<br>

Luran<br>

</div>

<div id=”section”>

<h1>Padang</h1>

<p>

Kota Padang adalah kota terbesar di pantai barat Pulau Sumatera sekaligus ibu kota dari provinsi Sumatera Barat, Indonesia. <p>

Sejarah Kota Padang tidak terlepas dari peranannya sebagai kawasan rantau Minangkabau, yang berawal dari perkampungan nelayan di muara Batang Arau lalu berkembang menjadi bandar pelabuhan yang ramai setelah masuknya Belanda di bawah bendera Vereenigde Oostindische Compagnie (VOC) </p> </div>

<div id=”footer”>

Padang Kota Tercinta, Kujaga dan Kubela

</div>

</body>

Outputnya seperti berikut :

Untuk latihan lebih lanjut, silahkan Anda buat tampilan dibawah ini menggunakan tag <div>

REFERENSI LANJUTAN :

  1. http://www.tutorialspoint.com/html/html_div_tag.htm
  2. http://trikmudahseo.blogspot.com/2012/10/belajar-html-dasar-div-dan-stylenya.html
  3. http://www.zhudesign.com/tutorial-150-belajar-html-memahami-tag-div-division.html
  4. http://www.w3schools.com/html/html_layout.asp
  5. http://puji-lestari.pun.bz/tag-div-pada-html.xhtml
  6. http://www.w3schools.com/tags/tag_div.asp
  7. http://www.chaidir.web.id