You are on page 1of 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
Pemrograman Berbasis WEB (HTML) 9/5/2012 1 / 29

Mengerti HTML Mengikuti model Client/Server untuk komunikasi data dua arah Memungkinkan Client untuk mengakses Server dengan protokol seperti HTTP, FTP, dan Telnet berbagai

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 :
Pemrograman Berbasis WEB (HTML) 9/5/2012 2 / 29

dan <META> Pemrograman Berbasis WEB (HTML) 9/5/2012 3 / 29 . <LINK>.<HTML> … </HTML> Tag HTML tidak bersifat case sensitive. <BASE>. 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>.

Mempunyai atribut sebagai berikut: HTTP-EQUIV NAME Mendefinisikan properti dari dokumen Menyediakan deskripsi tambahan dari elemen Pemrograman Berbasis WEB (HTML) 9/5/2012 4 / 29 .htm”> <LINK REL=“index” HREF =“index.Tag <TITLE> Digunakan untuk memberi judul dokumen <TITLE> Judul </TITLE> Tag <BASE> Digunakan untuk menentukan basis URL sebuah dokumen <BASE HREF=“//www.com/direktori”> Tag <LINK> Digunakan untuk menunjukan relasi antara dokumen HTML Mempunyai beberapa atribut : HREF REL Menunjukan pada URL dokumen lain Mendefinisikan relasi terhadap sebuah dokumen dengan dokumen lainnya yang berisi informasi tentang personil yang memberikan konstribusi terhadap dokumen tersebut Mendefinisikan relasi dokumen lainnya sebuah dokumen HTML dengan REV TYPE Menentukan tipe dan parameter dari relasi <LINK [{REV/REL}=“TEKS”] HREF=“URL”> Contoh : <LINK REV=“made” HREF =“mailto:nama@alamat.htm”> <LINK REL=“copyright” HREF =“copyright.com”> <LINK REL=“toc” HREF =“contents.htm”> Tag <META> Digunakan untuk mendeinisikan informasi –informasi di luar HTML.alamat.

alamat. mulai dari teks. dan lain-lainnya akan ditempatkan pada bagian ini Diawali dengan tag <BODY> dan ditutup dengan tag </BODY> Atribut pada tag <BODY> ALINK BACKGROUND BGCOLOR BGPROPERTIES LEFTMARGIN LINK TEXT TOPMARGIN VLINK Contoh : • <HTML> • <HEAD> Pemrograman Berbasis WEB (HTML) 9/5/2012 5 / 29 Menentukan warna dari link aktif Merujuk pada URL atau direktori dari file gambar yang digunakan sebagai latar belakang Menentukan warna latar belakang dokumen Jika nilai atribut ini diisi FIXED. gambar. Semua informasi yang akan ditampilkan.URL CONTENT Mendefinisikan target dokumen dari sebuah properti Menyedikan nilai respon dari properti <META HTTP-EQUIV=“refresh” CONTENT=“60” URL=“www. sound. maka gambar latar belakang tidak ikut tergulung Menentukan batas kiri dokumen dalam pixel Menentukan warna dari link yang belum dikunjungi Menentukan warna teks Menentukan batas atas dokumen dalam pixel Menentukan warna dari link yang telah dikunjungi .com”> Bagian BODY Bagian BODY merupakan isi dari dokumen HTML.

<BR> • Ini adalah sebuah <A HREF=“ "> Link </A> • </BODY> • </HTML> Warna didefinisikan dengan bilangan heksadesimal. maka harus digunakan tanda khusus yaitu <!. warna semakin gelap 000000 warna hitam.• <TITLE> Contoh Penggunaan Body </TITLE> • </HEAD> • <BODY BGCOLOR=#000080 TEXT="Blue" ALINK="Black" • VLINK="Red" LINK="Green"> • Ini adalah contoh penggunaan body. semakin kecil bilangannya.dan diakhiri dengan tanda . dan 2 digit terakhir mewakili warna biru Heksadesimal yang digunakan dari 00 hingga FF. harus ditambahkan komentar ke dalam sebuah dokumen Agar komentar tersebut tidak terbaca oleh browser. dan FFFFFF warna putih Penulisan angka heksadesimal harus didahului dengan tanda pagar # Black #000000 Olive #808000 Teal #008080 Red #FF0000 Blue #0000FF Memberi Komentar Untuk mempermudah pembacaan kembali kode-kode HTML. 2 digit kedua mewakili warna hijau... Terdiri dari 6 digit. FF0000 warna merah. 2 digit pertama mewakili merah.> Pemrograman Berbasis WEB (HTML) 9/5/2012 6 / 29 Maroon #800000 Navy #000080 Gray #808080 Lime #00FF00 Fuchsia #FF00FF Green #008000 Purple #800080 Silver #C0C0C0 Yellow #FFFF00 Aqua #00FFFF .

