Anda di halaman 1dari 55

PEMROGRAMAN WEB

MODUL HTML
Segala puji bagi Allah SWT berkat rahmat dan petunjuknya MODUL HTML ini dapat tersusun. Modul ini merupakan modul dasar untuk membuat suatu web. Modul ini saya anggap layak dipelajari agar para siswa mempunyai dasar untuk memahami bahasa pemrograman web tingkat lanjut lainnya seperti PHP, Java dan lainnya. Sumber-sumber modul ini saya lupa mengambil dari mana, karena itu saya Johan Sharif, S.Kom meminta maaf jika ada yang tidak berkenan jika merasa memiliki sumber ini. Berdasarkan hati yang tulus saya berani menyebarkan Modul ini agar dapat bermanfaat bagi orang banyak, semoga pemberi sumber dan kami yang terlibat dalam penyusunan modul ini mendapat balasan dari Allah SWT. Karena kami tidak memperjualbelikan modul ini, silahkan bagi siapa saja yang ingin memiliki dan mempelajari tetapi tidak untuk diperjualbelikan. Modul lain dapat di lihat di http://johansmk6.wordpress.com/ Wassalammualaikum ...

Daftar Isi
1. PENGERTIAN HTML......................................................................................... 1 2. MENGATUR TEKS ............................................................................................ 7 3. MENGATUR FONT ............................................................................................ 12 4. MEMBUAT LINK............................................................................................... 16 5. MENGGUNAKAN TABEL ................................................................................... 22 6. MENAMPILKAN DAFTAR ITEM LIST ................................................................ 30 7. MENAMBAHKAN GAMBAR ............................................................................... 37 8. FRAME ............................................................................................................. 43 9. MEMBUAT FUNGSI .......................................................................................... 48

Mr. Joe

PEMROGRAMAN WEB

PENGERTIAL H T M L (HyperText Mark-up Language) HTML adalah sebuah bahasa pemrograman yang digunakan untuk membuat sebuah halaman Web. Untuk menulis kode HTML digunakan editor teks seperti NotePad atau FrontPage. Contoh kode HTML yang sangat sederhana : <HTML> <HEAD> <TITLE>Latihan Pertama</TITLE> </HEAD> <BODY> Selamat Belajar HTML </BODY> </HTML>

Pasangan tag <HTML> dan </HTML> menandakan bahwa kode yang terdapat di dalamnya adalah kode HTML sehingga browser akan menerjemahkan sebagai dokumen HTML Bagian yang terdapat dalam <HTML> dan </HTML> umumnya terbagi atas : 1. kepala, ditandai dengan pasangan tag <HEAD> dan </HEAD> 2. badan, ditandai dengan pasangan tag <BODY> dan </BODY> Pada bagian kepala, bisa ditentukan judul dokumen HTML. Judul ini ditulis dalam pasangan tag <TITLE> dan </TITLE>. Pada contoh di atas, judul dokumen HTML adalah Latihan Pertama. Judul ini diletakkan di bagian atas jendela browser.

Cara Menuliskan Tag Nama tag ditulis di dalam tanda < dan >. Antara nama tag dan tanda < ditulis tanpa spasi sama sekali. Nama tag boleh ditulis dengan huruf kecil, huruf kapital, ataupun kombinasi antara huruf kecil dan huruf kapital. Dengan kata lain, penulisan : <HTML> <html> <Html> dianggap sama. Namun umumnya nama tag ditulis dengan huruf kecil saja atau huruf kapital saja. Atribut dalam Tag Beberapa tag mengandung atribut di dalamnya. Contoh : <P ALIGN=CENTER> Pada contoh ini, P adalah nama tag sedangkan ALIGN adalah nama atribut. Pada umumnya, atribut melibatkan nilai. Pada contoh di atas, CENTER adalah nilai untuk atribut ALIGN.

Mr. Joe

PEMROGRAMAN WEB

Komentar Komentar adalah bagian dari kode HTML yang diabaikan oleh browser. Kegunaan komentar dalam kode HTML adalah sebagai keterangan. Sebuah komentar diawali dengan <!-dan diakrhiri dengan -->. Contoh : <! File komentar.htm Dibuat pada tanggal 4 Agustus 2002 --> <HTML> <HEAD> <TITLE>Komentar</TITLE> </HEAD> <BODY> <!-- Ini juga komentar --> Selamat Belajar HTML </BODY> </HTML>

Tag <BR> Fungsi tag <BR> adalah untuk membuat baris baru atau berpindah baris. Contoh : <HTML> <HEAD> <TITLE>Tag BR</TITLE> </HEAD> <BODY> Selamat Belajar HTML<BR> Semoga Sukses ! </BODY> </HTML>

