HTML - Attributes

Pada umumnya atribut HTML berlaku untuk unsur elemen HTML yang pada pengaturan default memungkin untuk ditambahkan sebuah atau lebih attribut. Atribut HTML memungkinkan tambahan pengaturan gaya atau karakteristik lain untuk sebuah elemen. Pada tulisan kali ini saya akan menguraikan penggunaan attribut HTML secara garis besarnya saja!.

ID attribute

Digunakan untuk PENGENAL ( IDENTIFIER ) yang bersifat UNIK ( tidak ada yang menyamai ) pada sebuah elemen STYLE SHEET pada sebuah halaman HTML.

<hr id="firsthr">

didalam STYLE SHEET

hr#firsthr { color: #80b0ff; height: 15; width: 100% }

CLASS attribute

Digunakan untuk menentukan atribut yang sama untuk elemen berbeda dengan menempatkan mereka dalam kelas yang sama. Di halaman HTML:

<p class="indent">

dalam STYLE SHEET :

.indent { margin-right: 5%; margin-left: 5%; color: #0000ff }

STYLE attribute

Digunakan untuk mengatur berbagai elemen atribut nilai-nilai tertentu. Contoh:

<h1 style="text-align: center">Atribut atribut umum</h1>

TITLE attribute

Sebuah tool tip pada tampilan browser.

LANG attribute

Sebuah atribut internasional yang digunakan untuk mengatur jenis bahasa internasional.

lang="en"

DIR attribute

Sebuah atribut internasional yang digunakan untuk mengatur apakah teks dibaca dari kiri ke kanan atau kanan ke kiri.

dir="ltr"

Atribut yang Lain

Ada juga atribut yang digunakan dengan elemen tertentu. atribut ini dapat digunakan untuk mengikat dokumen HTML untuk dokumen XML. Unsur - unsur yang menggunakan atribut ini:

• BUTTON
• DIV
• INPUT
• OBJECT
• SELECT
• SPAN
• TABLE
• TEXTAREA

dan Atribut yang digunakan adalah :

• datasrc - Menentukan sumber data menggunakan URI.
• datafld - Menentukan sebuah kolom atau nama sebuah properti.
• dataformatas -Menentukan bagaimana data harus diformat dengan nilai-nilai yang mungkin menjadi "html" atau "teks".

Let's Play with CONTOH ajah yah :

ID

kode HTML :
<P ID=firstp>Paragrap pertama</P>

<P ID=secondp>paragrap kedua</P>

nah untuk mendefinisikan atribut ID, maka kita perlu melakukannya di bahasa scripting CSS ( Cascading Style Sheet ).
cekidot kode css-nya:

kode CSS :
P#firstp {
color: navy;
background: none }
P#secondp {
color: black;
background: none }

bingung yah!....
tapi yah begitu untuk mendefinisikan sebuah atribut HTML.
DON'T WORRY...
baca ajah terus nanti pasti ada jawabannya!
hehehehehehe

CLASS

kode HTML :

<DIV CLASS=navbar>
<P><A   HREF="/">Home</A> | <A HREF="./">Index</A> | <A   HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

kode CSS :
.navbar {
margin-top: 2em;
padding-top: 1em;
border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
.navbar { display: none }
}

nah tambah bingung kan!...

coba deh perhatikan pada kode CSS :
untuk tanda pengenal ID dan CLASS
ID = ditandai dengan tanda pagar ( # )
CLASS = ditandai dengan tanda titik ( . )
perbedaan mendasar antara ID dan CLASS hanya pada berapa banyak ( kali ) atribut ini dapat digunakan.
ID hanya dapat digunakan 1 kali
sedangkan CLASS dapat diguakan BERULANG.
untuk penjelasan mengenai CSS tunggu ajah yah tutorial CSS-nya!.

STYLE

contoh kode HTML :
<P>Jenis Font yang paling banyak digunakan adalah font jenis <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

hasil dari kode diatas :

Jenis Font yang paling banyak digunakan adalah font jenis Verdana.

lihat perubahan pada text VERDANA, jenis FONT pada web ini adalah TAHOMA / ARIAL , maka pada kode HTML diatas yang mempunya jenis VERDANA hanya text VERDANA , karena diapit oleh dua tag SPAN yang memiliki atribut STYLE.

TITLE

contoh kode HTML :
<A HREF="mailto:faridhidayat@anggoor.co.cc" TITLE="HTML TUTORIAL">faridhidayat@anggoor.co.cc</A>
<A HREF="http://www.anggoor.co.cc" TITLE="anggoor">anggoor</A>
<LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
<IMG SRC="wedding.jpg" ALT="[Photo kawinan]" TITLE="The happy couple">

Rizkan Maulana Halidi beratnya <ABBR TITLE="1000 kg" >1 TON</ABBR>
<ABBR TITLE="Universitas Pamulang >UNPAM</ABBR>
<ACRONYM TITLE="North Atlantic Treaty Organisation">NATO</ACRONYM>

coba arahkan kursor kamu ke arah tepat diatas gambar, nanti bakal keluar tulisan yang ada di dalam TITLE tadi.

kode HTML :
<img src="http://sphotos.ak.fbcdn.net/hphotos-ak-snc3/hs106.snc3/15341_100782589949109_100000521050190_20593_4240010_n.jpg" title="Nah, poto orang ini tampangnya kayak orang cacat kan!.. TAPi puinternya nauzu bila hi minzalik! ckckckckc">

nah selanjutnya silakan Eksplorasi sendiri yah!
hhehehehe

LANG

saya bingung Gan mo ngejelasin apaan lagi,
nih saya kasih kodenya ajah yah!

kode HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
"http://www.w3.org/TR/html4/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
<SPAN LANG=en>Welcome</SPAN> -
<SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

Keep reading yah Gan!...
untuk Indonesia lebih baik
terus Berkarya!