Tag HTML Dasar Yang Penting

Belajar Elemen HTML
Elemen HTML, apa tuh? Nah, dalam Belajar HTML yang lalu, kamu udah nyoba
membuat halaman HTML pertama kamu dan mengerti cara bikinnya. Berikutnya kamu
harus belajar elemen HTML dan cara menuliskannya. Kamu akan memerlukan definisi
dasar ini dalam proses belajar HTML yang kamu lakukan sepanjang tutorial di sini.
Berikut petunjuk pentingnya.
Ingat petunjuk penting ini:
Dokumen HTML adalah file teks yang terdiri dari elemen HTML. Nah, elemen
HTML itu didefinisikan menggunakan apa yang disebut dengan tag HTML.
Ingat, elemen HTML didefinisikan dengan tag HTML. Apa yang dimaksud dengan tag
HTML? Nah, berikut poin-poin yang akan membantu kamu mengingat dan memahami
pengertian Tag HTML:
Tag HTML digunakan untuk menandai (mark-up) elemen HTML

Tag HTML berada di antara dua karakter penanda berikut < dan >
Karakter penanda itu disebut dengan tanda kurung siku
Tag HTML umumnya selalu berpasangan seperti <b> dan </b>
Tag pertama adalah tag pembuka, dan tag kedua adalah tag penutup
Teks di antara kedua tag tersebut disebut isi elemen
Tag HTML tidak bersifat case sensitif, <b> memiliki arti yang sama dengan <B>
Elemen HTML
Ingat contoh HTML di tutorial sebelumnya kan:
?
1
<html>
2<head>
3<title>Judul Halaman</title>
4</head>
5<body>
6Ini halaman pertama saya. <b>Teks ini ditebalkan</b>
</body>
7</html>
8
Ini adalah elemen HTML:
?
1<b>Teks ini ditebalkan</b>
Berikut penjelasan tentang Elemen HTML tersebut:
Elemen HTML ini dimulai dengan tag pembuka: <b>

Isi dari elemen HTML adalah: Teks ini ditebalkan
Elemen HTML diakhiri dengan tag penutup: </b>
Fungsi tag <b> adalah untuk mendefinisikan sebuah elemen HTML yang harus
ditampilkan dengan huruf tebal.
Nah, ini juga elemen HTML:
1
?
1<body>
2Ini adalah halaman pertama saya. <b>Teks ini ditebalkan</b>
3</body>
Tag HTML Dasar yang Penting
Tag HTML yang paling penting adalah tag-tag HTML yang mendefinisikan judul,
paragraf dan ganti baris. Agar lebih mudah memahami tutorial dasar HTML tentang tag
ini, saya sarankan untuk membaca tutorial tentang elemen HTML ini terlebih dahulu.
Seperti umumnya bahasa pemrograman lainnya, maka cara terbaik untuk mempelajari
tag HTML adalah dengan banyak berlatih. Latihan tentu saja memerlukan alat bantu.
Nah, pada dasarnya kamu bisa bikin file HTML menggunakan notepad, tapi tentu saja
banyak software untuk menulis dengan berbagai fasilitas yang akan memudahkan.
Googling aja atau cari di download.com dengan kata kunci HTML Editor.
Judul
Judul didefinisikan dengan menggunakan tag HTML <h1> sampai >h6>. <h1>
mendefinisikan huruf judul yang paling besar, dan <h6> yang terkecil. Untuk latihan
coba kamu bikin file HTML berikut ini dan perhatikan hasilnya.
<h1>Ini Judul</h1>
<h2>Ini Judul</h2>
<h3>Ini Judul</h3>
<h4>Ini Judul</h4>
<h5>Ini Judul</h5>
<h6>Ini Judul</h6>
HTML secara otomatis akan menambahkan baris kosong sebelum dan sesudah judul.
Paragraf
Paragraf didefinisikan dengan menggunakan tag HTML <p>.
<p>Ini adalah sebuah paragraf</p>

<p>Ini paragraf lainnya</p>
Sama seperti judul, HTML secara otomatis akan menambahkan baris kosong sebelum
dan sesudah paragraf.
Jangan lupa Tag HTML penutup
Kamu pastinya udah pernah ngeliat bahwa paragraf dapat ditulis tanpa tag HTML
penutup </p> kayak gini:
<p>Ini adalah sebuah paragraf

<p>Ini paragraf lain
2
Contoh barusan dapat digunakan pada hampir semua jenis browser, tapi jangan
ngandelin hal itu. Versi-versi HTML ke depan kayaknya ndak akan ngijinin kamu untuk
melewatkan tag HTML penutup.
Menutup semua elemen HTML dengan tag HTML penutup adalah cara yang ampuh
untuk menulis HTML yang kompatibel dengan semua browser dan pengembangan ke
depan. Hal ini juga membuat kode kita lebih mudah dimengerti (baik dibaca maupun di
browse).
Ganti Baris
Tag HTML <br> digunakan pada saat kamu pengen membuat baris baru, tapi belum
ingin ganti paragraf. Tag HTML <br> akan membuatkan sebuah baris baru buat kamu
dimanapun kamu letakkan tag itu.
<p>Ini <br> adalah sebuah pa<br>ragaraf dengan ganti baris </p>

Tag <br> adalah tag yang kosong. Nah, karena itu dia tidak punya tag HTML penutup
seperti misalnya </br>, karena jadi ndak masuk akal. Ya tho?
<br> atau <br />
Kamu akan makin sering melihat penulisan tag HTML <br> dengan cara begini: <br />
Karena tag HTML <br> tidak memiliki tag penutup, maka tag tersebut melanggar salah
satu aturan dasar dalam penulisan HTML ke depannya (XHTML yang berbasis XML), di
mana semua elemen harus ditutup.
Menuliskan penggantian baris dengan cara <br/> ini menjamin bahwa file HTML kamu
akan kompatibel dengan XML maupun cara penulisan HTML di masa datang.
Menuliskan Komentar dalam HTML
Tag komentar digunakan untuk menyisipkan sebuah komentar dalam kode sumber
HTML. Sebuah komentas akan diabaikan oleh browser. Kamu bisa menggunakan
komentar untuk menjelaskan kode yang kamu bikin, dan tentu saja hal ini akan
membantu kamu saat kamu perlu melakukan perubahan pada kode kamu kapan-kapan.
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK
DI SINI!.