Tag <P> Tag <P> digunakan untuk membuat paragraf. Contoh : <HTML> <HEAD> <TITLE>Contoh Paragraf</TITLE> </HEAD> <BODY> Pesona Tanaman Hias<P> Keindahan tanaman hias<BR> membawa suatu pesona tersendiri<BR> Warna-warni bunga<BR> aneka rupa corak daun<BR> membuat orang dengan senang hati mengoleksinya </BODY> </HTML>

Mr. Joe

PEMROGRAMAN WEB

Di dalam tag <P> bisa disertakan atribut ALIGN yang berguna untuk mengatur peletakan teks di dalam masing-masing baris. Salah satu nilai yang dapat diberikan pada ALIGN adalah CENTER, yang menempatkan teks berada di tengah-tengah layar pada baris yang bersangkutan. Selain CENTER, nilai lain yang dapat diisikan pada ALIGN yaitu : LEFT, mengatur teks rata kiri terhadap halaman RIGHT, mengatur teks rata kanan terhadap halaman JUSTIFY, mengatur teks rata kiri dan rata kanan. Efeknya terlihat untuk teks yang sangat panjang. Contoh : <HTML> <HEAD> <TITLE>Contoh tag P dengan ALIGN</TITLE> </HEAD> <BODY> PUISIKU: <P ALIGN = "CENTER"> Mataharipun mulai terbangun dari mimpi<BR> menyemburatkan sinarnya yang hangat<BR> Burung-burung berkicau riang<BR> mengucapkan selamat pagi<BR> </P> Yogyakarta, 2002 </BODY> </HTML>

Tag Judul HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam badan dokumen. Tag-tag judul ini berupa : <H1> ... </H1> <H2> ... </H2> <H3> ... </H3> <H4> ... </H4> <H5> ... </H5> <H6> ... </H6> Contoh : <HTML> <HEAD> <TITLE>Tag H1-H6</TITLE> </HEAD> <BODY> <H1>Tag H1</H1> <H2>Tag H2</H2> <H3>Tag H3</H3> <H4>Tag H4</H4> <H5>Tag H5</H5> <H6>Tag H6</H6> </BODY> </HTML>

Mr. Joe

PEMROGRAMAN WEB

Seperti halnya pada tag <P>, tag judul atau heading ini juga memiliki atribut ALIGN. Nilai yang dapat diberikan pada ALIGN adalah : LEFT (default), mengatur teks rata kiri terhadap halaman RIGHT, mengatur teks rata kanan terhadap halaman CENTER, menempatkan judul di tengah-tengah layar pada baris yang bersangkutan JUSTIFY, mengatur teks rata kiri dan rata kanan. Efeknya terlihat untuk teks yang sangat panjang. Contoh : <HTML> <HEAD> <TITLE>Atribut ALIGN</TITLE> </HEAD> <BODY> <H1>Pesona Tanaman Hias</H1> <H1 ALIGN = "LEFT">Pesona Tanaman Hias</H1> <H1 ALIGN = "RIGHT">Pesona Tanaman Hias</H1> <H1 ALIGN = "CENTER">Pesona Tanaman Hias</H1> </BODY> </HTML>

Tag <HR> Untuk mempercantik halaman, seringkali pembuat dokumen Web menambahkan garis horisontal. Garis ini sebenarnya dapat dibuat dengan mudah, yakni dengan menyertakan tag <HR>. Contoh : <HTML> <HEAD> <TITLE>Tag HR</TITLE> </HEAD> <BODY> <H2>Aneka Tanaman Hias</H2> <HR> Aglaonema atau Sri rejeki <HR> Begonia <HR> Bromelia <HR> dll <HR> </BODY> </HTML>

Mr. Joe

PEMROGRAMAN WEB

Daftar atribut tag <HR> Atribut SIZE WIDTH ALIGN NOSHADE Keterangan Menentukan ketebalan garis Menentukan lebar garis Menentukan peletakkan teks dalam baris Mengatur agar garis tidak disertai bayangan

Contoh penggunaan atribut SIZE : <HTML> <HEAD> <TITLE>Atribut SIZE pada Tag HR</TITLE> </HEAD> <BODY> <H1>KEBUN PESONA</H1> <HR SIZE = "10"> Jl. Solo Km 14<BR> Yogyakarta<BR> Indonesia<BR> </BODY> </HTML>

Contoh penggunaan atribut NOSHADE : <HTML> <HEAD> <TITLE>Atribut NOSHADE pada Tag HR</TITLE> </HEAD> <BODY> <H1>KEBUN PESONA</H1> <HR SIZE = "10" NOSHADE> Jl. Solo Km 14<BR> Yogyakarta<BR> Indonesia<BR> </BODY> </HTML>

Contoh penggunaan atribut WIDTH : <HTML> <HEAD> <TITLE>Atribut WIDTH </HEAD> <BODY> <HR ALIGN = "CENTER" <HR ALIGN = "CENTER" <HR ALIGN = "CENTER" <HR ALIGN = "CENTER" <HR ALIGN = "CENTER" <HR ALIGN = "CENTER" <HR ALIGN = "CENTER" </BODY> </HTML>
Mr. Joe

