Anda di halaman 1dari 11

9/29/2009

Pemrograman Berbasis WEB HTML


Fakultas Ilmu Komputer Jurusan Sistem Informasi Nama Dosen : Eddy Edwin Bobot SKS : 2 Sks Jadwal : Senin / 09.20- 11.00 Ruang : R805

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)

9/29/2009 4:09:08 AM

Pemrograman Berbasis Web HTML

9/29/2009 4:09:08 AM

Pemrograman Berbasis Web HTML

Internet dan WWW


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, Telnet dan Gopher Memungkinkan Client untuk mengakses informasi dalam beberbagai media seperti teks, audio dan vidio Menggunakan model alamat Uniform Resource Locators (URL)

Dasar HTML
Anda ingin menbuat sebuah karya monumental di World Wide Web, anda harus memulai dari Jeraminya, 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 (/)

9/29/2009 4:09:08 AM

Pemrograman Berbasis Web HTML

9/29/2009 4:09:08 AM

Pemrograman Berbasis Web HTML

9/29/2009

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, contohnya 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>
9/29/2009 4:09:08 AM Pemrograman Berbasis Web HTML

Struktur Dasar HTML


Struktur lengkap HTML adalah : Bagian HEAD berisikan informasi mengenai dokumen tersebut, <HTML> judul dokumen, versi HTML Bagian BODY berisikan layout atau disain halaman web <HEAD> <HTML> <HEAD> <TITLE> Dokumen Sederhana </TITLE> </HEAD> </HEAD> <BODY> Halaman web sederhana </BODY> </HTML> <BODY> Simpan file HTML dengan menggunakan Save As, dengan terlebih dahulu bagian Save As Type diganti menjadi All File </BODY> Menjalankan file HTML pada sebuah browser dengan </HTML> menggunakan menu File>Open, kemudian pilih nama file tersebut
Teks yang tertulis diantara tag <TITLE> dan </TITLE> akan terlihat pada title bar window

9/29/2009 4:09:08 AM

Pemrograman Berbasis Web 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>
9/29/2009 4:09:08 AM Pemrograman Berbasis Web HTML

Bagian HEAD
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

9/29/2009 4:09:08 AM

Pemrograman Berbasis Web HTML

9/29/2009

Bagian HEAD
<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 Mendefinisikan properti dari dokumen NAME Menyediakan deskripsi tambahan dari elemen URL Mendefinisikan target dokumen dari sebuah properti CONTENT Menyedikan nilai respon dari properti <META HTTP-EQUIV=refresh CONTENT=60 URL=www.alamat.com>
9/29/2009 4:09:08 AM Pemrograman Berbasis Web HTML

Bagian BODY
Bagian BODY merupakan isi dari dokumen HTML. Semua informasi yang akan ditampilkan, mulai dari teks, gambar, sound, dan lainlainnya 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 9
9/29/2009 4:09:08 AM Pemrograman Berbasis Web HTML

10

Bagian BODY
TEXT TOPMARGIN VLINK Menentukan warna teks Menentukan batas atas dokumen dalam pixel Menentukan warna dari link yang telah dikunjungi

Bagian BODY
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 11
9/29/2009 4:09:08 AM

<HTML> <HEAD> <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>
9/29/2009 4:09:08 AM Pemrograman Berbasis Web HTML

Maroon #800000 Navy #000080 Gray #808080 Lime #00FF00 Fuchsia #FF00FF
Pemrograman Berbasis Web HTML

Green #008000 Purple #800080 Silver #C0C0C0 Yellow #FFFF00 Aqua #00FFFF 12

9/29/2009

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 - - > <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>
9/29/2009 4:09:08 AM Pemrograman Berbasis Web HTML

9/29/2009 4:09:08 AM

Pemrograman Berbasis Web HTML

13

14

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

Memformat Dokumen HTML


15 <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>
9/29/2009 4:09:08 AM Pemrograman Berbasis Web HTML

9/29/2009 4:09:08 AM

Pemrograman Berbasis Web HTML

16

9/29/2009

Memformat Dokumen 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 <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>
9/29/2009 4:09:08 AM Pemrograman Berbasis Web HTML

Memformat Dokumen HTML


Tag <PRE>

Membuat tampilan dokumen HTML pada browser sama dengan tampilan pada teks editor

<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 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>
9/29/2009 4:09:08 AM Pemrograman Berbasis Web HTML

17

18

Memformat Dokumen HTML


Tag <CENTER> Menampilkan posisi teks rata ditengah <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> 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 19
9/29/2009 4:09:08 AM Pemrograman Berbasis Web HTML

9/29/2009 4:09:08 AM

Pemrograman Berbasis Web HTML

20

9/29/2009

Logical Format
<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>
9/29/2009 4:09:08 AM Pemrograman Berbasis Web HTML

Memformat Karakter
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

21

9/29/2009 4:09:08 AM

Pemrograman Berbasis Web HTML

22

Physical Format
<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>
9/29/2009 4:09:08 AM Pemrograman Berbasis Web HTML