Perhatikan bahwa kamu perlu menuliskan tanda seru setelah kurung buka, tetapi tidak
sebelum kurung tutupnya.
Ingat hal-hal berikut!
Setiap tag HTML memiliki sebuah nama elemen (body, h1, p, br)
Tag pembuka adalah nama yang dilingkupi oleh tanda kurung siku: <h1>
Tag penutup adalah tanda garis miring dan nama yang dilingkupi oleh tanda
kurung siku </h1>
Isi elemen berada di antara tag pembuka dan tag penutup
Beberapa elemen HTML tidak memiliki isi elemen
Beberapa elemen HTML tidak memiliki tag penutup
Beberapa Tips Yang Bermanfaat
3
Waktu kamu menulis teks HTML, maka kamu tidak akan pernah bisa yakin bagaimana
teks itu ditampilkan oleh browser lain. Beberapa orang memiliki monitor yang lebih
besar, dan yang lainnya. Teks akan diatur ulang setiap kali pengunjung mengubah ukuran
windownya. Jangan pernah mencoba untuk membantuk teks yang memiliki baris kosong
atau spasi dekat dengan teks itu.
HTML akan menghapus spasi dalam teks kamu. Berapa banyakpun kamu tuliskan spasi,
tetap akan dihitung satu. Satu lagi, dalam HTML sebuah baris baru dihitung sebagai satu
spasi.
Menggunakan paragraf kosong <p> untuk menyisipkan baris kosong adalah kebiasaan
yang kurang baik. Gunakan tag <br> sebagai penggantinya. (tapi jangan juga gunakan
tag <br> untuk membuat daftar. Tunggu sampai pelajaran tentang daftar dimulai ya).
HTML secara otomatis akan menambah baris kosong sebelum dan sesudah beberapa
elemen, seperti sebelum dan sesudah paragraf dan judul.
Tag HTML Dasar
Masih ingat kan tentang pengertian tag HTML? Nah, berikut adalah tag-tag HTML
penting yang akan sangat sering kamu pakai. Dan kamu akan mempelajari masing-
masing secara lebih detil terutama yang menyangkut atributnya.
Tag Description
<html> Mendefinsikan sebuah dokumen HTML
<body> Mendefinisikan isi utama
<h1> to <h6> Mendefinisikan judul 1 sampai 6
<p> Mendefinisikan paragraf
<br> Menyisipkan sebuah baris
<hr> Mendefinisikan garis horisontal
<!> Bikin komentar
Atribut Tag HTML
Tag HTML dapat memiliki atribut. Atribut memungkinkan informasi tambahan pada
elemn HTML.
Atribut selalu memiliki pasangan nama/nilai seperti ini: nama=nilai.
Atribut selalu dicantumkan pada awal tag elemen HTML.
Contoh Atribut 1:
<h1> mendefinisikan awal sebuah judul.
<h1 align=center> memiliki informasi tambahan tentang perataan baris.
Contoh Atribut 2:
<body> mendefinisikan badan/isi halaman HTML kita.
4
<body bgcolor=red> akan membuat background layar menjadi merah.
Contoh Atribut 3:
<table> mendefinisikan sebuah tabel HTML (nanti kita pelajari lebih lanjut).
<table border=1> memiliki tambahan informasi mengenai ketebalan garis pada tabel
Mudahnya gini, sebuah link HTML adalah sebuah alamat yang merujuk ke dokumen
atau alamat lainnya di Internet. Menurut saya sebenarnya konsep link HTML inilah
yang akhirnya benar-benar membuat web menjadi sangat bermanfaat dan akhirnya
menjadi sangat besar seperti sekarang ini.
Orang sangat mudah merujuk ke referensi lain yang semuanya tersedia online. Bener-
bener jenius .
Jadi, pelajari baik-baik ya
Ndak usah pake contoh ya , kan udah banyak banget di Internet. Link HTML itu ya
tempat kamu main klak klik itu lah. Yuk kita pelajari lebih lanjut.
Hyperlinks, Anchors, dan Links
Dalam istilah web, hyperlink adalah referensi (sebuah alamat) ke sumber-sumber

