Pengenalan
html
Pada masa
sekarang ini HTML merupakan interface
standard internet. Halaman-halaman HTML ini bisa mengandung animasi, suara,
video, bahkan sampai program interaktif yang kompleks. Jutaan halaman HTML
setiap hari diakses dari web-web server seluruh dunia.
Sudah
menjadi tren memang sekarang ini perusahaan-perusahaan melakukan pertukaran
informasi bisnis dan informasi intern pegawai dan pelanggan-pelanggan mereka.
HTML sekarang menjadi pilihan untuk presentasi. Bahkan Microsoft sendiri telah
mengintegrasikan HTML ke sistem operasi Windowsnya. Pendeknya HTML
terdapat di mana-mana.
HTML adalah
bahasa pemrograman dasar yang digunakan untuk membangun sebuah situs. HTML
sangat mudah digunakan dan diaplikasikan, oleh karena itu apabila ingin belajar
membangun sebuah situs sendiri maka bahasa HTML wajib dipelajari.
1.
Pengertian HTML
HTML merupakan singkatan dari Hypertext
Markup Language. HTML digunakan untuk membangun halaman web. HTML digunakan
untuk melakukan mark-up (penandaan)
terhadap sebuah dokumen teks. Tanda tersebut digunakan untukmenentukan format
atau style dari teks yang ditandai halaman web dibangun oleh kode-kode
HTML.
HTML adalah bahasa markup yang umum digunakan. Kepopuleran HTML disebakan
karena HTML ini mudah digunakan. Pembuatan dokumen web dengan HTML dapat
dilakukan dengan mudah dan cepat. Dokumen web dapat tersaji dengan cepat ke
banyak pembaca di seluruh dunia sekaligus. HTML mudah melakukan kontrol
terhadap tampilan halaman web baik berupa teks, gambar, suara, animasi maupun
video.
HTML berupa kode-kode
tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan
yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan
menggunakan web browser seperti Mozilla
Firefox atau Microsoft Internet
Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari
PDA dan program lain yang memiliki kemampuan browser.
a. Hypertext
Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.
Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.
b. Markup
Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada Word Wide Web.
c. Language
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen. Pada awalnya HTML dikembangkan sebagai subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih pada format dokumen yang berorientasi pada aplikasi.
2. Fungsi HTML
Hypertext Markup Language merupakan
standar bahasa yang di gunakan untuk menampilkan dokumen web, yang bisa
dilakukan dengan HTML yaitu:
- Menentukan format suatu teks
- Membuat list tentang sekelompok hal
- Membuat link ke dokumen lain atau bagian lain dari dokumen yang sama.
- Menyisipkan citra atau gambar.
- Menampilkan informasi dalam bentuk tabel
- Menentukan format suatu teks
- Membuat list tentang sekelompok hal
- Membuat link ke dokumen lain atau bagian lain dari dokumen yang sama.
- Menyisipkan citra atau gambar.
- Menampilkan informasi dalam bentuk tabel
- Memodifikasi.Mengontrol tampilan dari web page dan contentnya.
- Mempublikasikan dokumen secara online sehingga bisa di akses
dari seluruh dunia.
- Membuat online form yang bisa di gunakan untuk menangani
pendaftaran, transaksi secara online.
- Menambahkan object-object
seperti image, audi, video dan juga java applet dalam dokumen HTML.
3. Struktur HTML
1.
Elemen
Elemen terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.Contonya untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana: <title> ini adalah tag pembuka judul dokumen HTML
Elemen terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.Contonya untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana: <title> ini adalah tag pembuka judul dokumen HTML
2. Tag
Adalah teks khusus
(markup) berupa dua karakter "<" dan ">",
sebagai contoh <body>
adalah tag dengan nama body. Tag 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. Yang merupakan tag-tag dasar dalam
HTML adalah:
a. <HTML> </HTML>
Tag <HTML> dan </HTML> digunakan untuk menandai awal dan akhir
dari suatu file HTML.
b. <TITLE> </TITLE>
Tulisan yang berada diantara tag <TITLE> dan </TITLE> akan
ditampilkan oleh browser pada bagian title yang mana merupakan title dari
jendela browser.
c. <HEAD>
</HEAD>
Berisi keterangan informasi, seperti title dan jenis dokumen, ditulis
diantara HEAD tags.
d. <BODY>
</BODY>
Bagian tag BODY menandai awal dan akhir dari badan dokumen HTML. Tag ini
memiliki sejumlah attribut dapat ditentukan.
Contoh:
<HTML>
<HEAD>
<TITLE>Halaman HTMLku yang pertama</TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF">
Hello World
</BODY>
</HTML>
3. Pengaturan Halaman HTML
1.
Menformat Tulisan Pada halaman HTML
Untuk membuat halaman web yang rapi dan menarik, tentu saja perlu melakukan
pemformatan tulisan-tulisan, baik tata cara pencetakannya, serta jenis tulisan
yang dipergunakan.
Tag – tag untuk memformat tulisan:
Tag
|
Keterangan
|
<B> </B>
|
Membuat cetak
tebal pada tulisan yang berada diantaranya.
|
<BLINK> </BLINK>
|
Menyebabkan
tulisan berada diantaranya berkedip-kedip.
|
<CITE> </CITE>
|
Digunakan
untuk menandai kutipan dari suatu
buku atau
artikel majalah. Browser khususnya menampilkan kutipan dengan cetak miring.
|
<CODE> </CODE>
|
Menandai
suatu daftar source code program. Biasanya ditampilkan oleh browser dalam
suatu monospaced font yang lebih kecil
|
<DFN> </DFN>
|
Style
untuk definisi dari suatu istilah. Browser
menampilkan
definisi dengan cetak miring.
|
<EM> </EM>
|
Text yang
berada diantara tags ini dicetak lebih lebar. Browser umumnya
menampilkan cetak
|
<FONT SIZE = #> </FONT>
|
Menentukan
ukuran font (#) yang digunakan untuk menampilkan HTML dalam tags. Default is
3; ukurannya dari 1 sampai 7.
|
<H#> </H#>
|
Tag yang menentukan tingkat
heading dengan nilai antara
1 dan 6, dengan sebagai ukuran paling besar dan 6 paling kecil
|
<I> </I>
|
Text
diantaranya ditampilkan dengan cetak miring.
|
<KBD> </KBD>
|
Keyboard
tag digunakan untuk mewakili tombol keyboard seperti Del atau Enter. Umumnya
ditampilkan oleh browser dengan suatu monospaced font yang lebih kecil.
|
<PRE> </PRE>
|
Preformatted
text adalah menampilkan tulisan tanpa format yang khusus. Tag ini bagus
digunakan bila ana ingin menangani spasi antar baris; dan juga memudahkan
anda untuk meletakan tab dalam dokumen.
|
<MARQUEE> </MARQUEE>
|
(hanya
pada Microsoft Internet Explorer 2.0/3.0). Tag ini menyebabkan tulisan yang
berada diantaranya
Atribut
untuk tulisan MARQUEE :
|
ALIGN
|
Menentukan
bahwa tulisan dalam marquee harus dirapikan di TOP, MIDDLE atau BOTTOM
darimarquee tersebut
|
BEHAVIOR
|
Setting
yang berlaku untuk atribut ini adalah SCROLL, SLIDE, dan ALTERNATE
|
SCROLL
|
Defaultnya,
dari sisi yang satu ke yang lain pada
layar
secara berulang.
|
SLIDE
|
Gulung
text melintasi layar, dan
|
ALTERNATE
|
|
BGCOLOR
|
Yang ini menentukan dari marquee
|
DIRECTION
|
Menentukan
arah ke
|
HEIGHT
|
Menentukan
tinggi marquee dalam pixel (HEIGHT = n) atau presentasi dari layar (HEIGHT=
n%).
|
WIDTH
|
Sama
dengan atribut HEIGHT, tetapi
diaplikasikan
untuk lebar marquee.
|
HSPACE
|
Menentukan
margin kiri dan kanan untuk bagianluar marquee dalam pixel.
|
LOOP
|
Menentukan
jumlah kali marquee harus berputar. Jika diabaikan, set ke -1 atau INFINITE,
dan marquee bergulung sampai user meninggalkan halaman tersebut.
|
SCROLLAMOUNT
|
Menentukan
antara geseran dari tulisan
marquee.
|
SCROLLDELAY
|
Menentukan dari tulisan marquee
|
VSPACE
|
Menentukan
margin top dan bottom untuk bagian luar dari marquee dalam pixel.
|
<SAMP> </SAMP>
|
Menampilkan
sejumlah karakter literal. Banyak
browser
menampilkan dengan monospaced font.
|
<STRIKE> </STRIKE>
|
Tulisan diantaranya di coret (Example).
|
<STRONG> </STRONG>
|
Cara lain
menggambarkan attention pada suatu bagian dari text; <STRONG>
biasanya ditampilkan dengan cetak tebal oleh browser.
|
<TT> </TT>
|
Menampilkan
bentuk typewriter style (monospaced) font.
|
<U> </U>
|
Tulisan
diantaranya ditampilkan dengan garis bawah.
|
Contoh :
<HTML>
<HEAD>
<TITLE>Heading</TITLE>
</HEAD>
<BODY >
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
</BODY>
</HTML>
Contoh : 2
<HTML>
<HEAD>
<HEAD>
<TITLE>Font <TITTLE>
</HEAD>
<BODY>
<font size=1>ukuran 1</font><br>
<font size=2> ukuran 2</font><br>
<font size=3> ukuran 3</font><br>
<font size=4> ukuran 4</font><br>
<font size=5> ukuran 5</font><br>
<font size=6> ukuran 6</font><br>
<font size=7> ukuran 7</font>
</BODY>
</HMTL>
Contoh : 3
<HTML>
<HEAD>
<HEAD>
<TITLE>Font Face<TITTLE>
</HEAD>
<BODY>
<font face=”Arial”>Arial</font><br>
<font face=”Tahoma”>Tahoma</font><br>
<font face=”Courier New”>Courier New</font><br>
</BODY>
</HTML>
Menggunakan Karakter Khusus
Berikut ini tata cara pengetikkan untuk menampilkan karakter khusus pada
halaman html:
Entitas
|
Keterangan
|
Contoh
|
©
|
Copyright
symbol
|
©
|
®
|
registered
trademark symbol
|
®
|
™
|
trademark
symbol
|
™
|
|
nonbreaking
space
|
|
<
|
less-than
symbol
|
<
|
>
|
greater-than
symbol
|
>
|
&
|
Ampersand
|
&
|
"
|
quotation
mark
|
“
|
Contoh :
2 < 3, adalah benar<br>
3 > 4, adalah salah
Hasil:
2 < 3, adalah benar
3 > 4, adalah salah
2.5.3. Mengatur Pemerataan Tulisan
Pemerataan tulisan sangat
mempengaruhi tampilan dari halaman web anda, ada kalanya tulisan tertentu perlu
ditampilkan pada tengah halaman, atau pun justified. Tag-tag HTML yang mengatur
pemerataan tulisan pada satu halaman:
a. <CENTER> </CENTER>
Tag ini akan menampilkan tulisan/gambar ditengah baris.
b. <P ALIGN=LEFT|CENTER|RIGHT> </P>
Tag paragraf digunakan untuk memulai suatu paragraf baru disertai dengan
pemerataan teks ke kiri, tengah, atau kanan dari tampilan browser untuk
paragraf bersangkutan. Suatu paragraf dapat terdiri dari teks, gambar,
hyperlink, dan element HTML lainnya.
c. <H#
ALIGN=LEFT|CENTER|RIGHT> </H#>
Ini akan merapikan tulisan ke kiri, tengah atau kanan dari tulisan yang
diberi tingkat heading
Contoh :
<center>Tulisan ini berada ditengah baris</center>
<p align=left>Tulisan ini rapat kiri</p>
<p align=center>Yang ini juga ditengah baris</p>
<p align=right>Yang ini rapat kanan</p>
Hasil:
Tulisan ini berada ditengah baris
Tulisan ini
rapat kiri
Yang ini juga ditengah baris
Yang ini rapat kanan
2.5.4. Membuat Garis Pemisah
Untuk menyisip suatu garis pemisah pada dokumen dapat digunakan <HR>.
<HR> memiliki atribut:
- NOSHADE
- SIZE
- WIDTH.
Contoh :
<HTML>
<HEAD>
<HEAD>
<TITLE>Horizontal Line<TITTLE>
</HEAD>
<BODY>
atas
<hr>
bawah
</BODY>
</HTML>
Membuat Unordered List
Agar dokumen kita mudah dibaca
dan jelas, ada bagian tertentu yang perlu ditampilkan dalam list. List yang
paling sederhana di HTML adalah unordered, atau bulleted list. Hal ini sesuai
untuk daftar item yang tidak memiliki hirarki atau urutan yang penting.
a.
<UL> </UL>
Digunakan untuk mengawali dan mengakhiri suatu Unordered List.
b. <LH> </LH>
Digunakan untuk membuat suatu heading untuk list tersebut.
c. <LI> </LI>
Digunakan untuk membuat masing-masing item list tersebut.
Contoh :
<HTML>
<HEAD>
<HEAD>
<TITLE>UL<TITTLE>
</HEAD>
<BODY>
<ul type=”disc” >
<li>urutan 1</li>
<li>urutan 2</li>
<li>urutan 3</li>
</ul>
</BODY>
</HTML>
Membuat Ordered List
Untuk membuat suatu ordered list, tag <UL> dan </UL> diganti
dengan <OL> dan </OL>.
Contoh :
<HTML>
<HEAD>
<HEAD>
<TITLE>OL<TITTLE>
</HEAD>
<BODY>
<ol type=”I” >
<li>urutan 1</li>
<li>urutan 2</li>
<li>urutan 3</li>
</ol>
</BODY>
Table dan Pengaturannya
Tabel adalah cara yang baik
untuk menampilkan informasi secara logik yang biasanya ditampilkan dalam bentuk
spreadsheet. Tabel juga digunakan untuk menampilkan record-record pada
database.
1. <TABLE>
</TABLE>
Berikut ini adalah atribut dari TABLE tag dan efeknya pada tabel.
a. BORDER
Atribut BORDER menentukan tebal dari border sewaktu ditampilkan oleh
browser. Cobalah dengan browser anda untuk mendapatkan setting yang optimal.
b. CELLSPACING
Atribut CELLSPACING mementukan jumlah spasi yang browser tempatkan diantara
tiap-tiap sel individual atau spasi antar sel dan border (jika sel berada di
sisi dari tabel). Sekali lagi, hanya dengan percobaan yang akan menghasilkan
nilai yang sesuai.
c. CELLPADDING
Atribut CELLPADDING menentukan jumlah spasi yang browser tempatkan antara
data dalam cell dan border sel.. Dalam tag tabel, ada tiga tag yang
mendefinisikan header, row, dan cels. Tag-tag tersebut adalah table header
<TH>, table row <TR>, dan table data <TD>.
d. WIDTH
Atribut WIDTH dapat diset dengan angka (ukuran dalam pixel), atau sebagai
suatu persentase lebar tampilan browser. Browser dapat menarik tabel, tetapi
tidak dapat mengkompres jika ukuran jendela browser lebih kecil dari tabel.
e. ALIGN
Dengan ALIGN, anda dapat menentukan pemerataan tabel di left, center, atau
right dari halaman.
f. BGCOLOR
Sebagaimana pada tag <BODY> , anda dapat menentukan warna latar
belakang dari tabel dengan menggunakan attribut BGCOLOR, anda dapat menggunakan
definisi warna #rrggbb atau nama warna pada Internet Explorer, (sebagai contoh, <TABLE BGCOLOR = RED).
g. BORDERCOLOR (Hanya pada Microsoft Internet Explorer 2.0/3.0)
Hal ini menyerupai attribut BGCOLOR tetapi diaplikasikan pada eksternal dan
internal border.
h. BORDERCOLORLIGHT
(hanya pada Microsoft Internet Explorer 2.0/3.0)
Setting ini adalah optional dan menentukan warna sisi terang dari garis
kiri atas tabel.
i. BORDERCOLORDARK
(hanya pada Microsoft Internet Explorer 2.0/3.0)
Setting ini adalah berlawanan dengan BorderColorLight
2. <TR> </TR>
Elemen table row menandai awal
dari tiap baris pada tabel. Atribut yang sah dari tabel row adalah ALIGN,
VALIGN, BGCOLOR, BGCOLORDARK, dan BGCOLORLIGHT.
3. <TH> </TH>
Elemen table header berfungsi
sama seperti elemen table data <TD>, tetapi elemen table header
ditampilkan dalam suatu font cetak tebal. Artibut yang sah untuk elemen table
header adalah ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, BGCOLOR, BGCOLORDARK,
dan BGCOLORLIGHT.
BGCOLORLIGHT
4. <TD> </TD>
Elemen table data menandai
awal dan akhir dari tiap sel didalam tabel. Atribut yang sah untuk elemen table
data :
a. COLSPAN
Atribut ini menentukan jumlah kolom yang akan ditarik oleh sel; sebagai
contoh, jika COLSPAN di set ke 2, yang mana sel dengan span dua kolom normal
dalam tabel
b. ROWSPAN
Atribut ini menentukan jumlah baris yang akan ditarik oleh sel; sebagai
contoh, jika ROWSPAN di set ke 2, yang mana sel dengan span dua baris normal
dalam tabel.
c. NOWRAP
Menyisipkan atribut NOWRAP untuk menjaga tulisan dalam sel semuanya dalam
satu baris.
5. <CAPTION>
</CAPTION>
Tag CAPTION ditempatkan
diantara tag tabel, tetapi tidak diantara row, heading, atau cell tags. Tulisan
dalam CAPTION tags mendefinisikan caption untuk tabel tersebut.
Berikut ini adalah atribut sah yang CAPTION tag.
a. ALIGN
Setting atribut ALIGN attribute untuk Netscape adalah TOP dan BOTTOM;
sedangan Microsoft Internet Explorer memasukkan TOP, BOTTOM, LEFT, RIGHT, dan
CENTER.
b. VALIGN
Dengan VALIGN, anda dapat menentukan vertical alignment dari data diantara
table cells. Atribut ini di set diantara <TD> tag yang akan dirapikan.
Setting yang sah adalah TOP, MIDDLE, dan BOTTOM. Tanpa ditentukan hasil tag
tersebut adalah center. Sebagai contoh , <TD VALIGN=TOP>Top
Aligned</TD> menentukan suatu sel akan dirapikan dibagian atas row.
Contoh:
<HTML>
<HEAD>
<HEAD>
<TITLE>Tabel<TITTLE>
</HEAD>
<BODY>
<table border=1>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</BODY>
</HTML>
Menyisipkan Gambar Dalam
Halaman Web
Untuk menyisip suatu gambar
dalam halaman Web adalah dengan menggunakan tag <IMG>. Tag tersebut memiliki element sebagai berikut:
a. SRC=URL, suatu URL yang menunjuk pada sumber file gambar.
b. ALIGN, merapikan elemen yang menentukan bagaimana gambar akan dirapikan secara
relatif terhadap tulisan yang berdekatan dengan gambar. Banyak nilai yang
mungkin dan tidak akan dibahas disini.
c. ALT=text, menentukan
tulisan yang akan ditampilkan (biasanya ditempatkan diantara tanda petik) jika
browser tidak dapat menampilkan gambar untuk alasan tertentu.
d. HEIGHT=h WIDTH=w, menentukan height dan width dari image yang memungkinkan Web
browsermenentukan ukuran tempat yang tepat sebelum gambar benar-benar selesai
diterima. Hal ini tentu saja akan membantu Web browser dalam melakukan render
terhadap seluruh isi halaman sebelum gambar selesai diterima.
Contoh :
<HTML>
<HEAD>
<HEAD>
<TITLE>Gambar<TITTLE>
</HEAD>
<BODY>
<img src=”pppgkes.gif” align=”left” alt=”Logo PPPG”>
</BODY>
</HTML>
ke Dokumen atau Situs yang Lain
Dokumen HTML
adalah dokumen-dokumen hypertext. Hal ini berarti bahwa mereka dapat mengandung link ke dokumen lain.
Tag (<A> </A>) digunakan untuk membentuk suatu link ke
dokumen atau sumber yang akan dimuat ketika user melakukan klik pada link
tersebut. Tulisan dan HTML lainnya yang ada diantara link ditampilkan kepada
user sebagai suatu hotlink, biasanya dengan warna yang berbeda warna tulisan
browser normal atau diberi garis bawah.
a. HREF
HREF = "URL" menentukan URL dari resource yang akan
ditampilkan setelah user melakukan klik padanya.
Contoh :
<HTML>
<HEAD>
<HEAD>
<TITLE>Mailto<TITTLE>
</HEAD>
<BODY>
</BODY>
</HTML>
b. TITLE
Atribut ini, walaupun tidak diperlukan, memungkinkan perancang halaman
memasukkan title dari halaman tersebut.
c. URN
Menentukan suatu URN (Universal
Resource Name) untuk dokumen target.
d. NAME
Atribut NAME menentukan lokasi dalam HTML tersebut yang dapat di link dari
halaman lain. Hal ini memungkinkan dokumen lain mengacu ke lokasi tertentu
dalam suatu halaman. Nama acuan dari halaman tersebut. Untuk mengacu pada suatu
nama acuan, URL halaman ditentukan, diikuti dengan suatu #. Sebagai contoh,
<a name="Copyright"> mendefinisikan nama link Copyright dalam
dokumen tersebut.
2.5.10. Form dan Pengaturannya
Diawali dan diakhir dengan tag
<FORM> dan </FORM>, field-field yang berada
diantaranya digunakan untuk menentukan ukuran dan jenis dari masing-masing
input field. Walaupun dapat memiliki banyak form dalam satu halaman, tetapi
tidak dapat melakukan form dalam form.
Atribut dari elemen form adalah sebagai berikut:
a. ACTION
URL yang menentukan resource yang
akan dilakukan oleh action pada form
data, dan memberi respon pada user.
b. METHOD
Ini dapat berupa default GET atau POST. Menggunakan GET, query ditambahkan
ke URL; menggunakan POST, data dikirim melalui suatu transaksi post pada
melalui HTTP. Untuk data yang membutuhkan keamanan anda diajurkan untuk
menggunakan metode POST.
2.5.11. Frame pada Netscape
2.x/Microsoft Internet Explorer 3.x
Dengan Netscape 2.0 keatas,
browser mampu menampilkan frame yang menggandung kode HTML yang berbeda.
Berikut ini akan dijelaskan fungsi masing-masing tag:
1.
<FRAMESET>
</FRAMESET>
Elemen FRAMESET adalah
kontainer group elemen dari frame. Ada dua atribut yaitu ROWS dan COLS.
- ROWS
Tag ROWS menentukan jumlah spasi yang diberikan pada tiap baris. Jumlah
tersebut dapat ditentukan dalam pixel, persen dengan menempatkan suatu %
setelah nilai, atau nilai relatif dengan menempatkan (*) pada tempat dari
nilai.
- COLS
Syntax dari atribut COLS
adalah sama dengan atribut ROWS.
2.
<FRAME>
Elemen FRAME menentukan
properti dari setiap frame masing-masing dalam frameset. Karena tidak
mengandung text, tidak ada pasangan end-tag. Atribut dari FRAME adalah sebagai
berikut:
- NAME
Atribut NAME digunakan untuk menentukan mana pada frame, sehingga dapat
berlaku sebagai target dari URLs lain.
- MARGINWIDTH
Ini memungkinkan perancang halaman untuk menentukan lebar dari border frame
dalam jumlah pixel.
- MARGINHEIGHT
Ini bekerja seperti MARGINWIDTH tetapi berefek pada tinggi dari margin.
- SCROLLING
Setting yang sah untuk atribut SCROLLING attribute adalah YES, NO, dan
AUTO. Jika di set ke YES, suatu scrollbar ditampilkan pada frame; NO tidak ada
scrollbar, dan AUTO menampilkan scrollbar jika besar
dokumen melebihi ukuran frame.
- NORESIZE
Atribut ini mencegah user untuk melakukan drag untuk mengubah ukuran dari
frame. Defaultnya adalah memungkin user untuk mengubah ukuran dari frame.
3.
<NOFRAMES>
</NOFRAMES>
Data diantara NOFRAMES tags
akan diabaikan oleh browser yang mampu menampilkan frame, dan di tampilkan oleh
browser yang tidak mampu menampilkan frame.
2.5.12. Elemen-Elemen dalam Suatu Form
1. INPUT
Elemen INPUT menentukan
informasi dari user interface. Berikut ini adalah atribut untuk INPUT tag :
a. CHECKED
Untuk checkboxes dan radio button, atribut ini dapat di set ke TRUE (checked) atau FALSE (unchecked).
b. MAXLENGTH
MAXLENGTH menentukan jumlah
maximum karakter yang mana dapat dimasukkan dalam suatu textbox.
c. NAME
Menentukan nama dari form control. Hal ini digunakan untuk menentukan
elemen data pada form ke resource yang memproses elemen ini.
d. SIZE
Menentukan ukuran dari form control. Ini dapat berupa nilai tunggal yang
menentukan lebar control dalam karakter, atau dalam width/height pair.
e. SRC
Ini menentukan image yang akan
ditampilkan dengan kontrol.
f. TYPE
Ini akan menentukan jenis control yang akan digunakan.
Berikut ini daftar dari
kontrol yang ada:
- CHECKBOX
Kontrol sederhana TRUE/FALSE, yang mana kalau di check adalah TRUE, dan
kosong menyatakan FALSE.
- HIDDEN
Kontrol ini tidak ditampilkan oleh viewer dari halaman. Kontrol ini dapat
digunakan untuk mengirim status informasi kembali ke program form-processing.
- IMAGE
Klik pada akan menyebabkan form data dikirim seketika, dan nilainya
lewatkan oleh image dalam x,y kordinat pixel.
- PASSWORD
Fungsi ini seperti textbox, tetapi tulisan yang anda ketik ditampilkan
dengan asteriks sebagai penggantinya.
- RADIO
Fungsi ini menyerupai CHECKBOX control, tetapi hanya satu option button
dari group yang dapat dipilih setiap saat. Pilih Ya atau Tidak
Contoh:
<HTML>
<HEAD>
<HEAD>
<TITLE>Input radio<TITTLE>
</HEAD>
<BODY>
<form>
Jenis Kelamin<br>
Pria:<input type=”radio” jenis_kelamin” value=”Pria”>
Wanita:<input type=”radio” jenis_kelamin” value=”Wanita”>
</form>
</BODY>
</HTML>
- RESET
Ketika tombol di klik, form data dikembalikan ke keadaan awal sesuai dengan
nilai initial masing-masing.
Contoh:
<HTML>
<HEAD>
<HEAD>
<TITLE>Reset<TITTLE>
</HEAD>
<BODY>
<form>
<input type=”reset”>
</form>
</BODY>
</HTML>
- SUBMIT
Klik pada tombol akan mengirim form data ke FORM ACTION URL.
- TEXT
Kontrol ini digunakan untuk menggumpulkan satu baris tunggal dari tulisan.
Atribut SIZE dan MAXLENGTH dapat ditentukan untuk membatasi pengetikkan.
- TEXTAREA
Kontrol ini
digunakan untuk mengetikkan banyak baris.
2.
SELECT
Tag SELECT menandai awal dan
akhir dari data dalam suatu listbox atau suatu drop-down selection list. Berikut ini adalah atribut untuk elemen
SELECT:
a. MULTIPLE
Atribut multiple memungkinkan user memilih lebih dari satu item dari
listbox. User menekan tombol CTRL dan clicks pada item-item berbeda untuk
memilih lebih dari satu.
b. NAME
Ini menentukan nama dari SELECT elemen.
c. SIZE
Ini menentukan tinggi dari list
control.
3.
OPTION
Elemen OPTION membentuk masing-masing pilihan dalam textbox atau listbox.
Berikut ini atribut dari elemen OPTION :
a. SELECTED
Atribut ini menentukan nilai default dari text pada listbox.
b. VALUE
Ini mengembalikan nilai dari elemen yang terpilih.
Tidak ada komentar:
Posting Komentar