pemrograman berbasis web (html)

Pemrograman Berbasis WEB (HTML) 9/5/2012 1 / 29

Pemrograman Berbasis WEB (HTML)

Internet dan WWW

Media-media terdahulu dapat memberi informasi, tetapi tidak dapat

“mencarikan” informasi dan memiliki keterbatasan waktu

Internet dapat mencari hampir semua informasi yang kita butuhkan selama

24 jam dalam 365 hari setahun

Diawali di Uni Sovyet pada tahun 1957 pada saat peluncuran satelit

Sputnik, presiden Amerika Dwight D. Eisenhower membentuk sebuah

badan Advanced Research Projects Agency (ARPA) pada Departemen

Pertahanan Amerika Serikat (DoD) untuk mengantisipasi keunggulan Uni

Sovyet.

Pada tahun 1969 DoD memberi tugas kepada ARPA untuk membangun

jaringan komunikasi antara DoD dengan meliter yang disebut dengan

ARPAnet

ARPAnet pada awalnya hanya mempunyai empat situs :

Stanford Research Institute (SRI)

University of California at Santa Barbara (UCSB)

University of California at Los Angeles (UCLA)

University of Utah (U2)

WWW bukan Internet atau sebaliknya namun sangat berkaitan diantara

keduanya

Internet adalah suatu jaringan komputer global, sedangkan WWW bukan

hanya sekedar jaringan tetapi didalamnya terdapat suatu set aplikasi

komunikasi dan sistem perangkat lunak yang memiliki karakteristik sebagai

berikut :

Umumnya terletak pada Internet Host dan Client

Umumnya menggunakan protokol TCP/IP


Mengerti HTML

Mengikuti model Client/Server untuk komunikasi data dua arah

Memungkinkan Client untuk mengakses Server dengan berbagai

protokol seperti HTTP, FTP, dan Telnet

Memungkinkan Client untuk mengakses informasi dalam beberbagai

media seperti teks, suara dan gambar

Menggunakan model alamat Uniform Resource Locators (URL)

Dasar HTML

Anda ingin menbuat sebuah karya monumental di World Wide Web, anda

harus memulai dari “Jeraminya”, yaitu HTML

HTML : Hyper Text Markup Language

Sama sekali bukan bahasa pemrograman

HTML Digunakan untuk melakukan penandaan terhadap sebuah dokumen

teks

^BTeks ini akan dicetak tebal^B

Simbol mark up yang digunakan oleh HTML ditandai dengan tanda lebih

kecil < dan tanda lebih besar > dan disebut dengan Tag

<B>Teks ini akan dicetak tebal</B>

Perhatikan bahwa tag yang digunakan sebagai tanda penutup akan

diberikan karakter garis miring (/)

Struktur Dasar HTML

File HTML adalah file teks biasa yang mengandung tag-tag HTML, maka

dari itu HTML dapat dibuat dengan menggunakan teks editor biasa, contoh :

Notepad

File HTML mempunyai ekstensi file .htm atau .html Didalam file harus

terkandung struktur sebagai berikut :


<HTML>

…

</HTML>

Tag HTML tidak bersifat case sensitive, jadi <HTML> akan sama dengan

<html>

Struktur lengkap HTML adalah :

<HTML>

<HEAD>

…

</HEAD>

<BODY>

…

</BODY>

</HTML>

Bagian HEAD

Isi bagian HEAD selain judul dokumen tidak akan terlihat oleh pembaca

dokumen tersebut

Elemen-elemen pada bagian HEAD akan mengerjakan tugas-tugas

sebagai berikut :

Menyediakan judul dokumen

Menjembatani hubungan antara dokumen

Memberitahu browser untuk membuat form pencarian

Menyediakan metode untuk mengirim pesan ke tipe browser tertentu

Tag <TITLE>, <BASE>, <LINK>, dan <META>


Tag <TITLE> Digunakan untuk memberi judul dokumen

<TITLE> Judul </TITLE>

Tag <BASE> Digunakan untuk menentukan basis URL sebuah dokumen

