KETERAMPILAN KOMPUTER
HTML
DASAR
A.
Sejarah
HTML
Hypertext Markup Language (HTML)
adalah bahasa yang digunakan untuk menulis halaman web. HTML merupakan
pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language
(SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang
dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.
HTML dibuat oleh Tim Berners-Lee
ketika masih bekerja untuk CERN
dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun
1990 HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML
pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi
sebelumnya. Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF (Internet Engineering Task Force). HTML
2.0 ini merupakan penyempurnaan dari HTML+ (1993).
HTML 3.0 (1995) memberikan kemampuan
lebih daripada versi sebelumnya. Sebuah usaha dari World Wide Web Consortium’s (W3C) HTML Working Group
pada tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan
pada bulan Januari 1997.
HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada
tanggal 24 April 1998. HTML merupakan perbaikan dari HTML 4.0 yang lebih dulu
diterbitkan. (18 Desember 1997).
B.
Dasar-Dasar
HTML
Mendesain HTML berarti melakukan
suatu tindakan pemrograman. Namun HTML bukanlah sebuah bahasa pemrograman.
Namun HTML hanyalah berisi perintah-perintah yang telah terstruktur berupa
tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya memasukkan
perintah-perintah tertentu agar HTML kita dapat di akses oleh browser.
Mendesain HTML adalah adalah sebuah seni tersendiri. Homepage yang merupakan
implementasi dari HTML adalah refleksi dari orang yang membuatnya. Untuk itu
kita perlu mendesainnya dengan baik agar para pengunjung homepage yang kita
buat merasa senang dan bermanfaat.
Mendesain HTML dapat dilakukan dengan dua cara:
- Menggunakan
HTML Editor, seperti Microsoft
FrontPage, Adobe
Dreamweaver, dan
editor HTML lainnya.
- Dengan
cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam
dokumen Notepad dan disimpan dengan format HTML.
Ada kelebihan dan kekurangan dari
dua cara di atas. Cara pertama kelebihannya adalah HTML Editor merupakan sebuah
program yang khusus didesain untuk membuat, melakukan editing bahkan
mem-publish ke internet. Dengan kemampuannya menggabungkan kemudahan dan
kecanggihan teknologi internet ke dalam dokumen HTML maka cara ini sangat
disukai oleh para pemula dan desainer yang tidak ingin belajar lebih mendalam
mengenai HTML.
Sedangkan cara kedua adalah
menuliskan secara manual satu persatu tag-tag HTML. Hal ini sangat dirasakan
sulit dikarenakan akan memakan tenaga dan waktu ekstra untuk melakukannya,
ditambah lagi Anda harus melakukan cara-cara konvensional untuk melihat
hasilnya pada web browser. Namun pada cara kedua adalah dasar dari segala
bentuk HTML yang akan Anda pelajari, karena dengan cara itulah Anda akan lebih
paham mengenai cara kerja dan berbagai perintah yang biasa dipakai pada bahasa
HTML.
Perhatian !!
Jika anda baru pertama kali mengenal HTML, hindari
Program WYSIWIG (What You See Is What You Get) seperti Dreamweaver atau
Frontpage/Web Expression. Program-program ini memang memudahkan anda membuat
website tetapi anda akan kurang memahami HTML, gunakan Frontpage atau
Dreamweaver apabila anda sudah paham mengenai HTML.
Didalam html terdapat tag
Tag : adalah bagian
perintah/script yang tidak ditampilkan oleh halaman website
Tag terbagi 2
macam :
-
Tag
tunggal = tag yang berdiri sendiri contoh
<img src><br>
-
Tag
berpasangan = tag yang memiliki bagian awal dan akhir/penutup
-
Contohmnya
:
<html> </html>
<body>
</body>
C.
STRUKTUR
DASAR HTML
HTML adalah singkatan dari
HyperText Markup Language adalah salah satu bahasa pemprograman web
desaign dan juga biasa di sebut script untuk menyusun dokumen-dokumen Web.
Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang
memerintahkan web browser untuk mengeksekusi perintah-perintah yang
dispesifikasikan Struktur dasar HTML adalah sebagai berikut:
<html>
<head>
<title>Judul
Dokumen HTML</title>
</head>
<body>
penulisan
informasi Web
</body>
</html>
Dari
struktur dasar HTML di atas dapat dijelaskan sebagai berikut:
a.
Tag
Adalah
teks khusus (markup) berupa dua karakter "<" dan
">", sebagai
contoh
<body> adalah tag dengan nama body.
Tag
harus ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag
penutup
(ditambahkan karakter "/" setelah karakter "<"),
sebagai
contoh <body> ini adalah tag pembuka isi dokumen HTML, dan
</body>
ini adalah tag penutup isi dokumen HTML.
b.
Element
Element
terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag
penutup.
Sebagai
contoh untuk menampilkan judul dokumen HTML pada web
browser
digunakan element title, dimana:
<title>
ini adalah tag pembuka judul dokumen HTML
Judul
Dokumen HTML ini adalah isi judul dari dokumen HTML
</title>
ini adalah tag penutup judul dokumen HTML
Tag-tag
yang ditulis secara berpasangan pada suatu element HTML, tidak
boleh
saling tumpang tindih dengan pasangan tag-tag lainnya.
Contoh
penulisan tag-tag yang benar
<p>
<b>
</b>
</p>
Catatan
: Jika penulisan script salah, maka script tidak terbaca sempurna ( Error )
sehingga dapat mengganggu penampilan dan dinamika web itu sendiri
c.
Attribute
Attribute
mendefinisikan property dari suatu element HTML, yang terdiri atas
nama
dan nilai. Penulisannya adalah sebagai berikut:
<TAG>
nama-attr="nilai-attr"
nama-attr="nilai-attr"
>
</TAG>
Secara
umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai
contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman web
menjadi hitam, penulisannya adalah <body bgcolor="black"
text="yellow">
d.
Element HTML
Menyatakan
pada browser bahwa dokumen Web yang digunakan adalah HTML.
Sintaks:
<html>
</html>
e.
Element HEAD
Merupakan
kepala dari dokumen HTML. Tag <head> dan tag </head> terletak
di
antara tag <html> dan tag </html>.
Sintaks:
<head>
</head>
f.
Element TITLE
Merupakan
judul dari dokumen HTML yang ditampilkan pada judul jendela
browser.
Tag <title> dan tag </title> terletak di antara tag <head>
dan tag
</head>.
Sintaks:
<title>
</title>
g.
Element BODY
Element
ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body>
terletak di bawah tag <head> dan tag </head>.
Element
BODY mempunyai attribute-attribute yang menspesifikasikan khususnya warna dan
latarbelakang dokumen yang akan ditampilkan pada browser.
Sintaks:
<body
text="v" bgcolor="w" background="uri" link="x"
alink="y" vlink="z">
</body>
text :memberikan
warna pada teks
bgcolor :memberikan
warna pada latarbelakang dokumen HTML
background :memberikan
latarbelakang dokumen HTML dalam bentuk gambar
link :memberikan
warna untuk link
alink :memberikan
warna untuk link yang sedang aktif
vlink :memberikan
warna untuk link yang telah dikunjungi.
Catatan
: Jika attribute bgcolor dan background keduanya dispesifikasikan maka
attribute background yang akan digunakan, akan tetapi jika nilai attribute
background
(gambar) tidak ditemukan pada dokumen HTML maka attribute bgcolor
yang
akan digunakan.
Berikut ini saya akan menyebutkan
berbagai macam kode HTML dasar yang perlu
Diketahui :
1. <br>
Turun
satu baris kebawah(enter) / Kursor dan kalimat dibelakangnya turun 1 baris
kebawah
2.
<big>isi
tulisan</big> Membuat tulisan menjadi sedikit
lebih besar
3. <font
color=”warna tulisan“> isi
tulisan </font>
Mewarnai
tulisan. Ganti warna tulisan dengan salah satu
pilihan
yang ada : red, blue, yellow, green,
brown, gold,
purple
4.
Menambah
1 spasi karena ada kemungkinan penggunaan 2
spasi
tidak akan terbaca pada beberapa engine blog
5.
<font size=”ukuran
tulisan“>isi
tulisan</font>
Mengganti
ukuran tulisan. Bisa digunakan apabila kode
pada
no. 2 tidak sesuai dengan keinginan kita
6. <strong>isi
tulisan</strong>
atau
<b>isi
tulisan</b>
Untuk
menebalkan tulisan. Fungsi sama dengan ”’isi
tulisan”’
atau tombol ‘cetak tebal’
7.
<p> Kursor
dan kalimat dibelakangnya turun satu setengah
baris
kebawah
8.
<u>isi
tulisan</u> Membuat garis bawah tulisan
9.
<small>isi
tulisan</small> Membuat tulisan menjadi sedikit
lebih kecil
10. <s>isi
tulisan</s> Membuat garis mencoret pada
tulisan
11. <pre>isi
tulisan</pre>
Membuat
tulisan tetap pada keadaan yang kita inginkan,
misalnya
untuk urutan berjejer kebawah
12. <center>isi
tulisan</center>
Membuat
tulisan berada di tengah halaman
13. <blink>isi
tulisan</blink> Membuat tulisan tampak berkedip
Contoh2 penulisan
dokumen html:
Latihan 1
Secara
sederhana HTML terdiri dari dua bagian yaitu Header dan Body. Struktur HTML
diapit oleh tag awal <HTML> dan tag akhir </HTML>.
Standar penulisannya adalah:
<HTML>
<HEAD>
Deskrisi dokumen
</HEAD>
<BODY>
Isi dokumen
</BODY>
</HTML>
Contoh:
<HTML>
<HEAD>
<TITLE>Selamat datang di Homepage Saya</TITLE>
</HEAD>
<BODY>
Halo, apakabar?. Homepage ini merupakan hasil karya saya yang pertama.
</BODY>
</HTML>
Keterangan:
- Simpanlah dengan
menambahkan exstensi data dari html (.html)
- Tag <TITLE> digunakan untuk memberi judul dokumen HTML. Judul ini
dapat Anda lihat pada pojok kiri atas (title bar) browser. Ketika
orang akan mem-bookmark web Anda, maka judul inilah yang akan disimpan.
- Kemudian buka
folder tempat kamu menyimpan file, lalu cari file yang telah di simpan,
biasanya data tersebut sudah dalam bentuk tampilan Mozilla Firefox.
- Lihat hasilnya
dibawah ini.
Latihan 2
1.
Membuat
Heading (judul kalimat)
Heading adalah sekumpulan kata yang
menjadi judul atau subjudul dalam suatu dokumen HTML. Heading berbeda dengan
tag <TITLE> yang tidak bisa muncul dalam halaman
web. HTML menyediakan enam tingkatan heading. Heading level 1 biasanya untuk
judul utama.
Contoh:
<HTML>
<HEAD>
<TITLE>Headings</TITLE>
</HEAD>
<BODY>
<H1>Heading Level 1</H1>
<H2>Heading Level 2</H2>
<H3>Heading Level 3</H3>
<H4>Heading Level 4</H4>
<H5>Heading Level 5</H5>
<H6>Heading Level 6</H6>
</BODY>
</HTML>
2. Paragraf
Untuk membuat paragraf digunakan tag <P>.
Setelah tag <P> Anda bisa menulis isi paragraf dan
paragraf tersebut harus diakhiri dengan penutup </P>. Anda bisa mengatur posisi paragraf
dengan attribut ALIGN.
Atribut ALIGN
diikuti dengan posisi yang diinginkan. LEFT untuk rata kiri, CENTER
untuk rata tengah dan RIGHT untuk rata kanan.
Contoh:
<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<P ALIGN="right">
Beberapa tahun yang lalu, seorang hartawan meninggal dunia sedangkan ia tidak
memiliki ahli waris. Kepada pengacaranya, ia meninggalkan dua buah surat yang
disegel.Yang sebuah berisi permintaan agar jenazahnya dikuburkan pada jam empat
dini hari. Surat yang kedua belum diketahui isinya karena disampulnya tertulis
pesan agar dibuka seusai pemakaman jenazah
<P ALIGN="center">
Sesuai dengan wasiat, jenazah itu dikebumikan pada pukul empat dini hari.
Karena tidak lazimnya waktu pemakaman pada jam tersebut, yang ikut mengantar
jenazahnya hanya empat orang kawannya yang paling setia
<P ALIGN="left">
Seusai pemakaman, surat wasiat yang kedua dibuka. Betapa terkejutnya pengacara
ketika membaca isinya, ialah wasiat bahwa seluruh harta warisan (yang bernilai
lebih dari 800.000 pound) dibagi rata kepada orang-orang yang mengantarkan
jenazahnya ke pemakaman. Dengan demikian, yang berhak memperoleh harta yang
banyak itu hanya empat orang, sebagai imbalan bagi kesetiaan mereka. Sumber
humor, kisah dan pepatah
</P>
</BODY>
</HTML>
Latihan 3
3. Blockquote
Perintah tag <BLOCKQUOTE> digunakan untuk
menulis kutipan teks. Dengan perintah ini browser akan menampilkan teks
menjorok ke dalam (meng-identasi teks) atau menampilkan teks dalam bentuk huruf
miring.
Contoh:
<HTML>
<HEAD>
<TITLE>BLOCKQUOTE</TITLE>
</HEAD>
<BODY>
<H3>Sesuatu yang tidak perlu
dicoba</H3>
<BLOCKQUOTE>
Sesuatu yang kelihatan mengasyikkan
tapi sebenarnya lebih banyak menambah masalah pada remaja adalah narkoba, seks,
alkohol dan merokok. Jangan sekali-kali mencoba jika tidak ingin membuat
masalah baru
</BLOCKQUOTE>
</BODY>
</HTML>
4. Preformatted Text
Preformatted Text (PRE) digunakan untuk menampilkan teks
sama seperti yang Anda ketikkan dalam dokumen HTML. Browser akan menampikan
teks tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang
tampilkan oleh aplikasi berbasis teks (misalnya telnet).
Contoh:
<HTML>
<HEAD>
<TITLE>Preformatted
Text</TITLE>
</HEAD>
<BODY>
<PRE>
Edisi yang lalu dibahas tentang
membuat billing system untuk warnet yang dapat langsung mencetak tagihan.
Kali ini diulas bagaimana menyimpan
setiap transaksi dalam database agar bisa diperoleh beberapa laporan secara
periodik.
</PRE>
</BODY>
</HTML>
5. Begin Row (BR)
Tag ini digunakan untuk menulis teks
pada baris berikutnya. Tag <BR>
membuat baris baru tanpa memberi baris kosong di bawahnya.
Contoh:
<HTML>
<HEAD>
<TITLE>Begin
Row</TITLE>
</HEAD>
<BODY>
<P>Banyak cara yang dapat
digunakan untuk melakukan instalasi FreeBSD. Namun ada tiga cara yang paling
sering dilakukan ,yaitu:
<BR>Instalasi melalui FTP
<BR>Instalasi melalui CDROM
<BR>Instalasi melalui partisi
DOS
</BODY>
</HTML>
6. Ukuran Font
Untuk mengatur huruf dokumen HTML
digunakan tag <FONT SIZE>.
Tag <FONT SIZE>
memiliki beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.
Contoh:
<HTML>
<HEAD>
<TITLE>Ukuran font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1>Ukuran font
1</FONT>
<FONT SIZE=2>Ukuran font
2</FONT>
<FONT SIZE=3>Ukuran font
3</FONT>
<FONT SIZE=4>Ukuran font
4</FONT>
<FONT SIZE=5>Ukuran font
5</FONT>
<FONT SIZE=6>Ukuran font
6</FONT>
<FONT SIZE=7>Ukuran font
7</FONT>
</BODY>
</HTML>
7. Jenis Font
Atribut FACE digunakan untuk mengatur jenis huruf yang
diinginkan. Atribut FACE
harus diisi dengan string jenis font seperti Arial, Times New Roman,Verdana,
dan sebagainya.
Contoh:
<HTML>
<HEAD>
<TITLE>Jenis
Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT FACE =
"Arial">Arial, contoh AC Milan <P>
<FONT FACE =
"Verdana">Verdana , contoh Persebaya <P>
<FONT FACE = "Times New
Roman">Times New Roman, contoh Indonesia <P>
</BODY>
</HTML>
8. Warna Font
Atribut COLOR digunakan untuk mengatur warna font yang akan
digunakan. Untuk memberi nilai pada atribut color, ada dua cara. Cara pertama
dengan menuliskan nama warna seperti Red, Blue, Yellow, White, dll. Sedangkan
cara kedua adalah dengan menggunakan nilai RGB (Red Green Blue) dari suatu
warna, misalnya FF0000 untuk
Red, 00FF00 untuk green, dan
0000FF untuk Blue.
Contoh:
<HTML>
<HEAD>
<TITLE>Warna
Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT COLOR =
"red">PSM Makassar<P>
<FONT COLOR =
"#FF0000">tetap PSM Makassar kan?<P>
<FONT COLOR =
"#00FF00">Ini baru Persebaya<P>
</BODY>
</HTML>
Latihan 4
9. Link
Perintah anchor <A> digunakan untuk membuat suatu
link. Untuk membuat link ke dokumen HTML lain digunakan perintah <A HREF = “nama_dokumen”>Teks pada
browser</A>.
Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk itu perlu
dipersiapkan nama anchor lokasi tujuan dari link tersebut. Nama anchor
dibuat dengan menambahkan atribut NAME
pada tag <A>. Misalnya
<A NAME = “Bugs”</A>.
Cara melakukan link ke bagian tersebut adalah <A HREF = “#nama_anchor”>teks pada browser</A>.
Contoh:
<HTML>
<HEAD>
<TITLE>Link</TITLE>
</HEAD>
<BODY>
<A
NAME="lengkap">Pemain-pemain AC Milan menurut abjad</A>
<BLOCKQUOTE>
<P>Abbiati ,<A
HREF="#abbiati">info lengkap</A>
<P>Ayala
<P>Ambrosini
<P>Albertini
<P>Boban
<P>
<A
HREF="linktujuan.html">kalo mau tahu lagi klik disini</A>
</BLOCKQUOTE>
<P><A
NAME="abbiati">Abbiati</A>
<BLOCKQUOTE>
<P>Kiper ketiga timnas Italia
runner up Euro 2000
<BR>Kiper utama U-21 juara
Piala Eropa U-21
<BR>Kiper utama AC Milan
juara Seri-A 1998-1999
</BLOCKQUOTE>
<P><A
HREF="#lengkap">kembali ke atas</A>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Link
tujuan</TITLE>
</HEAD>
<BODY>
<P ALIGN="center">
Maaf, hanya sedikit
<BR>Chamot
<BR>Dida
<BR>Shevchenko
<BR><A
HREF="contohlink.html">kembali</A>
</BODY>
</HTML>
10. Ordered List
Ordered list
digunakan untuk membuat daftar dimana tiap bagiannya memiliki nomor secara
berurut. Ordered list dimulai dengan menggunakan tag <OL>
dan diakhiri </OL>. Untuk menyatakan tiap bagiannya
digunakan tag <LI> dimana tag ini tidak menggunakan
penutup.
Contoh:
<HTML>
<HEAD><TITLE>Ordered List</TITLE></HEAD>
<BODY>
Empat besar pemain termahal di dunia
<OL>
<LI>Luis Figo
<LI>Hernan Crespo
<LI>Christian Vieri
<LI>Nicolas Anelka
</OL>
</BODY>
<HTML>
Ketika menggunakan
perintah ordered list maka default penomoran adalah 1, 2, 3, …, Anda bisa
mengubah nomor tersebut menggunakan atribut TYPE pada tag <OL>.
·
TYPE = 1 ; daftar berurut dengan nomor 1, 2, 3
(default)
·
TYPE = I ; daftar berurut dengan menggunakan
bilangan Romawi besar (I, II, III, IV, …)
·
TYPE = I ; daftar berurut dengan menggunakan
bilangan Romawi huruf kecil (i, ii, iii, iv, …)
·
TYPE = A ; daftar berurut dengan menggunakan
abjad besar (A, B, C, D, …)
·
TYPE = a ; daftar berurut dengan menggunakan
abjad kecil (a, b, c, d, …)
Selain mengubah jenis
penomoran, HTML juga menyediakan perintah untuk menentukan nilai awal
penomoran. Atribut yang digunakan adalah START
= n, dimana n adalah nilai awal penomoran.
Contoh:
<HTML>
<HEAD>
<TITLE>OL dengan atribut</TITLE>
</HEAD>
<BODY>
<OL TYPE=A>
<LI>Daftar empat pemain termahal didunia
<OL TYPE=I>
<LI>Luis Figo
<LI>Hernan Crespo
<LI>Christian Vieri
<LI>Nicolas Anelka
</OL>
<LI>Urutan lima sampai delapan
<OL TYPE=1 START=5>
<LI>Denilson
<LI>Gabriel Batigol
<LI>Ronaldo
<LI>Amoroso
</OL>
</OL>
</BODY>
<HTML>
11. Unordered List
Berbeda dengan
ordered list, dalam unordered list tidak dijumpai urutan dalam suatu daftar.
Setiap bagian dari unordered list ditandai dengan tanda bullet. Tanda bullet
menjadi defaultdalam unordered list. Untuk membuat daftar dengan tanda ini
digunakan tag awal <UL> dan tag akhir </UL>.
Sama seperti ordered list, untuk tiap-tiap bagian digunakan <LI> tanpa
tag penutup.
Contoh:
<HTML>
<HEAD>
<TITLE>Unordered List</TITLE>
</HEAD>
<BODY>
Empat besar Seri-A Liga Indonesia
<UL>
<LI>PSM Makassar
<LI>Pupuk Kaltim
<LI>Persikota
<LI>Persija Pusat
</UL>
</BODY>
<HTML>
Selain default tanda
bullet, Anda bisa menggunakan tanda cakram/disk, lingkaran, atau kotak. Caranya
dengan menggunakan atribut TYPE pada tag <UL>
Contoh:
<HTML>
<HEAD>
<TITLE>UL dengan atribut</TITLE>
</HEAD>
<BODY>
Klub sepakbola di Jawa Timur
<UL TYPE=square>
<LI>Mitra Surabaya
<LI>Persebaya
<LI>Persija Jember
</UL>
</BODY>
<HTML>
12. Grafik dalam Halaman Web
Biasanya orang menggunakan gambar
untuk memperindah situsnya. HTML menyediakan tag <IMG> untuk menampilkan gambar dalam halaman web.
Dari berbagai macam format gambar yang ada, hanya beberapa saja yang bisa
dipergunakan dalam membuat halaman web. Format gambar yang paling sering
digunakan adalah GIF dan JPEG. Format penulisannya adalah:
<IMG SRC = “file_gambar” ALT = “nama_alternatif”>
Atribut SRC digunakan untuk menentukan sumber gambar. Atribut ALT berfungsi sebagai teks pengganti
gambar untuk browser yang tidak bisa mendukung grafik, atau pada pihak client
sengaja mematikan fasilitas pemanggilan gambar.
Contoh:
<HTML>
<HEAD>
<TITLE>Grafik dalam halaman web</TITLE>
</HEAD>
<BODY>
<P ALIGN="left">www.bugsinternetcafe.com</P>
<P ALIGN="left"><IMG SRC="bugs_logo_white.gif" ALT="Bugs Internet Cafe Yogyakarta"></P>
</BODY>
</HTML>
Beberapa atribut pada tag <IMG> yang biasa
digunakan dalam halaman-halaman web.
·
BORDER : memberikan suatu border atau batas pada
gambar, default-nya = 0
·
HEIGHT,
WIDTH : menentukan tinggi
dan lebar suatu gambar dalam ukuran pixel
·
HSPACE,
VSPACE : menentukan jarak
spasi horizontal dan spasi vertikal antara gambar-gambar dengan objek di
sekitarnya
·
ALIGN :
mengatur perataan gambar terhadap objek di sekelilingnya. Nilainya bisa berupa LEFT, CENTER, RIGHT, BOTTOM, TOP dan MIDDLE
Contoh:
<HTML>
<HEAD>
<TITLE>Atribut IMG </TITLE>
</HEAD>
<BODY>
<P>Bugs Internet Cafe, VSPACE = 20
<BR>
<IMG SRC=".gif" WIDTH="270" HEIGTH="70" ALT="radiokampus ITB" BORDER="2"
HSPACE="20" VSPACE="20">
<BR>
www.bugsinternetcafe.com, HSPACE = 20</P>
<P>Jl.Kaliurang Km.5 No.34<IMG SRC=" bugs_logo_white.gif" WIDTH="203" HEIGHT="60"
ALT=" Bugs Internet Cafe" HSPACE="20">Yogyakarta, HSPACE = 20
<BR>
</P>
</BODY>
</HTML>
13. Table
Tabel banyak digunakan karena dapat menampilkan
informasi dengan bentuk yang ringkas dan mudah dibaca. Untuk membuat tabel
digunakan tag awal <TABLE>
dan tag penutup </TABLE>.
Tag <TABLE> mewakili
beberapa bagian penting, yaitu:
·
CAPTION>
… </CAPTION>
digunakan untuk membentuk judul tabel. Judul tabel ini akan terletak diluar
tabel, bisa di bagian atas atau bagian bawah tabel
·
<TH>
… </TH> berfungsi
untuk meletakkan judul tabel di bagian peling atas atau paling kiri dari suatu
tabel
·
<TD>
… </TD> digunakan
sebagai tempat menulis data atau informasi dalam tabel
Contoh:
<HTML>
<HEAD>
<TITLE>Tabel</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>Seputar Calciomeecato</CAPTION>
<TR>
<TH>Nama Klub</TH>
<TH>Berita</TH>
</TR>
<TR>
<TD>Fiorentina</TD>
<TD>Fiorentina mendatangkan Nuno Gomes untuk menggantikan sang legenda Batigol</TD>
</TR>
<TR>
<TD>Lazio</TD>
<TD>Lazio menjadi klub dengan rekor pembelian pemain sebesar 240 miliar lira!</TD>
</TR>
<TR>
<TD>Perugia</TD>
<TD>Ahn Jung-Whan resmi menjadi pemain pinjaman Perugia</TD>
</TR>
<TR>
<TD>Udinese</TD>
<TD>Pemain Spanyol berusia 23 tahun, Luis Helguera menjadi pemain Udinese <BR>
dengan transfer senilai 349 juta lira</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Table ALIGN dan WIDTH
Perataan horizontal tabel menggunakan atribut ALIGN. ALIGN dapat bernilai LEFT
untuk perataan kiri, CENTER
untuk perataan di tengah dan RIGHT untuk perataan di kanan. Sedangkan untuk
perataan vertikal menggunakan atribut VALIGN.
VALIGN dapat bernilai TOP untuk perataan atas, MIDDLE untuk perataan di tengah dan BOTTOM untuk perataan di bawah.
Lebar tabel biasanya diatur menggunakan atribut WIDTH. Nilai WIDTH
dapat dinyatakan dengan persen (%)
yang menyatakan lebar tabel dalam persentase atau dinyatakan dengan pixel yang
berarti ukuran sesungguhnya dari tabel.
Contoh:
<HTML>
<HEAD>
<TITLE>Tabel dengan WIDTH dan ALIGN</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="88%" HEIGHT="210">
<TR>
<TD WIDTH="30%" HEIGHT="110" VALIGN="top">Lihatlah VALIGN="top"<br>
Janganlah merasa malu mempelajari sesuatu yang tidak diketahuinya</TD>
<TD WIDTH="34%" HEIGHT="110" VALIGN="middle">Bandingkan dengan VALIGN ="middle"<br>
</TD>
<TD WIDTH="36%" HEIGHT="110" VALIGN="bottom">bagaimana dengan ini VALIGN="bottom"</TD>
</TR>
<TR>
<TD WIDTH="30%" HEIGHT="100" ALIGN="left">kalo ini ALIGN="left"</TD>
<TD WIDTH="34%" HEIGHT="100" ALIGN="center">ALIGN="center"</TD>
<TD WIDTH="36%" HEIGHT="100" ALIGN="right">Dunia diciptakan untuk
semua makhluk, bukan untuk kepentingan dunia itu sendiri, dan ini dengan ALIGN = "right"</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Table
CELLSPACING dan CELLPADDING
Atribut CELLSPACING
digunakan untuk menentukan jumlah spasi yang terdapat di antara dua buah sel. CELLPADDING berfungsi untuk mengatur
jumlah spasi yang terdapat di antara batas/border dengan isi atau teks di dalam
sel tersebut.
Contoh:
<HTML>
<HEAD>
<TITLE>Tabel dengan CELLSPACING dan CELLPADDING</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="3" CELLPADDING="5" CELLSPACING="5" WIDTH="85%">
<TR>
<TD WIDTH="43%">baris 1, kolom 1</TD>
<TD WIDTH="57%">baris 1, kolom 2</TD>
</TR>
<TR>
<TD WIDTH="43%">baris 2, kolom 1</TD>
<TD WIDTH="57%">baris 2, kolom 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Table
COLSPAN dan ROWSPAN
Atribut COLSPAN
digunakan untuk menghubungkan beberapa kolom menjadi satu kolom. Sedangkan ROWSPAN digunakan untuk menggabungkan
beberapa baris menjadi satu.
Contoh:
<HTML>
<HEAD>
<TITLE>Tabel dengan ROWSPAN dan
COLSPAN</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="3" CELLPADDING="5" CELLSPACING="5" WIDTH="85%">
<TR>
<TD WIDTH="43%" ROWSPAN="2">baris 1, kolom 1<P>baris 2, kolom 1</TD>
<TD WIDTH="57%">baris 1, kolom 2</TD>
</TR>
<TR>
<TD WIDTH="57%">baris 2, kolom 2</TD>
</TR>
<TR>
<TD WIDTH="100%" COLSPAN="2">baris 3, kolom 1<P>baris 3, kolom 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Table
COLOR
Anda bisa memberi warna pada tabel. Selain warna latar
belakang, border tabel bisa juga ditentukan warnanya. Untuk latar belakang
digunakan atribut BGCOLOR,
sedangkan untuk memberi warna pada border gunakan atribut BORDERCOLOR.
Contoh:
<HTML>
<HEAD>
<TITLE>Tabel dengan ROWSPAN dan COLSPAN</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="3" CELLPADDING="3" CELLSPACING="5" WIDTH="100%" BORDERCOLOR="#FF0000">
<TR>
<TD WIDTH="50%" BGCOLOR="#808080"> </TD>
<TD WIDTH="50%"> </TD>
</TR>
<TR>
<TD WIDTH="50%"> </TD>
<TD WIDTH="50%" BGCOLOR="#008080"> </TD>
</TR>
</TABLE>
<TABLE BORDER="3" CELLPADDING="3" CELLSPACING="5" WIDTH="100%" BORDERCOLORLIGHT="#008080"
BORDERCOLORDARK="#800080">
<TR>
<TD WIDTH="100%"> </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Element Html lainnya:
ELEMEN DASAR
|
|
Jenis Dokumen
|
<HTML></HTML>
|
(terdapat pada awal dan akhir dari file HTML)
|
|
Judul
|
<TITLE></TITLE>
|
(harus selalu terdapat pada mukadimah)
|
|
Mukadimah (Header)
|
<HEAD></HEAD>
|
(keterangan umum, seperti judul dsb.)
|
|
Batang Tubuh
|
<BODY></BODY>
|
(isi dari halaman HTML)
|
|
|
1
|
Kepala
|
<H?></H?>
|
(Heading - spesifikasi untuk menetapkan 6 tingkatan
kepala)
|
2
|
Penataan (Align) Kepala
|
<H? ALIGN=LEFT|CENTER|RIGHT></H?>
|
|
3
|
Bagian (Division)
|
<DIV></DIV>
|
|
4
|
Penataan Bagian
|
<DIV ALIGN=LEFT|RIGHT|CENTER></DIV>
|
|
5
|
Kutipan Blok (Block Quote)
|
<BLOCKQUOTE></BLOCKQUOTE>
|
(tampilan dengan jeda terhadap batas pinggir)
|
6
|
Penekanan (Emphasis)
|
<EM></EM>
|
(umumnya huruf miring)
|
7
|
Penguatan (Strong Emphasis)
|
<STRONG></STRONG>
|
(umumnya huruf tebal)
|
8
|
Kutipan singkat (Citation)
|
<CITE></CITE>
|
(umumnya huruf miring)
|
9
|
Kode
|
<CODE></CODE>
|
(Code - untuk source code listings)
|
10
|
Contoh Keluaran
|
<SAMP></SAMP>
|
(Sample Output)
|
11
|
Masukan Papan Ketik
|
<KBD></KBD>
|
(Keyboard Input)
|
12
|
Variabel
|
<VAR></VAR>
|
(Variable)
|
13
|
Definisi
|
<DFN></DFN>
|
(Definition - jarang dipakai)
|
14
|
Alamat Pengarang (Author's Address)
|
<ADDRESS></ADDRESS>
|
|
15
|
Huruf ukuran Besar
|
<BIG></BIG>
|
|
16
|
Huruf Ukuran Kecil
|
<SMALL></SMALL>
|
|
|
|
1
|
Huruf Tebal
|
<B> </B>
|
(Bold)
|
2
|
Huruf Miring
|
<I></I>
|
(Italic)
|
3
|
Garis Bawah
|
<U></U>
|
(Underline - jarang digunakan)
|
4
|
Huruf Coret
|
<STRIKE></STRIKE>
|
(Strikeout - jarang digunakan)
|
5
|
Huruf Coret
|
<S></S>
|
(Strikeout - jarang digunakan)
|
6
|
Huruf Geser Bawah
|
<SUB></SUB>
|
(Subscript)
|
7
|
Huruf Geser Atas
|
<SUP></SUP>
|
(Superscript)
|
8
|
Huruf Mesin Ketik
|
<TT></TT>
|
(Typewriter - huruf berjarak tetap)
|
9
|
Pra-format (Preformatted)
|
<PRE></PRE>
|
(menampilkan dengan jarak pra-format)
|
10
|
Jarak Huruf
|
<PRE WIDTH=?></PRE>
|
(mengatur jarak huruf)
|
11
|
Rata Tengah
|
<CENTER></CENTER>
|
(Center - berlaku untuk teks maupun gambar)
|
12
|
Huruf Kedip
|
<BLINK></BLINK>
|
(Blinking - tag terlucu sampai kini)
|
13
|
Ukuran Huruf
|
<FONT SIZE=?></FONT>
|
(Font Size - boleh diisi dari 1 sampai 7)
|
14
|
Rubah Ukuran Huruf
|
<FONT SIZE="+|-?"></FONT>
|
|
15
|
Basis Ukuran Huruf
|
<BASEFONT SIZE=?>
|
(boleh diisi 1 sampai 7; ukuran standard/default=3)
|
16
|
Warna Huruf
|
<FONT COLOR="#$$$$$$"></FONT>
|
|
17
|
Pilih Jenis Huruf
|
<FONT FACE="***"></FONT>
|
|
18
|
Teks Multi Kolom
|
<MULTICOL COLS=?></MULTICOL>
|
|
19
|
Jarak Batas Kolom
|
<MULTICOL GUTTER=?></MULTICOL>
|
(default = 10 pixels)
|
20
|
Lebar Kolom
|
<MULTICOL WIDTH=?></MULTICOL>
|
|
21
|
Celah (Spacer)
|
<SPACER>
|
|
22
|
Jenis Celah
|
<SPACER TYPE=horizontal| vertical|block>
|
|
23
|
Ukuran Celah
|
<SPACER SIZE=?>
|
|
24
|
Dimensi Celah
|
<SPACER WIDTH=? HEIGHT=?>
|
|
25
|
Penataan Celah
|
<SPACER ALIGN=left|right|center>
|
|
|
|
1
|
Acuan pada dokumen tertentu
|
<A HREF="URL"></A>
|
|
2
|
Acuan pada sasaran dalam dokumen
|
<A HREF="URL#***"></A>
|
(bila terdapat pada dokumen lain)
|
<A HREF="#***"></A>
|
(bila terdapat pada dokumen yang sama)
|
3
|
Jendela Sasaran (Target Window)
|
<A HREF="URL" TARGET="***|
|_blank|_self|_parent|_top"></A>
|
|
4
|
Penamaan sasaran pada dokumen
|
<A NAME="***"></A>
|
|
5
|
Kaitan(Relationship)
|
<A REL="***"></A>
|
(jarang digunakan)
|
6
|
Kaitan terbalik (Reverse Relationship)
|
<A REV="***"></A>
|
(jarang digunakan)
|
7
|
Peragaan Gambar
|
<IMG SRC="URL">
|
|
8
|
Penataan Letak Gambar
|
<IMG SRC="URL"
ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>
|
|
9
|
Penataan Letak Gambar
|
<IMG SRC="URL" ALIGN=TEXTTOP|
ABSMIDDLE|BASELINE|ABSBOTTOM>
|
|
10
|
Alternatif Teks
|
<IMG SRC="URL" ALT="***">
|
(saat gambar belum/tidak ditampilkan)
|
11
|
Daerah Gambar (Imagemap)
|
<IMG SRC="URL" ISMAP>
|
(membutuhkan program script)
|
12
|
Daerah Gambar pihak klien
|
<IMG SRC="URL" USEMAP="URL">
|
|
13
|
Uraian Daerah Gambar
|
<MAP NAME="***"></MAP>
|
|
14
|
Pembagian Daerah Gambar
|
<AREA SHAPE="RECT" COORDS=",,,"
HREF="URL"|NOHREF>
|
|
15
|
Dimensi Gambar
|
<IMG SRC="URL" WIDTH=? HEIGHT=?>
|
(in pixels)
|
16
|
Garis Batas
|
<IMG SRC="URL" BORDER=?>
|
(dalam satuan pixel)
|
17
|
Ruang Pembatas
|
<IMG SRC="URL" HSPACE=? VSPACE=?>
|
(dalam satuan pixel)
|
18
|
Gambar Low-Res Proxy
|
<IMG SRC="URL" LOWSRC="URL">
|
|
19
|
Pemindahan Tarik
|
<META HTTP-EQUIV="Refresh" CONTENT="?;
URL=URL">
|
(Client Pull)
|
20
|
Objek Cantum
|
<EMBED SRC="URL">
|
(Embed Object - mencantumkan objek pada dokumen)
|
21
|
Ukuran Objek
|
<EMBED SRC="URL" WIDTH=? HEIGHT=?>
|
|
|
|
1
|
Paragraf
|
<P></P>
|
(tag penutup seringkali tak diperlukan)
|
2
|
Align Text
|
<P ALIGN=LEFT|CENTER|RIGHT></P>
|
|
3
|
Pndah Baris
|
<BR>
|
(pindah ke baris berikut)
|
4
|
Putus Penataan Baris
|
<BR CLEAR=LEFT|RIGHT|ALL>
|
(Clear Textwrap)
|
5
|
Garis Datar
|
<HR>
|
(Horizontal Rule)
|
6
|
Penataan Letak Garis
|
<HR ALIGN=LEFT|RIGHT|CENTER>
|
|
7
|
Tebal Garis
|
<HR SIZE=?>
|
(dalam satuan pixel)
|
8
|
Lebar Garis
|
<HR WIDTH=?>
|
(dalam satuan pixel)
|
9
|
Lebar Garis Persentasi
|
<HR WIDTH="%">
|
(dalam persentasi terhadap lebar halaman)
|
10
|
Garis Pejal
|
<HR NOSHADE>
|
(Solid Line - tanpa pola 3D)
|
11
|
Tanpa Ganti Baris
|
<NOBR></NOBR>
|
(No Break - mencegah ganti baris)
|
12
|
Sambung Suku Kata
|
<WBR>
|
(Word Break - letak ganti baris bila diperlukan)
|
|
|
|
1
|
Daftar Tanpa Nomor
|
<UL><LI></UL>
|
(Unordered List - Cantumkan <LI> sebelum tiap butir)
|
|
2
|
Kompak
|
<UL COMPACT></UL>
|
(Compact)
|
|
3
|
Jenis Butiran
|
<UL TYPE=DISC|CIRCLE|SQUARE>
|
(Bullet Type - berlaku umum bagi butir terdaftar)
|
|
<LI TYPE=DISC|CIRCLE|SQUARE>
|
(berlaku khusus pada butir ini dan selanjutnya)
|
|
4
|
Daftar Bernomor
|
<OL><LI></OL>
|
(Ordered List - Cantumkan <LI> sebelum tiap butir)
|
|
5
|
Kompak
|
<OL COMPACT></OL>
|
|
|
6
|
Jenis Penomoran
|
<OL TYPE=A|a|I|i|1>
|
(berlaku umum untuk semua butir dalam daftar)
|
|
<LI TYPE=A|a|I|i|1>
|
(berlaku khusus pada butir ini dan selanjutnya)
|
|
7
|
Nomor Mulai
|
<OL START=?>
|
(berlaku umum untuk semua butir dalam daftar)
|
|
<LI VALUE=?>
|
(berlaku khusus pada butir ini dan selanjutnya)
|
|
8
|
Daftar Definisi
|
<DL><DT><DD></DL>
|
(Definition List - <DT>=istilah, <DD>=uraian)
|
|
9
|
Kompak
|
<DL COMPACT></DL>
|
|
|
10
|
Daftar Menu
|
<MENU><LI></MENU>
|
(Cantumkan <LI> sebelum butir menu)
|
|
11
|
Kompak
|
<MENU COMPACT></MENU>
|
|
|
12
|
Daftar Direktori
|
<DIR><LI></DIR>
|
(Cantumkan <LI> sebelum tiap butir direktori)
|
|
13
|
Kompak
|
<DIR COMPACT></DIR>
|
|
|
|
|
1
|
Latar Belakang Gambar
|
<BODY BACKGROUND="URL">
|
(Tiled Background)
|
2
|
Warna Latar Belakang
|
<BODY BGCOLOR="#$$$$$$">
|
(Background Color - urutan: merah/hijau/biru)
|
3
|
Warna Huruf Teks
|
<BODY TEXT="#$$$$$$">
|
|
4
|
Warna Acuan
|
<BODY LINK="#$$$$$$">
|
|
5
|
Acuan Lepas Kunjung
|
<BODY VLINK="#$$$$$$">
|
(Visited Link)
|
6
|
Acuan Aktif
|
<BODY ALINK="#$$$$$$">
|
(Active Link)
|
HURUF SPESIAL(these must all be
in lower case)
|
1
|
Special Character
|
&#?;
|
(where ? is the ISO 8859-1 code)
|
2
|
<
|
<
|
|
3
|
>
|
>
|
|
4
|
&
|
&
|
|
5
|
"
|
"
|
|
6
|
Registered TM
|
®
|
|
7
|
Copyright
|
©
|
|
8
|
Spasi tak putus
|
|
Non-breaking Space
|
FORMULIR
|
1
|
Rancangan Formulir
|
<FORM ACTION="URL"
METHOD=GET|POST></FORM>
|
Define Forms
|
2
|
Mengirimkan File
|
<FORM
ENCTYPE="multipart/form-data"></FORM>
|
File Upload
|
3
|
Input Field
|
<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|
IMAGE|HIDDEN|SUBMIT|RESET">
|
|
4
|
Nama Field
|
<INPUT NAME="***">
|
|
5
|
Nilai Field
|
<INPUT VALUE="***">
|
|
6
|
Kotak Periksa
|
<INPUT CHECKED>
|
(checkboxes dan radio boxes)
|
7
|
Ukuran Field
|
<INPUT SIZE=?>
|
(dalam satuan jumlah karakter)
|
8
|
Panjang Maksimum
|
<INPUT MAXLENGTH=?>
|
(dalam satuan karakter)
|
9
|
Daftar Pilihan
|
<SELECT></SELECT>
|
Selection List
|
10
|
Nama Daftar Pilihan
|
<SELECT NAME="***"></SELECT>
|
|
11
|
Jumlah Pilihan
|
<SELECT SIZE=?></SELECT>
|
|
12
|
Banyak Pilihan
|
<SELECT MULTIPLE>
|
(dapat memilih lebih dari satu)
|
13
|
Pilihan
|
<OPTION>
|
(butir yang dapat dipilih)
|
14
|
Pilihan Default
|
<OPTION SELECTED>
|
|
15
|
Ukuran Input Box
|
<TEXTAREA ROWS=? COLS=?></TEXTAREA>
|
|
16
|
Nama Input Box
|
<TEXTAREA NAME="***"></TEXTAREA>
|
|
17
|
Rangkuman Teks
|
<TEXTAREA
WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>
|
Wrap Text
|
|
|
|
|
|
|
|
1
|
Rancangan Tabel
|
<TABLE></TABLE>
|
|
2
|
Garis Batas Tabel
|
<TABLE BORDER=?></TABLE>
|
|
3
|
Celah Sel
|
<TABLE CELLSPACING=?>
|
Cell Spacing
|
4
|
Penyangga Sel
|
<TABLE CELLPADDING=?>
|
Cell Padding
|
5
|
Lebar Tabel
|
<TABLE WIDTH=?>
|
(dalam satuan pixel)
|
6
|
Lebar Tabel Persentasi
|
<TABLE WIDTH="%">
|
(dalam satuan persen terhadap lebar halaman)
|
7
|
Baris dalam Tabel
|
<TR></TR>
|
|
8
|
Penataan Letak Baris
|
<TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
|
|
9
|
Sel dalam Tabel
|
<TD></TD>
|
(harus ada dalam setiap baris tabel)
|
10
|
Penataan Letak Sel
|
<TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
|
|
11
|
Tanpa Ganti Baris
|
<TD NOWRAP>
|
|
12
|
Rentang Kolom
|
<TD COLSPAN=?>
|
Columns to span
|
13
|
Rentang Baris
|
<TD ROWSPAN=?>
|
Rows to span
|
14
|
Lebar Sel
|
<TD WIDTH=?>
|
(dalam satuan pixel)
|
15
|
Lebar Sel Persentasi
|
<TD WIDTH="%">
|
(dalam satuan persen terhadap lebar tabel)
|
16
|
Warna Sel
|
<TD BGCOLOR="#$$$$$$">
|
|
17
|
Kepala Tabel
|
<TH></TH>
|
(Table Header - seperti data dengan Bold dan Center)
|
18
|
Penataan Letak Kepala Tabel
|
<TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
|
|
19
|
Tanpa Baris Baru
|
<TH NOWRAP>
|
|
20
|
Rentang Kolom
|
<TH COLSPAN=?>
|
Columns to Span
|
21
|
Rentang Baris
|
<TH ROWSPAN=?>
|
Rows to Span
|
22
|
Lebar Kepala Tabel
|
<TH WIDTH=?>
|
(dalam satuan pixel)
|
23
|
Lebar Persentasi
|
<TH WIDTH="%">
|
(dalam persentasi terhadap lebar tabel)
|
24
|
Warna Kepala Tabel
|
<TH BGCOLOR="#$$$$$$">
|
|
25
|
Keterangan Tabel
|
<CAPTION></CAPTION>
|
Caption
|
26
|
Penataan Keterangan
|
<CAPTION ALIGN=TOP|BOTTOM>
|
(di atas / di bawah tabel)
|
|
|
1
|
Dokumen dalam Frame
|
<FRAMESET></FRAMESET>
|
(sebagai pengganti <BODY>)
|
2
|
Tinggi Baris Frame
|
<FRAMESET ROWS=,,,></FRAMESET>
|
(dalam satuan pixel atau %)
|
3
|
Tinggi Baris Frame
|
<FRAMESET ROWS=*></FRAMESET>
|
(* = ukuran relatif)
|
4
|
Lebar Kolom Frame
|
<FRAMESET COLS=,,,></FRAMESET>
|
(dalam satuan pixel atau %)
|
5
|
Lebar Kolom Frame
|
<FRAMESET COLS=*></FRAMESET>
|
(* = ukuran relatif)
|
6
|
Lebar Garis Batas
|
<FRAMESET BORDER=?>
|
|
7
|
Garis Batas
|
<FRAMESET FRAMEBORDER="yes|no">
|
|
8
|
Warna Garis Batas
|
<FRAMESET BORDERCOLOR="#$$$$$$">
|
|
9
|
Rancangan Frame
|
<FRAME>
|
(isi dari frame individu)
|
10
|
Tampilan Dokumen Frame
|
<FRAME SRC="URL">
|
|
11
|
Nama Frame
|
<FRAME NAME="***"|_blank|_self|
_parent|_top>
|
|
12
|
Lebar Batas
|
<FRAME MARGINWIDTH=?>
|
(batas kiri dan kanan)
|
13
|
Tinggi Batas
|
<FRAME MARGINHEIGHT=?>
|
(batas atas dan bawah)
|
14
|
Scrollbar?
|
<FRAME SCROLLING="YES|NO|AUTO">
|
Memungkinkan scrolling pada frame
|
15
|
Ukuran Frame tak bisa diubah
|
<FRAME NORESIZE>
|
|
16
|
Batas Frame
|
<FRAME FRAMEBORDER="yes|no">
|
|
17
|
Warna Garis Batas
|
<FRAME BORDERCOLOR="#$$$$$$">
|
|
18
|
Isi tanpa Frame
|
<NOFRAMES></NOFRAMES>
|
(bagi browser yang tak mampu frame)
|
|
|
1
|
Applet
|
<APPLET></APPLET>
|
|
2
|
Nama File Applet
|
<APPLET CODE="***">
|
|
3
|
Parameter Applet
|
<APPLET PARAM NAME="***">
|
|
4
|
Sumber Applet
|
<APPLET CODEBASE="URL">
|
|
5
|
Identifier Applet
|
<APPLET NAME="***">
|
(sebagai rujukan di tempat lain pada halaman sama)
|
6
|
Teks Alternatif
|
<APPLET ALT="***">
|
(untuk browser tanpa kemampuan Java browsers)
|
7
|
Penataan Applet
|
<APPLET ALIGN="LEFT|RIGHT|CENTER">
|
|
8
|
Ukuran Applet
|
<APPLET WIDTH=? HEIGHT=?>
|
(in pixels)
|
9
|
Celah batas Applet
|
<APPLET HSPACE=? VSPACE=?>
|
(in pixels)
|
|
|
1
|
Komentar
|
<!-- *** -->
|
(tidak ditampilkan oleh browser)
|
2
|
Prolog HTML 3.2
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
3.2//EN">
|
|
3
|
Mampu Cari
|
<ISINDEX>
|
(indikasi indeks yang dapat dicari-temukan)
|
4
|
Prompt
|
<ISINDEX PROMPT="***">
|
(teks sebagai prompt)
|
5
|
Perintah Cari
|
<A HREF="URL?***"></a>
|
(gunakan tanda tanya yang sebenarnya)
|
6
|
URL dari file ini
|
<BASE HREF="URL">
|
(harus terletak di header)
|
7
|
Nama Dasar Window
|
<BASE TARGET="***">
|
(harus terletak di header)
|
8
|
Kaitan
|
<LINK REV="***" REL="***"
HREF="URL">
|
(Relation dan Reverse Relation, harus terletak di header)
|
9
|
Informasi Meta
|
<META>
|
(harus terletak di header)
|
10
|
Lembar Gaya Penulisan
|
<STYLE></STYLE>
|
(Style Sheet - belum didukung sepenuhnya)
|
11
|
Scripts
|
<SCRIPT></SCRIPT>
|
(belum didukung sepenuhnya)
|