Tag <BLOCKQUOTE>
Tag ini digunakan untuk menandai bagian yang dikhususkan pada sebuah dokumen, misalnya kutipan, kata mutiara <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>
9/29/2009 4:09:08 AM Pemrograman Berbasis Web HTML

23

24

9/29/2009

Tag <FONT>
Tag ini digunakan untuk mengatur jenis, ukuran, dan warna font
<FONT [FACE=namafont][COLOR=warna][SIZE=ukuran]>

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; ,
<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>

<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>
9/29/2009 4:09:08 AM Pemrograman Berbasis Web HTML

25

9/29/2009 4:09:08 AM

Pemrograman Berbasis Web HTML

26

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

Menambahkan Gambar
<HTML> <HEAD> <TITLE> Menambahkan Gambar </TITLE> </HEAD> <BODY> <IMG SRC="C:\WINDOWS\BUBBLES.BMP" ALT="Gambar Gelembung"> <HR> <!-- Gambar ini adalah gambar yang terdapat pada Windows 98 secara default, Anda boleh menggantinya dengan gambar lain--> <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>
9/29/2009 4:09:08 AM Pemrograman Berbasis Web HTML

9/29/2009 4:09:08 AM

Pemrograman Berbasis Web HTML

27

28

9/29/2009

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
<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>
9/29/2009 4:09:08 AM Pemrograman Berbasis Web 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
9/29/2009 4:09:08 AM Pemrograman Berbasis Web HTML

29

30

Menggunakan Tabel
ALIGN BACKGROUND BGCOLOR BORDER BORDERCOLOR Posisi horizontal teks dalam sel Menentukan gambar latar belakang sel Menentukan warna latar belakang sel Menentukan lebar bingkai sel 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

Menggunakan Tabel
<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 VALIGN=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>

9/29/2009 4:09:08 AM

Pemrograman Berbasis Web HTML

31

9/29/2009 4:09:08 AM

Pemrograman Berbasis Web HTML

32

9/29/2009

Membuat Tabel

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 ROWS COLS Mendefinisikan nama objek textarea Menentukan jumlah baris textarea Menentukan lebar textarea

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

Tag <SELECT>
NAME SIZE

Untuk membuat sebuah daftar pilihan

Mendefinisikan nama dari objek select 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>
9/29/2009 4:09:08 AM Pemrograman Berbasis Web HTML

9/29/2009 4:09:08 AM

Pemrograman Berbasis Web HTML

33

34

Menggunakan Form
<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>

Menggunakan Form
Tag <INPUT>
NAME SIZE MAXLENGTH VALUE

Digunakan untuk memninta informasi dari user berupa kotak teks, kotak pilihan, tombol, dan lain-lainnya
Mendefinisikan nama dari objek input. Atribut ini harus ditulis kecuali tipe Submit dan Clear Menentukan ukuran kotak teks Menentukan jumlah maksimum karakter yang dapat dimasukkan pada kotak teks 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 Hanya digunakan untuk check box atau Radio Button Menentukan pilihan yang terpilih secara default Menentukan tipe input yang dibuat

CHECKED TYPE

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
Pemrograman Berbasis Web HTML

9/29/2009 4:09:08 AM

Pemrograman Berbasis Web HTML

35

9/29/2009 4:09:08 AM

36

9/29/2009

Menggunakan Form
Reset, untuk membuat tombol yang fungsinya memghapus seluruh isian form yang telah diberikan Submit, untuk membuat tombol yang fungsinya mengirim data form agar diolah <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=Kirim> <INPUT TYPE=Reset VALUE=Hapus> </FORM> </BODY> </HTML> <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):

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
9/29/2009 4:09:08 AM Pemrograman Berbasis Web HTML

9/29/2009 4:09:08 AM

Pemrograman Berbasis Web HTML

37

38

Menggunakan Frame
Tag <FRAME> mempunyai beberapa atribut
SRC MARGINHEIGHT MARGINWIDTH SCROLLING NORESIZE NAME BORDER Mementukan nama file HTML yang digunakan sebagai isi frame Menentukan batas atas dan bawah antara dokumen dengan bingkai dalam pixel Menentukan batas kiri dan kanan antara dokumen dengan bingkai dalam pixel Menentukan apakah frame dapat memiliki scroll bar, nilainya adalah yes, no atau auto Jika atribut ini disebutkan, frame tidak dapat diubah ukurannya Mendefinisikan nama objek frame, Nama digunakan untuk tujuan sebuah link Menentukan ukuran bingkai frame

Menggunakan Frame
<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>

<HTML> <HEAD> <TITLE> Menggunakan Frame </TITLE> </HEAD> <BODY> <FONT SIZE=7> INI FRAME KE 1 <!--Gantilah n dengan angka 1, 2, atau 3 sesuai dengan nama filenya--> </FONT> </BODY> </HTML>

9/29/2009 4:09:08 AM

Pemrograman Berbasis Web HTML

39

9/29/2009 4:09:08 AM

Pemrograman Berbasis Web HTML

40

10

9/29/2009

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
9/29/2009 4:09:08 AM Pemrograman Berbasis Web HTML

41

11