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>Side Bar</div>
<div>Content</div>
<div>Footer</div>
maka akan menjadi seperti ini :
Header
Side Bar
Content
Footer
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 :
Jadinya seperti ini,
<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,
credit :
thank u gannn...
ReplyDeletesngat berguna buat saya bagi pemula..
Perbedaan Div Dengan Span Html ~ Evening After Rain >>>>> Download Now
Delete>>>>> Download Full
Perbedaan Div Dengan Span Html ~ Evening After Rain >>>>> Download LINK
>>>>> Download Now
Perbedaan Div Dengan Span Html ~ Evening After Rain >>>>> Download Full
>>>>> Download LINK ss
Mantab gan sangat bermanfaat , jadi lebih tau tentang HTML
ReplyDeleteDownload Game Android Gratis
Assalamualaikum Salam sejahtera untuk kita semua, Sengaja ingin menulis
ReplyDeletesedikit kesaksian untuk berbagi, barangkali ada teman-teman yang sedang
kesulitan masalah keuangan, Awal mula saya mengamalkan Pesugihan Tanpa
Tumbal karena usaha saya bangkrut dan saya menanggung hutang sebesar
1M saya sters hampir bunuh diri tidak tau harus bagaimana agar bisa
melunasi hutang saya, saya coba buka-buka internet dan saya bertemu
dengan KYAI SOLEH PATI, awalnya saya ragu dan tidak percaya tapi selama 3 hari
saya berpikir, saya akhirnya bergabung dan menghubungi KYAI SOLEH PATI
kata Pak.kyai pesugihan yang cocok untuk saya adalah pesugihan
penarikan uang gaib 4Milyar dengan tumbal hewan, Semua petunjuk saya ikuti
dan hanya 1 hari Astagfirullahallazim, Alhamdulilah akhirnya 4M yang saya
minta benar benar ada di tangan saya semua hutang saya lunas dan sisanya
buat modal usaha. sekarang rumah sudah punya dan mobil pun sudah ada.
Maka dari itu, setiap kali ada teman saya yang mengeluhkan nasibnya, saya
sering menyarankan untuk menghubungi KYAI SOLEH PATI Di Tlp 0852-2589-0869
agar di berikan arahan. Supaya tidak langsung datang ke jawa timur,
saya sendiri dulu hanya berkonsultasi jarak jauh. Alhamdulillah, hasilnya sangat baik,
jika ingin seperti saya coba hubungi KYAI SOLEH PATI pasti akan di bantu Oleh Beliau
ahh spam aja siih..
DeleteWatch and Download world's famous drama series Kurulus Osman in English on link below
ReplyDelete👇
Kurulus Osman in English
📢Get high quality backlinks for your
Website with BacklinksIndexer
BacklinksIndexer
Crypto trading online course
Join on link below
Crypto quantum leap
📒 Read Home doctor book online
Then you will be a doctor for your family
Home Doctor Book
Join online YouTube course
And be a professional YouTuber
Tube Mastery and Monetization by matt
Steel Bite Pro
Best product for
Teeth pain, cavities,teeth whitening and other oral health issues with money back guarantee
🦷
Steel Bite Pro