<BASE HREF=“//www.alamat.com/direktori”>

Tag <LINK> Digunakan untuk menunjukan relasi antara dokumen HTML

Mempunyai beberapa atribut :

HREF Menunjukan pada URL dokumen lain

REL Mendefinisikan relasi terhadap sebuah dokumen dengan

dokumen lainnya yang berisi informasi tentang personil yang

memberikan konstribusi terhadap dokumen tersebut

REV Mendefinisikan relasi sebuah dokumen HTML dengan

dokumen lainnya

TYPE Menentukan tipe dan parameter dari relasi

<LINK [{REV/REL}=“TEKS”] HREF=“URL”>

Contoh :

<LINK REV=“made” HREF =“mailto:[email protected]”>

<LINK REL=“toc” HREF =“contents.htm”>

<LINK REL=“index” HREF =“index.htm”>

<LINK REL=“copyright” HREF =“copyright.htm”>

Tag <META> Digunakan untuk mendeinisikan informasi –informasi di luar

HTML. Mempunyai atribut sebagai berikut:

HTTP-EQUIV Mendefinisikan properti dari dokumen

NAME Menyediakan deskripsi tambahan dari elemen

mailto:[email protected]


URL Mendefinisikan target dokumen dari sebuah

properti

CONTENT Menyedikan nilai respon dari properti

<META HTTP-EQUIV=“refresh” CONTENT=“60”

URL=“www.alamat.com”>

Bagian BODY

Bagian BODY merupakan isi dari dokumen HTML. Semua informasi yang

akan ditampilkan, mulai dari teks, gambar, sound, dan lain-lainnya akan

ditempatkan pada bagian ini

Diawali dengan tag <BODY> dan ditutup dengan tag </BODY>

Atribut pada tag <BODY>

ALINK Menentukan warna dari link aktif

BACKGROUND Merujuk pada URL atau direktori dari file

gambar yang digunakan sebagai latar belakang

BGCOLOR Menentukan warna latar belakang dokumen

BGPROPERTIES Jika nilai atribut ini diisi FIXED, maka gambar latar

belakang tidak ikut tergulung

LEFTMARGIN Menentukan batas kiri dokumen dalam pixel

LINK Menentukan warna dari link yang belum dikunjungi

TEXT Menentukan warna teks

TOPMARGIN Menentukan batas atas dokumen dalam pixel

VLINK Menentukan warna dari link yang telah dikunjungi

Contoh :

• <HTML>

• <HEAD>

http://www.alamat.com/


• <TITLE> Contoh Penggunaan Body </TITLE>

• </HEAD>

• <BODY BGCOLOR=#000080 TEXT="Blue" ALINK="Black"

• VLINK="Red" LINK="Green">

• Ini adalah contoh penggunaan body. <BR>

• Ini adalah sebuah <A HREF=“ "> Link </A>

• </BODY>

• </HTML>

Warna didefinisikan dengan bilangan heksadesimal. Terdiri dari 6 digit, 2

digit pertama mewakili merah, 2 digit kedua mewakili warna hijau, dan 2

digit terakhir mewakili warna biru

Heksadesimal yang digunakan dari 00 hingga FF, semakin kecil

bilangannya, warna semakin gelap

000000 warna hitam, FF0000 warna merah, dan FFFFFF warna putih

Penulisan angka heksadesimal harus didahului dengan tanda pagar #

Black #000000 Maroon #800000 Green #008000

Olive #808000 Navy #000080 Purple #800080

Teal #008080 Gray #808080 Silver #C0C0C0

Red #FF0000 Lime #00FF00 Yellow #FFFF00

Blue #0000FF Fuchsia #FF00FF Aqua #00FFFF

Memberi Komentar

Untuk mempermudah pembacaan kembali kode-kode HTML, harus

ditambahkan komentar ke dalam sebuah dokumen

Agar komentar tersebut tidak terbaca oleh browser, maka harus digunakan

tanda khusus yaitu <!- - dan diakhiri dengan tanda - - >


Contoh :