informasi lain di Internet. Hyperlink biasanya merujuk ke sebuah halaman HTML,
sebuah gambar, file suara, movie, dll.Sedangkan anchor (bahasa Indonesianya Jangkar)
adalah istilah yang digunakan untuk mendefinisikan tujuan hyperlink dalam sebuah
dokumen.
Jadi gini, alamat halamannya ditunjukkan oleh hyperlink, sedangkan kalau di dalam
dokumen itu ada bab 2, maka kita bisa langsung merujuk ke bab 2 tadi dengan bantuan
anchor.
Untuk membuat hyperlink dan anchor kita menggunakan elemen HTML anchor <a>.
Dalam tutorial kali ini, kita akan menggunakan istilah link HTML saat elemen <a>
merujuk ke sebuah halaman dan istilah anchor HTML saat element <a> tersebut merujuk
ke sebuah alamat di dalam dokumen.
Bikin Link HTML
Sintaks Link:
?
1<a href="/caramembuatwebsite/url">Teks Link</a>
Perhatikan, tag HTML pembuka berisi atribut link tersebut.
Isi elemen (Teks link) mendefinisikan apa yang ingin anda tampilkan ke pengunjung.
Catatan: Isi elemen tidak harus berupa teks lho. Kamu juga bisa me-link dari sebuah
gambar atau elemen HTML lainnya.
Atribut href
Atribut href adalah alamat yang akan dibuka saat seseorang mengklik link yang kita buat.
5
Elemen <a> ini mendefinisikan sebuah link yang akan menuju ke sebuah web site yang
saya kelola juga yaitu kursus-online.com:
?
1<a href="http://www.kursus-online.com/">Pengen belajar bikin web
2sambil Praktek sekalian bisa dapet duit?. Klik di sini aja!</a>
Kode tersebut akan ditampilkan seperti ini. Sok atuh dicoba klik biar kerasa.
Pengen belajar bikin web sambil Praktek sekalian bisa dapet duit? Klik di sini aja!!
Atribut target
Atribut target sangat berguna bagi kita untuk mengatur halaman yang kita tuju itu akan
dibuka di mana.
Kita bisa membukanya di halaman utama ini langsung atau membukanya di halaman
baru saat seorang pengunjung mengklik link yang kita sediakan.
Berbeda dengan kode sebelumnya yang membuka web site kursus-online.com di jendela
yang sama, kode ini akan membuka web site kursus-online.com pada sebuah jendela
baru:
?
1<a href="http://www.kursus-online.com/"
2target="_blank"> Pengen belajar bikin web sambil Praktek sekalian
3bisa dapet duit?. Klik di sini aja!</a>
Sok di klik link di bawah ini biar tahu bedanya:
DI SINI!.
Pengen belajar bikin web sambil Praktek sekalian bisa dapet duit? Klik di sini aja!!
Attribute name
Saat kita menggunakan atribut name, maka itu berarti kita mendefinisikan sebuah nama
anchor yang berada di dalam sebuah halaman HTML.
Nama anchor tidak akan nampak di mata pengunjung. Itu hanya merupakan
pendefinisian di sebuah halaman web aja.
Cara membuat sebuah anchor:
?
1<a name="label">Apapun</a>
Nah, link yang menuju ke halaman itu bikinnya gini:
?
1<a href="#label">Apapun</a>
Perhatikan tanda # yang mendefinisikan nama anchor
6
Contoh:
Sebuah anchor dalam dokumen HTML:
?
1<a name="top">Ini bagian paling atas</a>
Sebuah link yang merujuk ke bagian paling atas dalam dokumen yang sama:
?
1<a href="#top">Kembali ke atas</a>
Sebuah link yang menuju ke sebuah anchor di halaman web lain:
?
1<a href="http://www.prothelon.com/mambo/contoh.htm#top">
2Kembali ke halaman utama paling atas</a>
Nah, kalau mau lihat bagaimana sebuah link anchor bekerja, klik Kembali ke atas ini
untuk menuju ke bagian paling atas dari halaman ini.
Catatan penting dan tips yang pastinya akan berguna buat kamu
Ingat untuk selalu menambahkan garis miring di akhir sub folder link kita.
Jika link kita bentuknya seperti ini:
href=http://www.prothelon.com/mambo,
maka kamu akan membuat 2 buah permintaan http ke server, karena server akan
menambahkan garis miring dan membuat alamat yang kita minta tadi menjadi seperti ini:
href=http://www.prothelon.com/mambo/
Nah, dengan menambahkan garis miring di akhir sub folder, kita sudah menghemat
resource di server.
Kamu bisa menggunakan Anchor untuk membuat daftar isi di awal sebuah dokumen
yang panjang.
Kalau browser tidak bisa menemukan anchor yang kita tentukan, maka secara otomatis
akan menuju ke bagian paling atas dari dokumen. Tanpa error.
Nah, itu adalah materi belajar HTML mengenai link.
Jika ingin mempelajari tutorial lainnya, silahkan klik link tutorial lain di menu utama
sebelah kiri.
Kalau bosen belajar cuman baca doang kaya gini, coba aja ke kursus-online.com. Di sana
kamu bisa dapet materi yang sangat lengkap tentang bikin web, bisa belajar langsung
praktek dengan metode 4 langkah mudah bisa bikin web, plus ada peluang belajar sambil
dapet penghasilan tambahan.
Menulis dokumen apapun pasti memerlukan paragraf. Mari kita pelajari tag HTML
yang digunakan untuk membuat sebuah paragraf HTML yaitu tag <p>.
Kita menggunakan tag <p> untuk membuat sebuah paragraf HTML baru.
Saat kita menggunakan tag ini, dia akan menambahkan sebuah baris kosong di atas dan
di bawah teks paragraf yang kita tulis. Baris-baris kosong tersebut adalah baris yang
7
menandakan sebuah paragraf HTML dan memisahkan paragraf tersebut dari paragraf-
paragraf yang lainnya.
Dantentu saja kita harus menutup paragraf HTML kita dangan pasangannya yaitu tag
</p>.
Contoh kode HTML:
<p>Ini adalah sebuah contoh paragraf yang panjang dan menarik,

