4. Atribut HTML

Oke sekarang kita lanjut ke atribut html.

Semua tag HTML dapat diisi atribut dimana fungsi dari atribut itu bermacam-macam ada yang digunakan untuk memformat isi tag, ada yg digunakan untuk identitas elemen, dan lain-lain.

Penulisan attribut pada tag elemen HTML cukup mudah:

<namatag atribut="isi atribut" atribut2="isi atribut2">isi elemen</namatag>

Atribut yang sering dipakai dalam html adalah class dan id. Karena digunakan untuk identitas dari elemen, kalau class umumnya untuk proses styling, kl id sebut saja KTP nya elemen.

Selain class dan id, ada juga atribut yang ngetop, misalnya align, style, title.

Contoh penggunaan atribut pada HTML, silahkan diketik ulang dengan nama file atribut.html:

<!DOCTYPE html>
<html>
   <head>
      <title>Contoh atribut HTML</title>
   </head>   
   <body>
      <h1 align="center">ada ditengah</h1>
      <p style="color:red">Saya berwarna merah</p>
      <p title="ini informasi paragraf">
         Silahkan arahkan mouse ke sini, akan muncul popup
         <br />
         Itu adalah hasil dari atribut title
      </p>
      <div id="content">
          <a href="http://rasupe.com" title="go to rasupe" target="_BLANK" style="text-decoration:none">Web Rasupe</a>
      </div>
   </body>   
</html>

 

Hasilnya bisa dilihat di bawah ini:

 

Saya rasa cukup mudah teorinya, jadi tak perlu dijelaskan dengan detail. Inti dari materi ini adalah:

  • Semua elemen HTML dapat dipasangi atribut.
  • Atribut pasti dimasukkan pada tag pembuka, kalau di penutup nanti browsernya bingung.
  • Atribut pasti berisi namaatribut="isi atribut", ga boleh dibalik ya.
  • Satu elemen bisa berisi banyak atribut, sesuai keinginan, eh maksudnya sesuai kebutuhan :P

Lha trus daftar atribut apa saja yang dapat dipakai pada elemen html? dan fungsinya spt apa?

Sabar dulu, ada banyak sekali atribut pada HTML, saking banyaknya sehingga nanti sambil belajar pasti ditemukan atribut pada html beserta fungsinya, jadi mengalir saja mengikuti konsep saya saat belajar pemrograman yaitu "pengetahuan coding disesuaikan kebutuhan".

Berikut ini sedikit atribut beserta keterangannya yg bisa saya tulis:

Atibut Isi Keterangan
align right, left, center Mengatur posisi horizontal elemen: kanan, kiri, atau tengah
valign top, middle, bottom Mengatur posisi vertical elemen: atas, tengah, bawah
bgcolor #ff0000, red, dll Set background warna pada elemen.
background URL Set background gambar pada elemen.
id apasaja Identitas elemen, ingat KTP.
class apasaja Biasanya digunanan styling dengan CSS
width angka Mengatur lebar elemen, ukuran dalam pixel.
height angka Mengatur tingi elemen, ukuran dalam pixel.
style kode css Styling elemen menggunakan inline CSS
href URL Diisi URL (link website) untuk tag <a>

 

Sudah paham atau belum? Jika belum, anggap saja elemen itu adalah kamarmu, tembok kanan dicat dengan atribut warna merah (bgcolor="red"), di pojok kanan ada lemari yang dikasih atribut sehingga bentuknya kotak, samping pintu ada jam dinding dikasih atribut valign="middle" sehingga jamnya nempel ditengah tembok, kasurnya di set align="center" sehingga ada ditengah lantai. Ahh, cukup, teruskan sendiri berkhayalnya...

Okay, dari sini semoga bisa dimengerti bahasa dari saya, yg aslinya bukan seorang penulis. Jika ada yang bingung langsung komen aja.