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 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).
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>
<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>
<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>
<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>
<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
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
<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>
<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>
<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>
<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>
<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
Lebar tabel biasanya diatur 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>
Tabel Element Html :
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)
|
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)
|
LKS
SISWA :
Soal Latiahan 1
Essay :
Jawablah dengan benar
pertanyaan dibawah ini :
1.
Apa kepanjangan HTML dan apa kegunaannya.
2.
Siapa yang membuat script HTML.
3.
Tuliskan struktur dasar dari HTML.
4.
Apa fungsi dari tag <Title>.
5.
Apa fungsi dari tag <body>.
6.
Apa yang dimaksud dengan Tag
7.
Ada berapa jenis tag dalam html sebutkan dan
jelaskan.
8.
Bagaimana menuliskan perintah mengganti huruf
yang akan ditampilkan dengan huruf “arial Black”
9.
Bagaimana menambahkan warna huruf pada tulisan
yang ditampilkan.
10.
Bagaimana manambahkan efek berkedip pada
text.
Soal Latihan 2
1.
<body text="v"
bgcolor="w" background="uri" link="x"
alink="y" vlink="z">
</body>
Coba
jelaskan bagian-bagian yang terdapat dalam perintah diatas
ü
text :
ü
bgcolor
:
ü
background
:
ü
link :
ü
alink :
ü
vlink :
2.
Apa yang dimaksud dengan Atribute pada script
html.
3.
Coba tuliskan elemen dari
ü Html
ü Body
ü Title
ü Head
4.
Apa perbedaan perintah <br> dan
<p>
5.
Apa fungsi dari perintah <strong>
6.
Apa perintah yang digunakan untuk membuat
efek huru tebal miring dan di garisbawahi.
7.
<small> perintah ini digunakan untuk...
8.
<s> isi Tulisan</s> perintah ini
digunakan untuk membuat huruf…
9. <pre>isi
tulisan</pre> digunakan untuk ….
10. <center>isi
tulisan</center> digunakan untuk….
Tidak ada komentar:
Posting Komentar