• <HTML>

• <HEAD>

• <!- - Ini adalah bagian HEAD - - >

• </HEAD>

• <BODY BGCOLOR=#FF0000>

• <!- - Warna latar belakang dokumen adalah merah - - >

• </BODY>

• </HTML>

Memberi Identitas

Identitas perancang web dapat di letakan pada dokumen HTML dengan

menggunakan tag <ADDRESS>

• <HTML>

• <HEAD>

• <TITLE> Penggunaan Address </TITLE>

• </HEAD>

• <BODY>

• Selamat Datang di World Wide Web Amatir <BR> <BR>

• <ADDRESS>

• Dokumen ini dirancang oleh Samsu Rizal <BR>

• Pada tanggal 18 September 2006

• </ADDRESS>

• </BODY>

• </HTML>


Memformat Dokumen HTML

Untuk memformat dokumen HTML ada beberapa tag yang harus

digunakan antara lain :

Tag <BR> Membuat Baris Baru

Tag <P> Memulai suatu paragraf baru

Tag <HR> Membuat garis batas horizontal

Mempunyai beberapa atribut :

ALIGN Merupakan posisi vertikal garis pemisah, nilainya

adalah LEFT, RIGHT, atau CENTER

WIDTH Lebar dari garis batas, nilai dalam pixel atau persen

dari lebar jendela browser

SIZE Menentukan tebal garis batas

NOSHADE Menonaktifkan efek tiga dimensi

COLOR Menentukan warna garis batas

Contoh :

• <HTML>

• <HEAD>

• <TITLE> Menggunakan Garis Batas </TITLE>

• </HEAD>

• <BODY>

• Garis batas biasa <HR>

• Garis batas dengan posisi di kanan, lebar 250 pixel

• <HR ALIGN=RIGHT WIDTH=250>

• Garis batas dengan lebar 30 pixel <HR WIDTH=30>


• Garis batas dengan lebar 30% lebar browser <HR WIDTH=30%>

• Garis batas dengan tebal 5 pixel <HR SIZE=5>

• Garis batas tanpa efek tiga dimensi <HR NOSHADE>

• Garis batas dengan warna tertentu <HR COLOR=#73F9E2>

• </BODY>

• </HTML>

Tag <Hn> Digunakan sebagai Heading sebuah dokumen, nilai n

berkisar antara 1 hingga 7. Tag ini berguna bila

dokumen terdri dari beberapa bab dan subbab

Contoh :

• <HTML>

• <HEAD>

• <TITLE> Penggunaan Heading </TITLE>

• </HEAD>

• <BODY>

• <H1> Bab 1. HTML </H1>

• Ini adalah isi bab 1

• <H2> 1.1 Subbab HTML </H2>

• Ini adalah isi subbab 1.1

• <H3> 1.1.1 Sub-subbab HTML </H3>

• Ini adalah isi sub-subbab 1.1.1

• </BODY.

• </HTML>

Tag <PRE> Membuat tampilan dokumen HTML pada browser sama

dengan tampilan pada teks editor


Contoh :

• <HTML>

• <HEAD>

• <TITLE> Menggunakan tag <PRE> </TITLE>

• </HEAD>

• <BODY>

• <PRE>

• Tag <PRE> sangat berguna untuk menampilkan bentuk seperti ini:

• Klasemen

• Tim Main Menang Seri Kalah

• ========================================

• Tim A 3 2 1 0

• Tim B 3 2 0 1

• Tim C 3 1 1 1

• ========================================

• Atau untuk menampilkan kode program seperti ini:

• For I = 1 To 10

• For J = 1 To 5

• A(I,J) = I*J

• Next

• Next

• </BODY>

• </HTML>

Tag <CENTER> Menampilkan posisi teks rata ditengah


Contoh :

• <HTML>

• <HEAD>

• <TITLE> Penggunaan tag <CENTER> </TITLE>

• </HEAD>

• <BODY>

• Posisi teks ini adalah rata kiri. <BR> <BR>

• <CENTER>

• Posisi teks ini adalah rata tengah