sehingga kalimat ini tidak ada isinya sama sekali. <p>
Kamu juga bisa melakukan proses perataan pada paragraf yang kamu bikin. Hal ini
sangat mudah dilakukan, yaitu dengan menambahkan atribut HTML align.
Contoh tag di bawah ini akan membuat paragraf kamu rata kiri kanan.
DI SINI!.
<p align="justify">Ini adalah paragraf yang rata kanan dan rata
kiri.</p>
Entitas karakter
Beberapa karakter memiliki arti khusus dalam HTML, seperti tanda lebih kecil (<) yang
mendefinisikan awal dari sebuah tag HTML. Kalau kita ingin agar browser menampilkan
tanda lebih kecil itu (<), kita harus menyisipkan entitas karakter dalam kode HTML kita.
Entitas karakter memiliki 3 komponen: sebuah tanda dan (&), nama entitas atau sebuah #
yang diikuti nomor entitas dan diakhiri dengan tanda titik koma (;).
Untuk menampilkan tanda lebih kecil dalam halaman HTML kita, maka kita harus
menuliskan : < atau <
Keuntungan menggunakan nama dibandingkan nomor adalah bahwa nama lebih mudah
untuk diingat. Kekurangannya adalah bahwa tidak semua browser mendukung nama-
nama entitas yang baru, namun demikian hampir semua browser mendukung nama
entitas standar.
Catatan: entitas bersifat case sensitif.
Spasi berurutan
Entitas karakter yang mungkin akan paling sering kamu pakai adalah spasi.
HTML akan menghilangkan spasi dalam teks HTML kamu. Kalau kamu menuliskan 10
spasi pada kode HTML kamu, maka HTML akan menghapus 9 spasi. Nah, untuk
menambahkan spasi pada dokumen HTML kamu, gunakan entitas karakter
Beberapa entitas karakter yang sering dipakai:
Hasil Penjelasan Nama Entitas Nomor Entitas

Spasi
< Kurang dari < <
> Lebih dari > >
Tanda kutip " "
8
Kutip tunggal ' (Ndak berlaku di IE) '
& Dan & &
Beberapa komentar yang ada meminta agar tutorial ini ditambah dengan contoh agar
lebih jelas. Nah, berikut ini contoh untuk memperjelas tentang apa yang dimaksud
dengan entitas karakter.
Kasusnya sangat mudah kok. Kita kan udah tahu, kalau yang namanya HTML itu
menggunakan tag, iya kan? Salah satu contoh adalah tag <b> </b>untuk menebalkan
huruf.
Buat kamu yang baru belajar HTML, mungkin penasaran bagaimana cara mengubah
huruf atau teks HTML menjadi tebal atau membuatnya menjadi miring. Tampilan huruf
seperti ini sangat penting untuk dilakukan, misalnya pada saat kita perlu memberikan
penekanan pada kata-kata tertentu yang kita anggap penting, pada umumnya kita
menggunakan huruf tebal, atau pada saat menggunakan istilah asing, maka kita perlu
membuatnya menjadi miring (atau istilah lainnya italic). Jika iya, maka tutorial HTML
kali ini pas banget buat kamu. Gampang kok untuk mengubah tampilan huruf seperti itu.
Seperti yang sudah kamu ketahui dari tutorial elemen HTML ini, kamu pastinya udah
tahu kalau HTML menggunakan tag untuk semua perintah yang dilakukannya. Nah,
untuk mengubah tampilan dan format teks, HTML juga menggunakan tag-tag seperti
<b> (untuk menebalkan huruf) dan <i> (untuk menampilkan huruf miring) untuk
menampilkan teks atau huruf sesuai dengan kebutuhan kita.
Berikut beberapa tag untuk mengubah tampilan huruf yang sering digunakan:
DI SINI!.
Tag Deskripsi
<b> Menebalkan huruf
<i> Menampilkan huruf miring
<big> Menampilkan huruf dalam ukuran besar
<small> Menampilkan huruf dalam ukuran kecil
<strong> Mirip dengan <b>, menampilkan dengan tebal
<sub> Subscript (Tulisan kecil di bawah, misalnya untuk menulis rumus kimia)
Superscript
<sup> (Yang ini kecil di atas, misalnya menulis kuadrat)
<u> Menulis huruf bergaris bawah.
Bagaimana contoh pemakaiannya? Berikut ini contoh untuk menampilkan tulisan tebal
dan miring:
?
1<b><i>Tulisan ini tebal dan miring</i></b>
9
Ok. Setelah sebelumnya kamu mempelajari konsep dan jenis-jenis daftar atau list
HTML, sekarang waktunya untuk mempelajari cara membuat ordered list HTML alias
daftar bernomor. Caranya Membaut Program HTML nya guamping
Kamu cuman perlu tahu 2 tag program HTML untuk ordered list HTML yaitu <OL> dan
<LI>.
Tag <OL> adalah tanda mulainya sebuah daftar bernomor urut, sedangkan tag <LI>
adalah isi dari ordered list HTML yang ingin kita tuliskan.
Biasa..paling gampang kalau menjelaskan program HTML ini pakai contoh kan?
Nah kode berikut ini:
?
1<OL><LI>Mempelajari HTML</LI><LI>Mempelajari PHP</LI>
2
3<LI>Mempelajari MySQL</LI></OL>
Program HTML tersebut, skan tampil seperti ini di browser:
1. Mempelajari HTML
2. Mempelajari PHP
3. Mempelajari MySQL
Membuat tabel HTML mungkin kelihatannya susah, tetapi setelah mempelajari tutorial
HTML ini, maka kamu akan mengatakan, oh ternyata gampang banget ya.
Untuk mudahnya, kamu cuma perlu mengingat 3 tag awal yang terkait dengan tabel
HTML, yaitu:
tag <table>, untuk memulai sebuah tabel

