Element dan Attribute HTML

Element HTML
  • Sebuah HTML element dimulai dengan begin tag / opening tag
  • Sebuah HTML element diakhiri dengan end tag / closing tag
  • Element content adalah segala sesuatu diantara begin dan end tag
  • Beberapa HTML element mempunyai empty content (konten kosong)
  • Empty element ditutup pada begin tag
  • Kebanyakan HTML element dapat mempunyai attributes
Sintaks dasar penulisan elemen HTML: 
<tagname>content</tagname>

Contoh elemen paragraf:
<p>Paragraf pertama saya.</p> 

Keterangan:
<p> adalah begin tag / opening tag
Paragraf pertama saya. adalah 
</p> adalah end tag / closing tag

Perlu diingat untuk selalu membuat end tag pada elemen yang kita buat agar hasil yang ditampilkan tidak berantakan. Tetapi ada juga elemen HTML yang tidak memiliki end tag seperti <br> untuk membuat baris baru (break line). Elemen seperti ini disebut empty element, dan bisa juga dituliskan dengan penutup di opening tag seperi ini <br/>.

Sebuah elemen HTML bisa berada diantara elemen lainnya atau menjadi content elemen lainnya. Untuk lebih jelasnya kita lihat contoh code pada dokumen html berikut:
<html>
<body>
  <h1>Ini adalah elemen heading 1</h1>
  <p>Ini adalah elemen paragraf.</p>
</body>
</html>


Pada dokumen diatas terdapat 4 elemen HTML.
Elemen <html> mendefinisikan keseluruhan dokumen sebagai dokumen html.
Elemen lainnya berada diantara tag begin dan end elemen <html>
Elemen <body> mendefinisikan body/tubuh dari dokumen yang akan tampil pada halaman web.
Berada diantara tag body elemen heading h1 dan p akan ditampilkan pada halaman web.

Attribute HTML
  • Elemen HTML bisa mempunyai atribut
  • Atribut menyediakan informasi tambahan mengenai elemen yang bersangkutan
  • Atribut disimpan di begin tag
  • Atribut terdiri dari nama dan nilai, contoh: nama:"nilai"
Contoh attribute pada beberapa element:
  1. title
    Atribut ini menyediakan informasi berupa tooltip yang akan muncul jika elemen dilalui pointer mouse.
    <p title="tutorial">ini elemen paragraf</p>
  2. src
    Atribut ini digunakan dalam elemen image <img> untuk menuliskan sumber file gambar yang akan ditampilkan.
    <img src="urlgambar.jpg" />
  3. size: width dan height
    Biasanya digunakan dalam elemen gambar untuk menentukan ukuran gambar akan ditampilkan width = lebar, height = tinggi.
    <img src="urlgambar.jpg" width="100" height="120" />
  4. href
    Elemen untuk membuat link <a> menggunakan atribut ini untuk mendefinisikan alamat link yang akan ditautkan.
    <a href="http://rani-irsan.blogspot.com/">Klik Disini </a>
Tips!!!!
  • Selalu gunakan tanda kutip (bisa kutip satu ' atau dua ")untuk menuliskan nilai dari attribute untuk mencegah hasil yang tidak diinginkan terutama jika nilai tersebut mengandung karakter spasi.
  • Jika nilai atribut terdapat tanda kutip, kita bisa menggunakan kutip satu dan dua secara bergantian.
    Contoh:
    <p title='Satu "dua" tiga'>Text 123 dengan dua berkutip dua.</p>
    <p title="Satu 'dua' tiga">Text 123 dengan dua berkutip satu.</p>



Post a Comment

0 Comments