HTML DAN PERINTAH TAG
I.
PENGERTIAN
HTML
HTML (HyperText Markup Language)
adalah alat untuk membuat dan menghubungkan halaman-halaman di web. HTML
merupakan wujud nyata dari SGML (Standard Generalized Markup Language) dan DTD
(Document Type Defenition) yang menggunakan tag-tag markup untuk mendefenisikan
elemen-elemen dalam dokumen web. HTML disusun oleh Tim Berners-Lee di CERN –
European Laboratory for Particle Physics – di Jenewa.
Dokumen HTML adalah file
teks reguler (disebut juga ASCII) yang diciptakan dengan menggunakan editor
teks (misalnya, Emacs atau vi dalam Unix, atau Notepad dalam Windows) atau
dengan menggunakan word-processor, yaitu jika menyimpannya dalam format “text
only with line breaks”. Dokumen ini dikenal sebagai web page. Dokumen HTML
merupakan dokumen yang disajikan dalam browser web surfer. Dokumen ini umumnya
berisi informasi atau interface aplikasi di dalam internet.
II.
ELEMEN
HTML
Dokumen
HTML disusun oleh elemen-elemen. Elemen merupakan istilah bagi
komponen-komponen dasar pembentuk dokumen HTML. Elemen dapat berupa teks murni,
atau bukan teks, atau keduanya.
Elemen
yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag
<html>, <head>, dan <body> berikut tag-tag pasangannya.
Setiap dokumen terdiri dari tag head dan body.
III. TAG
Tag adalah sejumlah
instruksi kepada browser untuk memberi tahu tentang bagaimana cara mengatur
tata letak teks, grafik apa yang harus ditampilkan di tempat tertentu, berapa
jarak halaman yang harus dihubungkan dengan link, dan berbagai hal lainnya.
· Setiap
tag harus diapit oleh tanda kurung siku miring <....>.
· Nama
file berupa *.html atau *.htm.
· Dapat
digunakan huruf kecil maupun huruf besar (huruf kapital) pada nama tag.
Keduanya memiliki efek yang sama:
<title>
<Title>
<TITLE>
Huruf
besar (huruf kapital) akan tampak lebih baik, mengingat teks yang ada di
sekitarnya. Ini akan menjadi sangat bermanfaat ketika sedang mengecek dokumen
untuk mengetahui mengapa formatnya tidak dapat berjalan sebagaimana mestinya.
· Tag
umumnya berpasangan (misalnya <H1> dengan </H1>), tag yang menjadi
pasangan selalu diawali dengan karakter garing (/, garis miring). Tag yang
pertama menunjukkan tag awal yang berarti awal elemen, dan yang kedua
menunjukkan tag akhir, berarti akhir elemen.
Nama elemen ditunjukkan
dengan nama tagnya. Suatu elemen di dalam dokumen HTML harus ditandai dengan
penulisan tagnya yang berpasangan. Ada beberapa elemen yang tidak mengharuskan
tagnya dituliskan secara berpasangan, elemen tersebut di antaranya adalah:
ü Paragraf
dengan tag <p>
ü Ganti
baris – line break dengan tag <br>
ü Garis
datar – horizontal rule dengan tag <hr>
ü List
item dengan tag <li>
Secara umum suatu elemen dalam dokumen
HTML yang dinyatakan dengan tagnya, dituliskan:
<namatag> ... </namatag>
FUNGSI
TAG
1) Tag-tag
dasar HTML
Tag
Awal
|
Kegunaan
|
<html>
|
Untuk mendefinisikan sebuah dokumen
HTML
|
<body>
|
Untuk tampilan halaman web. Mempunyai
atribut bgcolor untuk warna background, text untuk warna text. Misalnya,
<body bgcolor=”red” text=”blue”> ...<body>
|
<h1>-<h6>
|
Untuk membuat heading dan mempunyai 6
jenis heading. <h1>...</h1> yang paling besar fontnya,
<h6>...</h6> yang paling kecil
|
<p>
|
Untuk membuat sebuah paragraf
|
<br>
|
Untuk menyisipkan line break, pindah
baris tanpa tag penutup
|
<hr>
|
Membuat garis horizontal tanpa tag
penutup
|
<!-->
|
Untuk mendefinisikan komentar dalam
source code
|
<pre>
|
Teks akan ditampilkan apa adanya
seperti yang kita ketik pada editor
|
Contoh Penggunaan:
<HTML>
<HEAD>
<TITLE>Tag
sederhana II</TITLE>
</HEAD>
<BODY
bgcolor=yellow text=green>
<center><h1>Artificial
Intelligence</h1></center>
<hr>
The
growth in recent years of Artificial Intelligence has been without
<br>
historical
precedent, as also the diversity of impact on human <br>
activities.
</BODY>
</HTML>
|
2) Tag-tag
Pemformatan
Tag
Awal
|
Kegunaan
|
<b>
|
Untuk membuat huruf tebal
|
<big>
|
Untuk memperbesar teks dari ukuran
normal
|
<em>
|
Untuk membuat teks miring
|
<I>
|
Untuk membuat huruf miring
|
<small>
|
Untuk memperkecil teks dari ukuran normal
|
<strong>
|
Untuk membuat teks tebal
|
<sub>
|
Untuk membuat subskrip
|
<sup>
|
Untuk membuat superskrip
|
<ins>
|
Untuk mendefinisikan teks yang
disisipkan
|
<del>
|
Untuk menghapus teks
|
<font>
|
Untuk menentukan jenis font. Mempunyai
atribut face, size, dan color.
|
<s>
|
Dibuang, gunakan tag <del>
sebagai gantinya
|
<strike>
|
Dibuang, gunakan tag <del>
sebagai gantinya
|
<u>
|
Dibuang, gunakan style sebagai
gantinya
|
3) Tag-tag
Computer-Output
Tag
Awal
|
Kegunaan
|
<code>
|
Untuk
mendefinisikan teks kode komputer
|
<kbd>
|
Untuk
mendefinisikan teks keyboard
|
<samp>
|
Untuk
mendefinisikan contoh computer code
|
<tt>
|
Untuk
mendefinisikan teks teletype
|
<var>
|
Untuk
mendefinisikan suatu variabel
|
<pre>
|
Untuk
mendefinisikan teks preformated
|
<listing>
|
Dibuang,
gunakan tag <pre> sebagai gantinya
|
<plaintext>
|
Dibuang, gunakan tag <pre>
sebagai gantinya
|
<xmp>
|
Dibuang,
gunakan tag <pre> sebagai gantinya
|
4) Tag
Citation, Quotation, Definition
Tag
Awal
|
Kegunaan
|
<abbr>
|
Untuk
mendefinisikan suatu singkatan
|
<acronym>
|
Untuk
mendefinisikan suatu akronim
|
<address>
|
Untuk
mendefinisikan informasi kontak penulis
|
<bdo>
|
Untuk
menimpa arah teks
|
<blockquote>
|
Untuk
mendefinisikan quotation panjang
|
<q>
|
Untuk
mendefinisikan quotation pendek
|
<cite>
|
Untuk
mendefinisikan suatu citation
|
<dfn>
|
Untuk
mendefinisikan istilah (term)
|
5) Tag
Link
Tag
Awal
|
Kegunaan
|
<a>
|
Untuk mendefinisikan suatu anchor
|
6) Tag-tag
List
Tag
Awal
|
Kegunaan
|
<ol>
|
Untuk membuat list bernomor. Mempunyai
atribut type. Misalnya <ol type=I>...</ol>. Defaultnya type=1
|
<ul>
|
Untuk membuat list tanpa nomor urut.
Mempunyai atribut berupa type. Misalnya <ul
type=”square”>...</ul>. Defaultnya type=”round”
|
<li>
|
Untuk membuat item-item pada list dan
harus berada di dalam tag <ul>...</ul> atau
<ol>...</ol> tanpa tag penutup
|
<dl>
|
Untuk mendefinisikan sebuah daftar
definisi
|
<dt>
|
Untuk mendefinisikan sebuah istilah
definisi
|
<dd>
|
Untuk mendefinisikan sebuah deskripsi
definisi
|
<dir>
|
Dibuang, gunakan tag <ul>
sebagai gantinya
|
<menu>
|
Dibuang, gunakan tag <ul>
sebagai gantinya
|
7) Tag-tag
Image
Tag
Awal
|
Kegunaan
|
<img>
|
Untuk menampilkan gambar dalam dokumen
|
<map>
|
Untuk mendefinisikan sebuah peta
gambar
|
<area>
|
Untuk mendefinisikan suatu area dalam
peta gambar
|
8) Tag-tag
Tabel
Tag
Awal
|
Kegunaan
|
<table>
|
Untuk mebuat tabel. Mempunyai atribut-atribut:
Border: untuk mengatur bingkai tabel,
besarnya antara 0..10.
Bgcolor: untuk memberi warna
background.
Width: untuk mengatur lebar tabel.
|
<th>
|
Untuk membuat judul kolom
|
<tr>
|
Untuk membuat baris dalam tabel.
Mempunyai atribut sama dengan <td>
|
<td>
|
Untuk membuat satu sel data. Mempunyai
atribut-atribut:
Rowspan: untuk menggabungkan baris.
Colspan: untuk menggabungkan kolom.
|
<caption>
|
Untuk membuat judul tabel (tidak harus
digunakan)
|
<colgroup>
|
Untuk mendefinisikan kelompok kolom
tabel
|
<col>
|
Untuk mendefinisikan nilai atribut
satu atau lebih kolom dalam tabel
|
<thead>
|
Untuk mendefinisikan suatu header
tabel yang tidak akan scroll
|
<tbody>
|
Untuk mendefinisikan suatu body tabel
yang scroll dalam suatu header dan footer tabel yang pasti
|
<tfoot>
|
Untuk mendefinisikan suatu footer
tabel yang tidak akan scroll
|
9) Tag-tag
Frame
Tag
Awal
|
Kegunaan
|
<frameset>
|
Untuk mendefinisikan himpunan frame
|
<frame>
|
Untuk mendefinisikan suatu sub window
(frame)
|
<nonframes>
|
Untuk mendefinisikan suatu seksi non
frame untuk browser yang tidak dapat menangani frame
|
<iframe>
|
Untuk mendefinisikan sebuah inline
frame
|
10) Tag-tag
Form
Tag
Awal
|
Kegunaan
|
<form>
|
Untuk mendefinisikan form untuk input
dari pemakai
|
<input>
|
Untuk mendefinisikan sebuah field
input
|
<textarea>
|
Untuk mendefinisikan suatu text-area
(input teks dengan kontrol multiline)
|
<label>
|
Untuk mendefinisikan sebuah label
untuk suatu kontrol
|
<fieldset>
|
Untuk mendefinisikan suatu fieldset
|
<legend>
|
Untuk mendefinisikan suatu caption
untuk suatu fieldset
|
<select>
|
Untuk mendefinisikan suatu list yang
dapat dipilih (suatu drop down box)
|
<optgroup>
|
Untuk mendefinisikan suatu grup option
|
<option>
|
Untuk mendefinisikan option dalamndrop
down box
|
<button>
|
Untuk mendefinisikan sebuah text box
|
<isindex>
|
Dibuang, gunakan tag <input>
sebagai gantinya
|
11) Tag-tag
Head
Tag
Awal
|
Kegunaan
|
<head>
|
Untuk mendefinisikan informasi tentang
dokumen
|
<title>
|
Untuk mendefinisikan judul dokumen
|
<base>
|
Untuk mendefinisikan suatu referensi
default kepada suatu resource eksternal
|
<link>
|
Untuk mendefinisikan relasi antara dua
dokuemen yang terhubung
|
<meta>
|
Untuk mendefinisikan informasi meta
|
<!doctype>
|
Untuk mendefinisikan tipe-tipe
dokumen. Tag ini diletakkan sebelum tag <html>
|
12) Tag-tag
Style
Tag
Awal
|
Kegunaan
|
<style>
|
Untuk mendefinisikan suatu style dalam
sebuah dokumen
|
<link>
|
Untuk mendefinisikan relasi antara dua
dokumen yang terhubung (linked)
|
<div>
|
Untuk mendefinisikan suatu divisi/
bagian dalam suatu dokumen
|
<span>
|
Untuk mendefinisikan suatu section
dalam sebuah dokumen
|
<font>
|
Dibuang, digunakan style sebagai
gantinya
|
<basefont>
|
Dibuang, digunakan style sebagai
gantinya
|
<center>
|
Dibuang, digunakan style sebagai
gantinya
|
DAFTAR PUSTAKA
Sidik, Betha dan Husni Iskandar Pohan. 2007. Pemrograman WEB dengan HTML. Bandung:
Informatika Bandung.
Sano, Albert V Dian. 2005. 24 Jam Menguasai HTML, JSP dan MySQL. Yogyakarta: Penerbit ANDI
