Pengertian HTML
HTML (HyperText Mark up Language) merupakan suatu metoda
untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen.
HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang
hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai
program.
Pengertian HTML bila di jabarkan berdasarkan kata-kata
penyusunnya HTML nya adalah sebagai berikut:
Hypertext
Link hypertext adalah kata atau frase yang dapat menunjukkan
hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada
kata atau frase untuk mengikuti link ini maka web browser akan memindahkan
tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.
Markup
Pada pengertiannya di sini markup menunjukkan bahwa pada file
HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada
dokumen yang akan ditampilkan pada World Wide Web.
Language
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML
merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk
mengubah-ubah format suatu naskah atau dokumen.
Pada awalnya HTML dikembangkan sebagai subset SGML (Standard
Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan
melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang
lebih ditekankan pada format dokumen yang berorientasi pada aplikasi.
Adapun Perintah - Perintah Dasar dari HTML adalah sebagai
berikut:
1. <H1> sampai
<H6> <H1> </H1>font ukuran besar
<H2> </H2>
....
....
<H6> </H6>font
semakin kecil
2. <HR>
Fungsi : perintah untuk membuat
garis horizontal penuh layar
cth :
3. <I>
Fungsi : membuat teks miring
4. <B>
Fungsi : membuat teks tebal
5. <U>
Fungsi : membuat teks bergaris bawah
6. <CENTER>
Fungsi : membuat text ke tengah
layar
7. <ALIGN>
Fungsi : Membuat teks rata kiri dan
rata kanan
Sintak
<P ALIGN=right>untuk rata
kanan
<P ALIGN=left>untuk rata kiri
<P ALIGN=center>untuk rata
tengah
<P ALIGN=justify>untuk rata
kiri dan rata kanan
atau
<H?ALIGN=right>
<H?ALIGN=left>
<H?ALIGN=center>
<H?ALIGN=justify>
Contoh pemakaian:
<H2 Align=right>Selamat Datang
Ke Website Kami <H2>
8. <BR>
Fungsi : memasukkan fungsi enter
Cth : Jika perintah <BR>
diberikan di awal atau diakhir baris, maka kalimat berikutnya akan dicetak pada
baris berikutnya
9. <!->
Fungsi : membuat komentar
Semua teks atau perintah yang diapit
oleh perintah ini tidak akan dijalankan
10. <P>
Fungsi : memisahkan paragraph yang
satu dengan paragraph yang lain
11. <DD>
Fungsi : membuat teks atau sebuah
paragraph agak masuk ke dalam
12. <BASEFONT>
Fungsi : Mengubah ukuran font
Contoh :
<BASEFONT SIZE=6>
WELCOME TO MY WEBSITE
<B>WELCOME TO MY WEBSITE DAN
TEBAL</B>
13. <FONT>
Fungsi : mengubah ukuran font,
tetapi angka yang terdapat dalam size yang merupakan ukuran font harus diberi
tanda kutib
14. <FACE>
Fungsi : mengubah jenis font
15. <SUP>
Fungsi : membuat cetak naik suatu
teks
Contoh :
Kami adalah yang pertama:1stin the
world
16. <SUB>
Fungsi : membuat suatu teks cetak
turun
Contoh :
contoh-contoh teks cetak turun :
H2O (Disebut Air) dan
C2127No (Disebut Methadon)
17. <UL> atau Unorder List
Fungsi : membuat bullet
18. <LI>
Fungsi : juga untuk membuat bullet
Catatan : perintah <LI> harus
berada dalam perintah OL,UL,DIR,Menu
Contoh :
<UL>
<LI>
<H2> Jawa Timur </H2>
<UL>
<LI> SURABAYA </LI>
<LI> MALANG </LI>
<LI> GRESIK </LI>
</UL>
</LI>
</BR>
<LI>
<H2> Jawa Barat </H2>
<UL>
<LI> Bandung </LI>
<LI> Sukabumi </LI>
<LI> Bogor </LI>
</UL>
</LI>
</UL>
19. <IMGSRC>
Fungsi : memasukkan gambar ke dalam
Website
Anda dapat juga memasukkan gambar
berakhiran *.Jpg, *.Gif, *.Bmp dll
Sintak :<IMG BORDER="5">
"5" merupakan ukuran
border(Bingkai), ganti angka ini sesuai keinginan anda
20. <BGSOUND>
Fungsi : memasukkan suara atau musik
ke dalam Website
Sintak : <BGSOUND loop=infite
Src="d:/Selamat datang.WAV">
Link dengan sorot
Berikut adalah contoh program bagaimana membuat
link hanya dengan sorot saja (link tak perlu diklik, tetapi cukup disorot
dengan mouse.
<HTML>
<HEAD>
<TITLE> </TITLE>
<META
Name="description"Content=" ">
<META Name="keywords"Content="
">
<META
Name="generator"Content="Cute HTML">
</HEAD>
<BODY BG
Color="#FFFFFF"Text="#000000="#"0000FF"VLink="#800080">
<Center>
<A href=" "target=main on mouse
over="Window.open('c:/html/keterangan.html'):">
<Font Size=3 FACE=Arial Color=#804000>
Keterangan </FONT> </e>
</CENTER>
</BODY>
</HTML>
Link dengan tombol
Berikut adalah contoh program link dengan tombol
Sintak :
<Input type="button"Value="Nama
Tombol"
On Click="parent.location="Link anda
disini" >
Contoh
Buatlah link dengan nama
tentang_kami.html
produk_kami.html
cara_memesan.html
< HTML >
< HEAD >
< TITLE > </TITLE>
< META
name="description"Content=" ">
< META name="keywords"Content="
">
< META
name="generator"Content="Cute HTML">
< /HEAD >
< BODY
BGCOLOR="#FFFFFF"Text="#000000"Vlink="#800080"
>
< Center >
< h1 > PT.OCTA >
< Input
Type="button"value="Tentang Kami"
on
click="parent.location="c:/website/tentang_kami.html'" >
< Input
Type="button"value="Produk Kami"
on
click="parent.location="c:/gambar/produk_kami.html'" >
< Input Type="button"value="cara
memesan"
on
click="parent.location="c:/gambar/cara_memesan.html'" >
< /Center >
< /Body >
< /HTML >
Kolom
< tr > adalah perintah untuk membuat kolom
pada notepad
Berikut adalah contoh perintah cara membuat kolom
pada notepad
< html >
< head >
< title > Belajar membuat kolom < /title
>
< /head >
< H3 Align="Center" > DAFTAR
MAHASISWA < H3 >
< table border="3" border
color="red"
< tr >
< td > No
< td > Nama
< td > Alamat
< td > No. Phone
< td > Gambar
< /tr >
< tr >
< td > 1
< td > Octa
< td > Padang Bulan
< td > 8214773
< td > < Img src="C:\Documents and
Settings\XP\My Documents\My Webs\octa_pic1.JPG" > < /tr >
Hasilnya menjadi
Membuat Frame
-Framecols : membagi layar dalam bentuk kolom
-FrameRows : membagi layar dengan bentuk baris
-Frame Src : menampilkan file dalam frame
Bentuknya
(Frame cols="30%,*")
(Frame Src="Nama.file Name="Teks")
(Frame Rows="40%,*")
(Frame
Src="Nama.file"Nama="teks")
(Frame Src="Nama.file"Nama="Teks)
(/Frameset)
Contoh Program Frame
< Html >
< Head >
< Title >Melink dengan sorot < /Title
>
< /Head >
< Frameset cols="30%,*" >
< Frame Src="Nama
file"Nama="Teks" >
< Frame Rows="40%%,*" >
< Frame Src="Gambar
File’Nama="Gambar" >
< Frame Src="Nama
File"Nama="Teks >
< /Frameset >
<H1> Sampai
<H6>
fungsi : untuk
membuat (memilih) ukuran teks.
Sintak :
<H1>
</H1>
Contoh
<HTML>
<HEAD><TITLE>Contoh
Heading</TITLE></HEAD>
<BODY>
<H1> Teks dengan
Heading 1</H1>
<H2> Teks dengan
Heading 2</H2>
<H3> Teks dengan
Heading 3</H3>
<H4> Teks dengan
Heading 4</H4>
<H5> Teks dengan
Heading 5</H5>
<H6> Teks dengan
Heading 6</H6>
</BODY>
</HTML>
<HR>
Perintah ini digunakan
untuk membuat garis horizontal penuh layar
Sintaks
: <HR>
Contoh
:
<HTML>
<HEAD><TITLE>
</TITLE></HEAD>
<BODY>
<HR> Kalimat ini
diapit oleh 2 buah garis<HR>
</BODY>
</HTML>
<I>
Perintah ini digunakan
untuk membuat teks miring.
Sintaks
: <I> </I>
Contoh
<HTML>
<HEAD><TITLE>
</TITLE></HEAD>
<BODY>
<I> Selamat
Datang Ke Websiteku</I>
</BODY>
</HTML>
<B>
Perintah ini digunakan
untuk membuat teks tebal.
Sintaks
: <B> </B>
Contoh
<HTML>
<HEAD><TITLE>
</TITLE></HEAD>
<BODY>
<B> Selamat
Datang Ke Websiteku</B>
</BODY>
</HTML>
<U>
Perintah ini digunakan
untuk membuat teks bergaris bawah.
Sintaks
: <U> </U>
<HTML>
<HEAD><TITLE>
</TITLE></HEAD>
<BODY>
<U> Selamat
Datang Ke Websiteku</U>
<U><B>
Selamat Datang Ke Websiteku</U></B>
</BODY>
</HTML>
<CENTER>
Perintah ini untuk
membuat teks ke tengah layar.
Sintaks
: <CENTER> </CENTER>
Contoh
:
<HTML>
<HEAD><TITLE>
</TITLE></HEAD>
<BODY>
<H1><CENTER>
Selamat Datang Ke Websiteku</CENTER></H1>
</BODY>
</HTML>
ALIGN
Digunakan untuk membuat
teks rata kiri, tengah, kanan atau rata kanan dan kiri.
Sintaks
:
<P
ALIGN=right> → Rata Kanan
<P
ALIGN=left> → Rata Kiri
<P
ALIGN=center> → Rata Tengah
<P
ALIGN=justify> → Rata Kanan dan Kiri
atau
<H ALIGN=right>
<H ALIGN=left>
<H ALIGN=center>
<H
ALIGN=justify>
Contoh pemakaian :
<H2
ALIGN=center>SELAMAT DATANG </H2>
<BR> (Line
Break)
Perintah ini digunakan
untuk memasukan fungsi Enter. Sebagai contoh, jika perintah <BR>
diberikan di akhir baris, maka kalimat berikutnya akan dicetak pada baris
berikutnya.
<!–
Perintah untuk membuat
KOMENTAR. Semua teks atau perintah yang diapit perintah ini tidak akan
dijalankan. Ini hanya komentar untuk program.
Sintaks
: <!– –>
Contoh
: <!—Ini adalah contoh komentar –>
<SMALL>
Perintah untuk membuat
teks berukuran kecil.
<BIG>
Perintah untuk membuat
teks berukuran besar
<P> (Paragraph)
Perintah ini digunakan
untuk memisahkan paragraph yang satu dengan paragraph yang lain.
Sintaks
: <P> </P>
<DD>
Perintah ini digunakan
untuk membuat teks atau sebuah paragraph agak masuk ke dalam.
Sintaks
: <DD>
BASEFONT
Perintah ini digunakan
untuk mengubah ukuran font.
Contoh
:
<HTML>
<HEAD><TITLE>
</TITLE></HEAD>
<BODY>
<BASEFONT
SIZE=6>
Teks dengan ukuran 6
pt<BR>
<B>Teks dengan
ukuran 6 pt dan tebal</B>
<BASEFONT SIZE=10>
<BR>
Teks dengan ukuran 10
pt
</BODY>
</HTML>
FONT
Juga untuk mengubah
ukuran font, tetapi angka yang terdapat dalam SIZE yang merupkan ukuran font
harus diberi tanda kutip.
FACE
Untuk mengubah jenis
font
Contoh :
<HTML>
<HEAD><TITLE>
</TITLE>
</HEAD>
<BODY>
<FONT SIZE =”6”
FACE=”Times New Roman”>
Teks dengan jenis font
Times New Roman.
<FONT SIZE =”6”
FACE=”Arial”>
Teks dengan jenis font
Arial.
</BODY>
</HTML>
<SUP>
Perintah ini digunakan
untuk membuat cetak naik suatu teks.
Contoh :
<HTML>
<HEAD><TITLE>
</TITLE>
</HEAD>
<BODY>
Kami adalah yang
pertama : 1<SUP>st</SUP> in the world.
</BODY>
</HTML>
<SUB>
Perintah ini digunakan
untuk membuat cetak turun suatu teks.
Contoh :
<HTML>
<HEAD><TITLE>
</TITLE></HEAD>
<BODY>
H<SUB>2</SUB>O
(disebut air(
</BODY>
</HTML>
<UL>
Perintah <UL>
(Unordered List) adalah perintah untuk membuat daftar (list).
<LI>
Perintah <LI>
(List Item) adalah perintah untuk membuat daftar (list)
CATATAN : Perintah
<LI> harus berada dalam perintah OL, UL, DIR, MENU.
Contoh
:
<HTML>
<HEAD><TITLE>
</TITLE>
</HEAD>
<BODY>
<UL>
<LI>
<H2>JAWA
TIMUR</H2>
<UL>
<LI>SURABAYA</LI>
<LI>MALANG</LI>
<LI>GRESIK</LI>
</UL>
</LI>
<BR>
<LI>
<H2>JAWA
BARAT</H2>
<UL>
<LI>BANDUNG</LI>
<LI>SUKABUMI</LI>
<LI>BOGOR</LI>
</UL>
</LI>
</BODY>
</HTML>
BODY
<BODY …
</BODY>
Perintah BODY adalah perintah untuk membuat
warna latar belakang pada layar, mengubah warna link, mengubah warna dasar
link, menampilkan pesan ketika halaman ditutup, dan lain-lain sesuai dengan
atribut yang diberikan. Sedangkan BODY memiliki 8 atribut, antara lain :
TEXT=warna
|
Untuk menentukan warna teks.
|
BGCOLOR=warna
|
Untuk mengubah warna dasar layar
(halaman).
|
BACKGROUND=URL
|
Untuk mengatur warna latar
belakang gambar.
|
LINK=warna
|
Untuk menentukan warna link.
|
ALINK=warna
|
Untuk menentukan warna link yang
sedang dipilih.
|
VLINK=warna
|
Untuk menentukan warna link yang
sudah dikunjungi.
|
ONLOAD=string
|
Perintah yang akan dilaksanakan
ketika halaman Website selesai di Download
|
ONUNLOAD=string
|
Perintah yang akan dilaksanakan
ketika halaman Website ditutup.
|
Contoh :
<BODY
BGCOLOR=”#FFFFFF” TEXT=”#000000” LINK=”#0000FF” VLINK=”#800080”>
<BODY
ONUNLOAD=”window.alert(‘Terima kasih!’)”>
INPUT
<INPUT>
Adalah perintah untuk
meminta memasukan (input) dari pengunjung, sedangkan INPUT memiliki cukup
banyak atribut, antara lain:
·
TYPE=[text | password
| checkbox | radio | submit | reset | file | hidden | image | button] (jenis
input)
·
NAME=string (kunci
dalam form submit)
·
VALUE=string (nilai
dari input)
·
CHECKED (tombol check
radio atau checkbox)
·
SIZE=number(panjang
kotak teks)
·
MAXLENGHT=number
(panjang karakter)
·
SCR=URL (lokasi URL
atau gambar)
·
ALT=string (keterangan
untuk gambar)
·
ALIGN=[top | middle |
bottom | left | right] (pengaturan teks atau gambar)
·
DISABLED (menyembunyikan
elemen)
·
READONLY (mencegah
perubahan)
·
ACCEPT=string (media
untuk upload file)
·
ACCESSKEY=character
(tombol shortcut)
·
TABINDEX=number
(posisi tab)
·
ONFOCUS=string (kotak
teks yang menerima fokus / kursor)
·
ONBLUR=string (kotak
teks yang ditinggalkan focus / kursor)
·
ONSELECT=string (teks
yang dipilih)
·
ONCHANGE=string (nilai
yang akan diganti)
·
ONCLICK=string
(perintah yang akan dilaksanakan apabila tombol di klik)
Contoh :
Program 1
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY
BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>
<p> <label
accesskey=u>Nama Anda: <input type=”text” name=”username” size=”20″
maxlength=”30″></label></p>
<p> <label
accesskey=p>Password: <input type=”password” name=”pw” size=”20″
maxlength=”20″></label></p>
</BODY>
</HTML>
Program 2
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY
BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>
<p> Silahkan
pilih jenis pembayaran Anda :</p>
<p><label
accesskey=c><input type=”radio” name=”jenis pembayaran” value=”master
card” checked>Master card </label><br>
<p><label
accesskey=d><input type=”radio” name=”jenis pembayaran” value=”visa card”
checked>Visa card </label><br>
<p><label
accesskey=m><input type=”radio” name=”jenis pembayaran” value=”wesel pos”
checked>Wesel pos </label><br>
<p><label
accesskey=s><input type=”checkbox” name=”kirim” value=”yes”
checked>Kirim vie e-mail </label><br>
</BODY>
</HTML>
FORM
<FORM>
</FORM>
Perintah FORM adalah suatu metode untuk
membuat format input seperti formulir, dan terdiri dari beberapa atribut:
ACTION=URL
|
Penanganan form
|
METHOD=[get | post]
|
Metode HTTP untuk submit form.
|
ENCTYPE=string
|
Tipe isi submit form.
|
TARGET=string
|
Target berupa jendela atau frame.
|
ONSUBMIT=string
|
From yang sudah di-Submit.
|
ONRESET=string
|
Form yang di-reset.
|
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY
BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>
<form>
<p>
1:<INPUT
type=”radio” NAME=”radio” value=”Anda Memilih Nomor ”
onclick=”alert(Value)”>
2:<INPUT
type=”radio” NAME=”radio” value=”Anda Memilih Nomor ”
onclick=”alert(Value)”>
3:<INPUT
type=”radio” NAME=”radio” value=”Anda Memilih Nomor ”
onclick=”alert(Value)”>
</form>
</BODY>
</HTML>
LABEL
<LABEL>
</LABEL>
adalah suatu perintah untuk membuat
keterangan field (kotak input) dalam pembuatan form,
dan umumnya digunakan dengan perintah INPUT. Sedangkan LABEL terdiri dari
beberapa atribut :
ACCESSKEY=character
|
Tombol shortcut.
|
ONFOCUS=script
|
Elemen yang menerima fokus
(kursor)
|
ONBLUR=script
|
Elemen yang ditinggalkan fokus
(kursor).
|
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY
BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>
<p>
<label
accesskey=U>Nama Anda :
<input type=”text”
name=”username” size=”20″ maxlength=”15″></label>
</p>
<p>
<label
accesskey=P>Password :
<input
type=”password” name=”pw” size=”20″ maxlength=”20″></label>
</p>
</BODY>
</HTML>
TEXTAREA
<TEXTAREA>
</TEXTAREA>
adalah suatu perintah
untuk membuat pengunjung dapat mengetik sekumpulan teks dalam sebuah kotak.
Atribut yang dapat digunakan dengan perintah TEXTAREA adalah sebagai berikut :
·
NAME=string (kunci
untuk submit form)
·
ROW=number (jumlah
baris)
·
COLS=number (jumlah
kolom)
·
DISABLE=menyembunyikan
elemen
·
READONLY=mencegah
perubahan
·
ACCESSKEY=character
(tombol shortcut)
·
TABINDEX=number
(posisi tab)
·
ONFOCUS=string (kotak
teks yang menerima fokus/kursor)
·
ONBLUR=string (kotak
teks yang ditinggalkan focus/kursor)
·
ONSELECT=string (teks
yang dipilih)
·
ONCHANGE=string (nilai
yang akan diganti)
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY
BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>
<p>
<label
accesskey=C>
Ketik pesan Anda dalam
kotak di bawah ini : <br>
<textarea
name=”komentar” cols=”50″ rows=”8″> </textarea>
</label>
</p>
</BODY>
</HTML>
FIELDSET
<FIELDSET>
</FIELDSET>
adalah suatu perintah
untuk membuat beberapa formulir yang terdiri dari beberapa bagian:
PEMBUATAN MENU
<SELECT>
</SELECT>
Perintah ini digunakan
untuk membuat daftar menu pilihan (options selector), dan umumnya digunakan
dengan perintah OPTIONS (pembuat menu pilihan) dan OPTGROUP (pembuat group
pilihan). Dengan perintah ini maka Anda akan dapat membuat daftar pilihan
seperti yang sering Anda lihat dalam Website professional:
ATRIBUT :
·
NAME=string (kunci
untuk submit form)
·
MULTIPLE=dapat membuat
menu pilihan berganda
·
SIZE=number (jumlah
pilihan yang tampak)
·
DISABLE=menyembunyikan
elemen
·
TABINDEX=number
(posisi tab)
·
ONFOCUS=string (kotak
teks yang menerima fokus/kursor)
·
ONBLUR=string (kotak
teks yang ditinggalkan focus/kursor)
·
ONCHANGE=string (nilai
yang akan diganti)
<OPTIONS>
</OPTIONS>
Perintah ini untuk
membuat menu pilihan, dan umumnya digunakan dengan perintah kontrol SELECT :
ATRIBUT :
·
VALUE=string (nilai
pilihan)
·
SELECTED=pilihan
berupa inisial
·
DISABLE=menyembunyikan
pilihan
·
LABEL=string (pilihan
label)
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY
BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>
Pilih status
perkawinan Anda :
<select
name=”status”>
<option selected
value=”">Status … </option>
<option> Belum
kawin </option>
<option> kawin
</option>
<option> Janda
</option>
<option> Duda
</option>
</select>
</BODY>
</HTML>
STYLE
<STYLE>
</STYLE>
adalah perintah untuk
memasukan (embedding) stylr sheet, misalnya untuk penanganan warna latar
belakang halaman (background).
ATRIBUT :
·
TYPE=string(harus
“text/css”)
·
MEDIA=MediaDesc (jenis
media yang akan dimasukan)
·
TITLE=strings (judul
style sheet)
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
<META
name=”description” content=”">
<META
name=”keywords” content=”">
<META
name=”generator” content=”CuteHTML”>
</HEAD>
<font
color=”white”><h1> Selamat datang ke Websiteku. </h1>
</font>
<style
type=”text/css” media=screen>
BODY {background: red;
color:black }
</style>
</BODY>
</HTML>
KETERANGAN
·
<FONT COLOR=WHITE>
Perintah ini untuk
membuat warna teks (foreground) dengan warna putih. Jika ingin warna lain,
misalnya merah, ganti dengan RED.
·
BODY { background:
red; color:black}
Perintah untuk membuat
warna latar belakang halaman Website, jika ingin warna aqua misalnya, ganti red
dengan aqua.
TABEL & KOTAK
Perintah-perintah yang
termasuk ke dalam kategori TABEL adalah sebagai berikut :
·
TABLE
·
CAPTION
·
COLGROUP
·
COL
– Table Column
·
THEAD
– Table Head
·
TFOOT
– Table Foot
·
TBODY
– Table Body
·
TR
– Table Row
·
TTD
– Table Data Cell
·
TH
– Table Header Cell
<TABLE>
</TABLE>
Perintah untuk membuat
table. Dan terdiri dari beberapa atribut:
·
SUMMARY=string
(struktur table)
·
WIDTH=length (lebar
table)
·
BORDER=pixels (lebar
border)
·
FRAME=[void | above |
hsides | lhs | rhs | vsides | box | border] (bagian luar border)
·
RULES=[none | groups |
row | cols | all] (bagian dalam border)
·
CELLSPACING=length
(spasi antara cell)
·
CELLPADDING=length
(spasi dalam cell)
·
ALIGN=[left | center |
right] (perata tabel)
·
BGCOLOR=color (warna
background table)
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY
BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>
<table>
<tr
align=”left”>
<th
scope=”col”>Nama</th>
<th
scope=”col”>Umur</th>
<th
scope=”col”>Alamat</th>
</tr>
<tr
align=”left”>
<td>Hans
</td>
<td>22
</td>
<td>Paingan
</td>
</tr>
</table>
</BODY>
</HTML>
MEMBUAT KOTAK
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY
BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>
<table width=”400″
cellspacing=”0″ cellpadding=”5″ border=”2″>
<tr>
<td width=”400″
bgcolor=”#ffcb10″>
<font size=”2″
face=”MS Sans Serif”>
Kalimat biasa dalam
kotak <br>
<b>Kalimat tebal
dalam kotak</b> <br>
<i>Kalimat
miring dalam kotak</i> <br>
</tr>
</table>
</BODY>
</HTML>
MEMBUAT TABLE &
KOTAK
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF”
TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>
<table width=”544″
cellspacing=”0″ cellpadding=”5″ border=”2″>
<tr
align=”left”>
<th
scope=”col”>Nama</th>
<th
scope=”col”>Umur</th>
<th
scope=”col”>Alamat</th>
</tr>
<tr
align=”left”>
<td>Hans
</td>
<td>22
</td>
<td>Paingan
</td>
</tr>
</table>
</BODY>
</HTML>
WARNA
FONT COLOR
Perintah untuk
memasukan warna kedalam teks.
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY
BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>
<basefont
size=”6″>
<b>
<font
color=”red”>Teks dengan warna merah</font><br>
<font
color=”black”>Teks dengan warna hitam</font><br>
<font
color=”blue”>Teks dengan warna biru</font>
</b>
</BODY>
</HTML>
BACKGROUND
Adalah perintah untuk
membuat warna latar belakang sebuah teks.
KODE-KODE WARNA UNTUK
WARNA BACKGROUND
#000000
: Black
#c0c0c0
: Silver
#808080
: Gray
#ffffff
: White
#800000
: Maroon
#ff0000
: Red
#800080
: Purple
#ff00ff
: Fuchsia
#008000
: Green
#00ff00
: Lime
#808000
: Olive
#ffff00
: Yellow
#000080
: Navy
#0000ff
: Blue
#008080
: Teal
#00ffff
: Aqua
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY
BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>
<table
cellpadding=”5″ cellspacing=”5″>
<td
style=”BACKGROUND: #000000; COLOR: white”>Dasar Hitam </td>
<td
style=”BACKGROUND: #ff0000; COLOR: white”>Dasar Merah </td>
</table>
</BODY>
</HTML>
GAMBAR & MUSIK
Perintah-perintah
untuk memasukan GAMBAR & MUSIK adalah sebagai berikut :
·
IMG
SRC : Untuk memasukan
gambar ke dalam Website
·
IMG BORDER : Untuk
membuat bingkai gambar dengan kotak
·
BGSOUND
: Untuk memasukkan suara atau musik ke dalam Website Anda.
IMG SRC
Adalah perintah untuk
memasukkan gambar ke dalam Website. Anda dapat memasukkan gambar yang
berakhiran (berformat) .JPG, .GIF, .BMP dan lain-lain. Untuk kemudahan pengiriman
gambar kelak ke dalam server, satukan terlebih dahulu gambar ke dalam folder
program. Barulah panggil ke dalam program.
Sintaks : <IMG
SRC=”lokasi gambar”>
IMG BORDER
Untuk membingkai
gambar dengan kotak
Sintaks : <IMG
BORDER=”5
Angka 5 adalah ukuran
border (bingkai), ganti angka ini sesuai dengan ukuran border yang Anda
inginkan.
BGSOUND
Perintah ini untuk
memasukan suara atau musik ke dalam Website Anda.
Sintaks : <BGSOUND
loop=infinite SCR=”Lokasi File”>
PERHATIAN : Ukuran
file musik yang sangat besar (misalnya MP3), tidak dapat kita masukkan ke dalam
Website kita. Karena nanti kita tidak dapat memindahkannya ke dalam server agar
dapat diakses pemakai internet, karena ukurannya sangat besar, akan keluar
pernyataan kehabisan waktu ketika kita memindahkannya ke dalam server.
FRAME
Adalah suatu fasilitas
dalam HTML yang berfungsi untuk membagi layar ke dalam beberapa jendela. Ada
pun perintah-perintah untuk membuat frame dalam HTML adalah sebagai berikut:
·
FRAMESET
·
FRAME
·
IFRAME
<FRAMESET>
</FRAMESET>
Adalah perintah untuk
membuat frame, dan umumnya berpasangan dengan perintah FRAME. Atribut untuk
FRAMESET :
·
ROWS=length (panjang
baris dalam satuan pixel)
·
COLS=length (panjang
kolom dalam satuan pixel)
·
ONLOAD=string (semua
frame sudah selesai di-load)
·
ONUNLOAD=string (semua
frame sudah dihapus)
Contoh :
·
<FRAMESET
COLS=”lebar jendela bagian kiri, lebar jendela bagian kanan”>
·
<FRAME
COLS=”*,*”>
·
<FRAME
ROWS=”*,*”>
FRAME
Perintah ini untuk
memasukan gambar, halaman atau URL ke dalam jendela (frame), mengatur margin,
menggulung frame dan lain-lain. FRAME terdiri dari beberapa atribut, antara
lain :
·
NAME=string (nama
frame)
·
SRC=URL (isi frame)
·
LONGDESC=URL (uraian
dari frame)
·
FRAMEBORDER=[1 | 0]
(border frame)
·
MARGINWIDTH=pixels
(batas kiri terhadap ini frame)
·
MARGINHEIGHT=pixels
(batas atas terhadap ini frame)
·
NORESIZE
·
SCROLLING=[yes | no |
auto] (penggulung frame)
Contoh :
<FRAME SRC=”link”
NAME=”nama”
SCROLLING=”auto”
MARGINWIDTH=1 MARGINHEIGHT=1
NORESIZE>
Keterangan :
Untuk pembuatan FRAME
perintah <BODY> tidak digunakan dalam program, karena jika ada perintah
<BODY> maka program ini tidak dapat berjalan.
IFRAME SRC
Adalah perintah untuk
membuat jendela dengan lebar dan tinggi sesuai dengan keinginan programmer, dan
dapat diletakan di bagian kiri, tengah, atau bagian kanan.
Sintaks :
<IFRAME SRC=”link”
WITDH=400 HEIGHT=105></IFRAME>
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY
BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>
<p
align=”center”>
<iframe src=”link”
WIDTH=400 HEIGHT=90>
</iframe>
</p>
<p
align=”center”>
<img
src=”link”></p>
</BODY>
</HTML>
A HREF
<A HREF
Adalah perintah HTML
untuk membuat LINK (membuka sebuah halam atau URL dari sebuah halaman). Ada pun
atribut yang dapat digunakan dengan HREF adalah sebagai berikut:
·
ONCLICK
: Membuka link setelah tombol di-klik
·
ONMOUSEOVER
: Membuka link hanya dengan menyorot tombol
o
ONMOUSEOUT
: Membuka link hanya dengan menyorot tombol, dan kembali kehalaman semula
apabila mouse dijauhkan dari link.
Sintaks:
<A HREF=”gambar
atau halaman atau URL”> Nama Link</A>
Fungsi
Digunakan untuk memberi sebuah
komentar atau keterangan. Kalimat yang terletak pada kontiner ini tidak akan
terlihat pada browser
|
|
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 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
|
<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
|
<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>
|