• </CENTER>

• </BODY>

• </HTML>

Memformat Karakter

Format karakter pada dokumen HTML mencakup beberapa hal yaitu :

Logical Format, Physical Format

Tag <BLOCKQUOTE>, Tag <FONT>

Karakter Khusus

Logical Format

<CITE> Untuk menandai suatu kutipan

<CODE> Untuk menampilkan kode-kode pemrograman

<EM> Untuk menandai suatu teks yang ditekankan oleh

penulis

<KBD> Untuk menandai suatu teks yang harus dimasukan

oleh user melalui keyboard


<SAMP> Untuk menandai suatu teks yang dimaksudkan

sebagai contoh

<STRONG> Untuk menandai bagian yang terpenting dari suatu

teks

<VAR> Untuk menampilkan nama variabel

<DFN> Untuk menandai sebuah subdefinisi dari daftar

definisi

Contoh :

• <HTML>

• <HEAD>

• <TITLE> Logical Format </TITLE>

• </HEAD>

• <BODY>

• <CITE>Tom Sawyer</CITE> adalah salah satu tokoh penting di dunia sastra Amerika. <BR> <BR>

• Kode yang paling pertama dipelajari oleh programmer C adalah:

• <CODE>puts("Hello World!");</CODE> <BR> <BR>

• Ia berkata, "Sekali tidak tetap <EM>tidak</EM>." <BR> <BR>

• Untuk berpindah ke direktori root, ketikkan <KBD>cd /</KBD>. <BR> <BR>

• Pada abjad terdapat 5 huruf vokal, yaitu <SAMP>AEIOU</SAMP>. <BR> <BR>

• Hal yang harus diingat-ingat adalah <STRONG>Jangan panik!</STRONG> <BR> <BR>

• Kode program tersebut diiterasi sebanyak <VAR>N</VAR> kali. <BR> <BR>

• <DFN>Trenggiling adalah hewan pemakan semut.</DFN>


• </BODY>

• </HTML>

Physical Format

<B> Untuk menampilkan huruf tebal

<I> Untuk menampilkan huruf miring

<TT> Untuk menampilkan huruf seperti huruf mesin ketik

<U> Untuk menampilkan garis bawah pada suatu kata

<STRIKE> Untuk menampilkan garis horizontal pada bagian

tengah huruf

<BIG> Untuk menampilkan huruf yang lebih besar

<SMALL> Untuk menampilkan huruf yang lebih kecil

<SUB> Untuk menampilkan subscript

<SUP> Untuk menampilkan superscript

Contoh :

• <HTML>

• <HEAD>

• <TITLE> Physical Format </TITLE>

• </HEAD>

• <BODY>

• <PRE>

• <B> Ini adalah huruf tebal </B>

• <I> Ini adalah huruf miring </I>

• <TT> Huruf ini mirip dengan huruf mesin ketik </TT>

• <U> Kalimat ini akan diberi garis bawah </U>


• <STRIKE> Kalimat ini akan diberi garis pada bagian tengah </STRIKE>

• <BIG> Huruf ini berukuran lebih besar </BIG>

• <SMALL> Huruf ini berukuran lebih kecil </SMALL>

• Ini adalah <SUB> subscript </SUB>

• Ini adalah <SUP> superscript </SUP>

• </BODY>

• </HTML>

Tag <BLOCKQUOTE>

Tag ini digunakan untuk menandai bagian yang dikhususkan pada sebuah

dokumen, misalnya kutipan, kata mutiara

Contoh :

• <HTML>

• <HEAD>

• <TITLE> Penggunaan Blockquote </TITLE>

• </HEAD>

• <BODY>

• <PRE>

• Definisi pernikahan menurut Sidney Smith adalah:

• <BLOCKQUOTE>Pernikahan itu ibarat sebuah gunting, yang bersatu tak terpisahkan, sering bergerak ke arah berlawanan, tetapi selalu memotong segala yang hadir di antara mereka. </BLOCKQUOTE>

• </BODY>

• </HTML>