dan ALIGN pada Tag HR</TITLE>

WIDTH WIDTH WIDTH WIDTH WIDTH WIDTH WIDTH

= = = = = = =

"5%" "10%" "20%" "35%" "20%" "10%" "4%"

SIZE SIZE SIZE SIZE SIZE SIZE SIZE

= = = = = = =

"10" "10" "10" "10" "10" "10" "10"

NOSHADE> NOSHADE> NOSHADE> NOSHADE> NOSHADE> NOSHADE> NOSHADE>

PEMROGRAMAN WEB

Tag <CENTER> Untuk menengahkan suatu teks, bisa juga digunakan tag <CENTER>. Tentu saja, untuk mengakhiri penengahan teks (yakni agar teks berikutnya tidak ditengahkan), perlu disertakan </CENTER>. Contoh : <HTML> <HEAD> <TITLE>Tag CENTER</TITLE> </HEAD> <BODY> <CENTER> <H2>Berbagai Jenis Keladi yang mempesona:</H2> Red Flash <BR> Red Fire <BR> Fannie Munson <BR> Pink Beauty <BR> Hilo Beauty <BR> Jackie Suthers <BR> </CENTER> ***** </BODY> </HTML>

Tag DIV Tag divisi (<DIV>) berguna untuk mengelompokkan sejumlah baris teks yang memiliki karakteristik yang sama. Contoh : <HTML> <HEAD> <TITLE>Tag DIV</TITLE> </HEAD> <BODY> <DIV ALIGN = "RIGHT"> <H1><U>PRIMASOFT KREASINDO</U></H1> <H2>Jl. Kalasan KM 14</H2> <H2>Yogyakarta</H2> </DIV> <HR> </BODY> </HTML>

Mr. Joe

PEMROGRAMAN WEB

MENGATUR TEKS Mengatur Teks Secara Fisik Pemakaian Tag <B>Teks</B> <BIG>Teks</BIG> <I>Teks</I> <SMALL>Teks</SMALL> <SUB>Teks</SUB> <SUP>Teks</SUP> <TT>Teks</TT> <U>Teks</U> Contoh : Daftar tag untuk mengatur teks secara fisik Keterangan Teks ditampilkan dalam keadaan ditebalkan Teks ditampilkan dengan ukuran lebih besar dari ukuran normal Teks ditampilkan dalam keadaan miring Teks ditampilkan dengan ukuran lebih kecil dari ukuran normal Teks ditampilkan sebagai subskrip Teks ditampilkan sebagai superskrip Teks ditampilkan dalam bentuk seperti ketikan mesin tik Teks ditampilkan dengan diberi garis bawah

Mr. Joe

PEMROGRAMAN WEB

Mengatur Teks Secara Logis Daftar tag untuk mengatur teks secara logis Keterangan Menyatakan teks adalah kutipan Menyatakan bahwa teks adalah kode atau program komputer. Umumnya teks ditampilkan dengan font monoskrip. <EM>Teks</EM> Menyatakan penekanan pada teks. Umumnya teks ditampilkan miring. <KBD>Teks</KBD> Menyatakan teks adalah masukan dari keyboard. Teks seperti ini umumnya ditampilkan dengan font monospasi. <SAMP>Teks</SAMP> Menyatakan bahwa teks adalah suatu konstanta sederetan karakter. Biasanya ditampilkan dengan font monospasi. <STRONG>Teks</STRONG> Menyatakan bahwa teks yang sangat penting untuk diperhatikan orang. Biasanya disajikan dengan ditebalkan. <VAR>Teks</VAR> Menyatakan teks adalah variabel atau ekspresi matematika atau program komputer. Teks akan disajikan dalam bentuk miring. Pemakaian Tag <CITE>Teks</CITE> <CODE>Teks</CODE> Teks Praformat Misalnya akan dibuat tampilan seperti berikut :

Untuk membuatnya dituliskan :

Mr. Joe

PEMROGRAMAN WEB

Hasil :

Mengapa tidak bisa? Sebab, spasi yang dituliskan di depan tulisan Red Flash, Red Fire, dan sebagainya akan dibuang oleh browser. Lalu bagaimana caranya agar bisa didapatkan hasil seperti yang dikehendaki? Solusinya, gunakan tag <PRE></PRE> untuk membuat teks praformat. Artinya, keadaan yang telah diformat di dalam kode HTML akan ditampilkan seperti itu pula oleh browser.

Mr. Joe

PEMROGRAMAN WEB

Hasil :

Perhatikan bahwa spasi maupun baris kosong diikutkan pada tampilan browser. Di dalam pasangan tag <PRE> dan </PRE>, tidak perlu ditambahkan tag seperti <BR>.

Mr. Joe

10

PEMROGRAMAN WEB

Mr. Joe

11

PEMROGRAMAN WEB

