Div dan Span Part 2

Pada pengenalan blok elemen yang pernah di share terdahulu, penulis telah memberi kasus untuk contoh kasus span. Setidaknya kita ada gambaran bagaimana span itu bekerja. Span bekerja sebagai pemisah dan masih dalam satu baris (tidak membuat garis baru). Span bekerja seperti <b>, <td>, <a>, <img>. Tag – tag seperti itu tidak membuat garis baru sama seperti <span>.

Sedangkan disini penulis akan berbagi pengetahuan tentang <div> yang telah dijanjikan pada postingan yang lalu. Tag <div> bekerja sama seperti <h>, <p>, <ul>, <table> yang ketika di definisikan tag tersebut membuat garis baru. Sebagai contoh lihat scripts dibawah.

<p>Ini adalah paragraph 
 <div>
  <em>
   dan ini adalah blok dari em yang di sangga dengan div sehingga tetep aja kebawah. bener ga?
  </em>
 </div>
</p>

Hasilnya,

divem

Kita lihat contoh jika kita tidak menggunakan tag <div>, seperti apa hasilnya.

<p>
 Ini adalah paragraph <em>dan ini adalah blok dari em yang di sangga dengan div sehingga tetep aja kebawah. bener ga?</em>
</p>

Hasilnya,

divem2

Mungkin kita perlu contoh lain, perhatikan contoh berikut ini (klo bisa di dicoba juga)

<!DOCTYPE html>
<html>
<body>

<p>ini adalah beberapa kata di paragrap</p>

<div style="color:#0000FF">
  <h3>ini heading yang di sangga div / terdapat di antara div elemen</h3>
  <p>ini paragrap yang ada di div elemen / disangga div elemen</p>
</div>

<p>ini beberapa kata yang ada di paragrap</p>

</body>
</html>

Hasilnya,

divem3

Nah pada pembahasan selanjutnya mungkin penulis akan menjelaskan lebih detailnya untuk elemen div yang sering digunakan untuk membuat layout pada website.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s