tag <tr>, untuk membuat baris baru
tag <td>, untuk membuat kolom
Oh ya, sebelum lupa, mengapa kita perlu mempelajari tabel HTML?
Tabel HTML tidak hanya bermanfaat untuk menampilkan data dalam bentuk tabulasi,
tetapi tabel HTML juga merupakan alat yang bisa kamu pakai untuk membuat desain
layout website. Hal itu bis akamu lakukan kalau kamu udah biasa menggunakan tabel
HTML tentunya.
Untuk tahap awal, mari kita coba untuk mempelajari cara membuat tabel HTM
sederhana.
Kode HTML:
?
1<table border="1">
2
3<tr><td>Baris 1 Kolom 1</td><td>Baris 1 Kolom 2</td></tr>
4
6
7</table>
10
Saya akan coba jelaskan tiap bari dari kode HTML membuat tabel HTML sederhana
tersebut.
DI SINI!.
Baris pertama adalah definisi awal membuat tabel. Di sini kamu bisa menentukan
misalnya parameter border yang dalam contoh kode ini memiliki lebar 1. Kamu
bisa bereksperimen dengan mengubah nilai border tag tabel HTML ini untuk
melihat perubahan lebar bordernya.
Baris kedua adalah definisi pembuatan baris pertama dari tabel kita menggunakan
tag tabel HTML <tr>. Dalam baris pertama ini, kita membuat 2 kolom
menggunakan pasangan tag <td> sebanyak 2 kali.
Baris ketiga, kita membuat baris kedua dari tabel kita yang juga terdiri dari 2
kolom.
Baris terakhir adalah definisi akhir dari tabel kita.
Dalam tutorial belajar tabel HTML kali ini kita akan membahas tentang spanning atau
menggabungkan baris/kolom.
Spanning tabel HTML artinya adalah menyatukan atau menggabungkan beberapa kolom
atau baris dalam sebuah tabel. Untuk melakukan spanning, kita memerlukan parameter
rowspan dan colspan.
Berikut ini contoh kodenya.
?
1
2 <table border="1">
3
4 <tr>
5 <th>Judul Kolom 1</th>
6
8
10
11 </tr>
12
13<tr><td rowspan="2">Baris 1 Kolom 1</td>
14
<td>Baris 1 Kolom 2</td><td>Baris 1 Kolom 3</td></tr>
15
17
18<tr><td colspan="3">Baris 3 Kolom 1</td></tr>
19
20</table>
21
Dalam contoh kode di atas, kita juga melihat ada sebuah tag tabel HTML baru yaitu
<th>. Tag <th> ini gunanya adalah untuk membuat judul kolom. Biasanya judul kolom
ini akan dibuat dengan tulisan yang tebal.
4 <table border="1" cellpadding="10"

5
6 bgcolor="rgb(0,255,0)">
7
<tr>
8
11
10
12
</tr>
13
15
17
</table>
Home Tips dan Trik Blogging Perintah dan Fungsi Tag pada HTML
Perintah dan Fungsi Tag pada HTML

Posted by Cuma Blogger on 04 January 2012
Tag Keterangan
 Digunakan untuk memberi sebuah komentar atau keterangan. Kalimat
