konten

Belajar Dasar HTML : Mengenal Tag block dan Tag Inline Pada Struktur HTML


Dalam sebuah dokumen kode html ,sebuah struktur html terdiri dari element tag dan element attribute. Jika struktur html akan di gunakan dengan tujuan tertentu seperti pembuatan website,blog, dll, maka kurang lengkap jika tidak memiliki element konten. Kira-kira seperti ini contohnya : " segelas kopi pada umumnya terdiri dari serbuk kopi dan gula, nah jika ingin menjadikan minuman kopi teh ,kopi dengan gabungan rasa teh, maka yang harus di lakukan yaitu menambahkan teh tetapi jika ingin menjadikannya minuman kopi susu, kopi dengan tampilan coklat muda maka di tambahkan susu. Serbuk kopi dan gula ibaratkan element tag dan attribute, (yrart) sedangkan kopi teh yang memiliki warna hitam kemerahan merupakan tampilan.

jadi jika sebuah minuman kopi susu di ibaratkan struktur html, maka susu merupakan element konten, karna pada dasarnya itu adalah serbuk kopi + gula ,hanya saja sudah di tambah susu jika ini di tampilkan pada browser maka dengan tampilan berwarna coklat muda,  begitu juga minuman kopi teh ,teh merupakan element konten jika di tampilkan pada browser maka warna nya akan coklat tua".

Biar gak pusing contoh lain :  keluarga  (struktur html) = ayah + anak +ibu  maka konten nya yaitu kamu, karna jika tanpa kamu rasa nya kurang lengkap, cieeeee.

2 Jenis Tag Pada HTML

Pada dasarnya html sendiri memiliki 2 jenis tag : yaitu tag dengan tipe Block  dan tipe inline.
Perbedaan keduanya adalah
Block akan membuat baris baru dan memisahkan diri dari tag di sekitarnya. Sedangkan inline tidak membuat baris baru dan menyatu dengan tag di sekitarnya.
  • Tag dengan tipe block
Contoh dari blok elemen ini adalah tag paragraf(<p>),list(<ol>atau<ul>), dan heading (<h1> s/d <h6>)Block element akan ditampilkan terpisah dari seluruh tag sebelum dan sesudahnya.  Untuk lebih jelas lagi ini adalah salah satu contoh tag <p>, <h2>, dan <ol> di dalam HTML:

Contoh tag html dengan tipe block :

<!DOCTYPE html>
<html>
  <head>
   <title>Belajar Bersama HTML di Bukit kedikit</title>
  </head>
  <body>
    <h2>kami sedang brlajar Block Element HTML</h1>
    <h4>Di yura46.blogspot.com</h4>
    <p>Tag p dan h1 adalah tag dengan tipe blok</p>
    <p>keduanya akan dimulai di baris baru</p>
    <ul>
      <li>Tag li jiga merupakan blok elemen</li>
      <li>dan juga akan berjarak dari tag p sebelumnya</li>
    </ul>
  </body>
</html>

Maka tampilannya jika dibuka dg browser akan seperti gambar di bawah, ingat pastikan file berekstensi .html !


  • Tag dengan tipe Inline
Perbedaan tag tipe block dan inline ,Tag jenis ini akan menyatu dengan tag yang ada di sekitarnya. Juga, tidak membuat baris baru.
Contoh dari tag inline ini adalah: <em>, <i>,<strong> dan <b>.
Berikut adalah contoh dari halaman HTML kita sebelumnya, namun telah di ganti dg tag tipe inline seperti  <em>, <i>, dan <b>:
Contoh tag html dengan tipe inline :


<!DOCTYPE html>
<html>
  <head>
   <title>Meminta restu dengan orang tua lisa </title>
  </head>
  <body>
  <p><strong>Sedang ngapelin lisa blackpink</strong>
<i>di yura46.blogspot.com </i>
<b>Tag i dan em adalah tag dengan tipe inline</b>
   <em>Keduanya tidak dimulai di baris baru</em></p>
</body>
 
</html>
Maka tampilannya di browser seperti gambar di bawah : tampilan browser setiap kalimat menyatu dengan kalimat yang lain tanpa adanya baris baru.

Perbedan dari kedua jenis tag tersebut tidaklah mutlak karena dapat diubah oleh CSS. Misalnya, block element menjadi inline element,(yrart) inline element menjadi block element. Namun, Karena HTML digunakan untuk menyusun struktur halaman web, secara struktur begitulah perbedaan block element dan inline element.

Nah itu lah kira-kira tag block dan tag inline pada struktur html. Semoga bermanfaat.

Mari Diskusi Di kolom komentar



Tampilkan Komentar
Sembunyikan Komentar

0 Response to "Belajar Dasar HTML : Mengenal Tag block dan Tag Inline Pada Struktur HTML"

Post a comment

ads

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel