Pengertian istilah TAG, ATRIBUT dan VALUE dalam
HTML
Mungkin istilah TAG, ATRIBUT dan
VALUE dalam HTML agak terlupakan, karena kebanyakan teman-teman yang sedang
belajar membuat web sekarang lebih dimanjakan oleh editor web visual yang
sangat praktis dan instan. Berikut ini saya coba mengingatkan kembali tentang 3
istilah dasar tersebut agar pemahaman serta penggunaan HTML lebih mudah.Sekarang mungkin sudah kurang trend lagi jika belajar membuat web harus menghafal perintah-perintah HTML yang lumayan banyak, lebih menyulitkan lagi perintah tersebut tidak dalam bahasa lokal sehingga sulit diingat secara detail ejaanya. Saya pribadi kadang juga kesulitan jika menuliskan kode html, apalagi dengan ejaan yang agak sulit di ucapkan seperti height yang kadang tertulis terbalik hurufnya menjadi heigth, atau width yang kadang tertulis widht dan perintah lainya.
Saya iseng melakukan searching di google dengan menggunakan 2 kunci berbeda, yaitu : daftar perintah HTML dan daftar TAG HTML, dan jumlah pencarianya lumayan signifikan yaitu :
daftar perintah HTML
About 4,470,000 results
daftar TAG HTML
About 1,080,000 results
Yang artinya, banyak informasi tentang HTML lebih dikaitkan dengan kata perintah ketimbang tag. Dari situ saya menyimpulkan bahwa orang yang belajar HTML lebih familiar dengan kata perintah ketimbang tag. Bener atau tidak buktikan sendiri dengan menanyai teman disamping anda.
TAG
Adalah penandaan yang dikenali
oleh browser sebagai suatu instruksi untuk memformat tulisan, gambar, link,
tabel, atau objek pada sebuah tampilan dokumen HTML.TAG biasanya dituliskan berpasangan, yang maksudnya adalah memberitahukan kepada browser dimana posisi awal dan posisi akhir sebuah format dokumen.
Contoh penggunaan TAG yang sering digunakan :
|
Tag HTML
|
Fungsi
|
|
<font></font>
|
Mengubah jenis, warna, ukuran tulisan
|
|
<b></b> atau
<strong></strong>
|
Teks tebal
|
|
<i> </i> atau <em></em>
|
Teks miring
|
|
<u> </u>
|
Teks garis bawah
|
|
<pre></pre>
|
Preformatted teks
|
|
<h1></h1>
|
Heading 1
|
|
<h2></h2>
|
Heading 2
|
|
<h3> </h3>
|
Heading 3
|
|
<sub></sub>
|
Subscript
|
|
<sup></sup>
|
Superscript
|
|
<ol><li></li></ol>
|
Penomoran
|
|
<ul><li></li></ul>
|
Bullet
|
|
<marquee></marquee>
|
Teks Berjalan
|
Apakah ada TAG yang tidak berpasangan? Jawabanya ADA. Apa Saja?
|
Tag HTML
|
Fungsi
|
|
<br />
|
Berpindah baris
|
|
<hr />
|
Membuat garis horizontal
|
|
<img ... />
|
Memasukkan gambar
|
|
<meta .../>
|
Menyisipkan informasi halaman
|
ATRIBUT
Atribut dalam HTML adalah
perintah yang disisipkan/ditempelkan pada TAG utama yang tujuanya adalah
mengatur bentuk/gaya tampilan sebuah objek. Contoh penggunaan atribut yang ditempelkan pada H1 :<h1 align="center">Saya Belajar Tag HTML</h1>Anda lihat diatas, kita membuat tulisan dengan tampilan heading 1 (judul) dan kemudian ditempelkan atribut align yang fungsinya mengatur letak horizontal di layar.
Sebuah TAG boleh menggunakan lebih dari 1 atribut yang relevan. Contoh :
<font size="3" face="arial" color="red">Merdeka atau Mati</font>Contoh TAG font diatas menggunakan atribut size (ukuran) dan face(jenis huruf) dan color(warna tulisan).
Yang saya maksud relevan adalah, sebuah TAG tidak bisa diberikan atribut diluar kemampuanya. Contoh : TAG font tidak bisa ditempelkan atribut align, karena : font adalah bentuk huruf bukan format tulisan, sebaliknya seperti itu, h1 tidak bisa diberi atribut face karena h1 adalah format tulisan bukan bentuk huruf. Trus bagaimana jika ingin menggabung keduanya?? Biasanya dituliskan dengan cara :
<h1><font face="arial">Saya belajar Tag</font></h1>
VALUE
Value adalah nilai yang diberikan
pada sebuah atribut. Value ada beberapa jenis, bisa value text seperti left,
right, center, red, blue, bisa juga angka 1, 2, 3, bisa juga bentuk pixel :
100, 200, atau bentuk persen 100%, 30%, ada juga yang bentuk hexa seperti warna
yang ditulis color="#000" dll.Untuk value juga harus relevan, tidak bisa sembarangan. Contoh : align (ini untuk mengatur posisi) tidak boleh ditulis align="1" atau sebaliknya size="center".
Catatan :
Jika kita mengikuti perkembangan TAG HTML memang kadang sedikit membingungkan apalagi sekarang perbendaharaan TAG sudah bertambah dengan hadirnya HTML5, ditambah lagi dengan dukungan CSS. Tapi TAG-TAG yang lama masih berlaku dengan baik, walaupun dari segi penulisan sudah tidak efisien lagi karena sekarang sudah digantikan dengan penggunaan CSS yang bisa lebih mudah dan sempurna.
- See more at:
http://www.zainalhakim.web.id/posting/pengertian-istilah-tag-atribut-value-html.html#sthash.21pgyrqp.dpuf
|
TAG HTML
|
DESKRIPSI
|
|
<html></html>
|
Baris
paling atas dari setiap file HTML
|
|
<head></head>
|
Informasi
umum dari sebuah halaman web
|
|
<title></title>
|
Judul
halaman. Terdapat pada head
|
|
<body></body>
|
Settingan
atribut untuk seluruh dokumen
|
|
<b></b>
|
Teks tebal
|
|
<i>
</i>
|
Teks
miring
|
|
<u>
</u>
|
Teks garis
bawah
|
|
<pre></pre>
|
Preformatted
teks / contoh teks
|
|
<h1></h1>
|
Header 1
|
|
<h2></h2>
|
Header 2
|
|
<h3>
</h3>
|
Header 3
|
|
<sub></sub>
|
Subscript
|
|
<sup></sup>
|
Superscript
|
|
<font></font>
|
Mengubah
gaya suatu huruf
|
|
<img>
|
Menampilkan
sebuah gambar
|
|
<blockquote></blockquote>
|
Digunakan
untuk mengatur text dan gambar dalam suatu tag
|
|
<ol></ol>
|
Ordered
List (digunakan dengan <li>)
|
|
<ul></ul>
|
Unordered
List (digunakan dengan <li>)
|
|
<li>
|
Elemen
List
|
|
<dd></dd>
|
Daftar
definisi
|
|
<dt>
|
Definisi
term
|
|
<dd>
|
Definisi
deskripsi
|
|
<br>
|
Ganti
baris
|
|
<hr>
|
Garis
horizontal
|
|
<center></center>
|
Menengahkan
elemen
|
|
<table></table>
|
Membuat
table
|
|
<form></form>
|
Mengatur
elemen dari form
|
|
<textarea></textarea>
|
Membuat
Text Area untuk input text dengan length yang lebih besar dari input text.
|
|
<tbody></tbody>
|
Format
yang berlaku bagi cell yang diapit tag
|
|
<input
type=>
|
Variasi
dari tipe elemen input dalam form
|
|
<colgroup></colgroup>
|
Format
yang berlaku bagi kolom
|
|
<th></th>
|
Header(kepala
tabel). Otomatis ke tengah dan tebal
|
|
<td></td>
|
Membuat
kolom
|
|
<marquee>
</marquee>
|
tulisan
berjalan atau bergerak pada halaman web anda
|
|
<big>
</big>
|
Membuat
tulisan menjadi besar
|
|
small></small>
|
Membuat
tulisan menjadi kecil
|
|
<u> </u>
|
Membuat
tulisan menjadi miring
|
|
<hn>
</hn>
|
Untuk
menuliskan judul suatu paragraf atau lebih dikenal sebagai heading
|
|
<address></address>
|
Mendefinisikan
informasi kontak untuk penulis/pemilik dokumen
|
|
<blink></blink>
|
Membuat
teks berkedip
|
|
<del></del>
|
Untuk
memberi garis tengah pada teks/mencoret teks
|
|
<embed></embed>
|
Digunakan
untuk memasukkan file video atau file musik
|
|
<acronym></acronym>
|
Mendefinisikan
akronim
|
|
<abbr></abbr>
|
Digunakan
untuk menguraikan satu ungkapan yang disingkat
|
|
<applet></applet>
|
Digunakan
untuk memasukan file java kedalam dokumen HTML
|
|
<bdo></bdo>
|
Digunakan
untuk menimpa arah teks
|
|
<caption></caption>
|
Membuat
caption pada table
|
|
<kbd></kbd>
|
Mendefinisikan
teks yang di input dari keyboard
|
|
<map></map>
|
Mendefinisikan
client-side peta gambar
|
|
<samp></samp>
|
Mendefinisikan
contoh keluaran dari program komputer
|
|
<xmp></xmp>
|
Mendefinisikan
preformatted text, fungsi tag ini sama dengan tag <pre>
|
|
<tt></tt>
|
Mendefinisikan
teletype text
|
|
<thead></thead>
|
Untuk mengelompokkan
isi header di dalam sebuah tabel
|
|
<strong></strong>
|
Membuat
teks tebal, fungsi tag ini sama dengan tag <b>
|
B. Atribut-atribut yang
terdapat dalam Tag HTML
HTML Attributes atau atribut HTML adalah
suatu informasi tambahan yang bisa disertakan pada suatu elemen HTML. Suatu
elemen dapat memiliki atribut. Atribut ini memberikan informasi tambahan
tentang elemen yang bersangkutan. Atribut selalu digunakan pada awal tag /
start tag. Cara mendefinisikan atribut dengan memberikan informasi name dan valuedari
suatu elemen, seperti name=”value”.
· Tag <body> digunakan
menampilkan desain layout halaman web. Tab <BODY> sendiri memiliki
kelengkapan atribut di antaranya:
ü BGCOLOR, berfungsi untuk
menampilkan warna latar halaman
o Contoh pemakaian :
o <BODY BGCOLOR=RED>
… </BODY>
ü BACKGROUND, berfungsi
untuk menentukan file gambar/image dijadikan sebagai background halaman.
o Contoh :
o <BODY
BACKGROUND=”C:\data\latar.jpg”> … </BODY>
ü TEXT, berfungsi untuk
mengubah warna tulisan/teks dalam dokumen secara menyeluruh.
ü LINK, berfungsi untuk
menentukan warna link dalam dokumen yang belum pernah dikunjungi (belum pernah
diklik)
ü ALINK, berfungsi untuk
menentukan warna link dalam dokumen yang aktif.
ü VLINK, berfungsi untuk
menentukan warna link dalam dokumen yang telah terkunjungi.
· Tag <p>
Tag ini berfungsi untuk memformat
paragraph/alinea. Adapun kelengkapan atribut-atribut dari tag ini adalah:
ü ALIGN, yang berfungsi untuk
menentukan perataan teks paragraph secara rata kiri (LEFT), rata kanan (RIGHT)
atau rata tengah (CENTER).
Contoh
pemakaian:
<P
ALIGN=RIGHT>Ini adalah teks yang ditulis dalam paragraph dengan perataan
teks
rata kanan</P>
· Tag <hr>
Tag ini berfungsi untuk mendefinisikan
garis horisontal dokumen.
Sedangkan atribut-atribut yang didukung
meliputi:
ü SIZE, untuk menentukan
ketebalan garis (dalam ukuran piksel)
Contoh
pemakaian :
<HR
SIZE=2>
ü COLOR, digunakan untuk
menentukan warna garis. Warna garis dapat diisi dengan RED, GREEN, BLUE, YELLOW
dll, atau dengan memanfaatkan warna dalam bentuk Hexadesimal seperti : #00FF00
untuk wana hijau, #FF0000 untuk warna merah dsb.
ü WIDTH, digunakan untuk
menentukan lebar garis (dalam satuan piksel atau persenatase). Contoh :
<HR
WIDTH=450> atau
<HR
WIDTH=80%>
ü NOSHADE, untuk menghilangkan
efek tiga dimensi garis.
Contoh pemakaian :
<HR NOSHADE>
· Tag <hn>,
dimana n=1,2,3,4,5,6
Berfungsi untuk mendefinisikan header (kepala/judul) dokumen.
Atribut-atribut yang dimiliki yaitu:
ü ALIGN, yang digunakan untuk
menentukan perataan teks header terhadap dokumen. Nilainya yaitu: LEFT, CENTER
dan RIGHT.
· Tag <font>,
untuk memformat font digunakan tag <FONT>, adapun yang dipengaruhi oleh
tag ini meliputi ukuran, jenis dan warna font. Atribut-atribut yang dapat
dipakai untuk mengatur ketiga hal tersebut yaitu :
ü SIZE, digunakan untuk
menentukan ukuran font.
ü COLOR, digunakan untuk
menentukan warna font.
ü FACE, digunakan untuk
menentukan jenis atau bentuk font. Misal jenis font
ü dapat dipakai yaitu :
Arial, Verdana, Times New Romans, Courier dll.
· Tag <img> digunakan
untuk menampilkan gambar, berikut merupakan atribut dari tag <img> :
ü SRC, yang berfungsi untuk
menentukan lokasi direktori gambar. Contoh
ü pemakaiannya :
ü ALT, yang berfungsi untuk
menentukan keterangan gambar jika gambar gagal
ü tampil.
ü WIDTH, yang berfungsi untuk
menentukan lebar gambar (dalam satuan pixel)
ü HEIGHT, yang berfungsi untuk
menentukan tinggi gambar (dalam satuan pixel).
ü BORDER, yang berfungsi untuk
menentukan ketebalan bingkai gambar.
ü ALIGN, untuk menentukan
perataan gambar terhadap dokumen. (Nilainya :
ü LEFT dan RIGHT).
· Tag <a> digunakan
untuk mendefinisikan link, berikut merupakan atributnya :
ü HREF, digunakan untuk
menentukan lokasi tujuan dari yang ditunjuk oleh link.
Alamat
tujuannya dapat berupa path-direktori atau alamat URL.
Contoh
penggunaan :
ü NAME, digunakan untuk
mendefinisikan anchor (Keterangan: Anchor adalah satu bagian
dari dokumen yang ditandai untuk dijadikan sebagai tujuan dari link). Untuk
mendefinisikan link yang menuju alamat anchor digunakan symbol
karakter
‘#’. Contoh : Seumpama didefinisikan sebuah anchor dengan nama
“pertama”
pada halaman “dokumen.html”.
· Tag <table> digunakan
untuk memmbuat table di dalam HTML, berikut merupakan atribunya :
ü BORDER, digunakan untuk
menentukan ketebalan bingkai table.
ü BGCOLOR, digunakan untuk
menentukan warna latar table/baris/sel.
ü BACKGROUND, digunakan untuk
menentukan file gambar dijadikan sebagai latar table/baris/sel.
ü ALIGN, berfungsi untuk
menentukan perataan table secara horisontal terhadap dokumen atau perataan teks
pada baris atau sel secara horisontal.
ü VALIGN, berfungsi untuk
menentukan perataan secara vertical terhadap teks pada baris dan sel.
ü WIDTH, digunakan untuk
menentukan lebar table/sel (dalam satuan pixel atau persentase)
ü HEIGHT, digunakan untuk
menentukan tinggi table atau baris (dalam satuan pixel atau persentase)
ü CELLPADDING, berfungsi untuk
menentukan kerapatan teks dengan bingkai table.
ü CELLSPACING, berfungsi untuk
menentukan kerapatan antar sel.
ü ROWSPAN, berfungsi untuk
menggabungkan beberapa sel baris menjadi satu sel.
ü COLSPAN, berfungsi untuk
menggabungkan beberapa sel kolom menjadi satu sel.
· Tag <form> berfungsi
sebagai obyek penampung (container) bagi obyek-obyek lainnya.
Atribut-atribut yang dimiliki FORM adalah sebagai berikut:
ü NAME, berfungsi untuk
mendefinisikan nama obyek form.
ü METHOD, dipergunakan untuk
menentukan cara pengolahan data yang
inputkan
dalam form.
ü ACTION, digunakan untuk
menentukan lokasi/alamat file (program server)
yang akan
mengolah data isian form. Nilai yang dapat diisikan meliputi :
POST dan
GET.
· Obyek <SELECT>
merupakan komponen FORM yang berbentuk daftar pilihan menyerupai COMBOBOX dan
LISTBOX. Atribut-atribut yang dimiliki di antaranya yaitu :
ü NAME, digunakan untuk
memberi identitas pada obyek SELECT.
ü SIZE, digunakan untuk
menentukan jumlah item pilihan yang ditampilkan pada obyek.
ü MULTIPLE, digunakan untuk
menentukan item pilihan dapat dipilih lebih dari satu.
· Untuk mendefinisikan
item-item pilihan pada komponen SELECT digunakan tag <OPTION>, dimana tag
ini memiliki kelengkapan atribut seperti berikut ini :
ü VALUE, digunakan untuk
menentukan identitas tiap item dalam komponen.
ü SELECTED, digunakan untuk
menentukan item yang terpilih secara default.
· Tag <INPUT>
memiliki berbagai macam atribut yang dapat digunakan menentukan bentuk-bentuk
input:
ü NAME, berfungsi untuk
menentukan nama obyek input
ü TYPE, berfungsi untuk
menentukan jenis input, nilai yang dapat
dipasangkan yaitu:
·
TEXT, digunakan untuk menentukan bentuk kotak
teks satu baris.
o PASSWORD, digunakan untuk
menentukan bentuk input kotak password.
·
RADIO, digunakan untuk menentukan bentuk input
daftar pilihan, dimana item yang dapat pilih hanya satu item saja.
·
CHECKBOX, digunakan untuk menentukan bentuk input
daftar pilihan, dimana item yang dapat dipilih bisa lebih dari satu item.
·
SUBMIT, digunakan untuk menentukan bentuk input
tombol yang memiliki fungsi untuk memicu data dalam form diproses.
·
RESET, digunakan untuk menentukan bentuk input
tombol yang memiliki fungsi data dalam form akan direset.
·
BUTTON, digunakan untuk menampillkan bentuk
input tombol yang mana fungsi tombol tersebut belum ditentukan.
·
HIDDEN, untuk menentukan bentuk input
tersembunyi (tidak ditampilkan secara eksplisit dalam dokumen)
ü VALUE,
·
untuk jenis input TEXT dan PASSWORD
digunakan untuk menentukan nilai dalam
kotak teks
·
untuk jenis input RADIO dan CHECKBOX
berfungsi untuk memberi identitas tiap
pilihan item
o untuk jenis item SUBMIT, RESET dan BUTTON
berfungsi untuk menentukan judul tombol.
ü SIZE (hanya untuk tipe
input TEXT dan PASSWORD)
Berfungsi
untuk menentukan ukuran lebar kotak teks.
ü MAXLENGTH (hanya untuk tipe
input TEXT dan PASSWORD)
Berfungsi
untuk menentukan kapasitas maksimal teks yang dapat
Diinputkan
ü CHECKED (hanya untuk tipe
input RADIO dan CHECKBOX)
Berfungsi
untuk memberi tanda terhadap item yang terpilih secara default.
Trimakasih kasih banyak, Sangat membantu😙
BalasHapusSip
BalasHapusSip
BalasHapus