Tuesday, September 10, 2013

Perbedaan DIV dengan Span di HTML


"Sekarang saya akan membahas tentang perbedaan Div dengan Span di dalam HTML"
sebelum saya menjelaskan tentang perbedaan Div dengan span, tidak lengkap rasanya jika kita tidak melakukan praktiknya terlebih dahulu.

  • Contoh Penggunaan Div

<html>

<head>
<title>Div</title>
</head>
<style type="text/css">
#atas{width:700px;height;150px;background:blue;position:absolute;top;0px;left:0px;}
.menu{width:200px;height:300px;background:#333;position:absolute;top:150px;left:0px;}
.content{width:500px;height:300px;background:#E6E6FA;position:absolute;top:150;left:200px;}
#bawah{width:700px;height:100px;background:blue;position:absolute;top:450px;left:0;}
</style>
<body>
<div id="atas">
<h1>Header</h1>
</div>
<div class="menu">
<h3>Menu</h3>
</div>
<div class="content">
<h2>ISI Konten</h2>
</div>
<div id="bawah">
<p align="right">BY,Cahya Dyazin</p>
</div>
</html>

  • Contoh Penggunaan SPAN

<html>
<head>
<title>SPan</title>
</head>
<style type="text/css">
#utama{background:#E6E6FA;}
.red{color:red; font-size:25px;}
.yellow{color:yellow; font-size:25px;}
.green{color:green; font-size:25px;}
.blue{color:blue; font-size:25px;}
</style>
<body>
<p>Daftar Warna</p>
<span id="utama">
<span class="red">Merah</span>
<span class="yellow">Kuning</span>
<span class="green">Hijau</span>
<span class="blue">Di Langit Yang Biru</span>
</span>
</html>

Kesimpulan :
Coba Lihat contoh DIV diatas menghasilkan sebuah halaman web dengan dimensi tetap dan posisi yang absolute untuk semua tag Div-nya ,jika di perhatikan hampir mirip dengan penggunaan tabel ya ???
Nah kalau di perhatikan secara kasat mata Tag SPAN kelihatan seperti sama dengan Tag DIV, tapi dalam kenyataannya tag div dengan span itu berbeda.
Perbedaan utama antara tag div dan span :Jika tag div digunakan maka akan membagi halaman web secara otomatis meskipun di dalam tag div tersebut tidak di atur format style CSS-nya, Sedangkan Span Hanya mengatur akan mengatur isi konten yang dilingkupinya tanpa mengatur atau membagi halaman web menjadi bagian-bagian kecil seperti yang dilakukan oleh DIV.

Saya hanya seorang "newbie" yang baru bisa ngoding lohor kemarin.


EmoticonEmoticon