yang terletak pada kontiner ini tidak akan terlihat pada browser
<!DOCTYPE> Mendefinisikan informasi tipe dokumen
<a> Mendefinisikan sebuah anchor, tetapi lebih tepat jika diartikan sebagai
tautan dikarenakan tautan ini digunakan untuk saling menautkan antara
satu dokumen HTML ke dokumen HTML yang lain
<abbr> Digunakan untuk menguraikan satu ungkapan yang disingkat dan
Anda dapat memberikan informasi bermanfaat kepada penelusur-
penulusur page source(halaman sumber kode) / pembaca layar, sistem
terjemahan dan mesin pencari yang berasal dari singkatan yang sudah
diuraikan, tetapi saat di browser uraian tersebut tidak akan tampil dan
hanya sebagai informasi saja
<acronym> Mendefinisikan akronim / fungsi tag ini kurang lebih sama dengan tag
<abbr>
<address> Mendefinisikan informasi kontak untuk penulis/pemilik dokumen
<applet> Digunakan untuk memasukan file java kedalam dokumen HTML
<area /> Mendefinisikan daerah yang dapat diklik (link) pada peta gambar
<b> Membuat teks tebal
<base /> Mendefinisikan URL dasar/target untuk semua URL relatif dalam
dokumen
<basefont /> Membuat atribut teks default, seperti warna, ukuran, jenis font untuk
semua teks dalam dokumen
<bdo> Digunakan untuk menimpa arah teks
<big> Memperbesar ukuran teks sebesar satu point dari defaultnya
<blink> Membuat teks berkedip
<blockquote> Mendefinisikan sebuah kutipan panjang. Pada saat di browser teks
akan tampil menjorok kedalam
<body> Mendefinisikan body/isi dokumen HTML, berfungsi untuk
menentukan bagaimana isi suatu dokumen ditampilkan di web
12
browsernya. Isi dokumen tersebut dapat berupa teks, gambar, animas,
link dan seterusnya
<br /> Memberi baris baru/pindah baris
<button> Mendefinisikan sebuah tombol diklik
<caption> Membuat caption pada tabel
<center> Untuk perataan tengah terhadap teks atau gambar
<cite> Mendefinisikan kutipan
<code> Mendefinisikan sebuah bagian dari kode komputer
<col /> Mendefinisikan nilai atribut dari satu kolom atau lebih dalam sebuah
tabel
<colgroup> Menentukan kelompok dari satu kolom atau lebih dalam sebuah tabel
untuk performatan
<dd> Mendefinisikan deskripsi dari item dalam daftar definisi
<del> Untuk memberi garis tengah pada teks/mencoret teks
<dfn> Mendefinisikan sebuah istilah definisi
<dir> Mendefinisikan sebuah daftar direktori
<div> Mendefinisikan sebuah section dalam dokumen
<dl> Mendefinisikan sebuah daftar definisi
<dt> Mendefinisikan istilah (item) dalam daftar definisi
<em> Membuat teks miring. Fungsi tag ini sama dengan tag <i> tetapi tag
<em> yang lebih dianjurkan/ditekankan pada penggunaan untuk teks
miring
<embed> Digunakan untuk memasukkan file video atau file musik
<fieldset> Untuk mengelompokkan elemen-elemen yang terkait dalam form /
membuat seperti frame-box di dalam form
<font> Mendefinisikan jenis font, warna dan ukuran untuk teks
<form> Mendefinisikan sebuah form HTML untuk input form
<frame /> Mendefinisikan frame dalam fremeset
<frameset> Mendefinisikan satu set frame
<h1> to <h6> Digunakan untuk menunjukkan awal dari suatu header/judul dari
dokumen HTML tersebut.
<head> Digunakan untuk memberikan informasi tentang dokumen tersebut
<hr /> Membuat garis horisontal
<html> Mendefinisikan root dari suatu dokumen HTML
<i> Membuat teks miring
<iframe> Mendefinisikan sebuah inline frame
<img /> Berfungsi untuk menampilkan gambar pada dokumen HTML
<input /> Mendefinisikan input field pada form
<ins> Membuat teks bergaris bawah
<kbd> Mendefinisikan teks yang di input dari keyboard
<label> Mendefinisikan label untuk sebuah elemen <input>
<legend> Mendefinisikan sebuah caption untuk elemen <fieldset>
<li> Digunakan untuk menampilkan informasi dalam bentuk item daftar
13
<link /> Mendefinisikan hubungan antara dokumen dan sumber eksternalnya
<listing> Fungsi tag ini sama dengan tag <pre> dan dianjurkan menggunakan
tag <pre> karena tag <listing> tidak layak/diprotes
<map> Mendefinisikan client-side peta gambar
<marquee> Membuat teks berjalan secara vertikal atau horisontal
<menu> Mendefinisikan sebuah daftar menu
<meta /> Mendefinisikan metadata tentang sebuah dokumen HTML
<nobr> Mencegah ganti baris pada teks atau gambar
<noframes> Jika browser user tidak mendukung frame
<noscript> Jika browser user tidak mendukung client-side scripts
<object> meletakkan embed sebuah objek
<ol> Mendefinisikan daftar dalam format penomoran
<optgroup> Menampilkan beberapa pilihan yang sudah dikelompokkan dalam
bentuk sebuah daftar drop-down
<option> Menampilkan beberapa pilihan yang berbentuk dalam sebuah daftar
drop-down
<p> Membuat sebuah paragraf
<param /> Mendefinisikan sebuah parameter untuk objek
<pre> Membuat teks dengan ukuran huruf yang sama
<q> Mendefinisikan sebuah kutipan singkat
<s> Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini
sama dengan tag <del> tetapi tag <s> tidak dianjurkan sebagai
gantinya menggunakan tag <del>
<samp> Mendefinisikan contoh keluaran dari program komputer
<script> Mendefinisikan client-side script
<select> Membuat daftar drop-down
<small> Memperkecil ukuran teks dari ukuran defaultnya
<span> Mendefinisikan sebuah section dalam dokumen
<strike> Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini
sama dengan tag <del>
<strong> Membuat teks tebal, fungsi tag ini sama dengan tag <b>
<style> Mendefinisikan informasi style untuk dokumen HTML
<sub> Memberikan efek subscript pada teks
<sup> Memberikan efek superscript pada teks
<table> Membuat tabel
<tbody> Untuk mengelompokkan isi body di dalam sebuah tabel
<td> Mendefinisikan sel di dalam sebuah tabel
<textarea> Mendefinisikan sebuah kontrol input multiline
<tfoot> Untuk mengelompokkan isi footer di dalam sebuah tabel
<th> Mendefinisikan sel header di dalam sebuah tabel
<thead> Untuk mengelompokkan isi header di dalam sebuah tabel
<title> Membuat judul untuk dokumen HTML
<tr> Membuat baris di dalam sebuah tabel
14
<tt> Mendefinisikan teletype text
<u> Membuat teks bergaris bawah, fungsi tag ini sama dengan tag <ins>
tetapi tag <u> tidak dianjurkan untuk kategori HTML text formatting
melainkan termasuk kategori HTML Style
<ul> Mendefinisikan daftar dalam format bullet
<var> Mendefinisikan sebuah variabel
<xmp> Mendefinisikan preformatted text, fungsi tag ini sama dengan tag
<pre>
Daftar Tag HTML Beserta Fungsinya

0 Comment
Pada pos kali ini kita akan membahas daftar tag pada HTML berserta fungsinya, oke
tanpa basa-basi lagi! Mungkin daftar tag-tag ini hanya untuk mengingatkan kita saja,
untuk lebih jelasnya pelajarilah dasar-dasar HTML terlebih dahulu sehingga anda dapat
mendesain tampilan website sendiri.
Apa yang dimaksud dengan HTML tags?

HTML tags adalah sebuah label yang di awali dengan tanda '<' dan di akhiri dgn tanda '>'
:
<html>
<title>
<body>
Pada umumnya HTML tags adalah berpasangan:

Dimulai dengan <body> ditutup dengan </body>
Dimulai dengan <h2> ditutup dengan </h2>
Dimulai dengan <p> ditutup dengan </p>
Akan tetapi ada beberapa tags yang juga disebut sebagai 'empty element' dapat berjalan
tanpa berpasangan:
<img>
<input>
*Selalu usahakan untuk ingat agar menutup setiap elemen dengan tag penutup!
Berikut ini daftar tag-tag pada HTML:

Tag Description DTD
 Mendefinisikan komentar HTML STF
