h t m l - rinimyhanny.files.wordpress.com filepasangan tag dan menandakan bahwa kode yang terdapat...
TRANSCRIPT
PEMROGRAMAN WEB
0
MODUL HTML
PEMROGRAMAN WEB
1
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.
PEMROGRAMAN WEB
2
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 :
PEMROGRAMAN WEB
3
<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>
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>
PEMROGRAMAN WEB
4
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>
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 :
PEMROGRAMAN WEB
5
<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>
Daftar atribut tag <HR>
Atribut Keterangan
SIZE Menentukan ketebalan garis
WIDTH Menentukan lebar garis
ALIGN Menentukan peletakkan teks dalam baris
NOSHADE 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 :
PEMROGRAMAN WEB
6
<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 dan ALIGN pada Tag HR</TITLE>
</HEAD>
<BODY>
<HR ALIGN = "CENTER" WIDTH = "5%" SIZE = "10" NOSHADE>
<HR ALIGN = "CENTER" WIDTH = "10%" SIZE = "10" NOSHADE>
<HR ALIGN = "CENTER" WIDTH = "20%" SIZE = "10" NOSHADE>
<HR ALIGN = "CENTER" WIDTH = "35%" SIZE = "10" NOSHADE>
<HR ALIGN = "CENTER" WIDTH = "20%" SIZE = "10" NOSHADE>
<HR ALIGN = "CENTER" WIDTH = "10%" SIZE = "10" NOSHADE>
<HR ALIGN = "CENTER" WIDTH = "4%" SIZE = "10" NOSHADE>
</BODY> </HTML>
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 :
PEMROGRAMAN WEB
7
<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>
MENGATUR TEKS
PEMROGRAMAN WEB
8
Mengatur Teks Secara Fisik
Daftar tag untuk mengatur teks secara fisik
Pemakaian Tag Keterangan
<B>Teks</B> Teks ditampilkan dalam keadaan ditebalkan
<BIG>Teks</BIG> Teks ditampilkan dengan ukuran lebih besar dari ukuran normal
<I>Teks</I> Teks ditampilkan dalam keadaan miring
<SMALL>Teks</SMALL> Teks ditampilkan dengan ukuran lebih kecil dari ukuran normal
<SUB>Teks</SUB> Teks ditampilkan sebagai subskrip
<SUP>Teks</SUP> Teks ditampilkan sebagai superskrip
<TT>Teks</TT> Teks ditampilkan dalam bentuk seperti ketikan mesin tik
<U>Teks</U> Teks ditampilkan dengan diberi garis bawah
Contoh :
PEMROGRAMAN WEB
9
Mengatur Teks Secara Logis
Daftar tag untuk mengatur teks secara logis
Pemakaian Tag Keterangan
<CITE>Teks</CITE> Menyatakan teks adalah kutipan
<CODE>Teks</CODE> 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.
Teks Praformat
Hasil :
Misalnya akan dibuat tampilan seperti berikut :
Untuk membuatnya dituliskan :
PEMROGRAMAN WEB
10
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.
PEMROGRAMAN WEB
11
Hasil :
Perhatikan bahwa spasi maupun baris kosong diikutkan pada tampilan browser. Di dalam pasangan
tag <PRE> dan </PRE>, tidak perlu ditambahkan tag seperti <BR>.
PEMROGRAMAN WEB
12
MENGATUR FONT
Tag <FONT>…</FONT> berguna untuk mengatur jenis, ukuran, maupun warna font.
Jenis Font
Untuk menentukan jenis font, digunakan atribut FACE. Contoh :
PEMROGRAMAN WEB
13
Ukuran Font
Untuk font ditentukan oleh atribut SIZE. Contoh :
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 warna pada atribut penentu warna
Nama Warna RGB Nama Warna RGB
PEMROGRAMAN WEB
14
aqua 00FFFF navy 000080
black 000000 olive 808000
blue 0000FF purple 800080
fuchsia FF00FF red FF0000
gray 808080 silver C0C0C0
green 008000 teal 008080
lime 00FF00 yellow FFFF00
maroon 800000 white FFFFFF
Contoh :
Contoh penggunaan atribut BGCOLOR dan TEXT pada tag BODY :
Mengatur Default Font
HTML menyediakan tag bernama <BASEFONT> yang berfungsi untuk menentukan ukuran default
font untuk seluruh halaman. Contoh :
PEMROGRAMAN WEB
15
Entitas Karakter dan Numerik
Kode HTML untuk menuliskan karakter-karakter khusus
Simbol HTML Simbol HTML
Ä Ä ä ä
Ë Ë ë ë
Ï Ï ï ï
Ö Ö ö ö
Ü Ü ü ü
β ß
© © ½
® ® ¾
™ ™ ¼
Spasi
& &
» »
« «
< <
> >
x ×
÷ ÷
Contoh :
PEMROGRAMAN WEB
16
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 :
PEMROGRAMAN WEB
17
Sekarang marilah membuat kode HTML yang menyediakan link ke dua buah kode HTML di depan.
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 :
File haly.htm :
File halutama.htm :
PEMROGRAMAN WEB
18
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
Contoh :
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 :
Menggunakan Bookmark
PEMROGRAMAN WEB
19
Contoh bookmark :
TARGET = “_blank” pada tag <A>. Contoh :
PEMROGRAMAN WEB
20
PEMROGRAMAN WEB
21
Soal 1 :
Buatlah Tampilan seperti di bawah ini !
PEMROGRAMAN WEB
22
Soal 2 :
Buatlah Tampilan seperti di bawah ini !
PEMROGRAMAN WEB
23
MENGGUNAKAN TABEL
Tag-tag yang terkait dengan pembuatan table :
Tag Keterangan
<TABLE>…</TABLE> Mengawali dan mengakhiri sebuah table
<CAPTION>…</CAPTION> Menentukan judul pada table
<TR>…</TR> Membuat sebuah baris dalam table
<TH>…</TH> Membuat judul kolom
<TD>…</TD> 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”>
Contoh :
PEMROGRAMAN WEB
24
Contoh :
Meletakkan Judul di Bawah Tabel
Untuk menampilkan judul di bawah table, digunakan atribut ALIGN = “BOTTOM” pada tag
<CAPTION>. Contoh :
PEMROGRAMAN WEB
25
Menentukan Warna Latar Belakang Table
Untuk menambahkan warna latar belakang table, digunakan atribut BGCOLOR pada tag
<TABLE>.
Contoh berikut menunjukkan pewarnaan table melalui BGCOLOR pada <TABLE> dan <TD> :
Contoh :
PEMROGRAMAN WEB
26
Menggabungkan Sel
Untuk menggabungkan beberapa baris sel, digunakan atribut ROWSPAN pada tag <TD>.
Untuk menggabungkan beberapa sel dalam satu baris, digunakan atribut COLSPAN pada
tag <TH> atau <TD>. Contoh :
Contoh:
PEMROGRAMAN WEB
27
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
Contoh :
PEMROGRAMAN WEB
28
Untuk mengatur tinggi table, digunakan atribut HEIGHT pada tag <TABLE>.
Mengatur Tinggi Sel
Contoh :
PEMROGRAMAN WEB
29
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 untuk atribut VALIGN
Nilai VALIGN Keterangan
TOP Teks diletakkan di bagian atas pada sel
MIDDLE Teks diletakkan di bagian tengah pada sel
BOTTOM Teks diletakkan di bagian bawah pada sel
Contoh :
PEMROGRAMAN WEB
30
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 :
PEMROGRAMAN WEB
31
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 :
PEMROGRAMAN WEB
32
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 Bentuk Bullet
CIRCLE ◦ DISC • SQUARE ▪
Contoh penggunaan berbagai nilai untuk TYPE :
PEMROGRAMAN WEB
33
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 :
PEMROGRAMAN WEB
34
Sebagai pengganti angka dalam daftar item, dapat dipilih huruf latin atau angka romawi. Hal ini
dilakukan dengan menggunakan atribut TYPE pada tag <OL>.
Daftar nilai untuk atribut TYPE pada tag <OL>
Nilai Keterangan
A Huruf kapital digunakan sebagai pengganti nomor urut
a Huruf kecil digunakan sebagai pengganti nomor urut
I Angka romawi dengan huruf kapital digunakan sebagai pengganti nomor urut
i Angka romawi dengan huruf kecil digunakan sebagai pengganti nomor urut
1 Angka biasa digunakan sebagai penomoran.
Merupakan nilai default kalau TYPE tidak disebutkan.
PEMROGRAMAN WEB
35
Dengan menambahkan atribut START pada tag <OL>, nilai awal atau huruf awal yang digunakan
dalam daftar item dapat ditentukan sendiri. Contoh :
Seperti halnya tag <UL>, Anda juga bisa mengenakan tag <OL> di dalam tag <OL> (tag <OL>
berkalang). Contoh :
Contoh :
PEMROGRAMAN WEB
36
Berhubungan dengan tag <UL>, Anda bisa menyertakan atribut VALUE pada tag <LI> untuk
menentukan nomor urut secara bebas. Contoh :
Daftar Definisi
Daftar ini menyediakan tampilan dengan format mirip kamus, dengan definisi suatu istilah
diletakkan agak menjorok ke kanan.
PEMROGRAMAN WEB
37
Tiga buah pasangan tag yang terkait dengan daftar definisi :
Tag Keterangan
<DL>...</DL> Digunakan untuk menyatakan wadah bagi daftar definisi
<DT>...</DT> Digunakan untuk menyatakan wadah bagi istilah yang akan didefinisikan
<DD>...</DD> 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>
Tag <DIR>
Merupakan daftar tak bernomor yang digunakan untuk menangani direktori. Pada prinsipnya, efek
tag ini sama seperi <UL>. Contoh :
Contoh :
PEMROGRAMAN WEB
38
Tag <MENU>
Termasuk daftar tak bernomor. Umumnya digunakan untuk menangani menu pilihan. Contoh :
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”>
PEMROGRAMAN WEB
39
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 Keterangan
TOP Teks diletakkan di bagian atas
MIDDLE Teks diletakkan di tengah-tengah
BOTTOM Merupakan nilai default. Teks diletakkan di bagian bawah.
LEFT Gambar diletakkan di sebelah kiri pada halaman
RIGHT Gambar diletakkan di sebelah kanan pada halaman
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”>
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 pemakai mematikan fitur untuk mematikan penampilan gambar dan ada kemungkinan
pula pemakai menggunakan browser yang tidak mendukung gambar. Untuk mengatasi keadaan
ini, Anda bisa menyediakan teks alternatif sebagai pengganti gambar. Hal seperti ini dilakukan
dengan menggunakan atribut ALT pada tag <IMG>. Contoh :
PEMROGRAMAN WEB
40
<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”>
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.
PEMROGRAMAN WEB
41
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 pada tag INPUT
Atribut Keterangan
NAME Menentukan nama data. Atribut ini diperlukan oleh semua jenis masukan, kecuali
SUBMIT dan RESET
SIZE Menentukan ukuran kotak masukan yang tertampil untuk teks dan password
MAXLENGTH Menentukan jumlah karakter yang dapat dimasukkan dalam kotak password dan
kotak teks
VALUE Menentukan nilai awal untuk kotak masukan
CHECKED Mengatur agar kotak cek dalam keadaan terpilih pada keadaan awal
TYPE Menentukan tipe kotak masukan
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”>
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”>
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.
PEMROGRAMAN WEB
42
Contoh penggunaan formulir yang melibatkan field teks, tombol Submit, dan tombol Reset :
File info.htm :
PEMROGRAMAN WEB
43
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 :
Tipe CHECKBOX
PEMROGRAMAN WEB
44
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 :
F R A M E
PEMROGRAMAN WEB
45
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.
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 :
File framekir.htm :
File framekan.htm :
PEMROGRAMAN WEB
46
Atribut BORDER pada tag <FRAMESET> berguna untuk mengatur ketebalan garis pemisah
antarframe. Contoh :
Frame dan Link
Untuk mempraktekkan penggabungan pemakaian frame yang melibatkan link ke frame yang lain,
buatlah tiga buah file HTML berikut : File redflash.htm :
Menggunakan BORDER
Menghilangkan SCROLLING
PEMROGRAMAN WEB
47
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 :
Frame Horisontal
HTML juga memungkinkan pembuatan frame horisontal. Caranya dengan mengubah atribut COLS
pada <FRAMESET> menjadi ROWS. Contoh :
File rosebud.htm :
File daftar.htm :
PEMROGRAMAN WEB
48
Penggunaan NORESIZE
Atribut NORESIZE pada tag <FRAME> digunakan agar frame tidak bisa diubah ketika ditampilkan
pada browser. Contoh :
File judul.htm :
Gabungan Frame Horisontal dan Vertikal
PEMROGRAMAN WEB
49
PEMROGRAMAN WEB
50
MEMBUAT FUNGSI
Mendefinisikan Fungsi
Bentuk pendefinisian fungsi :
function nama (daftar_parameter)
{ pernyataan_1; ... Pernyataan_n; }
Contoh :
PEMROGRAMAN WEB
51
Memahami Variabel Lokal dan Variabel Global
Contoh :
PEMROGRAMAN WEB
52
Memvalidasi Masukan pada Formulir
Contoh :
PEMROGRAMAN WEB
53
Menampilkan Jam
Contoh :
PEMROGRAMAN WEB
54
CONTOH SOAL
PEMROGRAMAN WEB
55
PEMROGRAMAN WEB
56