<h1> hingga dengan tag <h6> untk menciptakan judul, tag <p> untk menciptakan paragraf, tag <a> untk menciptakan link dan masih banyak lagi yang lain. Namun terdapat 2 buah tag yang tidak mempunyai makna apa-apa, yaitu tag <div> dan <span>. Walaupun tidak mempunyai makna apa-apa tapi tag ini sering di gunakan untk menciptakan struktur WEBsite ataupun untk memberi style pada sebuah teks, nah pada article kali ini Saya akan membahas wacana perbedaan antara tag <div> dan <span> setips lebih mendalam. Pengertian Tag <div> dan <span>
Tag <div> dan <span> adlah tag yang tidak mempunyai makna apa-apa, walaupun begitu tag ini sering di gunakan untk menciptakan struktur atau bagian-bagian WEBsite. Itu alasannya yaitu tag <div> dan <span> yang tidak mempunyai makna apa-apa, sanggup dengan gampang di tambahkan style-nya atau tampilannya dengan CSS.Contoh yang paling sering untk penggunaan tag
<div> adlah sebagai pemisah satu bab arahan HTML dengan bab arahan HTML yang lainnya. Berikut ini adlah teladan arahan HTML yang memakai tag <div> :<!DOCTYPE html> <html> <head> <title>Belajar HTML</title> <meta charset="utf-8"/> </head> <body> <div id="header"> <h1>Nama WEBsite</h1> </div> <div id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div id="article"> <p>Isi dari article...</p> </div> <div id="sidebar"> <h3>Article Popular</h3> <ul> <li><a href="#">Article 1</a></li> <li><a href="#">Article 2</a></li> <li><a href="#">Article 3</a></li> </ul> </div> <div id="footer"> <p>Copyright © 2017 </p> </div> </body> </html>
Untuk menciptakan tampilan WEBsite di atas terlihat manis kita sanggup memakai CSS, tapi untk pembahasan kali ini Saya tidak akan memakai CSS.
Pada teladan arahan di atas, masing-masing tag
<div> mempunyai atribut id yang membedakan dengan tag <div> yang lainnya. Perbedaan Antara Tag <div> dan <span>
Perbedaan antara tag <div> dan <span> adlah pada jenis tag-nya. Tag <div> merupakan jenis tag block line sedangkan tag <span> termasuk ke dalam jenis tag in line. Berikut ini klarifikasi wacana perbedaan tag berjenis in line dan block line.Block Line
Block line adlah tag yang memisahkan dirinya dengan tag lain yang ada di sekitarnya. Block line umumnya akan menciptakan baris gres setips otomatis. Contoh tag yang termasuk jenis block line yaitu tag untk menciptakan judul<h1> hingga <h6>, tag untk menciptakan paragraf <p>, tag untk menciptakan tabel <table>, dan tag yang tidak mempunyai makna apa-apa<div> .Supaya lebih paham silahkan ketikan arahan di bawah ini :
<!DOCTYPE html> <html> <head> <title>Belajar HTML</title> <meta charset="utf-8"/> </head> <body> <div>Ini adlah kalimat pertama</div> <div>Ini adlah kalimat kedua</div> </body> </html>
Terlihat teks "Ini adlah kalimat pertama" yang di apit oleh tag
<div>..</div> pada gambar di atas, akan menciptakan sebuah blok dan setips otomatis akan menciptakan baris gres yang menciptakan teks "Ini adlah kalimat kedua" berpindah baris. Itu alasannya yaitu tag <div> mempunyai style bawaan broser yaitu display: block; yang memungkinkan tag <div> menciptakan sebuah blok yang panjang.In Line
Jenis tag in line tidak akan menciptakan baris gres ataupun menciptakan sebuah blok. Tag ini cenderung akan menyambung dengan tag yang di sekitarnya dalam baris yang sama. Contoh jenis tag in line adlah tag untk menciptakan garis miring<i> dan <em>, tag untk menciptakan garis tebal <strong> dan <b>, tag untk menciptakan link <a> dan tag yang tidak mempunyai makan apa-apa <span>.Supaya lebih paham silahkan ketikan arahan di bawah ini :
<!DOCTYPE html> <html> <head> <title>Belajar HTML</title> <meta charset="utf-8"/> </head> <body> <span>Ini adlah kalimat pertama</span> <span>Ini adlah kalimat kedua</span> </body> </html>
Terlihat pada gambar di atas teks "Ini adlah kalimat pertama" yang berada diantara tag
<span>...</span> tidak akan menciptakan sebuah blok yang panjang dan terlihat menyambung dengan teks "Ini adlah kalimat kedua" atau tag yang ada di sekitarnya pada baris yang sama. Itu alasannya yaitu tag <span> tidak mempunyai style bawaan broser yang memungkinkan tag <span> sanggup menyambung dengan tag yang ada di sekitarnya.Selain itu di dalam jenis tag block line juga sanggup di tambahkan tag block line yang lain, maupun tag in line. Contohnya ibarat arahan di bawah ini :
<!DOCTYPE html> <html> <head> <title>Belajar HTML</title> <meta charset="utf-8"/> <style> #kalimat { padding: 10px; background: palegreen; } #belajar-html { color: blueviolet; font-weight: bold; } </style> </head> <body> <div id="kalimat"> <p>Sekarang Saya sedang berguru <span id="belajar-html">HTML</span>.</p> </div> </body> </html>
Terlihat pada teladan arahan di atas, terdapat 2 jenis tag block line yaitu tag
<p> dan <div>, dan terdapat 1 jenis tag in line yaitu tag <span>. Tag <p> berada di dalam tag <div> sedangkan tag <span> berada di dalam tag <p>. Itu artinya jenis tag block line juga sanggup di tambahkan tag block line yang lain dan juga tag in line. Tampilan latar belakang teks dan juga warna teks kita memakai CSS.Jika Anda belum tahu apa itu CSS Anda tidak perlu khawatir nanti akan Saya bahas pada Tutorial CSS, yang perlu Anda ingat tag
<div> dan <span>merupakan tag tanpa makna yang sanggup kita maknai dengan CSS.Pada article selanjutnya kita akan membahas Trik Mengatur Posisi dan Tampilan Gambar di HTML. Sumber https://mas-abdi.blogspot.com/
No comments:
Post a Comment