Tag <FONT>

Tag ini digunakan untuk mengatur jenis, ukuran, dan warna huruf


<FONT [FACE=“namafont”][COLOR=warna][SIZE=ukuran]>

Contoh :

• <HTML>

• <HEAD>

• <TITLE> Penggunaan tag <FONT> </TITLE>

• </HEAD>

• <BODY>

• <PRE>

• <FONT FACE=Arial SIZE=1 COLOR=#FF0080> Arial </FONT>

• <FONT FACE="Monotype Corsiva" SIZE=3 COLOR=Red> Monotype Corsiva</FONT>

• <FONT FACE="Times New Roman" SIZE=7 COLOR=Blue> Times New Roman </FONT>

• </BODY>

• </HTML>

Karakter Khusus

HTML menyediakan beberapa simbol untuk menampilkan karakter Khusus,

diantaranya :

¢ £ ¥ ¢, £, ¥

© ® ° π ©, ®, °, π

¼ ½ &frac 34 ¼, ½, ¾

÷ & &dagger ÷, &, †

≤ ≥ < &gr ≤, ≥, <, >

&spades; &clubs; ♠, ♣

&hearts; &diams; ♥, ♦


Contoh :

• <HTML>

• <HEAD>

• <TITLE> Penggunaan Karakter Khusus </TITLE>

• </HEAD>

• <BODY>

• <PRE>

• Simbol mata uang Yen adalah ¥

• Air mendidih pada 100 °C

• 0,75 sama dengan ¾

• Luas lingkaran adalah πr<SUP>2</SUP>

• </BODY>

• </HTML>

Menambahkan Gambar

Untuk menambah gambar ke dalam dokumen HTML digunakan tag <IMG>,

atributnya adalah sebagai berikut :

SRC Merujuk pada URL atau direktori file gambar

ALIGN Menentukan posisi teks di sekitar gambar, nilainya

adalah TOP, MIDDLE, BOTTOM, LEFT dan RIGHT

WIDTH Menentukan lebar dari gambar dalam pixel

HEIGHT Menentukan tinggi dari gambar dalam pixel

ALT Menampilkan teks pengganti gambar jika gambar tidak

dapat ditampilkan

Contoh :

• <HTML>

• <HEAD>

• <TITLE> Menambahkan Gambar </TITLE>

• </HEAD>

• <BODY>

• <IMG SRC="C:\WINDOWS\BUBBLES.BMP" ALT="Gambar Gelembung"> <HR>

• 

• <IMG SRC="C:\WINDOWS\BUBBLES.BMP" ALT="Gambar Gelembung" ALIGN=Middle>

• Teks ini akan terletak pada bagian tengah tinggi gambar. <HR>

• <IMG SRC="C:\WINDOWS\BUBBLES.BMP" ALT="Gambar Gelembung" ALIGN=Bottom>

• Teks ini akan terletak pada bagian bawah tinggi gambar. <HR>

• <IMG SRC="C:\WINDOWS\BUBBLES.BMP" ALT="Gambar Gelembung" ALIGN=Right>

• Gambar akan terletak di sebelah kanan teks.

• </BODY>

• </HTML>

Menggunakan Link

Link merupakan suatu gambar atau teks yang berkaitan dengan suatu

alamat tertentu

Anchor merupakan sesuatu yang dapat digunakan untuk menandai sebuah

dokumen HTML


Anchor ditandai dengan tag <A>

Tag <A> mempunyai dua atribut, yaitu HREF dan NAME

HREF digunakan bila anchor digunakan sebagai LINK

NAME digunakan bila anchor digunakan sebagai tujuan

Contoh :

• <HTML>

• <HEAD>

• <TITLE> Menggunakan Link </TITLE>

• </HEAD>

• <BODY>

• <A HREF="http://www.yahoo.com"> Klik di sini </A> untuk menuju www.yahoo.com.<BR>

• Atau dapat juga mengklik gambar ini:

• <A HREF="http://www.yahoo.com">

• <IMG SRC="C:\windows\bubbles.bmp" ALT="www.yahoo.com"></A>