Contoh : • <HTML> • <HEAD> • <!.> • </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> Pemrograman Berbasis WEB (HTML) 9/5/2012 7 / 29 ..Ini adalah bagian HEAD ...Warna latar belakang dokumen adalah merah ..> • </HEAD> • <BODY BGCOLOR=#FF0000> • <!.

atau CENTER Lebar dari garis batas. lebar 250 pixel • <HR ALIGN=RIGHT WIDTH=250> • Garis batas dengan lebar 30 pixel <HR WIDTH=30> Pemrograman Berbasis WEB (HTML) 9/5/2012 8 / 29 Menentukan warna garis batas . RIGHT.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 WIDTH SIZE Merupakan posisi vertikal garis pemisah. nilainya adalah LEFT. nilai dalam pixel atau persen dari lebar jendela browser Menentukan tebal garis batas NOSHADE Menonaktifkan efek tiga dimensi COLOR Contoh : • <HTML> • <HEAD> • <TITLE> Menggunakan Garis Batas </TITLE> • </HEAD> • <BODY> • Garis batas biasa <HR> • Garis batas dengan posisi di kanan.

nilai n berkisar antara 1 hingga 7.1 Subbab HTML </H2> • Ini adalah isi subbab 1.1.1 • <H3> 1.• 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. Tag ini berguna bila dokumen terdri dari beberapa bab dan subbab Contoh : • <HTML> • <HEAD> • <TITLE> Penggunaan Heading </TITLE> • </HEAD> • <BODY> • <H1> Bab 1. • </HTML> Tag <PRE> Membuat tampilan dokumen HTML pada browser sama dengan tampilan pada teks editor Pemrograman Berbasis WEB (HTML) 9/5/2012 9 / 29 .1 Sub-subbab HTML </H3> • Ini adalah isi sub-subbab 1.1. HTML </H1> • Ini adalah isi bab 1 • <H2> 1.1 • </BODY.

