Sekarang kita akan Mengenal tag div dan span, jika sebelumnya sahabat sudah melihat tutorial sebelumnya. Kalau belum kita silakan lihat dulu Tutorial HTML Dasar : 9. Mengenal Tag Table dan List di HTML. Tag ini akan seiring kita jumpai pada template atau web design karena kedua tag ini secara garis besar tidak mempunya arti atau fungsi apa-apa. Tapi, jika kita ingin menjadi web designer kita akan sering menggunakannya. Mari kita bahas tag div dan span dibawah ini.
Pengertian dan fungsi tag div
Div adalah tag block-level yang tidak mempunyai arti sama sekali. Block level ini maksudnya tag yang bisa menyesuaikan dengan lebar web yang tersedia dan ketika ditutup tag div maka tag lain akan tampil di garis baru. Maka dari itu tag ini sering digunakan untuk design web. Berikut adalah contoh tag block level selain div :
- <div>
- <h1> - <h6>
- <p>
- <form>
Langsung saja, kita buat contohnya :
<!doctype html>
<html>
<head>
<title>Belajar Div dan Span</title>
</head>
<body>
<div style="background-color:lightblue; ">
<h2>Belajar Div</h2>
<p> Bandung adalah kota di provinsi Jawa Barat.</p>
</div>
</body>
</html>
Pengertian dan fungsi tag Span
Span adalah tag inline yang tidak mempunyai arti sama seperti div. Inline biasanya digunakan didalam sebuah container atau didalam tag div. Tag span tidak mempunyai attribut, tapi sering digunakan attribut class atau id, untuk menghubungkan dengan css maupun javascript. Berikut contoh tag iniline :
- <span>
- <a>
- <img>
Sekarang mari kita buat contohnya :
<!doctype html>Coba edit file tedi menjadi seperti diatas. Bagaimana sobat? mengerti kan sekarang tentang fungsi div dan span. Jika belum mengerti komen aja dibawah ini. Terima kasih telah membaca Tutorial HTML Dasar : 10. Mengenal Fungsi Tag Div dan Span, Semoga bermanfaat.
<html>
<head>
<title>Belajar Div dan Span</title>
</head>
<body>
<div style="background-color:lightblue; ">
<h2>Belajar Div</h2>
<p> <span style="color:grey">Bandung<span> adalah kota di provinsi Jawa Barat.</p>
</div>
</body>
</html>
0 komentar