HTML
HTML singkatan dari Hyper Text Markup Language adalah file teks atau file ASCII yang berisi instruksi/script kepada web browser
untuk menampilkan suatu tampilan grafis dari sebuah halaman web. Didalam file HTML terdapat
beberapa "tag" atau
kode-kode yang dimengerti oleh web browser dan dapat menampilkannya di layar
monitor.
File
HTML dapat dibuat dengan aplikasi text editor apapun di sistem operasi apapun, antara lain : Notepad di
Windows, emasc atau vi di Unix atau SimpleText di Macintosh. File HTML ini juga
bisa dibuat di aplikasi word processor apapun asalkan saat menyimpan file
tersebut disimpan dengan format text-only.
Salah
satu kelebihan file HTML adalah cross platform,
artinya file HTML dapat ditampilkan di beberapa Operating System (OS) yang
berbeda dan memiliki tampilan yang sama walaupun saat pembuatannya menggunakan
satu OS tertentu saja.
TAG HTML
Saat
web browser menampilkan sebuah halaman web, web browser membaca halaman web
tersebut dari sebuah file teks dan kemudian mencari kode-kode special (dalam
hal ini adalah tag HTML) yang ditandai dengan karakter "<" dan
">".
Tag
HTML pada umumnya dibuat berpasangan, ada tag pembuka dan ada tag penutup. Format umum tag HTML adalah :
<nama_tag> Teks
yang akan ditampilkan </nama_tag>
Sebuah
contoh, misalnya judul halaman ini menggunakan tag header :
<h3> Apa itu tag HTML ? </h3>
<h3> Apa itu tag HTML ? </h3>
Tag
tersebut akan memberikan informasi kepada web browser untuk menampilkan teks
"Apa itu tag HTML ?" dengan style header level 3. Tag HTML dapat
menginstruksikan web browser untuk menebalkan sebuah teks (bold),
menampilkan dengan format miring/italic, membuatnya sebagai sebuah header
dengan level tertentu, atau membuatnya sebagai sebuah hyperlink ke halaman web
yang lain.
Sebuah
tag penutup </nama_tag> selalu diberikan karakter "/", yang
berfungsi untuk memberhentikan proses tagging kepada web browser. Banyak tag HTML yang selalu berpasangan
dengan cara seperti ini. Bila kita lupa memberikan tag penutup maka web browser
akan menganggap bahwa tag tersebbut berlaku untuk keseluruhan dokumen dan hasil
tampilan halaman web tersebut tidak seperti yang kita inginkan.
Penulisan
tag-tag HTML tidak memperhatikan penggunaan huruf (case
in-sensitive), apakah menggunakan
huruf besar atau huruf kecil, akan menghasilkan tampilan yang sama.
Tidak
seperti di bahasa pemrograman, kesalahan akibat peletakan atau penggunaan tag
HTML tidak akan
mengakibatkan sistem komputer menjadi hang atau rusak. Kesalahan tersebut hanya
akan berakibat pada tampilan halaman web tersebut.
Web
browser memang sengaja dirancang dengan kemampuan mengenali dan melaksanakan 'hanya' beberapa tag HTML dari keseluruhan tag standard W3C. Bila ada tag HTML yang
tidak diketahui dalam halaman web yang sedang diproses, web browser akan mengabaikannya seakan-akan tag tersebut tidak ada.
Contoh
: <tagsaya><h3>Apa itu tag HTML ? </h3></tagsaya>
akan
menampilkan tampilan yang sama dengan <h3>Apa itu tag HTML ? </h3>.
Jadi tag <tagsaya> dan </tagsaya> sama sekali diabaikan oleh web
browser.
HALAMAN SEDERHANA
Sebaiknya seluruh tag
yang digunakan dalam sebuah halaman web menggunakan standard HTML tertentu.
Saat ini versi terakhir standard HTML adalahHTML 4.0.
Dokumen HTML terbagi
dalam dua bagian besar yaitu bagian head dan bagian
body.
Bagian head berfungsi
untuk memberikan informasi-informasi penting tentang dokumen HTML tersebut dan
informasi tersebut tidak
ditampilkan di layar monitor.
Sementara itu, bagian body adalah
berisi semua
instruksi untuk mengatur seluruh tampilan halaman web di web browser dan
informasi lain yang tidak termasuk dalam bagian head.
Berikut ini bentuk paling
sederhana sebuah halaman web :
<html>
<head>
<title>Halaman
sederhana...</title>
<!-- bagian header berisi
informasi tambaha yang
menjelaskan dokumen ini dan
tidak ditampilkan -->
</head>
<body>
<!-- semua instruksi untuk
mengatur tampilan -->
<h3> Halaman web sederhana...
</h3>
</body>
</html>
TAG
META
Seperti telah dijelaskan
sebelumnya, tag-tag pada elemen HEAD tidak akan ditampilkan oleh web browser,
tetapi tag-tag pada elemen ini berfungsi untuk memberikan informasi mengenai
halaman web dibawahnya.
Di elemen Head ada
beberapa tag-tag Meta yang bisa digunakan, tetapi kita akan membahas tiga tag
yang cukup penting, yaitu tag meta author, descriptiondan keyword. Tag-tag meta ini tidak
memiliki tag penutup seperti tag-tag di elemen body pada umumnya.
Tag ini berfungsi untuk
menjelaskan perancang halaman web. Contoh :
<meta name="Author" content="Nama perancang ">
Tag meta ini berfungsi
saat kita menggunakan search engine yang akan mengindex website secara
otomatis. Program di search engine ini akan mencari deskripsi di website kita
dan akan mencarinya di tag meta ini. Contoh :
<meta name="Description" content="Deskripsi website ">
Tag ini berfungsi untuk
search engine yang bertipe auto robot yang secara otomatis akan mencari
kata-kata di tag ini dan meletakkan di database mereka. Bila seseorang mencari
dengan kata-kata yang terdapat dalam tag meta ini maka website kita akan
termasuk dalam salah satu hasil pencarian. Contoh :
<meta name="Keywords" content="personal">
Berikut ini komposisi
ketiganya dalam elemen Head sebuah dokumen HTML :
<html>
<head>
<title>Halamanku</title>
<meta name="Author" content="Nama Perancang">
<meta name="Description" content="Deskripsi Website">
<meta name="Keywords" content="personal">
</head>
<body>
<head>
<title>Halamanku</title>
<meta name="Author" content="Nama Perancang">
<meta name="Description" content="Deskripsi Website">
<meta name="Keywords" content="personal">
</head>
<body>
contoh Meta Tags
</body>
</html>
</body>
</html>
TAG
BODY
OK,
kita mengingat kembali tag Body di penjelasan sebelumnya. Tag Body adalah tag
berpasangan dan seluruh content document diletakkan diantaranya. Dalam bentuk
yang paling sederhana memiliki format sebagai berikut :
<BODY> </BODY>
Tetapi
sebenarnya format tag Body lebih kompleks lagi, karena beberapa setting dokumen
kita didalam tag Body ini. Amati contoh berikut :
<BODY BGCOLOR=white TEXT=black
LINK=blue ALINK=green VLINK=red>
</BODY>
LINK=blue ALINK=green VLINK=red>
</BODY>
Diperlihatkan
di contoh, bahwa tag Body memiliki setting tambahan berupa atribut dan value,
dengan format sebagai berikut :
<ELEMENT ATTRIBUTE=value>
Jadi
kalau kita lihat kembali contoh diatas maka, tag Body adalah elemen, sementara
BGCOLOR, TEXT, LINK, ALINK dan VLINK adalah atribut. white, black, blue, green
dan red adalah value.
Kesimpulannya,
tag menjelaskan arti elemen secara umum sedangkan atribut menjelaskan lebih
detail. Untuk lebih jelasnya, mari kita pelajari arti masing-masing atribut
tersebut.
BGCOLOR=white
Atribut
ini menjelaskan warna background untuk seluruh dokumen. Warna putih (white)
dapat diganti dengan red, blue, green, black atau warna yang lain. Bisa juga
menggunakan color code yang akan dibahas kemudian.
TEXT=black
Atribut
ini mengatur warna teks di halaman web dan warna hitam (black) juga bisa
digantikan dengan warna lain.
LINK=blue
Ini
adalah warna hyperlink sebelum di-click. Sebaiknya memang warna hyperlink
berbeda dengan warna teks untuk memudahkan pengguna.
ALINK=purple
Atribut
ini mengeset warna link saat akan di-click (didekati dengan mouse).
VLINK=red
Atribut
ini mengeset warna link setelah sebuah link dikunjungi.
Background pada tag Body
Salah
satu atribut penting di tag Body adalah BACKGROUND. Atribut ini berfungsi untuk
memberikan tampilan latar belakang sebuah gambar dan atribut ini akan menimpa
atribut BGCOLOR. Untuk dapat menggunakannya kita harus tahu dimanakah letak
file gambar yang akan kita gunakan. Untuk lebih jelasnya amati contoh berikut :
<BODY
BGCOLOR=white TEXT=black
LINK=blue ALINK=green VLINK=red
BACKGROUND="/~webs/images/wall1.jpg">
</BODY>
LINK=blue ALINK=green VLINK=red
BACKGROUND="/~webs/images/wall1.jpg">
</BODY>
Jangan
lupa untuk menambahkan tanda kutip diantara alamat file gambar yang akan
digunakan.
TAG TUNGGAL
Secara umum, tag HTML
adalah tag-tag yang berpasangan. Akan tetapi, ada beberapa tag yang tidak
berpasangan, misalnya :
- tag <HR>
- tag <BR>
- tag <P>
tag <P> sebenarnya
adalah tag yang berpasangan tetapi seringkali tag penutup tidak dicantumkan
oleh banyak perancang web.
tag <HR> berfungsi
untuk memberikan garis berikut
tag <BR> berfungsi
untuk memulai baris baru, misalnya :
Ini adalah baris pertama
Ini adalah baris kedua dengan tag <br>
Ini adalah baris kedua dengan tag <br>
TAG
HEADING
Heading
Tag
Heading ini diperlukan sebagai judul dalam sebuah paragraph, ada 6 (enam) level
heading yang disediakan dalam format HTML. Berikut ini sintaksisnya :
<Hn> Teks Heading </Hn>
huruf
n diganti dengan angka 1 sampai 6 sesuai dengan level yang dikehendaki.
Paragraph
Jika
dokumen HTML berisi teks yang cukup panjang maka sangat diperlukan untuk
membaginya kedalam beberapa paragraph untuk memudahkan pembacaan oleh pengguna.
Pembentukan elemen paragraph ini menggunakan sintaksis :
<p>Isi teks sebuah paragraph </p>
tag
penutup </p> boleh dituliskan boleh tidak, akan tetapi sebaiknya
dituliskan untuk mengetahui berakhirnya sebuah paragraf.
Break
Kadangkala
kita memerlukan untuk menulis di baris yang baru dalam sebuah paragraf yang
sama. Untuk itu kita perlu menggunakan tag line break ini. Tag Break adalah tag
tunggal sehingga tidak memiliki tag penutup. Sintaksis tag Break berupa :
<BR>
FONT
STYLE
Salah satu tujuan perancangan
halaman web adalah membuat halaman web yang menarik atau "eye
catching". Untuk itu dalam suatu paragraph diperlukan suatu variasi huruf
atau font style.
Berikut ini beberapa
font style yang sering digunakan, antara lain :
Tag Style
|
Keterangan
|
<b>
|
Huruf tebal (bold)
|
<i>
|
Huruf miring (italic)
|
<u>
|
Huruf garis bawah
(underline)
|
<code>
|
Huruf seperti sans
serif
|
TAG
FONT
Dalam
mengatur layout sebuah halaman web yang berisi teks, pengaturan besarnya huruf,
warna dan ukuran adalah hal yang sangat penting untuk dilakukan oleh seorang
perancang web. Pengaturan ini dapat menggunakan tag Font <FONT> dengan
sintaksis sebagai berikut :
<font face="nama_font" size="4"
color="red">
Ukuran
font dapat ditentukan dengan angka 1 sampai 7 dengan nilai default 2. Sedangkan
warna dapat diganti dengan warna lain (lihat pada penjelasan atribut warna).
Contoh
penggunaan :
<font
face="arial" size="5" color="blue">Teks arial
biru ukuran 5 </font>
<font face="arial" size="3" color="green">Teks arial hijau ukuran 3</font>
<font face="arial" size="3" color="green">Teks arial hijau ukuran 3</font>
Tampilan
di browser :
Teks
arial biru ukuran 5
Teks arial hijau ukuran 3
Teks arial hijau ukuran 3
ATRIBUT
WARNA
Untuk lebih mempercantik
tampilan sebuah halaman web, permainan warna menjadi satu hal penting dalam
perancangan halaman web. Penulisan atribut warna dapat menggunakan nilai heksa
desimal (6 digit) ataupun nama warnanya. Berikut ini tabulasi nama warna dan
angka heksadesimalnya :
No
|
Nama
|
HeksaDesimal
|
1
|
Hitam
|
#000000
|
2
|
Blue
|
#0000FF
|
3
|
Brown
|
#A52A2A
|
4
|
Green
|
#008000
|
5
|
Orange
|
#FFA500
|
6
|
Magenta
|
#FF00FF
|
7
|
DarkGreen
|
#006400
|
8
|
Gray
|
#808080
|
9
|
Cyan
|
#00FFFF
|
10
|
Gold
|
#FFD700
|
11
|
GreenYellow
|
#ADFF2F
|
12
|
Aqua
|
#00FFFF
|
13
|
Antiquewhite
|
#FAEBD7
|
TAG
LIST
HTML mendukung beberapa
format list, yaitu Unnumbered List dan Numbered List.
1. Unnumbered List
Unnumbered List adalah
list yang menggunakan bullet sebagai tanda point.
Contoh sintaksis :
<UL>
<LI> apples
<LI> bananas
<LI> grapefruit
</UL>
<UL>
<LI> apples
<LI> bananas
<LI> grapefruit
</UL>
Hasil render di browser
:
- apples
- bananas
- grapefruit
2. Numbered List
List yang menggunakan
angka urut sebagai tanda point. Contoh sintaksis :
<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>
<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>
Tampilan di browser :
- oranges
- peaches
- grapes
TAG
ALIGNMENT
Pengaturan posisi
horisontal teks juga menentukan kemudahan bagi pengguna untuk membaca dan
mengikuti informasi yang dihasilkan. Pengaturan posisi horisontal teks dapat
menggunakan tag Alignment <DIV> dengan sintaksi sebagai berikut :
<DIV align="left/right/center"><>
Contoh penggunaan :
<div
align=left>Teks rata kiri</div>
<div align=right>Teks rata kanan</div>
<div align=center>Teks rata tengah</div>
<div align=right>Teks rata kanan</div>
<div align=center>Teks rata tengah</div>
Tampilan di browser :
Teks rata kiri
Teks rata kanan
Teks rata tengah
TAG
IMAGE
Untuk
menyisipkan gambar kita dapat memanfaatkan tag <IMG>. Format file gambar
yang bisa ditampilkan bisa bermacam-macam, misalnya jp, jpeg, pcx, gif, psd,
dan sebagainya. Pada umumnya, perancang web hanya menggunakan kombinasi dari
tiga format file gambar saja yaitu jpeg, gif dan psd. Sintaksis:
<IMG src="url_file"
width="img_width" height="img_height" vspace="10"
hspace="10" alt="alt_teks">
<img
src="/~webs/images/logo.gif" width="78"
height="79" vspace="20" hspace="20"
alt="gambar obito uchiha">
Ini adalah teks setelah gambar obito uchiha
Animasi
Untuk
menampilkan animasi file GIF, penggunaannya sama seperti file gambar biasa
(lihat contoh penggunaan diatas).
TAG
HYPERLINK
Kekuatan utama dokumen
HTML terletak pada hypertext link atau hyperlink atau
lebih singkat lagi disebut link. Dengan hyperlink ini kita
bisa membuka dokumen HTML lain atau langsung menuju ke bagian tertentu sebuah
dokumen HTML. Hyperlink ini dapat diletakkan pada teks tertentu ataupun pada
sebuah image, bila diletakkan pada teks maka teks tersebut (secara default)
akan digaris-bawahi dan warnanya menjadi berbeda. Sintaksis penulisan :
<A href="url_file_tujuan#section"> Teks hyperlink
</A>
Contoh penggunaan :
<A href="tag_hyperlink.html#top">Tag
Hyperlink</A>
Tampilan di browser
menjadi :
Untuk membuat section
dijelaskan di bagian bawah halaman ini.
Bila file HTML tujuan
berada domain name pada yang
sama tetapi pada direktori yang tidak sama maka kita bisa menggunakan url
relatif, yaitu path name relatif berdasarkan posisi file saat ini. Misalnya
kita akan membuka file atas.html yang berada 2 tingkat diatasnya maka
hyperlink-nya berbentuk seperti :
<a
href="../../atas.html"> Keatas </a>
Bila file yang akan
dikaitkan berada pada domain name yang berbeda dengan domain name file yang
sekarang ini, maka kita harus menggunakan url lengkap file tujuan tersebut.
Misalnya :
<a
href="http://www.petra.ac.id">UK Petra</a>
Mailto
Kadang-kadang kita ingin
memudahkan bagi pengguna untuk mengirimkan email ke suatu alamat email
tertentu. Hal ini dapat dengan mudah dilakukan dengan tag hyperlink ini, yaitu
dengan menambah "mailto" dan alamat email tujuan. Sistaksis
penulisannya sebagai berikut :
<a href="mailto:saya@petra.com">Kirim email </a>
contoh :
<a
href="mailto:duik@peter.petra.ac.id">Dwi Kristianto </a>
Tampilan di browser :
Seringkali halaman web
adalah halaman yang panjang dan selalu membukanya dari posisi awal akan sangat
melelahkan bagi pengguna. Untuk itu akan lebih memudahkan bila kita langsung
merujuk pada bagian tertentu sebuah halaman web. Caranya
dengan menyisipkan Tag Anchor <a> dengan atribut "name" di
bagian dokumen yang akan dituju.
Berikut ini sintaksisnya :
Berikut ini sintaksisnya :
<a name="nama_section"></a>
Untuk menggunakannya
link yang akan merujuk ke bagian dokumen itu, ditambahkan '#nama_section"
menjadi :
<a href="sebuah_halaman.html#nama_section">langsung
ke nama section</a>
TAG TABEL
Seringkali informasi
yang akan ditampilkan adalah informasi olahan yang berbentuk tabel, sehingga
kitapun memerlukan format ini di dalam dokumen HTML. Format ini dapat
diwujudkan dengan menggunakan tag tabel <tabel>. Sedikit berbeda dengan
tag lainnya, tag tabel ini memerlukan tag lainnya untuk menampilkan data dalam
bentuk tabulasi. Berikut ini uraiannya :
Tag
|
Parent
|
Fungsi
|
<table>
</table> |
---
|
tag utama
|
<caption>
</caption> |
<table>
|
Menampilkan judul
tabel
|
<tr></tr>
|
<table>
|
Tag baris
|
<th></th>
|
<tr>
|
Header table
|
<td></td>
|
<tr>
|
Tag sel-sel tabel
|
Berikut ini beberapa atribut
tag tabel
Atribut
|
Fungsi
|
Bgcolor
|
warna background
|
width, height
|
lebar dan tinggi tabel
(dalam % atau pixel)
|
Cellspacing
|
jarak antar cell
|
Cellpadding
|
jarak teks ke cell
|
Border
|
lebar garis batas,
0=tanpa garis batas
|
Berikut ini atribut tag-tag
<th> dan <td>, bila disebutkan di tag <tr> maka atribut di
tag <th> dan <td> diabaika
Atribut
|
Fungsi
|
Bgcolor
|
warna background
|
width, height
|
lebar dan tinggi tabel
(dalam % atau pixel)
|
align (left, right,
center)
|
pengaturan posisi
horisontal isi sel, rata kanan/kiri/tengah
|
valign (top, bottom,
middle)
|
pengaturan posisi
vertikal terhadap isi sel, di atas, bawah atau tengah
|
colspan=n
|
ekstensi (span) n
kolom ke kanan
|
rospan=n
|
ekstensi (span) n
baris ke bawah
|
Nowrap
|
mematikan word
wrapping
|
TAG
FRAME
Sistem
navigasi sebuah situs web adalah salah satu sistem penunjang yang akan
memberikan nilai tambah pada situs tersebut. Semakin sederhana dan mudah sistem
navigasi akan semakin baik karena akan semakin memudahkan pengguna untuk
menggunakan seluruh fasilitas dan layanan yang ditawarkan.
Untuk
itu kita perlu membagi sebuah halaman web kedalam beberapa blok terpisah dan
masing-masing blok tersebut diisi dengan halaman web lain. Misalnya kita ingin
membagi dua kolom, kolom sebelah kiri untuk halaman navigasi dan halaman
sebelah kanannya diisi dengan halaman sebenarnya.
Pembagian
sebuah halaman web kedalam beberapa blok ini dapat dilakukan dengan tag Frame.
Berikut ini sintaksis bentuk dasarnya :
<FRAMESET TYPE="XX,XX"> </FRAMESET>
Type
dapat diganti dengan "Rows" atau "Cols". Cols
akan membagi sebuah halaman web secara vertikal sedangkan Rows akan membagi
halaman web secara horisontal.
"XX"
diganti dengan proporsi lebar atau tinggi blok yang dibagi, dapat diisikan
prosentase lebar layar maupun dalam satuan pixel. Ukuran untuk masing-masing
bagian dipisahkan dengan tanda koma.
Untuk
lebih jelasnya ikuti contoh berikut :
<frameset rows="25%, 75%">
</frameset>
Contoh
diatas berarti membagi dua halaman web secara horisontal, bagian atas memiliki
tinggi 25% tinggi halaman web dan halaman web dibawahnya memiliki tinggi 75%.
Selanjutnya
kita perlu mengisikan halaman-halaman web lain kedalam blok-blok yang sudah
dibagi tadi yaitu dengan tag berikut ini :
<FRAME SRC="nama_halaman.html"
NAME="nama_blok">
Untuk
lebih jelasnya amati contoh berikut :
<frameset rows="25%, 75%">
<frame src="halaman1.html" name="blok1">
<frame src="halaman2.html" name="blok2">
</frameset>