• <BR> <BR>

• <A HREF=#Tengah"> Jika ini yang diklik </A> akan menuju ke bagian tengah dokumen.

• <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>

• <A NAME=Tengah> Ini adalah bagian tengah dokumen.</A>

• </BODY>

• </HTML>


Menggunakan Tabel

HTML menyediakan tag-tag yang dapat digunakan untuk membuat sebuah

tabel

Tag <TABLE> berfungsi untuk mendefinisikan sebuah tabel

Tag <TR> untuk mendefinisikan baris tabel

Tag <TH> untuk mendefinisikan judul tiap kolom atau baris

Tag <TD> untuk mendefinisikan isi tiap kolom

Atribut untuk tag <TABLE> adalah sebagai berikut

ALIGN Posisi horizontal tabel

BACKGROUND Menentukan gambar latar belakang tabel

BGCOLOR Menentukan warna latar belakang tabel

BORDER Menentukan tebal bingkai tabel

BORDERCOLOR Menentukan warna bingkai tabel

BORDERCOLORLIGHT Menentukan warna depan bingkai tabel

BORDERCOLORDARK Menentukan warna bayangan bingkai tabel

CELLSPASING Menentukan jarak spasi antara sel

CELLPADING Menentukan jarak isi sel dengan bingkai

HEIGHT Menentukan tinggi tabel

WIDTH Menentukan lebar tabel

ALIGN Posisi horizontal teks dalam sel

BACKGROUND Menentukan gambar latar belakang sel

BGCOLOR Menentukan warna latar belakang sel

BORDER Menentukan lebar bingkai sel


BORDERCOLOR Menentukan warna bingkai sel

BORDERCOLORLIGHT Menentukan warna depan bingkai sel

BORDERCOLORDARK Menentukan warna bayangan bingkai sel

COLSPAN Menentukan jumlah kolom yang digabung

HEIGHT Menentukan tinggi sel

NOWRAP Menentukan teks agar tetap satu baris

ROWSPAN Menentukan jumlah baris yang digabung

VALIGN Menentukan posisi vertikal teks dalam sel

Contoh :

• <HTML>

• <HEAD>

• <TITLE>Table Alignments</TITLE>

• </HEAD>

• <BODY>

• <TABLE BORDER=2 ALIGN=RIGHT>

• <TR>

<TH></TH>

<TH>##########</TH>

<TH>##########</TH>

<TH>##########</TH>

• </TR>

• <TR ALIGN=RIGHT>

<TH>Baris 1</TH>


<TD BGCOLOR=#F7EFDE>XX<BR>XX</TD>

<TD BGCOLOR=#F7EFDE ALIGN=CENTER>X</TD>

<TD BGCOLOR=#F7EFDE>XXX</TD>

• </TR>

<TR ALIGN=BASELINE>

<TH ALIGN=LEFT>Baris 2</TH>

<TD>XXX<BR>XXX</TD>

<TD>XXX</TD>

<TD>XXX<BR>XXXXX<BR>XXX</TD>

• </TR>

• <TR ALIGN=LEFT>

<TH>Baris 3 </TH>

<TD VALIGN=BOTTOM>XXXXX</TD>

<TD VALIGN=TOP>XXX<BR>XXXXX</TD>

<TD VALIGN=MIDDLE>XXXXX</TD>

• </TR>

• </TABLE>

• </BODY>

• </HTML>

Contoh :

• <HTML>

• <HEAD>

• <TITLE> Membuat Tabel </TITLE>

• </HEAD>

• <BODY>

• <TABLE BORDER>

• <TR>

• <TD ROWSPAN=2>XXX</TD>

• <TD>XXX</TD>

• <TD>XXX</TD>

• </TR>

• <TR>

• 

• <TD>XXX</TD>

• <TD>XXX</TD>

• </TR>

• <TR>

• <TD>XXX</TD>

• <TD COLSPAN=2>XXX</TD>

• </TR>

• </TABLE>


• </BODY>

• </HTML>

