Hallo guys kali ini Padil akan membahas pertanyaan seputar tag
dan atribut pada html, dimulai dari pertanyaan apa yang dimaksud dengan tag dan
atribut pada HTML? apa saja kumpulan tag pada HTML? bagaimana penggunaan dan
penulisan tag dan atribut yang baik pada html? dari beberapa pertanyaan
tersebut kita akan kupas satu persatu, sebelum kita membahas tentang tag dan
atribut perlu di ingat kembali bahwa dokumen HTML ini disusun oleh tag- tag
markup dan setiap tag pada HTML menjelaskan perintah isi dokumen yang berbeda-
beda.
Ø Apa
itu Tag? Apa yang dimaksud dengan Tag pada HTML?
Tag adalah suatu penanda untuk
menandai elemen-elemen dalam suatu dokumen HTML dan Fungsi Tag adalah untuk
memberikan instruksi atau memberitahu kepada browser bagaimana suatu objek di
tampilkan berdasarkan Tag yang di gunakan, objek disini bisa berupa teks,
video, audio dan gambar.
Ø Tag
pada HTMLBagaimana Cara menggunakan Tag pada HTML?
Penggunaan Tag itu berada
diantara dua karakter < dan > dengan demikian perintah tersebut dapat
dikenali oleh browser dan memberitahu web browser bagaimana suatu objek
ditampilkan. Secara umum penggunaan tag pada HTML itu berpasang- pasangan
dimulai dengan <tag_pembuka> Isi dari konten </tag_penutup>, namun ada juga tag yang
dalam penulisannya berdiri sendiri seperti <nama_tag/> tag tersebut
disebut dengan Void Element.
Contoh Menggunakan Tag pada HTML :
<h1> Isi Konten </h1> Belajar HTML sangat asyik
Tampilan :Perhatikan
tag pembuka di atas adalah H1 dan tag penutupnya adalah H1, penulisan seperti
itu merupakan contoh yang BENAR, karena tag pembuka H1 memiliki tag penutup H1
sehingga penulisan yang terkena dampak H1 hanyalah tulisan yang berada pada
elemen H1 saja.
Kalian tidak boleh menggunakan tag HTML
seperti ini ya :
<h1> Isi Konten </p> Belajar HTML sangat asyik
Tampilan :Perhatikan
tag pembuka di atas adalah H1 dan tag penutupnya adalah P, penulisan seperti
itu merupakan contoh yang SALAH,
karena tag pembuka H1 menjadi tidak memiliki tag penutup sehingga semua tulisan
yang masuk dikategorikan sebagai dokumen H1.
Ø Kumpulan
Tag pada HTML
Karena banyak sekali Tag dan atribut pada HTML, padil akan bantu untuk
mendefinisikan kegunaan Macam- macam Tag secara satu persatu, pada tabel
dibawah ini:
Tag
|
Penjelasan
|
<!--...-->
|
Mendefinisikan Komentar
|
<!DOCTYPE>
|
Mendefinisikan tipe atau jenis dokumen
|
<a>
|
Mendefinisikan hyperlink
|
<abbr>
|
Mendefinisikan sebuah singkatan atau akronim
|
<acronym>
|
Tag ini tidak didukung pada HTML5. Gunakan <abbr> sebagai penggantinya
pada HTML5. Mendefinisikan akronim
|
<address>
|
Mendefinisikan informasi kontak penulis atau pemilik dokumen
|
<applet>
|
Tag ini tidak didukung pada HTML5. Gunakan <embed> atau
<object> sebagai penggantinya pada HTML5. Mendefinisikan embedded applet
|
<area>
|
Mendefinisikan sebuah area didalam image-map
|
<article>
|
Logo HTML5 : Mendefinisikan
sebuah artikel
|
<aside>
|
Logo HTML5 : Mendefinisikan selain dari konten
halaman
|
<audio>
|
Logo HTML5 : Mendefinisikan
konten suara
|
<b>
|
Mendefinisikan teks bold atau cetak tebal
|
<base>
|
Menentukan basis URL atau target untuk semua URL relatif dalam
dokumen
|
<basefont>
|
Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya
pada HTML5. Menentukan warna default, ukuran, dan font untuk semua teks dalam
dokumen
|
<bdi>
|
Logo HTML5 : Isolat bagian teks yang mungkin
diformat dalam arah yang berbeda dari teks lain di luar itu sendiri
|
<bdo>
|
Mengganti arah teks saat ini
|
<big>
|
Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya
pada HTML5. Mendefinisikan teks besar
|
<blockquote>
|
Mendefinisikan bagian yang dikutip dari sumber lain
|
<body>
|
Mendefinisikan tubuh atau badan dokumen
|
<br>
|
Mendefinisikan satu baris tunggal atau sama dengan fungsi enter
|
<button>
|
Mendefinisikan sebuah tombol
|
<canvas>
|
Logo HTML5 : Digunakan
untuk menggambar grafik, dengan cepat, melalui scripting (biasanya
JavaScript)
|
<caption>
|
Mendefinisikan caption dari sebuah tabel
|
<center>
|
Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya
pada HTML5. Mendefinisikan teks yang posisinya berada ditengah
|
<cite>
|
Mendefinisikan Judul karya
|
<code>
|
Mendefinisikan bagian dari code pada komputer
|
<col>
|
Menentukan sifat kolom untuk setiap kolom dalam <colgroup>
element
|
<colgroup>
|
Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel
untuk memformat
|
<datalist>
|
Logo HTML5 : Menentukan
daftar pilihan yang telah ditentukan untuk kontrol input
|
<dd>
|
Mendefinisikan deskripsi / nilai istilah dalam daftar deskripsi
|
<del>
|
Mendefinisikan teks yang telah dihapus dari dokumen
|
<details>
|
Logo HTML5 : Mendefinisikan
rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan
|
<dfn>
|
Merupakan contoh mendefinisikan istilah
|
<dialog>
|
Logo HTML5 : Mendefinisikan
sebuah kotak dialog atau jendela
|
<dir>
|
Tag ini tidak didukung pada HTML5. Gunakan <ul> sebagai
penggantinya pada HTML5. Mendefinisikan daftar direktori
|
<div>
|
Mendefinisikan sebuah bagian dalam sebuah dokumen
|
<dl>
|
Mendefinisikan daftar deskripsi
|
<dt>
|
Mendefinisikan istilah / nama dalam daftar deskripsi
|
<em>
|
Mendefinisikan menekankan teks
|
<embed>
|
Logo HTML5 : Mendefinisikan
sebuah wadah untuk eksternal (non-HTML) aplikasi
|
<fieldset>
|
Sebauh Grup untuk pengelompokan dalam form
|
<figcaption>
|
Logo HTML5 : Mendefinisikan
sebuah caption untuk <figure> element
|
<figure>
|
Logo HTML5 : Menentukan
konten mandiri
|
<font>
|
Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya
pada HTML5. Mendefinisikan font, warna, dan ukuran dari sebuah teks
|
<footer>
|
Logo HTML5 : Mendefinisikan
sebuah footer dari sebuah dokumen atau section
|
<form>
|
Mendefinisikan sebuah form HTML untuk input pengguna
|
<frame>
|
Tag ini tidak didukung pada HTML5. Mendefinisikan sebuah jendela
(frame) dalam sebuah frameset
|
<frameset>
|
Tag ini tidak didukung pada HTML5. Mendefinisikan sebuah satu set
frames
|
<h1> sampai <h6>
|
Mendefinisikan headings pada HTML
|
<head>
|
Mendefinisikan informasi tentang dokumen
|
<header>
|
Logo HTML5 : Mendefinisikan
sebuah header untuk dokumen atau bagian dokumen
|
<hr>
|
Mendefinisikan perubahan tematik dalam konten atau memberikan garis
pada dokumen
|
<html>
|
Mendefinisikan root dari sebuah dokumen HTML
|
<i>
|
Mendefinisikan sebuah bagian dari teks dengan suara alternatif atau
suasana hati
|
<iframe>
|
Mendefinisikan sebuah frame inline
|
<img>
|
Mendefinisikan sebuah image
|
<input>
|
Mendefinisikan sebuah input control
|
<ins>
|
Mendefinisikan teks yang telah dimasukkan ke dalam dokumen
|
<kbd>
|
Mendefinisikan input keyboard
|
<keygen>
|
Logo HTML5 : Mendefinisikan
sebuah key-pair generator field (for forms)
|
<label>
|
Mendefinisikan sebuah label dari sebuah <input> element
|
><legend>
|
Mendefinisikan sebuah caption dari sebuah <fieldset> element
|
<li>
|
Mendefinisikan sebuah daftar item
|
<link>
|
Mendefinisikan hubungan antara dokumen dengan sumber daya eksternal
(digunakan untuk link ke style sheet)
|
<main>
|
Logo HTML5 : Menentukan
konten utama dari dokumen
|
<map>
|
Mendefinisikan client-side image-map
|
<mark>
|
Logo HTML5 : Mendefinisikan
ditandai / teks yang disorot
|
<menu>
|
Mendefinisikan daftar / menu perintah
|
<menuitem>
|
Mendefinisikan item perintah / menu bahwa pengguna dapat memanggil
dari menu popup
|
<meta>
|
Mendefinisikan metadata tentang sebuah dokumen HTML
|
<meter>
|
Logo HTML5 : Mendefinisikan
pengukuran skalar dalam kisaran dikenal (gauge)
|
<nav>
|
Logo HTML5 : Mendefinisikan
navigasi untuk links
|
<noframes>
|
Tag ini tidak didukung pada HTML5. Mendefinisikan sebuah konten
alternatif untuk pengguna yang tidak mendukung frame
|
<noscript>
|
Mendefinisikan sebuah konten alternatif untuk pengguna yang tidak mendukung
script sisi klien
|
<object>
|
Mendefinisikan sebuah embedded objek
|
<ol>
|
Mendefinisikan sebuah daftar tersusun
|
<optgroup>
|
Mendefinisikan sekelompok opsi terkait dalam daftar drop-down
|
<option>
|
Mendefinisikan sebuah option dari sebuah daftar drop-down
|
<output>
|
Logo HTML5 : Mendefinisikan
hasil dari sebuah perhitungan
|
<p>
|
Mendefinisikan sebuah paragraph
|
<param>
|
Mendefinisikan sebuah parameter untuk sebuah object
|
<pre>
|
Mendefinisikan teks preformatted
|
<progress>
|
Menggambarkan kemajuan tugas
|
<q>
|
Mendefinisikan sebuah kutipan singkat
|
<rp>
|
Logo HTML5 : Mendefinisikan
apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby
|
<rt>
|
Logo HTML5 : Mendefinisikan
sebuah penjelasan / pengucapan karakter (untuk tipografi Asia Timur)
|
<ruby>
|
Logo HTML5 :
Mendefinisikan sebuah penjelasan ruby (untuk tipografi Asia Timur)
|
<s>
|
Mendefinisikan teks yang sudah tidak benar
|
<samp>
|
Mendefinisikan contoh output dari program komputer
|
<script>
|
Mendefinisikan sebuah script dari sisi klien
|
<section>
|
Logo HTML5 :
Mendefinisikan sebuah section didalam sebuah dokumen
|
<select>
|
Mendefinisikan sebuah daftar drop-down
|
<small>
|
Mendefinisikan
teks kecil
|
<source>
|
Logo HTML5 :
Mendefinisikan lebih dari satu sumber media untuk elemen media seperti (<video>
dan <audio>)
|
<span>
|
Mendefinisikan sebuah section didalam sebuah dokumen
|
<strike>
|
Tag ini tidak didukung pada HTML5. Gunakan <del> atau <s>
sebagai penggantinya pada HTML5. Mendefinisikan teks strikethrough
|
<strong>
|
Mendefinisikan teks yang penting
|
<style>
|
Mendefinisikan informasi style untuk sebuah dokumen
|
<sub>
|
Mendefinisikan teks subscripted
|
<summary>
|
Logo HTML5 :
Mendefinisikan sebuah judul yang terlihat dalam sebuah <details>
element
|
<sup>
|
Mendefinisikan teks superscripted
|
<tabel>
|
Mendefinisikan sebuah tabel
|
<tbody>
|
Grup isi tubuh dalam sebuah tabel
|
<td>
|
Mendefinisikan sebuah cell didalam sebuah tabel
|
<teksarea>
|
Mendefinisikan sebuah input control multiline atau teks area
|
<tfoot>
|
Grup isi footer dalam sebuah tabel
|
<th>
|
Mendefinisikan sebuah header cell didalam sebuah tabel
|
<thead>
|
Grup header dalam sebuah tabel
|
<time>
|
Logo HTML5 :
Mendefinisikan sebuah tanggal atau waktu
|
<title>
|
Mendefinisikan sebuah title untuk dokumen
|
<tr>
|
Mendefinisikan sebuah row didalam sebuah tabel
|
<track>
|
Logo HTML5 : Mendefinisikan trek teks untuk
elemen media yang (<video> dan <audio>)
|
<tt>
|
Logo HTML5 : Tag
ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5.
Mendefinisikan teletype teks
|
<u>
|
Mendefinisikan teks yang harus berbeda dari teks biasa
|
<ul>
|
Mendefinisikan sebuah unordered list
|
<var>
|
Mendefinisikan sebuah variable
|
<video>
|
Logo HTML5 :
Mendefinisikan sebuah video atau movie
|
<wbr>
|
Logo HTML5 :
Mendefinisikan sebuah kemungkinan line-break
|
Ø Apa itu Atribut? Apa
yang dimaksud dengan Atribut pada Tag HTML?
Elemen, Tag dan atribut pada HTML sebenarnya saling
berkaitan, hanya saja disini atribut memiliki tugas khusus untuk memberikan
informasi atau sifat tambahan yang akan diberikan kepada tag dan elemen yang
mengandung atribut tersebut.
Ø Bagaimana
Cara menggunakan Atribut pada Tag HTML?
Penulisan Atribut selalu
diletakan dalam <tag_pembuka> setelah nama tag, sebagai contoh:
<tag_pembuka name="value">. Dari tag dan atribut tersebut yang
dimaksud dengan atribut adalah name="value". Informasi ini berupa
instruksi tambahan yang tersusun dari dua bagian yaitu atribut Name dan atribut
Value dalam penulisannya atribut value harus ditulis diantara tanda kutip ganda
atau tanda kutip tunggal.
Ø Apa
yang dimaksud dengan atribut Name dan
atribut Value?
Atribut Name adalah nama
informasi atau nama sifat apa yang akan di tambahkan kepada tag dan elemen yang
mengandung atribut tersebut. Sedangkan Atribut Value adalah Nilai dari sebuah
informasi atau nilai sifat apa yang akan di berikan kepada tag dan elemen yang
mengandung atribut tersebut.
Ø Kapan
kita harus menggunakan tanda kutip tunggal atau tanda kutip ganda?
Dalam penggunaanya tanda kutip
tunggal dan ganda sama saja tergantung kepada programmernya mau pilih yang mana
asal konsisten, namun ada aturan pembungkusan tanda kutip dalam beberapa
kondisi ketika value dalam atribut itu harus bernilai tanda kutip , proses
pembungkusan tersebut dapat ditulis seperti berikut ini:
<p title='isi "konten" DilsBlog'> Atau
<p title="isi 'konten' DilsBlog">
Contoh Menambahkan Atribut dalam Tag pada HTML :
<img
src="https://static.cdn-cdpl.com/wp-images/2016/05/Tag-dan-Atribut-pada-HTML-1.png"
width="300" height="200">
Tampilan : Perhatikan
tag yang digunakan adalah tag IMG, "SRC" disana merupakan atribut
name dan
"https://static.cdn-cdpl.com/wp-images/2016/05/Tag-dan-Atribut-pada-HTML-1.png"
adalah atribut value yang sudah ditulis dengan benar. Perhatikan penulisan
atribut width pada code diatas width="300" height="200",
dengan cara penulisan seperti ini informasi tambahan yang diberikan melalui
atribut tersebut dapat dibaca oleh web browser sehingga tampil pada web browser
berubah sesuai dengan atribut name dan atribut value yang diberikan.
Kalian tidak boleh menggunakan tag HTML
seperti ini ya :
<img
src="https://static.cdn-cdpl.com/wp-images/2016/05/Tag-dan-Atribut-pada-HTML-1.png"
width="300 height=200">
Tampilan : Perhatikan
tag yang digunakan adalah tag IMG, "SRC" disana merupakan atribut
name dan
"https://static.cdn-cdpl.com/wp-images/2016/05/Tag-dan-Atribut-pada-HTML-1.png"
adalah atribut value yang sudah ditulis dengan benar. Lalu letak salahnya
dimana? perhatikan penulisan atribut width pada code diatas width="300
height=200", dengan cara penulisan seperti itu informasi tambahan yang
diberikan melalui atribut tersebut tidak dapat dibaca oleh web browser sehingga
tampil pada web browser tidak ada perubahan atau merupakan tampilan dari ukuran
yang sebenarnya.
Oke, Pembahasan Tag dan Atribut pada HTML sudah selesai,
kita akan sambung belajar HTMLnya pada kesempatan berikutnya, sampai ketemu
lagi keep watch and learn my blog.
Ø Kumpulan
Atribut pada HTML yang sering digunakan :
Atribut Penjelasan
alt Menentukan
teks alternatif untuk gambar, ketika gambar tidak dapat ditampilkan
disable Menentukan
bahwa elemen input harus dinonaktifkan
href enentukan
URL (Alamat web) untuk link
id Menentukan
ID link untuk elemen
src Menentukan
URL (Alamat web) untuk gambar
style menentukan
style CSS inline untuk suatu elemen
title Menampilkan
tool tip tentang informasi tambahan pada elemen
sebenarnya masih banyak lagi atribut yang bisa digunakan
pada HTML, namun tergantung kepada tag apa yang digunakan, karena beberapa tag
memiliki atribut khususnya masing- masing.