<!DOCTYPE> Mendefinisikan tipe dokumen STF
<a> Mendefinisikan anchor link STF
<abbr> Mendefinisikan sebuah singkatan STF
<acronym> Mendefinisikan akronim STF
Mendefiniskan informasi kontak untuk pemiliki / penulis
<address> STF
dokumen
<applet> Ditinggalkan. Medefinisikan applet TF
<area /> Mendefinisikan arae di dalam image-map STF
<b> Mendefinisikan tulisan tebal STF
Mendefinisikan URL utama/target untuk semua URL alternatif
<base /> STF
di dalam dokumen
Ditinggalkan.bbsp;Merincikan dari warna, ukuran dan font
<basefont /> TF
default dari semua tulisan yang ada di dalam dokumen.
15
<bdo> Menggantikan arah tulisan STF
<big> Mendefinisikan tulisan besar STF
<blockquote> Mendefinisikan kutipan yang panjang STF
<body> Mendefinisikan badan dokumen STF
<br /> Mendefinisikan satu baris baru STF
<button> Mendefinisikan tombol yang bisa di-klik STF
<caption> Mendefinisikan judul dari tabel STF
<center> Ditinggalkan. Mendefinisikan tulisan agar ditengah TF
<cite> Mendefinisikan kutipan STF
<code> Mendefinisikan kode komputer STF
Mendefinisikan nilai atribut dari satu atau lebih kolom pada
<col /> STF
tabel
Merincikan sebuah grup atau lebih dari kolom-kolom dalam
<colgroup> STF
tabel untuk di format
<dd> Mendefinisikan deskripsi dari sebuah item di daftar definisi STF
<del> Defines text that has been deleted from a document STF
<dfn> Mendefinisikan ketentuan definisi STF
<dir> Ditinggalkan. Mendefinisikan daftar direktori TF
<div> Mendefinisikan sebuah bagian di dalam sebuah dokumen STF
<dl> Mendefinisikan daftar definisi STF
Mendefinisikan ketentuan (dari sebuah item) di dalam daftar
<dt> STF
definisi
<em> Mendefinisikan tulisan emphasized STF
Menggabungkan elemen-elemen yang saling berhubungan di
<fieldset> STF
dalam form
Ditinggalkan, mendefinisikan font, warna, dan ukuran dari
<font> TF
tulisan
<form> Defines an HTML form for user input STF
<frame /> Defines a window (a frame) in a frameset F
<frameset> Defines a set of frames F
<h1> to <h6> Defines HTML headings STF
<head> Mendefinisikan informasi mengenai sebuah dokumen STF
<hr /> Mendefinisikan garis horisontal STF
<html> Mendefinisikan inti dari dokumen HTML STF
<i> Mendefinisikan tulisan italic STF
<iframe> Mendefinisikan inline frame TF
<img /> Mendefinisikan gambar STF
<input /> Mendefinisikan kontrol input STF
Mendefinisikan tulisan yang telah dimasukkan ke dalam
<ins> STF
dokumen
<kbd> Mendefinisikan input keyboard STF
<label> Mendefinisikan label dari elemen <input> STF
<legend> Mendefinisikan Judul dari sebuah elemen <fieldset> STF
<li> Mendefinisikan daftar item STF
Mendefinisikan hubungan antara dokumen dari sumber diluar
<link /> STF
dokumen
<map> Defines a client-side image-map STF
<menu> Ditinggalkan. Mendifinisikan daftar menu TF
<meta /> Mendefinisikan metada mengenai sebuah dokumen HTML STF
<noframes> Defines an alternate content for users that do not support frames TF
Defines an alternate content for users that do not support client-
<noscript> STF
side scripts
16
<object> Mendefinisikan obyek yang tertanam / embedded STF
<ol> Mendefinisikan urutan teratur STF
Mendefinisikan grup dari pilihan/option dalam drop-down list
<optgroup> STF
yang saling berhubungan
<option> Mendefinisikan pilihan dalam a drop-down list STF
<p> Mendefinisikan paragraf STF
<param /> Mendefinisikan parameter dari sebuah obyek STF
<pre> Mendefinisikan tulisan yang belum di format STF
<q> Mendefinisikan kutipan pendek STF
<s> Mendefinisikan tulisan strikethrough TF
<samp> Mendefinisikan contoh dari output program komputer STF
<script> Mendefinisikan client-side script STF
<select> Mendefinisikan drop-down list STF
<small> Mendefinisikan tulisan yang lebih kecil STF
<span> Mendefinisikan sebuah bagian dari dokumen STF
<strike> Ditinggalkan. Mendefinisikan tulisan strikethrough TF
<strong> Mendefinisikan tulisan strong STF
<style> Mendefinisikan informasi style dari dokumen STF
<sub> Mendefinisikan tulisan subscripted STF
<sup> Mendefinisikan tulisan superscripted STF
<table> Mendefinisikan tabel STF
<tbody> Menggabungkan isi dari badan tabel STF
<td> Mendefinisikan kolom dari tabel STF
<textarea> Mendefinisikan kontrol dari banyak baris input (text area) STF
<tfoot> Menggabungkan footer menjadi satu grup pada tabel STF
<th> Mendefinisikan header dari tabel STF
<thead> Mendefinisikan Grup header dari tabel STF
<title> Mendefinisikan Judul dari sebuah dokumen STF
<tr> Mendefinisikan baris dari tabel STF
<tt> Mendefinisikan tulisan teletype STF
<u> Ditinggalkan. Mendefinisikan tulisan garis bawah / underline TF
<ul> Mendefinisikan urutan acak STF
<var> Mendefinisikan variabel STF
<xmp> Dintinggalkan. Mendefinisikan tulisan yang belum diformat
Daftar Tag - tag pada

HTML
Oleh Hendrik Perdana
Minggu, 30 Agustus 2009 00:26
Berikut ini adalah tabel tag-tag HTML dan fungsinya:
Tag Utama
Tag Atribut Deskripsi
<html></html> Baris paling atas dari

setiap file HTML
<head></head> Informasi umum dari

sebuah halaman web
17
<title></title> Judul halaman.
Terdapat pada head
<body></body> Background, bgcolor, bgsound, font, link, alink, Settingan atribut untuk
vlink, topmargin, leftmargin, marginheight, seluruh dokumen
marginwidth
Modifikasi Teks
Tag Deskripsi Contoh
<b></b> Teks tebal Teks tebal
<i> </i> Teks miring Teks miring
<u> </u> Teks garis bawah Teks garis bawah
<pre></pre> Preformatted teks Contoh teks
<h1></h1> Header 1 Header 1
<h3> </h3> Header 3 Header 3
<sub></sub> Subscript Sub script
Super
<sup></sup> Superscript script
Font
<font></font>Color, size, nameMengubah gaya suatu huruf
Links
<a> </a> Href, target, style, class, name, id Membuat link ke dokumen atau situs lainnya
18
Gambar
<img> Src, alt, name, border, height, width Menampilkan sebuah gambar
Formatting
<blockquote></blockquote> Digunakan untuk mengatur text dan Contoh text in a block

