Anda di halaman 1dari 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

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

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 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.com> <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 NAME Mendefinisikan properti dari dokumen Menyediakan deskripsi tambahan dari elemen

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

URL CONTENT

Mendefinisikan target dokumen dari sebuah properti 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 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, 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

<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 Olive #808000 Teal #008080 Red #FF0000 Blue #0000FF 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 - - >
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> <!- - 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>
Pemrograman Berbasis WEB (HTML) 9/5/2012 7 / 29

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, RIGHT, atau CENTER Lebar dari garis batas, 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, 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

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

Contoh : <HTML> <HEAD> <TITLE> Menggunakan tag <PRE> </TITLE> </HEAD> <BODY> <PRE> Tag &lt;PRE&gt; 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,J) = I*J

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> <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. <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 panik!</STRONG> <BR> <BR> adalah <STRONG>Jangan

Kode program tersebut diiterasi sebanyak <VAR>N</VAR> kali. <BR> <BR> <DFN>Trenggiling adalah hewan pemakan semut.</DFN>
Pemrograman Berbasis WEB (HTML) 9/5/2012 12 / 29

</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

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

<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 : &cent; &pound; &yen; &copy; &reg; &deg; &pi; &frac14; &frac12; &frac 34 &divide; &amp; &dagger &le; &ge; &lt; &gr &spades; &clubs; &hearts; &diams; , , , , , , , , &, , , <, > , ,
Pemrograman Berbasis WEB (HTML) 9/5/2012 15 / 29

Contoh : <HTML> <HEAD> <TITLE> Penggunaan Karakter Khusus </TITLE> </HEAD> <BODY> <PRE> Simbol mata uang Yen adalah &yen; Air mendidih pada 100 &deg;C 0,75 sama dengan &frac34; Luas lingkaran adalah &pi;r<SUP>2</SUP> </BODY> </HTML> Menambahkan Gambar Untuk menambah gambar ke dalam dokumen HTML digunakan tag <IMG>, 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, MIDDLE, BOTTOM, 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

Contoh : <HTML> <HEAD> <TITLE> Menambahkan Gambar </TITLE> </HEAD> <BODY> <IMG SRC="C:\WINDOWS\BUBBLES.BMP" Gelembung"> <HR> ALT="Gambar

<!-- Gambar ini adalah gambar yang terdapat pada Windows 98 secara default, 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. <HR> <IMG SRC="C:\WINDOWS\BUBBLES.BMP" Gelembung" ALIGN=Bottom> ALT="Gambar

Teks ini akan terletak pada bagian bawah tinggi gambar. <HR> <IMG SRC="C:\WINDOWS\BUBBLES.BMP" 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
Pemrograman Berbasis WEB (HTML) 9/5/2012 17 / 29

ALT="Gambar

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>

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

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> <!-- Jumlah kolom pada baris 2 hanya 2, 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

</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. 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, 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>

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

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

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 ditampilkan dengan * kotak teks, karakter akan

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

<FORM> <PRE> Silakan masukkan data-data Anda: Nama Alamat : <INPUT TYPE=text NAME=txtNama> : <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 <!--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

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

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> <!--Jika digunakan FRAMESET maka tag BODY tidak digunakan--> <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>
Pemrograman Berbasis WEB (HTML) 9/5/2012 28 / 29

<BODY> <FONT SIZE=7> INI FRAME KE 1 <!--Gantilah n dengan angka 1, 2, filenya--> </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 atau 3 sesuai dengan nama

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