MENGATUR FONT Tag <FONT></FONT> berguna untuk mengatur jenis, ukuran, maupun warna font. Jenis Font Untuk menentukan jenis font, digunakan atribut FACE. Contoh :

Ukuran Font Untuk font ditentukan oleh atribut SIZE. Contoh :

Mr. Joe

12

PEMROGRAMAN WEB

Warna Font Atribut pada tag <FONT> yang berkaitan dengan warna teks yaitu COLOR, yang berguna untuk menentukan warna . Jika warna latar belakang yang akan diatur, pengaturan perlu dilakukan melalui tag <BODY> dengan properti berupa BGCOLOR. Tag BODY juga memiliki atribut bernama TEXT yang dapat digunakan untuk mengatur warna teks pada keseluruhan tubuh dokumen. Daftar nama Nama Warna aqua black blue fuchsia gray green lime maroon Contoh : warna pada atribut penentu warna RGB Nama Warna RGB 00FFFF navy 000080 000000 olive 808000 0000FF purple 800080 FF00FF red FF0000 808080 silver C0C0C0 008000 teal 008080 00FF00 yellow FFFF00 800000 white FFFFFF

Contoh penggunaan atribut BGCOLOR dan TEXT pada tag BODY :

Mr. Joe

13

PEMROGRAMAN WEB

Mengatur Default Font HTML menyediakan tag bernama <BASEFONT> yang berfungsi untuk menentukan ukuran default font untuk seluruh halaman. Contoh :

Mr. Joe

14

PEMROGRAMAN WEB

Entitas Karakter dan Numerik Kode HTML untuk menuliskan karakter-karakter khusus Simbol HTML Simbol HTML &Auml; &auml; &Euml; &euml; &Iuml; &iuml; &Ouml; &ouml; &Uuml; &uuml; &szlig; &copy; &reg; &#8482 Spasi &nbsp; & &amp; &raquo; &laquo; < &lt; > &gt; x &times; &divide;

Contoh :

Mr. Joe

15

PEMROGRAMAN WEB

MEMBUAT LINK Hyperlink ke Halaman Web Untuk membuat link ke halaman lain, digunakan pasangan tag <A></A> atau yang biasa yang disebut tag jangkar atau anchor tag. Bentuk paling sederhana penggunaan tag jangkar adalah sebagai berikut : <A HREF = URL>Label</A> Dalam hal ini, URL (Uniform Resource Locator) dapat berupa alamat suatu dokumen Web, berkas grafik, ataupun menyatakan suatu protokol lain (misalnya FTP). Untuk mempraktikan link, buatlah terlebih dulu dua buah berkas HTML bernama halx.htm dan haly.htm. File halx.htm :

File haly.htm :

Sekarang marilah membuat kode HTML yang menyediakan link ke dua buah kode HTML di depan. File halutama.htm :

Mr. Joe

16

PEMROGRAMAN WEB

Link ke Situs Web Lain Hyperlink tak terbatas ke halaman-halaman Web yang berada pada sistem yang sama. Hyperlink seringkali ditujukan ke situs Web yang lain yang berada di sembarang Web server. Contoh :

Menentukan Warna Hyperlink Label yang menjadi penghubung ke halaman Web lain secara bawaan diberi warna tertentu (umumnya biru) dan diberi garis bawah. Warna tersebut dapat diubah dengan menggunakan atribut LINK yang terdapat pada tag <BODY>. Contoh :

Selain LINK, terdapat dua atribut lagi yang berkaitan dengan pengaturan warna hyperlink : ALINK berguna untuk menentukan link aktif, yaitu link yang telah diklik pemakai tetapi halaman belum selesai dibuka VLINK berguna untuk menentukan warna link yang halaman Web terkaitnya telah dikunjungi

Mr. Joe

17

PEMROGRAMAN WEB

Contoh :

Menggunakan Bookmark Jika halaman Web sangat panjang, adakalanya halaman tersebut dilengkapi dengan sejumlah hyperlink yang mengacu ke area tertentu pada halaman itu sendiri. Hal seperti ini diimplementasikan melalui bookmark sehingga pemakai tidak perlu membolak-balik halaman secara manual untuk mendapatkan bagian tertentu dalam halaman tersebut. Membuka Jendela Baru Kadangkala dikehendaki agar kalau suatu link diklik maka jendela baru akan ditampilkan untuk menampung halaman yang di-link. Hal ini bisa dikerjakan dengan menambahkan kode : TARGET = _blank pada tag <A>. Contoh :

Mr. Joe

18

PEMROGRAMAN WEB

Contoh bookmark :

Mr. Joe

19

PEMROGRAMAN WEB

Soal 1 : Buatlah Tampilan seperti di bawah ini !

Mr. Joe

20

PEMROGRAMAN WEB

Soal 2 : Buatlah Tampilan seperti di bawah ini !

Mr. Joe

21

PEMROGRAMAN WEB

