HTML = Hyper Text Markup Language
Dokumen HTML (web pages) merupakan file teks murni yang dapat dibuat dengan sembarang editor teks.
Penamaan Dokumen
Nama : sembarang
Ekstensi : ".htm" atau ".html"
Elemen, Tag, Attribut
Dokumen HTML disusun oleh elemen-elemen, contoh : head, body, paragraf, table, list, dsb.
Penandaan berbagai elemen dalam suatu dokumen HTML menggunakan Tag (
Markup).
Format penulisan tag terdiri atas tanda "<", ">", " /" yaitu
<namatag> ………. </namatag>
Penulisan Tag umumnya berpasangan
Contoh:
<P> -> untuk mengawali suatu paragraf.
</P>-> untuk mengakhiri suatu paragraf.
Setiap tag dapat dilengkapi dengan attribut, attribut setiap tag berbeda-beda.
Format penulisan :
<namatag atr1="nilai-atr1" atr2="nilai-atr2"> …… </namatag>
Struktur file HTML
<Format HTML> =
<Blok identifikasi><Tag HTML><Blok Head><Blok Body><Tag /HTML>
<Blok identifikasi> tidak mutlak harus ada, dan kalau ada
biasanya diisi dengan informasi pembuat page dan dibuat dengan apa page
tersebut
<html>
<head>
<TITLE> …………………… </TITLE>
</head>
<body>
……………………………
……………………………
……………………………
</body>
</html>
Contoh :
<html>
<head>
<TITLE>Contoh HTML sederhana</TITLE>
</head>
<body>
<H1>HTML itu mudah dipelajari</H1>
<P>Selamat datang di dunia HTML.
Ini adalah paragraph pertama. Meskipun pendek kalimat
Ini juga bagian dari paragraph!</P>
<P>Dan ini adalah paragraph kedua.</P>
</body>
</html>
<Tag HTML> merupakan tag dasar yang mendefinisikan bahwa
doukmen ini adalah dokumen HTML. Bila dilihat dengan editor teks, tag
ini dituliskan dengan <HTML> dan terletak pada awal dokumen dan
diakhiri dengan </HTML> pada akhir dokumen.
<Blok Head> melingkupi bagian kepala dokumen HTML. Di
dalamnya berisi informasi-informasi tentang judul page, basis URL,
identifikasi indeks, link, header HTTP, dan nama pengenal. Blok ini
dimulai dengan <HEAD> dan diakhiri dengan </HEAD>
- Judul Page, ini harus disertakan pada blok head, judul page akan
ditampilkan oleh browser pada title-bar browser tersebut atau pada baris
Document Name. Tag yang digunakan adalah <TITLE>. Misalnya bila
page yang kita buat akan diberi judul "Membuat Page dengan HTML", maka
pada lingkup blok head kita tuliskan <TITLE>Membuat Page dengan HTML</TITLE>.
- BASE, Tag ini digunakan untuk menyertakan URL atau alamat induk dokumen.
Format : <BASE [TARGET] [HREF=url]>
- META, Tag ini digunakan untuk menyertakan informasi pada header HTTP.
Format : <META [HTTP-EQUIV=”refresh”] [CONTENT=”waktu”]>
<Blok Body> melingkupi semua yang ingin ditampilkan pada
page, baik itu teks, gambar, animasi/grafik, musik/suara/video, ataupun
hubungan dengan page-page lain pada WWW. Blok ini dimulai dengan
<BODY> dan diakhiri </ BODY>.
Atribut:
BACKGROUND : menggunakan file latar belakang dokumen
BGCOLOR : mengatur warna latar
LEFTMARGIN : mengatur margin kiri dokumen
TOPMARGIN : mengatur margin kiri dokumen
TEXT : mengatur warna default teks dokumen
LINK : setting warna link yang belum pernah dipilih
ALINK : setting warna link yang sedang aktif
VLINK : setting warna link yang pernah dipilih
Tag dan Kegunaannya
| <B> | huruf tebal (bold) |
| <I> | huruf miring (italics) |
| <U> | bergaris bawah (underline) |
| <STRONG> | untuk diperhatikan, biasanya huruf tebal |
| <EM> | penekanan (emphasis), biasanya huruf miring |
| <TT> | teletype, biasanya menggunakan typeface Courier, selainnya Times |
| <SAMP> | karakter literal / sample output |
| <CODE> | menampilkan kode, dengan typeface Courier, Teks merepresentasikan
Elemen HTML |
| <CITE> | Teks dalam kutipan |
| <DFN> | Teks merupakan definisi |
| <KBD> | Teks merepresentasikan tombol keyboard |
| <VAR> | Teks mendefinisikan variabel |
| <P> | membuat paragraf |
| <BR> | membuat line break (tag mandiri) |
| <PRE> | membuat teks tidak terformat, browser akan menampilkan apa adanya
seperti yang kita ketikkan pada editor dan browser akan menggunakan fixed-space font. |
| <BLOCKQUOTE> | membuat kutipan, blok akan dibuat seperti abstrak pada
artikel-artikel tetapi tidak dalam huruf miring |
| <LI> | membuat entri pada list |
| <OL> | Ordered List,membuat list terurut. Caranya adalah dengan menyisipkan
entri-entri list di dalam tag ini. Browser akan menampilkannya dengan list bernomor |
| <UL> | Unordered List, membuat list tak terurut. Caranya sama dengan <OL>,
tetapi browser menampilkannya dengan bullet, bukan dengan nomor |
| <DIR> | Directory List, membuat list tak terurut dengan masing-masing entri
tidak lebih dari 24 karakter. Caranya sama dengan <OL> |
| <MENU> | Menu List, membuat list tak terurut dengan masing-masing entry tidak
lebih dari satu baris. Caranya sama dengan <OL> |
| <DT> | term, membuat entri pada list definisi |
| <DD> | definition, definisi dari kata yang diapit tag term <DT> |
| <DL> | List of definitions. Membuat list definisi dengan entri <DT> dan <DD>
|
| <ADDRESS> | menuliskan alamat URL pads page dengan huruf miring |
| <Hx> | membuat heading, x bernilai 1 sampai 6 |
| <BLINK> | Membuat tulisan berkedip (HTML 3.0) |
| & | Menyisipkan karakter-karakter khusus misalnya tanda & digunakan &, tanda
< digunakan < dsb. |
Karakter Khusus
| Character | HTML Code |
| " | " |
| & | & |
| < | < |
| > | > |
| |
| © | © |
| « | « |
| ± | ± |
| » | » |
| ¼ | ¼ |
| ½ | ½ |
| ¾ | ¾ |
Contoh:
<HTML>
<!-HTML Yang Pertama Aku Buat-->
<HEAD> <TITLE>Contoh Page dengan HTML</TITLE></HEAD>
<BODY>
<CENTER><H1><B><I>Contoh Page</I></B></H1></CENTER>
<IMG SRC="aas.jpg" ALIGN=RIGHT>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
<P>Dibawah ini ada garis …</P><HR>
<B>Tebal</B> <I>Miring</I> <U>Garis bawah</U> <HR>
<STRONG>Perhatian !!!</STRONG> <EM>Hati-hati</EM>
<HR>
<TT>ini ada pesan dari Tuan John</TT>
<CODE>MOV AX, 100h</CODE>
<HR>
<P>Paragraf, ini adalah paragraf. Paragraf paragraf
paragraf paragraf paragraf paragraf paragraf paragraf
paragraf paragraf paragraf <B>ada BR
nya</B> <BR>paragraf paragraf
paragraf paragraf paragraf paragraf paragraf paragraf
paragraf paragraf paragraf paragraf paragraf paragraf
paragraf paragraf paragraf</P> <HR>
<H3>
<P>Perhatikan pesan Dosen:</P>
</H3>
<BLOCKQUOTE>Dalam perkuliahan selalu akan diberikan tugas
baik individu maupun kelompok, selain akan ada quiz, UTS
dan UAS.
Tugas-tugas harap diserahkan dalam disket</BLOCKQUOTE> <HR>
<H3><P>Contoh List Terurut</P></H3>
<P>Keperluan bermain bulutangkis</P>
<OL>
<LI>Lapangan</LI>
<LI>Net</LI>
<LI>Raket</LI>
<LI>Shuttlecock</LI>
</OL> <HR>
<H3><P>Contoh List Tidak Terurut</P></H3>
<P>Buah-buahan lezat & bergizi</P>
<UL>
<LI>Apel</LI>
<LI>Jeruk</LI>
<LI>Durian</LI>
<LI>Mangga</LI>
<LI>Jambu</LI>
</UL> <HR>
<H3><P>Contoh List Definisi</P></H3>
<DL>
<DT>Pesan</DT>
<DD><P>Dengar isi nasihat bukan siapa yg menasihati.
</P></DD>
<DT>BATIG</DT>
<DD><P>Belajarlah Apabila Tidak Ingin Gagal</P></DD>
<DT>HTML</DT>
<DD><P>HyperText Markup Language</P></DD>
<DT>Beriman</DT>
<DD><P>Bersih Indah dan Aman</P></DD>
</DL><HR>
<A HREF="http://www.unpad.ac.id/">Link ke Website
Universitas Padjadjaran</A><BR><HR>
© 2001 Siapa Saja
</BODY>
</HTML>
:: TEXT
Mengatur Tampilan Teks
Berikut ini adalah label-label tag yang dapat digunakan untuk mengatur tampilan teks
- Label <BR> berguna untuk berganti baris.
- Label <P> berguna untuk membuat paragraph teks dan menyisipkan satu baris kosong di antara teks.
- Label <PRE> dan </PRE> berguna untuk menampilkan
teks sesuai dengan letak aslinya, sebab tanpa label ini letak teks akan
diatur browser (teks akan otomatis berpindah baris bila teks mencapai
margin kanan.
- Label <CENTER> dan </CENTER> berguna untuk meletakan objek ditengah-tengah dokumen
Contoh dokumen Web yang menggunakan label di atas :
<HTML>
<HEAD>
<TITLE>Penebalan Label Pengatur Teks</TITLE>
</HEAD>
<BODY>D3 MIPA UNPAD<BR>
<P>Internet merupakan jaringan komputer global yang<BR>
mencakup area yang luas, anggotanya mencakup komputer
dari berbagai jenis mencakup Personal Computer,
Main Frame, Workstation dan lain-lain.</P>
<P>Sekian<BR>
</BODY>
</HTML>
- Menggunakan elemen style, pada HTML terdapat dua jenis style
yaitu style Logika dan style Fisik.Tampilan teks dengan style logika
sangat tergantung pada jenis Web browser, browser yang berbeda akan
menghasilkan efek yang berbeda pula. Tampilan teks dengan style fisik
tidak tergantung jenis Web browser karena style fisik merupakan standar
untuk perancangan browser, efek style pada tampilan teks akan sama walau
browser berbeda.
Pengaturan teks yang dapat dilakukan pada suatu dokumen HTML di
antaranya adalah
- huruf tebal/miring/garis bawah
- pembuatan headings
- penentuan typeface
- pembuatan paragraf
- pembuatan kutipan
- pembuatan daftar (list)
- penyisipan karakter khusus
Hampir semua tag untuk pengaturan teks berjenis tag lingkup / memiliki
atribut. Jadi semua kata/kalimat yang dilingkupi tag tersebut akan
mengikuti markup yang telah dirujuk. Tabel dibawah akan memberikan
ringkasan tag untuk keperluan ini beserta kegunaannya.
- tinggi (HEIGHT)
- lebar (WIDTH)
- tempat (ALIGN, VSPACE, dan HSPACE)
- bingkai (BORDER)
- judul (ALT)
Membuat Heading
Untuk membuat heading digunakan tag <H1> sampai <H6>.
Semakin kecil nilai level, maka huruf semakin besar. Untuk judul page
biasanya dibuat dengan <H1>.
Memberi Komentar
Pemberian komentar menggunakan tag khusus yaitu
<!--Ini adalah komentar-->
Menambahkan garis horisontal
Untuk menambahkan garis horisontal pada Web, kita cukup menambahkan tag berikut
<HR>
Tag ini memiliki atribut yang mengatur lebar, panjang, peletakkan, dan bayangan, yaitu:
SIZE : Menentukan tebal dari garis horisontal (dalam satuan Pixel)
WIDTH : Menentukan panjang dari garis horisontal (dalam %)
ALIGN : Menentukan letak garis (LEFT, RIGHT, atau CENTER)
NOSHADE : Mengubah wara garis menjadi hitam
Untuk membuat garis dengan tebal 10 pixel , panjang 50 % dari lebar browser, dan letaknya rata kiri, maka ditambahkan label tag
<HR SIZE=10 WIDTH=50% ALIGN= LEFT>.
Pada dokumen berikut ini akan diperlihatkan penggunaan atribut - atribut <HR>.
<HTML>
<HEAD><TITLE>Home Page D3 Komputer UNPAD</TITLE></HEAD>
<BODY>
<HR SIZE=7 WIDTH=25% ALIGN=LEFT> Manajemen Informatika
<HR SIZE=8 WIDTH=50% ALIGN=LEFT> Teknik Informatika
<HR SIZE=10> Teknik Komputer
</BODY>
</HTML>
:: LISTS
Daftar Berurut
<OL TYPE="field-type" START="n">
<LI>…………
<LI>…………
<LI>…………
</OL>
Atribut:
| Atribut | Fungsi |
| TYPE = 1 | Daftar berurut 1,2,3,... (default) |
| TYPE = I | Daftar berurut I,II,III,... |
| TYPE = i | Daftar berurut i,ii,iii,... |
| TYPE = A | Daftar berurut A,B,C,... |
| TYPE = a | Daftar berurut a,b,c,... |
| n | Nilai urutan awal |
Contoh:
<HTML>
<HEAD><TITLE>Ordered List</TITLE></HEAD>
<BODY>
Urutan Angka :
<OL>
<LI>Satu
<LI>Dua
<LI>Tiga
<LI>Empat
</OL>
</BODY>
</HTML>
Daftar Tidak Berurut
<UL TYPE="field-type">
<LI>…………
<LI>…………
<LI>…………
</OL>
Atribut:
| Atribut | Fungsi |
| TYPE = circle | Daftar bertanda lingkaran |
| TYPE = disk | Daftar bertanda cakram |
| TYPE = square | Daftar bertanda kotak |
Contoh:
<HTML>
<HEAD><TITLE>Unordered List</TITLE></HEAD>
<BODY>
Urutan Angka :
<UL>
<LI>Satu
<LI>Dua
<LI>Tiga
<LI>Empat
</UL>
</BODY>
</HTML>
:: FONTS
<font [face="nama font"] [size=ukuran] [color=warna]> ………. </font>
Ukuran Font
<font size=n> ………. </font>
n= 0..7
Jenis Font
<font face="………"> ………. </font>
contoh:
<font face="Arial"> Arial font!</font>
Warna Font
<font color=#RRGGBB> ………. </font>
#RRGGBB: kombinasi warna dalam hexa atau konstanta warna
Font Standar
<base font [face="nama font"] [size=ukuran] [color=warna]>
contoh:
<HTML>
<HEAD>
<TITLE>Penggunaan Font</TITLE>
</HEAD>
<BODY>
<FONT FACE="Arial" SIZE=1> Font Size 1</FONT><BR>
<FONT FACE="Arial" SIZE=2> Font Size 2</FONT><BR>
<FONT FACE="Arial" SIZE=3> Font Size 3</FONT><BR>
<FONT FACE="Arial" SIZE=4> Font Size 4</FONT><BR>
<FONT FACE="Arial" SIZE=5 color="#008000"> Font Size 5</FONT><BR>
<FONT FACE="Arial" SIZE=6 color="#0000FF"> Font Size 6</FONT><BR>
<FONT FACE="Arial" SIZE=7 color="#FF0000"> Font Size 7</FONT>
</BODY>
</HTML>
:: IMAGE
Menampilkan Gambar
Format Gambar Umum:
GIF, JPEG
<img src="…" [align=…][width=m][height=n][alt="komentar">
src : file(+path direktory/URL) gambar
align : posisi teks sekitar gambar (top, middle, bottom, left, right, dll)
width : lebar (pixel)
height : panjang(pixel)
alt : komentar (hint) atau sebagai teks pengganti
contoh:
<img src=”unpad.jpg” align=middle width=100 height=100 alt=”Logo UNPAD”>
Image Map
<IMG [SRC=file] [ALT=teks]
[BORDER=ukuran-bingkai] [ALIGN=…] [HEIGHT=tinggi] [HSPACE=ruang]
[ISMAP|USEMAP] [LOOP=perulangan] [LOWSRC=file] [VSPACE=ruang]
[WIDTH=lebar]>
USEMAP
<USEMAP=#nama_map><IMG …></USEMAP>
MAP
<MAP [NAME="nama"]>
<AREA SHAPE="bentuk" COORDS="koordinat" HREF="url">
</MAP>
Atribut :
SHAPE = POINTRECT/CIRCLE/POLY
:: LINKS
Link Ke Halaman Lain (relatif)
<a href=”……”> ……… </a>
contoh:
<a href=”guestbook.htm”>Buku Tamu</a>
Link Ke Bagian Halaman Sama
Target :
<a name=[”target”]></a>
Link :
<a href=[”#target”]> ……… </a>
contoh:
<a href=”#top”>Kembali ke atas</a>
Link Ke situs / dokumen lain (absolut)
contoh:
<a href=”http://www.unpad.ac.id”>Link Ke Web Site UNPAD</a>
Kirim E-mail
<a href="mailto:namaemail@host">……</a>
:: TABEL
| Table Elements |
| Elemen |
Deskripsi |
| <TABLE> ... </TABLE> |
Mendefinisikan tabel |
| <TR> ... </TR> |
Mendefinisikan baris |
| <TD> ... </TD> |
Mendefinisikan kolom |
| Beberapa Atribut Tabel <TABEL> |
| Atribut |
Description |
| BGCOLOR=#RRGGBB |
Warna Background |
| BACKGROUND (FILENAME) |
Bakground berupa gambar |
| BORDER=n |
Ketebalan border |
| BORDERCOLOR=#RRGGBB |
Warna border |
| CELLPADING=n |
Jarak teks dengan batas cell |
| CELLSPACING=n |
Jarak antar cell |
| ALIGN (LEFT, CENTER, RIGHT) |
Posisi rata teks horisontal dalam tabel |
| VALIGN (TOP, MIDDLE, BOTTOM) |
Posisi rata teks vertikal dalam cell |
| COLSPAN=n |
Merge Cell sebanyak (n) kolom |
| ROWSPAN=n |
Merge Cell sebanyak (n) baris |
| NOWRAP |
No Aktifkan Wrap Text dalam cell. |
| Beberapa Atribut kolom <TR> dan Baris <TD> |
| Atribut |
Description |
| ALIGN (LEFT, CENTER, RIGHT) |
Posisi rata teks horisontal dalam cell |
| VALIGN (TOP, MIDDLE, BOTTOM) |
Posisi rata teks vertikal dalam cell |
| COLSPAN=n |
Merge Cell sebanyak (n) kolom |
| ROWSPAN=n |
Merge Cell sebanyak (n) baris |
| NOWRAP |
No Aktifkan Wrap Text dalam cell. |
| WIDTH=n,n% |
Lebar Cell |
| HEIGHT=n,n% |
Tinggi Cell |
contoh:
<TABLE BORDER=1 BORDERCOLOR=BLACK>
<!-- deklarasi tabel -->
<TR>
<!-- deklarasi baris ke awal -->
<TD> baris awal, kolom awal </TD>
<TD> baris awal, kolom akhir </TD>
</TR>
<!-- akhir deklarasi baris awal -->
<TR>
<!-- deklarasi baris ke akhir -->
<TD> baris akhir, kolom awal </TD>
<TD> baris akhir, kolom akhir </TD>
</TR>
<!-- akhir deklarasi baris ke akhir -->
</TABLE>
<!-- akhir deklarasi tabel -->
:: FRAME
Frame merupakan elemen dalam HTML yang memungkinkan menampilkan beberapa dokumen web page dalam satu browser
<FRAMESET
[COLS=banyak_&_ukuran_kolom | ROWS=banyak_&_ukuran_baris]
[FRAMEBORDER=ukuran_bingkai] [SCROLLING=yes/no]>
<FRAME [SRC=file] [BORDERCOLOR=warna]
[FRAMEBORDER=1] [FRAMESPACING=jarak] [MARGINWIDTH=besar]
[MARGINHEIGHT=tinggi] [NAME=target] [NORESIZE] [SCROLLING=yes/no]
Contoh:
<HTML>
<frameset cols="150,*">
</frameset>
<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
</frameset>
<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
<noframes>
<body>
<p>This page uses frames, but your browser
doesn't support them.</p>
</body>
</noframes>
</frameset>
<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html" noresize>
<frame name="right-frame" src="right-frame.html" noresize>
<noframes>
<body>
<p>This page uses frames, but your browser
doesn't support them.</p>
</body>
</noframes>
</frameset>
<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html" noresize
target="right-frame">
<frame name="right-frame" src="right-frame.html" noresize>
<noframes>
<body>
<p>This page uses frames, but your browser
doesn't support them.</p>
</body>
</noframes>
</frameset>
<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html" noresize
target="right-frame">
<frame name="right-frame" src="right-frame.html" noresize
scrolling="no">
<noframes>
<body>
<p>This page uses frames, but your browser
doesn't support them.</p>
</body>
</noframes>
</frameset>
Left/Right Frames
Dokumen Utama
<html>
<head>
<title>Frames Control Web Page</title>
</head>
<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>
left-frame.html
<html>
<head>
<title>Left Frame Web Page</title>
<base target="main">
</head>
<body>
<p>This web page is the left frame</p>
</body>
</html>
right-frame.html
<html>
<head>
<title>Right Frame Web Page</title>
<base target="main">
</head>
<body>
<p>This web page is the right frame.</p>
</body>
</html>
Top/Left/Right Frames
Dokumen Utama
<html>
<head>
<title>Controller HTML Page</title>
</head>
<frameset rows="64,*">
<frame name="top-frame" scrolling="no" noresize
target="right-frame"
src="top-frame.html">
<frameset cols="150,*">
<frame name="left-frame" target="right-frame" src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
</frameset>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>
top-frame.html
<html>
<head>
<title>Top Frame</title>
<base target="right-frame">
</head>
<body>
<p>This is the Top Frame</p>
</body>
</html>
Top/Left/Right/Bottom Frames
Dokumen Utama
<html>
<head>
<title>Controller HTML File</title>
</head>
<frameset rows="64,*,64">
<frame name="top-frame" scrolling="no" noresize
target="right-frame"
src="top-frame.html">
<frameset cols="150,*">
<frame name="left-frame" target="right-frame"
src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
</frameset>
<frame name="bottom-frame" scrolling="no" noresize
target="right-frame"
src="bottom-frame.html">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>
bottom-frame.html
<html>
<head>
<title>Bottom Frame</title>
<base target="right-frame">
</head>
<body>
<p>This is the Bottom Frame</p>
</body>
</html>
:: STYLE
Memformat dokumen HTML
Style (Internal)
<STYLE>
selector {property:value}
………
</STYLE>
contoh:
<STYLE type="text/css">
h1 {color:red}
A:link {COLOR: blue; TEXT-DECORATION: none}
A:visited {COLOR: blue; TEXT-DECORATION: none}
A:hover {COLOR: red; TEXT-DECORATION: underline}
TD {FONT-SIZE: 8pt; FONT-FAMILY: Verdana, Tahoma, Arial,
Helvetica, sans-serif}
FONT.title {FONT-WEIGHT: bold; FONT-SIZE: 24pt; FONT-FAMILY:
Helvetica}
</STYLE>
CSS (Cascading Style Sheet)
<link rel="stylesheet" href="*.css" type="text/css">
contoh:
style.css
h1 {color:red}
A:link {COLOR: blue; TEXT-DECORATION: none}
A:visited {COLOR: blue; TEXT-DECORATION: none}
A:hover {COLOR: red; TEXT-DECORATION: underline}
TD {FONT-SIZE: 8pt; FONT-FAMILY: Verdana, Tahoma, Arial,
Helvetica, sans-serif}
FONT.title {FONT-WEIGHT: bold; FONT-SIZE: 24pt; FONT-FAMILY:
Helvetica}
css.html
<html>
<head>
<title>Contoh CSS</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<FONT class=title>JUDUL</FONT>
<TABLE cellSpacing=2 border="0" cellpaddin="2">
<TR><TD align=middle bgColor=#eeeeee>
<A href="#tes">Coba</A>
</TD></TR>
</TABLE> <BR>
………
………
</body>
</html>
Sebuah form dapat meliputi data entry field:
single line text entry fields
check boxes
radio boxes
hidden fields
password fields
selection lists
multi-line text entry fields
submit / reset buttons
<FORM [METHOD=”[GET | POST]” ACTION=”URL”]>
…
..
</FORM>
<INPUT TYPE="field-type" NAME="Name of field" VALUE="default value">
field-type ialah: text, checkbox, radio, hidden, or password
<SELECT NAME="list title">
<OPTION>option pertama
<OPTION>option kedua
: .....
</SELECT>
<TEXTAREA NAME="text area name" ROWS=no-of-rows COLS=no-of-columns>
// Tempat text dituliskan
</TEXTAREA>
<INPUT TYPE="submit" VALUE="text on button">
<INPUT TYPE="reset" VALUE="text on button">Bottom of Form
Contoh:
<HTML>
<HEAD>
<TITLE>BUKU TAMU</TITLE>
</HEAD>
<BODY>
<H3>
<P ALIGN="center">BUKU TAMU</P>
</H3>
<FORM METHOD="POST" ACTION="thanks.html">
<TABLE BORDER="0" CELLPADDING="2" WIDTH="100%">
<TR>
<TD WIDTH="8%">Nama</TD>
<TD WIDTH="4%">:</TD>
<TD WIDTH="88%">
<INPUT TYPE="text" NAME="nama" SIZE="20">
</TD>
</TR>
<TR>
<TD WIDTH="8%">Asal</TD>
<TD WIDTH="4%">:</TD>
<TD WIDTH="88%">
<INPUT TYPE="text" NAME="asal" SIZE="20">
</TD>
</TR>
<TR>
<TD WIDTH="8%">Email</TD>
<TD WIDTH="4%">:</TD>
<TD WIDTH="88%">
<INPUT TYPE="text" NAME="email" SIZEe="20">
</TD>
</TR>
<TR>
<TD WIDTH="8%" VALIGN="top">Homepageku</TD>
<TD WIDTH="4%" VALIGN="top">:</TD>
<TD WIDTH="88%">
<INPUT TYPE="radio" VALUE="V1" CHECKED NAME="R1">Keren man!!
<BR><INPUT TYPE="radio" VALUE="V2" NAME="R1">Canggih bo!
<BR><INPUT TYPE="radio" VALUE="V3" NAME="R1">Biasa aja tuh!
</TD>
</TR>
</TABLE>
<P><INPUT TYPE="submit" VALUE="Kirim" NAME="B1">
<INPUT TYPE="reset" VALUE="Batal"
NAME="B2"></P>
</FORM>
</BODY>
</HTML>
thanks.html
<HTML>
<HEAD>
<TITLE>Terima kasih</TITLE>
</HEAD>
<BODY>
<P>Terima kasih atas pengisian buku tamunya.</P>
</BODY>
</HTML>
|
05.03
EXOMATIK