gambar dalam suatu tag quote format ( )
<ol></ol> Ordered List (digunakan dengan 1. Item 1

<li>)
<ul></ul> Unordered List (digunakan dengan Item 1

<li>)
<li> Elemen List
<dd></dd> Definition List
<dt> Definition Term
<dd> Definition Description
<p></p> Paragraf
<br> Ganti baris
<hr> Garis horizonta
<center></center> Menengahkan elemen
Tabel
<table></table> Border, cellpadding, cellspacing, Mengatur semua elemen

width, height, name, id, title, bgcolor, table
background, align, valign
<tr></tr> Height, bgcolor, background, align, Membuat baris baru

valign, title
<td></td> Height, width, bgcolor, background, Membuat kolom

align, valign, title, colspan, rowspan
19
<th></th> Height, width, bgcolor, background, Header(kepala tabel).
align, valign, title, colspan, rowspan Otomatis ke tengah dan
tebal
<tbody></tbody> Height, width, align, valign, bgcolor, Format yang berlaku bagi
background cell yang diapit tag
<colgroup></colgroup> Height, width, align, valign, bgcolor, Format yang berlaku bagi
background, colspan kolom
Form
<form></form> Method, action, name, Mengatur elemen dari form

enctype
<input type=> Text, password, hidden, Variasi dari tipe elemen input dalam
radio, checkbox, submit, form
image, reset
<select></select> Name, size Membuat combo-box. Digunakan

bersama dengan option
<option> Selected, name, value
<textarea></textarea> Name, rows, cols, wrap Membuat Text Area untuk input text
dengan length yang lebih besar dari
input text.
Off no wrap
wrap
virtual word wrap, sent as one line
physical word wrap, sent with breaks
Anda tidak perlu menghafal semua tag tersebut, nanti malah kepala anda malah pecah!.
Cukup hafalkan yang penting-penting saja seperti <table><form><input><ul>. Tidak
hafal pun tidak apa-apa kan kita bisa melihat daftar kalau lupa, yang penting kita paham.
20

Tag HTML Dasar Yang Penting

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tag HTML Dasar Yang Penting

Diunggah oleh

Hak Cipta:

Format Tersedia

Belajar Elemen HTML

Ingat petunjuk penting ini:

Tag HTML digunakan untuk menandai (mark-up) elemen HTML

Ingat contoh HTML di tutorial sebelumnya kan:

Ini adalah elemen HTML:

Berikut penjelasan tentang Elemen HTML tersebut:

Elemen HTML ini dimulai dengan tag pembuka: <b>

Nah, ini juga elemen HTML:

Tag HTML Dasar yang Penting

Paragraf didefinisikan dengan menggunakan tag HTML <p>.

<p>Ini adalah sebuah paragraf</p>

Jangan lupa Tag HTML penutup

<p>Ini adalah sebuah paragraf

<p>Ini <br> adalah sebuah pa<br>ragaraf dengan ganti baris </p>

<br> atau <br />

Menuliskan Komentar dalam HTML

Ingat hal-hal berikut!

Beberapa Tips Yang Bermanfaat

Tag HTML Dasar

<html> Mendefinsikan sebuah dokumen HTML

<body> Mendefinisikan isi utama

<h1> to <h6> Mendefinisikan judul 1 sampai 6

<p> Mendefinisikan paragraf

<br> Menyisipkan sebuah baris

<hr> Mendefinisikan garis horisontal

<!> Bikin komentar

Atribut Tag HTML

Atribut selalu memiliki pasangan nama/nilai seperti ini: nama=nilai.

Atribut selalu dicantumkan pada awal tag elemen HTML.

<h1> mendefinisikan awal sebuah judul.

<h1 align=center> memiliki informasi tambahan tentang perataan baris.

<body> mendefinisikan badan/isi halaman HTML kita.

Dalam istilah web, hyperlink adalah referensi (sebuah alamat) ke sumber-sumber

Perhatikan, tag HTML pembuka berisi atribut link tersebut.

Sok di klik link di bawah ini biar tahu bedanya:

Cara membuat sebuah anchor:

Nah, link yang menuju ke halaman itu bikinnya gini:

Perhatikan tanda # yang mendefinisikan nama anchor

Sebuah anchor dalam dokumen HTML:

Sebuah link yang menuju ke sebuah anchor di halaman web lain:

Jika link kita bentuknya seperti ini:

Contoh kode HTML:

<p>Ini adalah sebuah contoh paragraf yang panjang dan menarik,

Beberapa entitas karakter yang sering dipakai:

Hasil Penjelasan Nama Entitas Nomor Entitas

Nah kode berikut ini:

Program HTML tersebut, skan tampil seperti ini di browser:

tag <table>, untuk memulai sebuah tabel

Oh ya, sebelum lupa, mengapa kita perlu mempelajari tabel HTML?

Berikut ini contoh kodenya.

4 <table border="1" cellpadding="10"

Perintah dan Fungsi Tag pada HTML

Daftar Tag HTML Beserta Fungsinya

Apa yang dimaksud dengan HTML tags?

Pada umumnya HTML tags adalah berpasangan:

Berikut ini daftar tag-tag pada HTML:

Daftar Tag - tag pada

Tag Atribut Deskripsi

<html></html> Baris paling atas dari

<head></head> Informasi umum dari

Tag Deskripsi Contoh

<b></b> Teks tebal Teks tebal

<i> </i> Teks miring Teks miring

<u> </u> Teks garis bawah Teks garis bawah