MENGGUNAKAN TABEL Tag-tag yang terkait dengan pembuatan table : Tag <TABLE></TABLE> <CAPTION></CAPTION> <TR></TR> <TH></TH> <TD></TD> Contoh : Keterangan Mengawali dan mengakhiri sebuah table Menentukan judul pada table Membuat sebuah baris dalam table Membuat judul kolom Membuat sebuah sel data

Memberi Garis pada Tabel Bentuk : <TABLE BORDER = bilangan> Kalau BORDER tidak disertakan dalam tag <TABLE>, nilai untuk BORDER dianggap sama dengan nol, dengan akibat garis tidak ditampilkan. Dengan kata lain, <TABLE> identik dengan <TABLE BORDER = 0>

Mr. Joe

22

PEMROGRAMAN WEB

Contoh :

Meletakkan Judul di Bawah Tabel Untuk menampilkan judul di bawah table, digunakan atribut ALIGN = BOTTOM pada tag <CAPTION>. Contoh :

Mr. Joe

23

PEMROGRAMAN WEB

Menentukan Warna Latar Belakang Table Untuk menambahkan warna latar belakang table, digunakan atribut BGCOLOR pada tag <TABLE>. Contoh :

Contoh berikut menunjukkan pewarnaan table melalui BGCOLOR pada <TABLE> dan <TD> :

Mr. Joe

24

PEMROGRAMAN WEB

Menggabungkan Sel Untuk menggabungkan beberapa baris sel, digunakan atribut ROWSPAN pada tag <TD>. Contoh:

Untuk menggabungkan beberapa sel dalam satu baris, digunakan atribut COLSPAN pada tag <TH> atau <TD>. Contoh :

Mr. Joe

25

PEMROGRAMAN WEB

Contoh menggabungkan ROWSPAN dan COLSPAN :

Mengatur Peletakkan Tabel dalam Halaman Atribut ALIGN pada <TR>, <TH>, dan <TD> ALIGN dan Nilainya Keterangan ALIGN = LEFT Teks diatur rata kiri ALIGN = CENTER Teks ditengahkan ALIGN = RIGHT Teks diatur rata kanan

Mr. Joe

26

PEMROGRAMAN WEB

Contoh :

Mengatur Tinggi Sel Untuk mengatur tinggi table, digunakan atribut HEIGHT pada tag <TABLE>. Contoh :

Mr. Joe

27

PEMROGRAMAN WEB

Contoh berikut menunjukkan pengaturan tinggi pada sel tertentu saja. Caranya adalah dengan menggunakan atribut HEIGHT pada tag <TR>.

Pengaturan Teks pada Posisi Vertikal Di dalam sebuah sel, teks dapat diatur menurut posisi vertical apakah akan diletkkan di atas, di tengah, atau di bawah. Hal ini bisa dilakukan dengan menggunakan atribut VALIGN pada tag seperti <TH>, <TR>, atau <TD>.

Nilai VALIGN TOP MIDDLE BOTTOM Contoh :

Nilai untuk atribut VALIGN Keterangan Teks diletakkan di bagian atas pada sel Teks diletakkan di bagian tengah pada sel Teks diletakkan di bagian bawah pada sel

Mr. Joe

28

PEMROGRAMAN WEB

Mengatur Lebar Tabel dan Sel Atribut WIDTH pada tag <TABLE> dapat digunakan untuk mengatur lebar table tanpa tergantung oleh ukuran jendela browser. Contoh :

Contoh berikut menunjukkan penggunaan lebar dalam satuan persen :

Mr. Joe

29

PEMROGRAMAN WEB

WIDTH juga dapat digunakan pada sel tertentu, dengan cara menyebutkannya pada tag <TD> atau <TH>. Contoh :

Nilai WIDTH pada tag <TD> juga bisa berupa %. Contoh :

Mengatur Jarak dalam Tabel Pada tag <TABLE> terdapat dua buah atribut lagi yang dapat digunakan untuk mengatur jarak teks terhadap tepi kiri (yaitu CELLPADDING) dan untuk mengatur jarak bagian sel terhadap tepi dalam bingkai table (yaitu CELLSPACING). Contoh :

Mr. Joe

30

PEMROGRAMAN WEB

MENAMPILKAN DAFTAR ITEM (LIST) Daftar Item Tanpa Nomor Urut Jika Anda ingin menampilkan data dalam bentuk daftar (list) yang tidak diberi nomor, Anda bisa menggunakan tag <UL>. Dalam hal ini, akhir daftar diakhiri dengan </UL>. Setiap item dalam daftar diberi tanda seperti bulatan (bullet), akibat penggunaan tag <LI> di depan masing-masing item. Contoh :

Jenis bullet dapat ditentukan melalui atribut TYPE pada tag <LI> : Nilai untuk TYPE CIRCLE DISC SQUARE Bentuk Bullet

Contoh penggunaan berbagai nilai untuk TYPE :

