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….
0 komentar:
Posting Komentar