Perbedaan DIV dengan SPAN HTML

ds http://after-rains.blogspot.com/2013/03/dalam-pemrogaman-web-kita-tentunya.html

Dalam Pemrogaman web kita tentunya memrlukan script script untuk membuat sebuah tabel, gambar dan lain lain.

Nah kali ini saya akan sharing sedikit ilmu mengenai perbedaan div dengan span.

Apa itu Div? apa itu Span?

Div

adalah singkatan dari division yang berarti sebuah tag HTML untuk membuat suatu kelompok tertentu atau membuat suatu seksi yang bertujuan untuk pengelompokan sebuah file HTML menjadi beberapa bagian sesuai dengan tempatnya agar mempermudah para web developer memberi style pada setiap bagiannya.

Misalnya :

Sebuah halaman Web yang terdiri dari 4 bagian: Header, Side Bar, Content dan Footer. Untuk mengelompokannya kita dapat menggunakan tag div. Contoh:

<div>Header</div>

<div>Content</div>

<div>Footer</div>

maka akan menjadi seperti ini :

Header
Side Bar
Content
Footer

Untuk membedakan masing masing bagian, kita harus memberi Style pada setiap tag div dengan CSS. Contoh:

<html>
<head>
<title>pengertian div tag</title>
<style type=”text/css”>
div.header {
border: 1px solid #000000;
margin: 0.03em;
background: #ffffff;
height: 30px;
font-size: 2em; text-align: center;}
div.sidebar {
border: 1px solid #330000;
margin: 0.03em;
background: #ffffff;
float: left;
width: 38%;
height: 100px;
font-size: 2em;
text-align: center;}
div.content {
border: 1px solid #330000;
margin: 0.03em;
background: #ffffff;
float: right;
width: 60%; height:
100px; font-size: 2em;
text-align: center;}
div.footer {
border: 1px solid #000000;
margin: 0.03em;
background: #ffffff;
clear: both;
height: 30px;
font-size: 2em;
text-align: center;}
</style>
</head>
<body>
<div class=”header”>Header</div>
<div class=”sidebar”>Side Bar</div>
<div class=”content”>Content</div>
<div class=”footer”>Footer</div>
</body>
</html>

Hasil yang terlihat pada browser akan menjadi seperti ini:

Membuat Layout Web dengan Div.

Tag div juga dapat berfungsi untuk menggantikan fungsi Table. Maksudnya, layout halaman web dengan Table adalah cara kuno yang mulai ditinggalkan dan sebagai penggantinya adalah dengan menggunakan tag div. Alasannya adalah:

a. Kode HTML menjadi lebih pendek daripada menggunakan Table.

b. Ukuran File menjadi lebih kecil.

c. Lebih Fleksibel karena tidak dibatasi oleh baris dan Kolom.

d. Lebih competible pada semua browser saat ini.

Jadi, jika anda ingin membuat layout halaman web tanpa Table gunakanlah cara yang seperti saya contohkan diatas.

Didalam tag div kita juga bisa meletakan tag div lagi, dan elemen HTML yang lainnya seperti gambar, animasi atau video.

Sekian informasi tentang div,dan selanjut nya adalah materi wampserver.

Span

Tag span hampir sama dengan tag div di atas. Perbedaan utamanya adalah bahwa tag div akan membagi halaman web secara otomatis meskipun di dalam tag div tersebut tidak diatur format stylenya (css). Sedangkan tag span hanya akan mengatur konten/isi yang dilingkupinya tanpa membagi halaman web ke dalam bagian-bagian kecil (seperti yang dilakukan tag div). contoh :

<html>

<head>

<title> TAg SPAN </title>

<style>

#merah { color : red }

#biru { color : blue }

#hijau { color : green }

</style>

</head>

<body>

<p> Daftar Warna :</p>

<p>

<span id="merah"> merah </span>,

<span id="hijau"> hijau </span>,

<span id="biru"> biru </span>,

</p>

</body>

</html>

Silahkan simpan kode di atas dengan nama blajar_span.html.
Jadinya seperti ini,

copas ilmu

Perbedaan DIV dengan SPAN HTML

Div

Span

0 Response to "Perbedaan DIV dengan SPAN HTML"

Post a Comment