Menggunakan Form

• Form adalah sebuah daftar isian, yang digunakan untuk meminta

informasi dari user untuk kemudian diolah pada Server dengan

menggunakan skrip yang bersifat server-side

• Tag <FORM> Untuk mendefinisikan sebuah FORM

• Tag <TEXTAREA> Untuk membuat sebuah kotak teks multi

baris. Mempunyai atribut

• NAME Mendefinisikan nama objek textarea

• ROWS Menentukan jumlah baris textarea

• COLS Menentukan lebar textarea

• Tag <SELECT> Untuk membuat sebuah daftar pilihan

• NAME Mendefinisikan nama dari objek select

• SIZE Menentukan beberapa pilihan yang akan

ditampilkan Nilai 1, pilihan akan ditampilkan drop-down

list Nilai 2 pilihan akan ditampilkan sebagai scroll box

• MULTIPLE Mengizinkan untuk memilih lebih dari satu

• Pilihan yang disediakan oleh tag <SELECT> diberikan didalam tag

<OPTION> Tag <OPTION> sendiri mempunyai dua atribut VALUE

digunakan untuk memberi nama item pilihan dan SELECTED

menunjukan pilihan yang terpilih secara default. Tag <OPTION> tidak

perlu ditutup dengan </OPTION>


Contoh :

• <HTML>

• <HEAD>

• <TITLE>SELECT</TITLE>

• </HEAD>

• <BODY>

• Sebutkan tipe koneksi pada komputer Anda:

• <FORM>

• <SELECT NAME="network">

• <OPTION SELECTED VALUE="ethernet"> Ethernet

• <OPTION VALUE="token16"> Token Ring - 16MB

• <OPTION VALUE="token4"> Token Ring - 4MB

• <OPTION VALUE="localtalk"> LocalTalk

• </SELECT>

• </FORM>

• </BODY>

• </HTML>

• Tag <INPUT> Digunakan untuk memninta informasi dari user

berupa kotak teks, kotak pilihan, tombol, dan lain-lainnya

• NAME Mendefinisikan nama dari objek input.

Atribut ini harus ditulis kecuali tipe Submit dan Clear

• SIZE Menentukan ukuran kotak teks

• MAXLENGTH Menentukan jumlah maksimum karakter

yang dapat dimasukkan pada kotak teks


• VALUE Untuk kotak teks, menentukan teks

yang tertulis Untuk check Box atau Radio Button

menentukan nilai item yang dipilih Untuk Submit atau

Reset menentukan teks yang tertulis pada tombol

• CHECKED Hanya digunakan untuk check box atau

Radio Button Menentukan pilihan yang terpilih secara

default

• TYPE Menentukan tipe input yang dibuat

• Tipe input yang dapat dibuat adalah :

• Text, untuk membuat kotak teks

• Password, untuk membuat kotak teks, karakter akan

ditampilkan dengan *

• Check Box, untuk membuat daftar pilihan yang dapat dipilih

lebih dari satu

• Radio Button, untuk membuat daftar pilihan yang dapat dipilih

hanya satu pilihan saja

• Reset, untuk membuat tombol yang fungsinya memghapus

seluruh isian form yang telah diberikan

• Submit, untuk membuat tombol yang fungsinya mengirim data

form agar diolah

Contoh :

<HTML>

<HEAD>

<TITLE> Input </TITLE>

</HEAD>

<BODY>

<FORM>

<PRE>

Silakan masukkan data-data Anda:

Nama : <INPUT TYPE=text NAME=txtNama>

Alamat : <INPUT TYPE=text NAME=txtAlmt SIZE=50>

No. Telpon : <INPUT TYPE=text NAME=txtTelp SIZE=10>

Masukkan Password Anda: <INPUT TYPE=Password MAXLENGHT=6>

Hobby Anda (Boleh pilih lebih dari satu):

<INPUT TYPE=checkbox NAME=hobby VALUE=baca> Membaca

<INPUT TYPE=checkbox NAME=hobby VALUE=oraga> Olah Raga