Mr. Joe

31

PEMROGRAMAN WEB

Daftar yang tak diberi nomor urut juga bisa bersifat berkalang, artinya suatu daftar item berada dalam daftar item yang lain. Contoh :

Daftar Item dengan Nomor Urut Daftar suatu item dapat ditampilkan dengan nomor urut yaitu dengan menggunakan tag <OL>. Pemberian nomor dapat diotomatiskan tanpa harus dituliskan secara eksplisit. Contoh :

Mr. Joe

32

PEMROGRAMAN WEB

Sebagai pengganti angka dalam daftar item, dapat dipilih huruf latin atau angka romawi. Hal ini dilakukan dengan menggunakan atribut TYPE pada tag <OL>. Nilai A a I i 1 Contoh : Daftar nilai untuk atribut TYPE pada tag <OL> Keterangan Huruf kapital digunakan sebagai pengganti nomor urut Huruf kecil digunakan sebagai pengganti nomor urut Angka romawi dengan huruf kapital digunakan sebagai pengganti nomor urut Angka romawi dengan huruf kecil digunakan sebagai pengganti nomor urut Angka biasa digunakan sebagai penomoran. Merupakan nilai default kalau TYPE tidak disebutkan.

Dengan menambahkan atribut START pada tag <OL>, nilai awal atau huruf awal yang digunakan dalam daftar item dapat ditentukan sendiri. Contoh :

Mr. Joe

33

PEMROGRAMAN WEB

Seperti halnya tag <UL>, Anda juga bisa mengenakan tag <OL> di dalam tag <OL> (tag <OL> berkalang). Contoh :

Berhubungan dengan tag <UL>, Anda bisa menyertakan atribut VALUE pada tag <LI> untuk menentukan nomor urut secara bebas. Contoh :

Mr. Joe

34

PEMROGRAMAN WEB

Daftar Definisi Daftar ini menyediakan tampilan dengan format mirip kamus, dengan definisi suatu istilah diletakkan agak menjorok ke kanan. Tiga buah pasangan tag yang terkait dengan daftar definisi : Tag <DL>...</DL> <DT>...</DT> <DD>...</DD> Keterangan Digunakan untuk menyatakan wadah bagi daftar definisi Digunakan untuk menyatakan wadah bagi istilah yang akan didefinisikan Digunakan untuk menyatakan wadah bagi defnisi istilah

Kerangka pemakaian ketiga pasangan tag : <DL> <DT>Istilah-1</DT> <DD>Definisi istilah-1</DD> <DT>Istilah-2</DT> <DD>Definisi istilah-2</DD> ... </DL> Contoh :

Tag <DIR> Merupakan daftar tak bernomor yang digunakan untuk menangani direktori. Pada prinsipnya, efek tag ini sama seperi <UL>. Contoh :

Mr. Joe

35

PEMROGRAMAN WEB

Tag <MENU> Termasuk daftar tak bernomor. Umumnya digunakan untuk menangani menu pilihan. Contoh :

Mr. Joe

36

PEMROGRAMAN WEB

MENAMBAHKAN GAMBAR Mengatur Gambar Latar Belakang Terkadang kita jumpai halaman Web dengan latar belakang berupa suatu gambar. Latar belakang seperti itu kadangkala mempercantik tampilan halaman Web. Untuk menyertakan suatu gambar sebagai latar belakang, dapat digunakan atribut BACKGROUND pada tag <IMG>. Bentuknya sebagai berikut : <BODY BACKGROUND = NamaFileGambar> Contoh : <BODY BACKGROUND = Caladium.jpg>

Menampilkan Gambar Untuk menampilkan gambar, digunakan tag <IMG>. Bentuk paling sederhana dari tag <IMG> : <IMG SRC = nama_gambar> Contoh : <IMG SRC = keladi.jpg>

Mengatur Letak Teks Terhadap Gambar Tag <IMG> menyediakan atribut bernama ALIGN yang berfungsi untuk mengatur penempatan teks terhadap gambar dan untuk mengatur penempatan gambar. Nilai untuk atribut ALIGN : Nilai TOP MIDDLE BOTTOM LEFT RIGHT Contoh : <IMG SRC = RedFlash.gif ALIGN = MIDDLE> <IMG SRC = RedFlash.gif ALIGN = TOP> <IMG SRC = RedFlash.gif ALIGN = LEFT> <IMG SRC = RedFlash.gif ALIGN = RIGHT> Keterangan Teks diletakkan di bagian atas Teks diletakkan di tengah-tengah Merupakan nilai default. Teks diletakkan di bagian bawah. Gambar diletakkan di sebelah kiri pada halaman Gambar diletakkan di sebelah kanan pada halaman

Mr. Joe

37

PEMROGRAMAN WEB