PRE&gt.Contoh : • <HTML> • <HEAD> • <TITLE> Menggunakan tag <PRE> </TITLE> • </HEAD> • <BODY> • <PRE> • Tag &lt.J) = I*J . sangat berguna untuk menampilkan bentuk seperti ini: • Klasemen • Tim Main Menang Seri Kalah • ======================================== • Tim A • Tim B • Tim C 3 3 3 2 2 1 1 0 1 0 1 1 • ======================================== • Atau untuk menampilkan kode program seperti ini: • For I = 1 To 10 • For J = 1 To 5 • • Next • Next • </BODY> • </HTML> Tag <CENTER> Menampilkan posisi teks rata ditengah Pemrograman Berbasis WEB (HTML) 9/5/2012 10 / 29 A(I.

Physical Format Tag <BLOCKQUOTE>.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. Tag <FONT> Karakter Khusus Logical Format <CITE> <CODE> <EM> <KBD> Untuk menandai suatu kutipan Untuk menampilkan kode-kode pemrograman Untuk menandai suatu teks yang ditekankan oleh penulis Untuk menandai suatu teks yang harus dimasukan oleh user melalui keyboard Pemrograman Berbasis WEB (HTML) 9/5/2012 11 / 29 .

<SAMP> <STRONG> <VAR> <DFN> Contoh : • <HTML> • <HEAD> Untuk menandai suatu teks yang dimaksudkan sebagai contoh Untuk menandai bagian yang terpenting dari suatu teks Untuk menampilkan nama variabel Untuk menandai sebuah subdefinisi dari daftar definisi • <TITLE> Logical Format </TITLE> • </HEAD> • <BODY> • <CITE>Tom Sawyer</CITE> adalah salah satu tokoh penting di dunia sastra Amerika.</DFN> Pemrograman Berbasis WEB (HTML) 9/5/2012 12 / 29 . "Sekali tidak tetap <EM>tidak</EM>. <BR> <BR> • Kode yang paling pertama dipelajari oleh programmer C adalah: • <CODE>puts("Hello World!"). <BR> <BR> • Hal yang harus diingat-ingat panik!</STRONG> <BR> <BR> adalah <STRONG>Jangan • Kode program tersebut diiterasi sebanyak <VAR>N</VAR> kali. ketikkan <KBD>cd /</KBD>.</CODE> <BR> <BR> • Ia berkata. <BR> <BR> • <DFN>Trenggiling adalah hewan pemakan semut." <BR> <BR> • Untuk berpindah ke direktori root. yaitu <SAMP>AEIOU</SAMP>. <BR> <BR> • Pada abjad terdapat 5 huruf vokal.

• </BODY> • </HTML> Physical Format <B> <I> <TT> <U> Untuk menampilkan huruf tebal Untuk menampilkan huruf miring Untuk menampilkan huruf seperti huruf mesin ketik 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> <SUP> 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> Pemrograman Berbasis WEB (HTML) 9/5/2012 13 / 29 Untuk menampilkan subscript Untuk menampilkan superscript .

yang bersatu tak terpisahkan. sering bergerak ke arah berlawanan. dan warna huruf Pemrograman Berbasis WEB (HTML) 9/5/2012 14 / 29 . ukuran. kata mutiara Contoh : • <HTML> • <HEAD> • <TITLE> Penggunaan Blockquote </TITLE> • </HEAD> • <BODY> • <PRE> • Definisi pernikahan menurut Sidney Smith adalah: • <BLOCKQUOTE>Pernikahan itu ibarat sebuah gunting. misalnya kutipan. </BLOCKQUOTE> • </BODY> • </HTML> Tag <FONT> Tag ini digunakan untuk mengatur jenis. tetapi selalu memotong segala yang hadir di antara mereka.• <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.

&ge. &gr &spades. &amp. £. ≥. ♦ Pemrograman Berbasis WEB (HTML) 9/5/2012 15 / 29 . &diams. &frac 34 &divide. &yen. &hearts.<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. &dagger &le. π ¼. &pound. &frac14. &lt. &. diantaranya : &cent. > ♠. °. ½. ¾ ÷. † ≤. &pi. ¥ ©. ♣ ♥. &frac12. <. &clubs. &deg. ¢. &reg. &copy. ®.

LEFT dan RIGHT Menentukan lebar dari gambar dalam pixel Menentukan tinggi dari gambar dalam pixel Menampilkan teks pengganti gambar jika gambar tidak dapat ditampilkan Pemrograman Berbasis WEB (HTML) 9/5/2012 16 / 29 . BOTTOM.C • 0.Contoh : • <HTML> • <HEAD> • <TITLE> Penggunaan Karakter Khusus </TITLE> • </HEAD> • <BODY> • <PRE> • Simbol mata uang Yen adalah &yen. MIDDLE. atributnya adalah sebagai berikut : SRC ALIGN WIDTH HEIGHT ALT Merujuk pada URL atau direktori file gambar Menentukan posisi teks di sekitar gambar. nilainya adalah TOP.75 sama dengan &frac34. • Air mendidih pada 100 &deg.r<SUP>2</SUP> • </BODY> • </HTML> Menambahkan Gambar Untuk menambah gambar ke dalam dokumen HTML digunakan tag <IMG>. • Luas lingkaran adalah &pi.

<HR> • <IMG SRC="C:\WINDOWS\BUBBLES. <HR> • <IMG SRC="C:\WINDOWS\BUBBLES. • </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 Pemrograman Berbasis WEB (HTML) 9/5/2012 17 / 29 ALT="Gambar .Gambar ini adalah gambar yang terdapat pada Windows 98 secara • default.BMP" Gelembung"> <HR> ALT="Gambar • <!-.Contoh : • <HTML> • <HEAD> • <TITLE> Menambahkan Gambar </TITLE> • </HEAD> • <BODY> • <IMG SRC="C:\WINDOWS\BUBBLES.BMP" Gelembung" ALIGN=Right> • Gambar akan terletak di sebelah kanan teks.BMP" Gelembung" ALIGN=Bottom> ALT="Gambar • Teks ini akan terletak pada bagian bawah tinggi gambar. Anda boleh menggantinya dengan gambar lain--> • <IMG SRC="C:\WINDOWS\BUBBLES.BMP" Gelembung" ALIGN=Middle> ALT="Gambar • Teks ini akan terletak pada bagian tengah tinggi gambar.

• <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.yahoo.yahoo.com"> • <IMG SRC="C:\windows\bubbles.yahoo.com"></A> • <BR> <BR> • <A HREF=#Tengah"> Jika ini yang diklik </A> akan menuju ke bagian tengah dokumen.com"> Klik di sini </A> untuk menuju www.bmp" ALT="www.</A> • </BODY> • </HTML> Pemrograman Berbasis WEB (HTML) 9/5/2012 18 / 29 .com.<BR> • Atau dapat juga mengklik gambar ini: • <A HREF="http://www. 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.Anchor ditandai dengan tag <A> Tag <A> mempunyai dua atribut.yahoo.

Menggunakan Tabel HTML menyediakan tag-tag yang dapat digunakan untuk membuat sebuah tabel Tag <TABLE> Tag <TR> Tag <TH> Tag <TD> berfungsi untuk mendefinisikan sebuah tabel untuk mendefinisikan baris tabel untuk mendefinisikan judul tiap kolom atau baris untuk mendefinisikan isi tiap kolom Atribut untuk tag <TABLE> adalah sebagai berikut ALIGN BACKGROUND BGCOLOR BORDER BORDERCOLOR BORDERCOLORLIGHT BORDERCOLORDARK CELLSPASING CELLPADING HEIGHT WIDTH ALIGN BACKGROUND BGCOLOR BORDER Posisi horizontal tabel Menentukan gambar latar belakang tabel Menentukan warna latar belakang tabel Menentukan tebal bingkai tabel Menentukan warna bingkai tabel Menentukan warna depan bingkai tabel Menentukan warna bayangan bingkai tabel Menentukan jarak spasi antara sel Menentukan jarak isi sel dengan bingkai Menentukan tinggi tabel Menentukan lebar tabel Posisi horizontal teks dalam sel Menentukan gambar latar belakang sel Menentukan warna latar belakang sel Menentukan lebar bingkai sel Pemrograman Berbasis WEB (HTML) 9/5/2012 19 / 29 .

BORDERCOLOR BORDERCOLORLIGHT BORDERCOLORDARK COLSPAN HEIGHT NOWRAP ROWSPAN VALIGN Contoh : • <HTML> • <HEAD> Menentukan warna bingkai sel Menentukan warna depan bingkai sel Menentukan warna bayangan bingkai sel Menentukan jumlah kolom yang digabung Menentukan tinggi sel Menentukan teks agar tetap satu baris Menentukan jumlah baris yang digabung Menentukan posisi vertikal teks dalam sel • <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> Pemrograman Berbasis WEB (HTML) 9/5/2012 20 / 29 .

<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> Pemrograman Berbasis WEB (HTML) 9/5/2012 21 / 29 .

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> • <!-. sebab sebuah kolom telah terdefinisikan pada atribut ROWSPAN=2 --> • • <TD>XXX</TD> <TD>XXX</TD> • </TR> • <TR> • • <TD>XXX</TD> <TD COLSPAN=2>XXX</TD> • </TR> • </TABLE> Pemrograman Berbasis WEB (HTML) 9/5/2012 22 / 29 .Jumlah kolom pada baris 2 hanya 2.

• </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> • Tag <TEXTAREA> • NAME • ROWS • COLS • Tag <SELECT> • NAME Untuk mendefinisikan sebuah FORM Untuk membuat sebuah kotak teks multi baris. Tag <OPTION> tidak perlu ditutup dengan </OPTION> Pemrograman Berbasis WEB (HTML) 9/5/2012 23 / 29 . 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. Mempunyai atribut Mendefinisikan nama objek textarea Menentukan jumlah baris textarea Menentukan lebar textarea Untuk membuat sebuah daftar pilihan Mendefinisikan nama dari objek select • SIZE Menentukan beberapa pilihan yang akan ditampilkan Nilai 1.

dan lain-lainnya • NAME Mendefinisikan nama dari objek input. tombol. kotak pilihan.4MB <OPTION VALUE="localtalk"> LocalTalk • </SELECT> • </FORM> • </BODY> • </HTML> • Tag <INPUT> Digunakan untuk memninta informasi dari user berupa kotak teks.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 . 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 Pemrograman Berbasis WEB (HTML) 9/5/2012 24 / 29 .16MB <OPTION VALUE="token4"> Token Ring .

untuk membuat tombol yang fungsinya memghapus seluruh isian form yang telah diberikan • Submit. untuk membuat ditampilkan dengan * kotak teks. untuk membuat daftar pilihan yang dapat dipilih lebih dari satu • Radio Button. untuk membuat kotak teks • Password. untuk membuat daftar pilihan yang dapat dipilih hanya satu pilihan saja • Reset. 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 tombol yang fungsinya mengirim data form agar diolah Contoh : <HTML> <HEAD> <TITLE> Input </TITLE> </HEAD> <BODY> Pemrograman Berbasis WEB (HTML) 9/5/2012 25 / 29 . karakter akan • Check Box.• VALUE Untuk kotak teks.

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 <!--Perhatikan bahwa untuk satu kelompok pilihan yang sama nilai atribut NAME harus sama--> 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=Hapus> </FORM> </BODY> </HTML> Pemrograman Berbasis WEB (HTML) 9/5/2012 26 / 29 VALUE=Kirim> <INPUT TYPE=Reset .<FORM> <PRE> Silakan masukkan data-data Anda: Nama Alamat : <INPUT TYPE=text NAME=txtNama> : <INPUT TYPE=text NAME=txtAlmt SIZE=50> No.

• Tag <NOFRAMES> digunakan untuk menampilkan sebuah alternatif dokumen jika browser tidak mendukung penggunaan frame. 30%”>nilai persentase <FRAMESET ROWS=“*. digunakan tag <FRAMESET> dan <FRAME>. 400”> nilai tetap <FRAMESET COLS=“30%. • Untuk membuat Frame.Menggunakan Frame • Frame digunakan untuk membagi jendela browser menjadi beberapa bagian dan masing masing bagian terdiri dari dokumen HTML tersendiri. 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. 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 Pemrograman Berbasis WEB (HTML) 9/5/2012 27 / 29 . persentase dan proposional <FRAMESET ROWS=“100. 2*. 40%. 240.

htm" NAME=fraSatu> <FRAME SRC="dua.SCROLLING Menentukan apakah frame dapat memiliki scroll bar.*"> • • • <FRAME SRC="satu.htm" NAME=fraDua SCROLLING=yes> <FRAME SRC="tiga. 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> • <!--Jika digunakan FRAMESET maka tag BODY tidak digunakan--> • <FRAMESET ROWS="*. no atau auto NORESIZE Jika atribut ini disebutkan.*.htm" NAME=fraTiga NORESIZE> • </FRAMESET> • </HTML> Contoh : • <HTML> • <HEAD> • <TITLE> Menggunakan Frame </TITLE> • </HEAD> Pemrograman Berbasis WEB (HTML) 9/5/2012 28 / 29 . nilainya adalah yes.

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. 2. yang paling populer adalah VBScript dan JavaScript • Atribut RUNAT=server digunakan jika skrip tersebut akan dijalankan pada server atau 3 sesuai dengan nama Pemrograman Berbasis WEB (HTML) 9/5/2012 29 / 29 . filenya--> • </FONT> • </BODY> • </HTML> Menggunakan Script • Untuk menambahkan unjuk kerja dari dokumen HTML. Penggunaannya adalah sebagai berikut : <SCRIPT LANGUAGE=bahasaskrip [RUNAT=server] skrip dituliskan disini </SCRIPT> • Bahasa skrip yang digunakan ada bermacam-macam.• <BODY> • <FONT SIZE=7> • INI FRAME KE 1 • <!--Gantilah n dengan angka 1.