<INPUT TYPE=checkbox NAME=hobby VALUE=nonton> Nonton Film

<INPUT TYPE=checkbox NAME=hobby VALUE=belanja> Belanja



Jenis Kelamin Anda:

<INPUT TYPE=radio NAME=jkel VALUE=pria> Laki-laki

<INPUT TYPE=radio NAME=jkel VALUE=wanita> Perempuan

<HR>

<INPUT TYPE=Submit VALUE=Kirim> <INPUT TYPE=Reset

VALUE=Hapus>

</FORM>

</BODY>

</HTML>


Menggunakan Frame

• Frame digunakan untuk membagi jendela browser menjadi beberapa

bagian dan masing masing bagian terdiri dari dokumen HTML

tersendiri.

• Untuk membuat Frame, digunakan tag <FRAMESET> dan <FRAME>.

• Tag <NOFRAMES> digunakan untuk menampilkan sebuah alternatif

dokumen jika browser tidak mendukung penggunaan frame. Sebuah

frame dapat didefinisikan didalam frame yang lain

• Tag <FRAMESET> mempunyai beberapa atribut

Rows Membuat Frame secara mendatar sekaligus

mendefinisikan lebar masing-masing

Cols Membuat Frame secara vertikal sekaligus

mendefinisikan lebar masing-masing

BorderColor Mendefinisikan warna bingkai frame

Definisi lebar Frame pada atribut Rows dan Cols dapat bernilai tetap,

persentase dan proposional

<FRAMESET ROWS=“100, 240, 400”> nilai tetap

<FRAMESET COLS=“30%, 40%, 30%”> nilai persentase

<FRAMESET ROWS=“*, 2*, 3*”> nilai proporsional

• Tag <FRAME> mempunyai beberapa atribut

SRC Mementukan nama file HTML yang digunakan sebagai isi

frame

MARGINHEIGHT Menentukan batas atas dan bawah antara

dokumen dengan bingkai dalam pixel

MARGINWIDTH Menentukan batas kiri dan kanan antara

dokumen dengan bingkai dalam pixel

SCROLLING Menentukan apakah frame dapat memiliki scroll

bar, nilainya adalah yes, no atau auto

NORESIZE Jika atribut ini disebutkan, frame tidak dapat

diubah ukurannya

NAME Mendefinisikan nama objek frame, Nama

digunakan untuk tujuan sebuah link

BORDER Menentukan ukuran bingkai frame

Contoh :

• <HTML>

• <HEAD>

• <TITLE> Menggunakan Frame </TITLE>

• </HEAD>

• 

• <FRAMESET ROWS="*,*,*">

• <FRAME SRC="satu.htm" NAME=fraSatu>

• <FRAME SRC="dua.htm" NAME=fraDua SCROLLING=yes>

• <FRAME SRC="tiga.htm" NAME=fraTiga NORESIZE>

• </FRAMESET>

• </HTML>

Contoh :

• <HTML>

• <HEAD>

• <TITLE> Menggunakan Frame </TITLE>

• </HEAD>

• <BODY>

• <FONT SIZE=7>

• INI FRAME KE 1

• 

• </FONT>

• </BODY>

• </HTML>

Menggunakan Script

• Untuk menambahkan unjuk kerja dari dokumen HTML, bahasa

pemrograman yang lain (Script) dapat disisipkan kedalam dokumen

HTML

• Untuk menambah suatu skrip kedalam HTML menggunakan tag

<SCRIPT> Tag ini dapat digunakan pada bagian head maupun body

• Skrip yang diletakkan pada bagian head umumnya berupa deklarasi

fungsi. Penggunaannya adalah sebagai berikut :

<SCRIPT LANGUAGE=bahasaskrip [RUNAT=server]

skrip dituliskan disini

</SCRIPT>

• Bahasa skrip yang digunakan ada bermacam-macam, yang paling

populer adalah VBScript dan JavaScript

• Atribut RUNAT=server digunakan jika skrip tersebut akan dijalankan

pada server

pemrograman berbasis web (html)

Documents