Memberi Bingkai Gambar Dengan menggunakan atribut BORDER pada tag <IMG>, Anda bisa mengatur agar gambar ditampilkan dengan diberi bingkai. Caranya adalah dengan memberikan bilangan pada atribut BORDER. Nilai pada atribut tersebut menyatakan ketebalan bingkai dalam satuan piksel. Contoh : <IMG SRC = RedFlash.gif ALIGN = RIGHT BORDER = 1>

Menyediakan Teks Alternatif Adakalanya kemungkinan pula mengatasi keadaan seperti ini dilakukan pemakai mematikan fitur untuk mematikan penampilan gambar dan ada pemakai menggunakan browser yang tidak mendukung gambar. Untuk ini, Anda bisa menyediakan teks alternatif sebagai pengganti gambar. Hal dengan menggunakan atribut ALT pada tag <IMG>. Contoh :

<IMG SRC = RedFlash.gif ALT = Gambar Keladi ALIGN = MIDDLE>

Mengatur Ukuran Gambar Bila Anda memiliki gambar yang berukuran besar dan bermaksud mengubah ukuran gambar saat gambar ditampilkan, Anda bisa mengaturnya melalui atribut pada tag <IMG> yang bernama HEIGHT dan WIDTH. HEIGHT untuk mengatur tinggi gambar WIDTH untuk mengatur lebar gambar Contoh : <IMG SRC = RedFlash.gif HEIGHT = 150 WIDTH = 150>

Mengatur Ruang Gambar Atribut VSPACE dan HSPACE dapat dimanfaatkan untuk mengatur jarak gambar terhadap teks. VSPACE akan memberikan ruang kosong sebanyak nilai yang disebutkan (dalam satuan piksel) di atas dan bagian bawah gambar HSPACE akan memberikan ruang kosong sebanyak nilai yang disebutkan (dalam satuan piksel) di sebelah kiri dan bagian kanan gambar Contoh : <IMG SRC = RedFlash.gif HSAPCE = 25> <IMG SRC = RedFlash.gif VSAPCE = 25>

Mr. Joe

38

PEMROGRAMAN WEB

MENGGUNAKAN FORM Dasar Penggunaan Form Form dibentuk dengan menggunakan pasangan tag <FORM> dan </FORM>. Dua atribut yang umum digunakan pada tag <FORM> berupa ACTION dan METHOD. ACTION menentukan URL yang akan dijalankan dan menerima semua masukan pada formulir. Jika ACTION tidak disebutkan, informasi akan dikirimkan ke URL yang sama dengan halaman web itu sendiri. METHOD digunakan untuk menentukan bagaimana informasi dikirim ke URL yang disebutkan dalam ACTION. Nilai yang umum untuk atribut ini berupa GET dan POST. POST membuat informasi dikirimkan secara terpisah dengan URL, sedangkan GET akan membuat informasi dikirim menjadi satu dengan URL. Contoh penggunaan pasangan tag <FORM> dan </FORM> : <FORM ACTION = info.htm METHOD = POST> ... </FORM>

Memasukkan Data dengan INPUT Tag <INPUT> digunakan untuk melakukan pemasukan data dan letaknya berada dalam pasangan tag <FORM> dan </FORM>. Ada bermacam-macam tipe pemasukan data, antara lain berupa kotak teks, kotak password, tombol radio, kotak cek, serta tombol SUBMIT dan RESET. Atribut NAME SIZE MAXLENGTH VALUE CHECKED TYPE Tipe TEXT Tipe TEXT bermanfaat untuk memasukkan data seperti nama orang atau alamat seseorang. Contoh pemakaian :
<INPUT TYPE = TEXT NAME = nama_pegawai SIZE = 20 MAXLENGTH = 20>

Atribut pada tag INPUT Keterangan Menentukan nama data. Atribut ini diperlukan oleh semua jenis masukan, kecuali SUBMIT dan RESET Menentukan ukuran kotak masukan yang tertampil untuk teks dan password Menentukan jumlah karakter yang dapat dimasukkan dalam kotak password dan kotak teks Menentukan nilai awal untuk kotak masukan Mengatur agar kotak cek dalam keadaan terpilih pada keadaan awal Menentukan tipe kotak masukan

Dengan menggunakan atribut VALUE pada tag <INPUT>, field teks dapat diberi nilai bawaan. Contoh :
<INPUT TYPE = TEXT NAME = nama_pegawai SIZE = 20 MAXLENGTH = 20 VALUE = Isi dengan nama Anda>

Mr. Joe

39

PEMROGRAMAN WEB

Tombol SUBMIT dan RESET Tipe SUBMIT pada tag <INPUT> akan membentuk tombol Submit, yaitu tombol yang menyebabkan URL yang disebutkan pada ACTION pada tag <FORM> akan dimuat. Contoh penulisan kode dengan tombol Submit yang paling sederhana :
<INPUT TYPE = SUBMIT>

Jika tulisan pada tombol tidak berisi Submit, perlu disebutkan pada atribut VALUE. Contoh :
<INPUT TYPE = SUBMIT VALUE = Kirim>

