Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web.pengertian lainnya, HTML digunakan untuk membangun suatu halaman web. Sekalipun banyak orang menyebutnya sebagai suatu bahasa pemrograman, HTML sama sekali bukan bahasa pemrograman, tapi merupakan bahasa markup (penandaan), terhadap sebuah dokumen teks. Simbol markup yang digunakan oleh HTML ditandai dengan tanda lebih kecil ( < ) dan tanda lebih besar ( > ) yang biasa disebut tag.
Elemen HTML
Dokumen HTML didefinisikan menggunakan elemen-elemen HTML / HTML elements.
Elemen HTML adalah semua yang terdapat diantara start tag sampai akhiran tag.
Start
tag *
|
Isi
Elemen
|
End tag
*
|
<p>
|
This is a paragraph
|
</p>
|
<a href=”google.com” >
|
This is a link
|
</a>
|
<br />
|
|
|
HTML Element Syntax
Sintaks elemen HTML mempunyai ciri sebagai berikut:
- Elemen HTML dimulai dengan
start tag / opening tag
- Elemen HTML diakhiri dengan end
tag / closing tag
- Isi Elemen / element content
adalah semua yang terdapat diantara start tag dan end tag
- Beberapa elemen HTML tidak
memiliki isi atau konten
- Elemen yang tidak memiliki isi
atau kosong ditutup pada awal tag
- Sebagian besar elemen HTML
dapat diberi atribut tertentu
Nested_HTML_Elements
Dalam penulisan dokumen HTML dipastikan menggunakan banyak elemen. Suatu elemen
dapat berada di dalam elemen lain atau elemen tersebut menjadi isi / konten
pada elemen lain. Hampir semua elemen HTML dapat bersarang. Sehingga dapat
disimpulkan bahwa dokumen HTML terdiri dari elemen HTML yang bersarang.
Contoh
Dokumen HTML
1
2
3
4
5
6
7
|
<html>
<body>
<p>Paragraf pertama</p>
</body>
</html>
|
Pada
contoh diatas terdapat tiga buah elemen. Elemen tersebut adalah:
Elemen <title>
1
|
<title>Judul Website</title>
|
Pada
contoh Element diatas :
- <title> adalah Tag Pembuka
- “Judul Website” adalah Isi
(semua yang ada diantara Tag Pembuka dan Tag Penutup).
- </title> adalah Tag Penutup.
Elemen <p>
Elemen
ini mendefinisikan suatu konten yaitu sebuah paragraf pada dokumen HTML. Elemen
ini dimulai dengan start tag <p> dan diakhiri dengan end tag </p>.
Isi atau konten dari elemen ini adalah: Paragraf pertama
<p>Paragraf
pertama</p>
Elemen
<body>
Elemen
ini mendefinisikan suatu konten yaitu body / tubuh dokumen HTML. Bagian ini
adalah konten halaman web yang akan tertampil pada halaman web. Elemen ini
dimulai dengan start tag <body> dan diakhiri dengan end tag
</body>. Isi atau konten dari elemen ini adalah: elemen paragraf (yang sudah
dijelaskan diatas).
<body>
<p>Paragraf
pertama</p>
</body>
Elemen
<html>
Elemen
ini mendefinisikan sebuah dokumen HTML. Elemen ini dimulai dengan start tag
<html> dan diakhiri dengan end tag </html>. Isi atau konten dari
elemen ini adalah: elemen body (yang sudah dijelaskan diatas).
<html>
<body>
<p>Paragraf
pertama</p>
</body>
</html>
Empty_HTML_Elements
Elemen HTML yang tidak memiliki konten atau isi disebut empty element / elemen
kosong. Elemen dapat ditutup pada awal tag. <br> adalah contoh elemen
kosong yang tidak memerlukan end tag. <br> bermakna ganti baris. Pada
XHTML, XML, dan versi HTML yang lebih baru, semua elemen harus ditutup dengan
end tag. Cara yang tepat untuk menutup elemen kosong yang dapat diterima oleh
HTML, XHTML dan XML adalah dengan menambahkan garis miring di awal tag, seperti
<br />. Walaupun <br> terbukti berjalan baik disemua browser,
menulis <br /> akan lebih baik.
Terkadang
kita sering lupa memberi end tag pada suatu elemen. Seperti contoh dibawah ini:
<p>Paragraf
pertama</p>
<p>Paragraf
kedua</p>
Jika
penulisan skrip (kode) HTML salah atau kurang tepat, maka browser tidak dapat
membaca dengan sempurna (terjadi error) sehingga tampilan website menjadi tidak
sesuai dengan apa yang diinginkan.
Jangan
lupa untuk selalu menuliskan tag penutup
Atribut HTML
atribut HTML adalah suatu informasi tambahan yang bisa disertakan pada suatu
elemen HTML. Atribut ini memberikan informasi tambahan tentang elemen yang
bersangkutan. Cara mendefinisikan atribut dengan memberikan informasi
name
dan
value dari suatu elemen, seperti name=”value”.
Contoh Atribut :
Link HTML atau HTML Links didefinisikan dengan tag <a>. Alamat link
inilah yang merupakan atribut.
<a href="http://www.amikom.ac.id/">Amikom Yogyakarta</a>
Jadi <a> merupakan elemen
html, href adalah name atau nama atribut sedang Pemrograman adalah value
atau nilai atribut.
Berikut adalah beberapa atribut
standar yang hampir dipakai semua elemen:
Atribut
|
Nilai
|
Keterangan
|
class
|
class_rule atau style_rule
|
Kelas elemen
|
id
|
id_name
|
Nomor unik suatu elemen
|
style
|
style_definition
|
Definisi gaya atau style
|
title
|
tooltip_text
|
Tulisan yang akan tertampil pada
tool tip
|
Nilai suatu atribut harus selalu dimulai
dan diakhiri dengan tanda petik. Biasanya menggunakan tanda petik (“…”). Tanda
petik ini mengapit petikan langsung dari suatu nilai elemen. Karena sifatnya
dari file html sangat case sensitive , salah dalam penulisan tiak bisa
berfungsi sebagai mana mestinya itu di fungsikan.
TAG Pada HTML
• Tag HTML berfungsi untuk menyatakan suatu dokumen HTML,
• Tag HEAD berfungsi untuk memberikan informasi tentang dokumen HTML dan
• Tag BODY berfungsi untuk menyimpan informasi atau data yang akan ditampilkan dalam dokumen
HTML.
berikut bagan utama pada HTML :
Tag Dasar dan Umum pada HTML :
HTML
Merupakan
tag dasar yang mendifinisikan bahwa dokumen adalah dokumen html. Tag ini
merupakan
suatu keharusan bagi pemrogram web untuk menuliskannya sebagai tag
pertama
dalam dokumen html. Penulisan tag seperti berikut ini :
<html> pada awal dokumen dan </html> pada akhir dokumen
Head
Bagian
Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head
yang benar
akan meningkatkan kegunaan suatu dokumen HTML. Isi bagian head –
kecuali
judul dokumen – tidak akan terlihat oleh pembaca dokumen tersebut. Penulisan
tag
seperti berikut ini :
<head> di awal setelah <html> dan </head> di akhir section head.
Elemen-elemen
pada bagian head akan mengerjakan tugas-tugas sebagai berikut :
• Menyediakan judul dokumen
• Menjembatani hubungan antar dokumen
• Memberitahu browser untuk membuat form pencarian
• Menyediakan metode untuk mengirim pesan ke tipe browser
Elemen
yang mungkin terdapat pada bagian head :
• Tag <title>, digunakan untuk memberi judul dokumen. Penggunaannya adalah
sebagai
berikut :
<title>Judul Dokumen</title>
• Tag <base>, digunakan untuk menentukan basis URL sebuah dokumen. Contoh
penggunaannya
adalah sebagai berikut berikut :
<base href="//www.cotohaja.com/direktori" />
• Tag <link>, digunakan untuk menunjukkan relasi antar dokumen HTML.
Tag ini
mempunyai beberapa atribut :
Atribut Fungsi
Atribut
|
Fungsi
|
Href
|
Menunjuk pada URL / dokumen lain
|
rel
|
Mendefinisikan relasi terhadap sebuah dokumendan dokumen lain
yang berisi informasi tentang personil yang member kontribusi
terhadap dokumen tersebut
|
rev
|
Mendefinisikan relasi sebuah dokumen HTML dengan dokumen lain
|
type
|
Menentukan tipe dan paramenter dari relasi
|
Contoh
penggunaannya adalah sebagai berikut:
<link rel="stylesheet" href="http://contohaja.com/style.css" type="text/css" />
• Tag <meta>, digunakan untuk mendefinisikan informasi-informasi di luar HTML
Informasi
meta dapat digunakan oleh browser untuk menjalankan suatu aktivitas
yang belum
didukung oleh HTML.
Tag <meta> mempunyai atribut :
Atribut Fungsi
Atribut
|
Fungsi
|
http-equiv
|
Mendefinisikan properti dari elemen
|
name
|
Menyediakan deskripsi tambahan dari elemen
|
url
|
Mendefinisikan target dokumen dari sebuah properti
|
content
|
Menyediakan nilai respon dari properti
|
Untuk
lebih memperjelas penggunaan atribut tag <META>
perhatikan contoh
berikut
ini :
Perintah
diatas akan diterjemahkan oleh browser sebagai “tunggu 60 detik,
kemudian
panggil dokumen baru pada www.alamat.com". Jika atribut URL tidak
disertakan,
maka halaman itu sendiri yang akan dipanggil, jadi setara dengan
mengklik
tombol Refresh / Reload pada browser.
Penggunaan
elemen <meta> yang paling populer adalah penggunaan properti
Keyword
dan Description. Kedua properti ini sangat berguna untuk membantu kerja
search
engine. Biasanya search engine akan menggunakan teks yang disebutkan
<meta http-equiv="refresh" content="60" url="www.contohaja.com" />
pada
properti Keyword untuk mengindeks dokumen dan menggunakan teks yang
terdapat
pada properti Description untuk mendeskripsikan indeks tersebut.
BODY
Bagian
BODY merupakan isi dari dokumen HTML. Semua informasi yang akan
ditampilkan,
mulai dari teks, gambar, sound, dan lain-lain, akan ditempatkan di bagian ini.
Seperti
telah disebutkan di atas, bagian BODY diawali oleh tag <body> dan ditutup
</body>.
Atribut Fungsi
Atribut
|
Funsi
|
alink
|
Menunjukkan warna link aktif
|
background
|
Merujuk URL atau direktori dari gambar yang digunakan sebagai
latar belakang
|
bgcolor
|
Menentukan warna latar belakang
|
bgproperties
|
Jika nilai atribut diisi “FIXED”, maka gambar latar belakang
tidak ikut
tergulung
|
leftmargin
|
Batas kiri dokumen
|
link
|
Menentukan warna link yang belum dikunjungi
|
text
|
Menentukan warna teks
|
topmargin
|
Menentukan batas atas
|
vlink
|
Menentukan
warna link yang telah dikunjungi
|
|
|
<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
|
<p>
|
Paragraf.
|
<br>
|
Line Break atau Ganti baris.
|
<h1>s/d<h6>
|
Heading untuk judul dan sub-judul
|
<hr>
|
Penggaris mendatar
|
<form>
|
untuk membuat table
|
<font>
|
untuk mengatur huruf, jenis huruf, warna,
dan ukuran
|
<ul>
|
memberi
tanda kotak, bundar, dan lain sebagainya
|
<ol>
|
memberi
urutan angka, huruf, dan romawi
|
<b>
|
untuk membuat text menjadi tebal
|
<i>
|
untuk
membuat text menjadi miring
|
<u>
|
untuk
membuat text menjadi bergaris bawah
|
<center>
|
untuk
menampilkan teks rata tengah
|
<marque>
|
untuk
membuat text berjalan
|
<a>
|
untuk
menghubungkan antar link
|
<bg
color>
|
untuk
memberi background warna
|
<img
src>
|
untuk
memasukkan gambar
|