Tombol Reset berfungsi untuk mengosongkan atau mengembalikan nilai field teks ke nilai bawaan. Contoh penggunaan formulir yang melibatkan field teks, tombol Submit, dan tombol Reset :

File info.htm :

Mr. Joe

40

PEMROGRAMAN WEB

Perbedaan GET dan POST

Tipe PASSWORD Tipe PASSWORD yang disebutkan pada atribut TYPE pada tag <INPUT> akan membuat setiap karakter yang diketikkan oleh pemakai pada field ini disembunyikan (misalnya dengan diganti tanda * untuk setiap karakter yang diketikkan pemakai). Contoh :

Mr. Joe

41

PEMROGRAMAN WEB

Tipe CHECKBOX Tipe CHECKBOX berguna untuk membuat kotak cek. Kotak cek adalah suatu bentuk masukan yang memungkinkan pemakai mencentang atau tidak mencentang kotak tersebut dengan mengklik mouse pada saat penunjuk mouse menunjuk kotak cek. Kotak cek paling tidak melibatkan atribut NAME. Adapun atribut CHECKED bersifat opsional, yang digunakan untuk memberi nilai awal berupa tanda centang. Contoh :

Tombol Radio Tombol radio digunakan dalam bentuk 2 tombol atau lebih yang memungkinkan pemakai hanya memilih satu dari sekian tombol. Tombol radio diimplementasikan dengan menggunakan tag <INPUT> dengan atribut TYPE diberi nilai RADIO. Untuk membentuk sekelompok radio yang menyatakan sebuah pilihan, atribut NAME perlu diisi dengan nama yang sama. Atribut VALUE untuk menentukan nilai terhadap nama data sekiranya tombol tersebut diklik. Contoh :

Mr. Joe

42

PEMROGRAMAN WEB

FRAME Dasar Penggunaan Frame Frame memungkinkan satu halaman Web atau lebih ditampilkan pada sebuah jendela browser. Untuk mempraktikan frame, buatlah terlebih dulu dua buah berkas HTML bernama framekir.htm dan framekan.htm. File framekir.htm :

File framekan.htm :

Halaman yang berbasis frame dibentuk dengan menggunakan pasangan <FRAMESET> dan </FRAMESET>, atribut COLS digunakan untuk menentukan lebar masing-masing frame. Contoh :

Mengantisipasi Tidak Adanya Dukungan Frame Ada kemungkinan bahwa Web browser yang digunakan pemakai tidak mendukung fitur frame. Untuk mengatur agar ada pemberitahuan bahwa halaman Web hanya bisa dilihat dengan browser yang mendukung frame digunakan pasangan tag <NOFRAMES> dan </NOFRAMES>. Contoh :

Mr. Joe

43

PEMROGRAMAN WEB

Menggunakan BORDER Atribut BORDER pada tag <FRAMESET> berguna untuk mengatur ketebalan garis pemisah antarframe. Contoh :

Menghilangkan SCROLLING

Frame dan Link Untuk mempraktekkan penggabungan pemakaian frame yang melibatkan link ke frame yang lain, buatlah tiga buah file HTML berikut : File redflash.htm :

Mr. Joe

44

PEMROGRAMAN WEB

File rosebud.htm :

File daftar.htm :

Pada file daftar.htm, atribut TARGET digunakan untuk menentukan frame yang akan ditempati oleh halaman Web yang dipanggil. Kode yang digunakan untuk menggabungkan ketiga file di atas adalah seperti berikut :

Mr. Joe

45

PEMROGRAMAN WEB

Frame Horisontal HTML juga memungkinkan pembuatan frame horisontal. Caranya dengan mengubah atribut COLS pada <FRAMESET> menjadi ROWS. Contoh :

Penggunaan NORESIZE Atribut NORESIZE pada tag <FRAME> digunakan agar frame tidak bisa diubah ketika ditampilkan pada browser. Contoh :

Gabungan Frame Horisontal dan Vertikal

Mr. Joe

46

PEMROGRAMAN WEB

File judul.htm :

Mr. Joe

47

PEMROGRAMAN WEB

MEMBUAT FUNGSI Mendefinisikan Fungsi Bentuk pendefinisian fungsi : function nama (daftar_parameter) { pernyataan_1; ... Pernyataan_n; } Contoh :

Mr. Joe

48

PEMROGRAMAN WEB

Memahami Variabel Lokal dan Variabel Global Contoh :

Mr. Joe

49

PEMROGRAMAN WEB

Memvalidasi Masukan pada Formulir Contoh :

Mr. Joe

50

PEMROGRAMAN WEB

Menampilkan Jam Contoh :

Mr. Joe

51

PEMROGRAMAN WEB

CONTOH SOAL

Mr. Joe

52

PEMROGRAMAN WEB

Mr. Joe

53

PEMROGRAMAN WEB

Mr. Joe

54