Modulweb 1

MODUL
PEMROGRAMAN WEB 1
Disusun oleh :
ASIH WINANTU, S.Kom
UNIT PELAKSANA TEKNIS
LABORATORIUM KOMPUTER
STMIK EL RAHMA YOGYAKARTA
Halaman
PENGENALAN WEB
Apakah web :
Web (World Wide Web) merupakan salah satu layanan yang didapat oleh pemakai komputer
yang terhubung ke internet, yang dapat memudahkan pengguna komputer untuk
berinteraksi dengan pengguna internet lainnya dan mencari informasi yang diperlukan.
Web browser :
Browser web merupakan software yang digunakan untuk menampilkan informasi dari
server web.
Contoh dari web browser : Opera, Mozzila, Netscape Navigator, Internet Explorer, Lynx,
Konqueror.
Server web :
Server web adalah komputer yang digunakan untuk menyimpan dokumen-dokumen web,
komputer ini akan melayani permintaan dokumen web dari kliennya.
Contoh dari web server : IIS, PWS, Apache, Xitami.
Pemrograman web (HTML):
Dalam pemrograman web, diperlukan suatu file teks yang bernama atau berekstensi HTML
(Hypertext Markup Language).
Ada dua cara untuk membuat sebuah web page:
1. dengan menggunakan editor teks biasa (notepad, editplus)
2. dengan HTML Editor.
Dokumen HTML disusun oleh elemen-elemen seperti : head, body, table, paragraf dan list.
Untuk menandai berbgai elemen dalam suatu dokumen HTML, kita menggunakan tag. Tag
HTML terdiri atas sebuah kurung sudut kiri (<, lebih kecil), sebuah nama tag, dan sebuah
kurung sudut kanan (>, tanda lebih besar). Tag umumnya berpasangan, misalkan tag awal
<H1> berpasangan dengan tag akhir </H1>.
Halaman
Struktur Dokumen HTML :

Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag
<html>, <head>, dan <body> berikut tag-tag pasangannya. Setiap dokumen terdiri atas tag
head dan body. Elemen head berisi informasi tentang dokumen tersebut, dan elemen body
berisi teks yang sebenarnya yang tersusun dari link, grafis, paragraf dan elemen lainnya.
Berikut ini adalah pola dasar sebuah dokumen HTML :
<html>
<head>
. Informasi tentang dokumen HTML.
</head>
<body>
. Informasi tentang yang akan ditampilkan dalam browser web.
</body>
</html>
Halaman
MODUL I
(STRUKTUR HTML)
Praktikum 1
Bukalah notepad atau program text editor yang lain.
Ketikkan script berikut :
<HTML>
<HEAD>
<TITLE> World Wide Web</TITLE>
<BODY>
<CENTER><H1>Definisi World Wide Web</H1></CENTER>
<P ALIGN=LEFT>
WWW adalah layanan yang paling sering digunakan dan memiliki
perkembangan yang sangat cepat karena dengan layanan ini kita
bisa menerima informasi dalam berbagai format (multimedia).
Untuk
mengakses
layanan
WWW
dari
sebuah
komputer
(yang
disebut WWW server atau web server) digunakan program web

client yang disebut web browser atau browser saja. Jenisjenis
browser
yang
sering
digunakan
adalah:
Netscape
Navigator/Comunicator, Internet Explorer, NCSA Mosaic, Arena,

Lynx, dan lain-lain.
<P ALIGN=RIGHT>
Surfing
merupakan
istilah
umum
yang
digunakan
bila
menjelajahi dunia maya atau web. Tampilan web yang sangat

artistik yang tidak hanya menampilkan teks tapi juga gambargambar yang di tata sedemikian rupa sehingga selalu membuat
betah netter untuk surfing berjam-jam. Karena itu para netter
harus sangat memperhitungkan rencana web mana saja yang akan
dikunjungi atau batasi informasi yang ingin diakses, karena
Halaman
bila tidak netter akan tersesat kedalam rimba informasi yang

maha luas.
</BODY>
</HTML>
Simpan (File|Save As), dengan nama web.html, pada kolom Save As Type, pilihlan All
Files(*.*).
Buka web browser anda (internet explorer)
Bukalah dokumen yang anda buat tadi. (File|Open)
Klik browse: arahkan ke file Contoh1.html, klik OK
Lihatlah hasilnya :
Halaman
Praktikum 2
Pada praktikum 2 kali ini kita akan belajar menambahkan warna background, dan pemformatan
tampilan teks.
Buka kembali file web.html pada program teks editor anda (notepad).
Ubah perintah berikut <BODY BGCOLOR=PINK>
Ubah paragraf pertama menjadi seperti dibawah ini :
<P ALIGN=LEFT>
<B>WWW</B>
adalah
layanan
yang
paling
sering
digunakan
dan
memiliki perkembangan yang sangat cepat karena dengan layanan

ini
kita
bisa
menerima
informasi
dalam
berbagai
format
(multimedia). Untuk mengakses layanan WWW dari sebuah komputer

(yang disebut <U>WWW server atau web server </U>) digunakan
program web client yang disebut web browser atau browser saja.
Jenis-jenis browser yang sering digunakan adalah: <I>Netscape
Navigator/Comunicator, Internet Explorer, NCSA Mosaic, Arena,
Lynx, dan lain-lain.</I>
Simpan hasil editing anda (File|Save)
Lihat hasil perubahan pada web browser anda.
Praktikum 3
Buatlah sebuah dokumen HTML untuk tulisan berikut ini :
Simpan dengan nama Lulusan_kompetitif.html.
Lulusan S-1 yang Kompetitif
Sebuah perenungan untuk anda para mahasiswa
SEKITAR 15-20 tahun yang lalu, lulusan Strata 1 (S-1) dapat dipastikan bisa memperoleh
Halaman
pekerjaan yang enak dengan cepat. Enak di sini maksudnya mendapatkan jabatan dan gaji yang
baik. Namun, sekarang keadaan berubah. Tidak sedikit lulusan sarjana yang menganggur karena
tidak mendapat pekerjaan dan tidak bisa membuka usaha sendiri. Untuk menutupi kenyataan
menganggur, beberapa penganggur mencoba melucu dengan mengatakan bekerja di perumtel,
kependekan dari penunggu rumah dan telenovela. Menganggurnya lulusan S-1 tidak saja akibat
kondisi di luar, tetapi juga akibat kondisi dari dalam diri lulusan S-1 itu. Banyak mahasiswa yang
tidak menyiapkan diri dan mentalnya selama kuliah sehingga ketika lulus tidak tahu ke arah mana
harus melangkah.
Sesungguhnya apa yang dipikirkan para lulusan SMU ketika memasuki bangku kuliah dan
bidang studi yang dipilihnya? Menjadi tukang insinyur seperti si Doel anak sekolahan? Lalu, ke
mana setelah itu? Apakah di benak mereka terpikirkan 3 K: Kuliah, kerja, kawin? Lulus kuliah,
mencari pekerjaan, kemudian menikah, dan seterusnya?
Apakah para mahasiswa itu terkungkung dalam situasi dunianya sendiri tanpa melihat dunia di
luarnya seperti adanya pasar global yang dinamis dan menuntut daya saing sangat kompetitif?
Siapkan mereka menyambut pasar bebas ASEAN (AFTA) tahun 2003? Pedulikah mereka pada
pengakuan kualitas kelulusan mereka oleh negara lain yang sangat penting untuk persaingan
global dan pasar bebas? Pedulikah mereka pada posisi sumber daya manusia (SDM) Indonesia di
antara SDM bangsa lain?
Halaman
MODUL II
(PEMFORMATAN TEKS DAN KARAKTER KHUSUS)
Pemformatan Teks:
Perintah-perintah yang digunakan:
<FONT FACE=nama font SIZE=ukuran font COLOR=warna
font> ..teks.. </font>
tag-tag pemformatan :
Tag awal
<b>
<big>
<em>
<I>
<small>
<strong>
<sub>
<sup>
<u>
<s>
Kegunaan
Mendefinisikan teks yang ditebalkan.
Mendefinisikan teks yang besar ukurannya.
Mendefinisikan teks yang ditekankan
Mendefinisikan teks yang dimiringkan Italic
Mendefinisikan teks yang kecil ukurannya
Mendefinisikan teks yang ditebalkan.
Mendefinisikan teks yang dijadikan subscript.
Mendefinisikan teks yang dijadikan superscript.
Mendefinisikan teks yang digaris bawahi Underline
Mendefinisikan teks yang di coret strikethrough
Karakter-karakter khusus
Entitas
©
®

&
«
»
£
€
¥
Keterangan
Copyright
Registered
Trade mark
Non breaking space
Ampersand
Anggle quotation mark (left)
Anggle quotation mark (right)
Poundsterling
Euro
Yen
Praktikum 1
Ketikkan script berikut menggunakan teks editor.
Simpan dengan nama Internet.html
<html>
<head><title> Interconnected Network</title>
Halaman
</head>
<body bgcolor=pink>
<center>
<font face=arial size=6 color=red> Interconnected Network
alias Internet</font>
</center>
<hr>
<font face=helvetica size=4 color=red>
<p align=left>
<I>Interconnected Network</I> - atau yang lebih populer
dengan sebutan Internet - adalah sebuah sistem komunikasi
global yang menghubungkan komputer-komputer dan jaringanjaringan komputer di seluruh dunia. Setiap komputer dan
jaringan terhubung - secara langsung maupun tidak langsung ke beberapa jalur utama yang disebut <I> internet backbone
</I> dan dibedakan satu dengan yang lainnya menggunakan
<I>unique name</I> yang biasa disebut dengan alamat IP 32
bit. Contoh: 202.155.4.230 . Komputer dan jaringan dengan
berbagai platform yang mempunyai perbedaan dan ciri khas
masing-masing (Unix, Linux, Windows, Mac, dll) bertukar
informasi dengan sebuah protokol standar yang dikenal dengan
nama TCP/IP (<I>Transmission Control Protocol/Internet
Protocol</I>). TCP/IP tersusun atas 4 layer (network access,
internet, host-to-host transport, dan application) yang
masing-masing memiliki protokolnya sendiri-sendiri.
</font></p>
<font face=garamond size=4 color=blue>
<p align=right>
Bila anda mempunyai Komputer minimal prosessor 486, Windows
95, Modem, dan line telepon, maka anda telah bisa bergabung
dengan ribuan juta komputer lain dari seluruh dunia dan
mengakses harta karun informasi di internet.
</font>
Halaman 10
</p>
<hr>
<center>
<font face=century size=3 color=brown>&copy STMIK EL RAHMA
<br><b>Yogyakarta</b></font>
</center>
</body>
</html>
Praktikum 2
<HTML>
<HEAD>
<TITLE> karakter khusus </TITLE>
</HEAD>
<BODY>
Copyright © <br>
Trademark ™ <br>
Registered ® <br>
Poundsterling £ <br>
Yen ¥ <br>
Euro €<br>
</BODY>
</HTML>
Simpan dengan nama karakter_khusus.html
Lihat hasilnya dengan browser.
Halaman 11
Praktikum 3
<HTML>
<HEAD>
<TITLE> Formatting Font </TITLE>
</HEAD>
<BODY>
<b>Bold</b>
<BR>
<u>Underline</u>
<BR>
<I>Italic</I>
<BR>
<strong>Strong</strong>
<BR>
<em>Emphasis</em>
<BR>
<cite>Citation</cite>
<BR>
<S>strikethrough</s>
Halaman 12
<BR>
CO<sup>2</sup>
<BR>
H<sub>2</sub>O
</BODY>
</HTML>
Simpan dengan nama font.html
Halaman 13
MODUL III
(Penyisipan Gambar)
Perintah-perintah yang digunakan dalam penyisipan gambar :
Perintah dibawah ini digunakan untuk menyisipkan gambar kedalam dokumen HTML.
<img src=nama_ image.ext width=ukuran lebar gambar
height=ukuran tinggi gambar align=posisi/perataan gambar
terhadap teks>
Bila ingin menggunakan gambar sebagai background/latar belakangdokumen HTML
<body background=nama_image.ext>
praktikum 1
<html>
<head>
<title>Wisata Dunia</title>
</head>
<body background="Bgd.gif">
<p align="center"><b><u>Tempat-tempat yang indah didunia
</u></b></p>
<hr>
<p align="left">Inilah tempat-tempat wisata dunia yang banyak
dikunjungi oleh
wisatawan tiap tahunnya:</p>
<p align="left"><img border="0" src=" lawu.jpg" width="148"
height="103">
<b>Gunung Lawu</b> : terletak di Propinsi Jawa Timur
Halaman 14
Indonesia</p>
<p align="left"><b>Hawaii</b> : Terletak di Benua Amerika <img
border="0" src=" Hawaii.jpg" width="203" height="134"></p>
</body>
</html>
Simpan dengan nama image_align.html
Lihat hasil melalui browser.
Halaman 15
Praktikum 2 (Tugas)
Buatlah dokumen HTMl dengan tampilan sebagai berikut :
Halaman 16
MODUL 4
HYPERLINK
Perintah-perintah yang digunakan :

Membuat link dengan karakter : <a href=URL/dokumen.html>link</a>
Membuat link dengan gambar :
<a href=URL/dokumen.html><img src=nama_gambar></a>
Membuat nama link pada satu dokumen (anchor) :
<a name=nama_anchor></a>
Membuat link pada bagian lain dalam satu dokumen HTML. :
<a href=#nama_anchor>nama_link</a>
Praktikum 1
<html>
<head>
<title>Wisata Dunia</title>
</head>
<body background=" Bgd.gif">
<p align="center">
<a name="atas"><b><u>Tempat-tempat yang indah didunia
</u></b></a>
</p>
<hr>
<p align="left">
Inilah tempat-tempat wisata dunia yang banyak dikunjungi oleh
wisatawan tiap tahunnya.
</p>
<p align="left">Ikuti link pada gambar untuk melihat secara
detail.</p>
Halaman 17
<p align="left">
<a href=" detail_tempat_wisata.html"><img src="lawu.jpg"
width="136" height="95">
</a>
<b>Gunung Lawu</b> : di Propinsi Jawa Timur
<p>
<p align="left">
<b>Hawaii</b> : Terletak di Benua Amerika
<a href=" detail_tempat_wisata.html"><img src=" Hawaii.jpg"
width="161" height="99"></a>
</p>
<p align="left">
<a href="detail_tempat_wisata.html">
<img src="Colouseum.jpg" width="134" height="89"></a>
<b>Colloseum</b> : ada di Romawi
</p>
<p align="left">
<b>Candi Borobudur</b> : Di Jawa Tengah
<a href=" detail_tempat_wisata.html"><img src="Borobudur.jpg"
width="132" height="92"></a>
</p>
<p align="center"></p>
<p align="center">Tersedia paket perjalanan wisata dengan
harga mulai 100$ US</p>
<p align="center"><a href="mailto:pesan@travel.com">Pesan
sekarang juga</a></p>
<hr>
<a href="#atas">TOP</a>
</body>
</html>
Simpan dengan nama Tempat_wisata.html
Jalankan dari web browser.
Halaman 18
Halaman 19
Praktikum 2
Buat script berikut dan simpan dengan nama detail_tempat_wisata.html
<html>
<head>
<title>Detail Tempat Wisata</title>
</head>
<body>
<p align="center">
<b><font size="4">Detail Tempat Wisata</font></b>
</p>
<p>
<u><b>Gunung Lawu</b></u>
</p>
<p>
<img src="lawu.jpg" width="156" height="113" align="left">
Gunung yang indah dan penuh dengan legenda ini terletak di
Propinsi Jawa Timur, dengan
ketinggian sekitar 3265 diatas permukaan laut.
</p>
<p>Harga paket perjalanan wisata : Rp. 500.000 (3H2M)</p>
<p> </p>
<p>
<b><u>Hawaii</u></b>
</p>
<p>
<img src="Hawaii.jpg" width="154" height="98" align="left">
</p>
<p align="left">
Kepulauan hawaai merupakan pulau yang indah dengan pantaipantai
yang eksotis. Dengan tarian yang khas, dan keramah-tamahan
penduduknya.
</p>
Halaman 20
<p align="left">
Harga paket perjalanan wisata : $500.000 (3H2M)</p>
<p> </p>
<p><b><u><a href="wisata_dunia.html">Kembali</a></u></b></p>
</body>
</html>
Cek semua link yang terdapat pada kedua file HTML diatas
Halaman 21
MODUL 5
LIST
List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar sesuatu.
Jenis-jenis list dalam HMTL :
List dengan nomor (OL : Ordered List)
Nomor item pada ordered list secara default adalah menggunakan angka 1,2,3.., dst sampai
sejumlah item dalam list tersebut. Bila nomor ingin diganti dengan type yang lain (romawi,
abjad huruf besar/kecil), maka kita tinggal mengisi atribut type pada tag <ol>
Contoh untuk list dengan angka romawi : <ol type=I>
List tanpa nomor (UL: Unordered List)
Jenis bullet pada unordered list bisa diganti dengan mengisikan atribut type pada tag <ul>
Contoh <ul type=box> : bila ingin bullet berbentuk kotak.
List definisi
Praktikum 1:
Cobalah script berikut ini :
<HTML>
<HEAD>
<TITLE> Ordered List & Unordered List</TITLE>
</HEAD>
<BODY>
<h4>An ordered List : </h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h4>An unordered List : </h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
Halaman 22
</ul>
</BODY>
</HTML>
Simpan dengan nama list.html
Jalankan dengan web browser
Praktikum 2:
Cobalah script berikut ini :
<HTML>
<HEAD>
<TITLE> definition list </TITLE>
</HEAD>
<BODY>
<DL>
<DT>Coffee</DT>
<DD>Black hot drink</DD>
<DT>Ice Cream</DT>
<DD>sweet Cold drink</DD>
</DL>
</BODY>
</HTML>
Simpan dengan nama definition.html
Halaman 23
MODUL 6
TABEL
Elemen-elemen tabel :
Elemen
Keterangan
<table>...</table> Mendefinisikan sebuah tebel dalam HTML. Jika atribut border dituliskan,
<th></th>
maka browser akan menampilkan tabel dengan border.

Mendefinisikan sel header tabel, secara default teks dalam sel ini ditebalkan
<tr></tr>
dan rata tengah.

Mendefinisikan sebuah baris tabel dalam tabel. Anda dapat mendefinisikan
atribut untuk seluruh baris : align(left,center,right) dan/atau valign
<td></td>
(top,middle,bottom)
Mendefinisikan sebuah sel data tabel, secara default teks dalam sel ini akan
ditampilkan rata kiri dan ditengah secara vertikal. Sel data tabel dapat berisi
atribut untuk mendefinisikan karakteristik dari sel dan isinya.
Praktikum 1
Ketikkan script berikut
<HTML>
<HEAD>
<TITLE> Belajar Tabel </TITLE>
</HEAD>
<BODY>
<h4>Daftar Pegawai STMIK</h4 >
<TABLE BORDER="1">
<TR ALIGN="CENTER" BGCOLOR="PINK">
<TD>No</TD>
<TD>Nama</TD>
<TD>Alamat</TD>
<TD>Telepon</TD>
</TR>
<TR>
Halaman 24
<TD>1</TD>
<TD>Asih Winantu</TD>
<TD>Bantul Yogyakarta</TD>
<TD>0274-441170</TD>
</TR>
<TR>
<TD>2</TD>
<TD>Agus Riyanto</TD>
<TD>Sleman Yogyakarta</TD>
<TD>0274-377982</TD>
</TR>
<TR>
<TD>3</TD>
<TD>M Wahib</TD>
<TD>Blora Jawa Tengah</TD>
<TD>0274-377982</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Simpan dengan nama tabel1.html
Halaman 25
Praktikum 2
Ketikkan script berikut ini
<html>
<head>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0"
width="100%">
<caption><b>Daftar Nilai Pemrograman Web 1</b></caption>
<tr>
<th width="33%" rowspan="2" valign="middle">Nama</th>
<th width="67%" colspan="2" >Nilai</th>
</tr>
<tr>
<th width="33%">Tugas</th>
<th width="34%">Praktikum</th>
</tr>
<tr>
<td width="33%">Lutfia</td>
<td width="33%" align="center">80</td>
</tr>
<tr>
<td width="33%">yulia </td>
</tr>
<tr>
<td width="33%">Ardian</td>
</tr>
Halaman 26
</table>
</body>
</html>
Simpan dengan nama tabel2.html
Praktikum 3 (tugas)
Buatlah dokumen HTML dengan tampilan sebagai berikut :
Biaya SPP Per semester STMIK El Rahma Yogyakarta

Tahun ajaran 2005/2006
Lulusan
LPK El Rahma
LPK Non El Rahma
SMU/Sederajat
Periode Daftar
Biaya
I
II
III
I
II
III
I
II
III
Rp. 650.000
Rp. 700.000
Rp. 750.000
Rp. 675.000
Rp. 725.000
Rp. 775.000
Rp. 700.000
Rp. 750.000
Rp. 800.000
Halaman 27
MODUL 7
FRAME
Sintaks :
<frameset>
<frame src=url name=nama frame>
</frame>
Praktikum 1
Buat file dengan nama Frame.html
<frameset framespacing="0" border="0" rows="64,*,79"
frameborder="0">
<frame name="top" scrolling="no" noresize target="contents"
src="atas.htm">
<frameset cols="150,*">
<frame name="contents" target="main" src="kiri.htm">
<frame name="main" src="utama.htm" scrolling="no">
</frameset>
<frame name="bottom" scrolling="no" noresize
target="contents" src="bawah.htm">
</frameset>
Buat file dengan nama atas.html
<html>
<head>
</head>
<body>
<p align="center"><b><font size="5">
<marquee width="661" height="19">STMIK EL RAHMA : Menggapai
Ilmu Menuju Rahmat</marquee>
</font></b></p>
Halaman 28
</body>
</html>
Buat file dengan nama utama.html
<html>
<head>
<title>SELAMAT DATANG DI SITUS STMIK EL RAHMA</title>
</head>
<body>
<p align="center"><b><img border="0" src="LOGOSTIMIK.jpg"
width="61" height="61" align="middle">
SELAMAT DATANG DI SITUS STMIK EL RAHMA</b></p>
<hr>
<p align="left">STMIK El Rahma Yogyakarta berdiri pada tanggal
30 Agustus 2001
dengan SK Mendiknas No. 155/D/0/2001 dibawah naungan Yayasan
El Rahma. Pada saat
berdirinya, STMIK El Rahma memiliki lima program studi yaitu
Sistem Informasi,
Teknik Informatika, Manajemen Informatika, Teknik Komputer dan
Komputerisasi
Akuntansi.</p>
</body>
</html>
Buat file dengan nama kiri.html
<html>
<head>
<title>Program Studi</title>
</head>
<body>
<p>Sejarah Singkat</p>
<p>Program Studi</p>
Halaman 29
<p>Fasilitas</p>
<p>Alumni</p>
<p>Info Kerja</p>
</body>
</html>
Buat file dengan nama bawah.html
<html>
<head>
<title>untitled</title>
</head>
<body>
<p align="center"> STMIK EL RAHMA<br>2005</p>
</body>
</html>
Jalankan file frame.html, pastikan hasilnya seperti gambar berikut :
Halaman 30
Halaman 31
MODUL 8
IMAGE MAP
Metode ImageMap mengharuskan pemrogram web untuk mendefinisikan daerah-daerah dalam
suatu gambar (image) yang mempunyai link. Derah yang didefinisikan berupa bentuk daerah dan
koordinat pembatasnya. Bentuk daerah peta dibedakan menjadi :
Point : daerah berupa titik
Rect : daerah berupa kotak/persegi panjang
Poly : daerah berbentuk polygon
Circle : daerah berbentuk lingkaran
Koordinat daerah menggunakan posisi titik (point). Adapun ketentuan pendefinisian koordinat
(0,0) dimulai dari pojok kiri atas gambar, dan maksimum koordinat adalah pojok kanan bawah
gambar (lebar_maks, tinggi_maks).
Sintaks :
<img src=nama gambar sebagai map width=lebar tampilan
gambar height=tinggi tampilan gambar usemap=#nama_map
border=0>
<map name=nama_map>
<area shape=jenis map coords=koordinat map
href=file yang dipanggil>
</map>
Coordinat dari object relatif terhadap pojok kirai atas image.
Coordinate
Value
Rect
Left-x, top-y, right-x, bottom-y
Circle
CENTER-X, CENTER-Y, RADIUS
Poly
X1, Y1, X2, Y2, XN, YN
Halaman 32
Contoh:
<html>
<head>
<title>Creating Hotspot</title>
</head>
<body>
<img src="Starry.gif" width="400" height="200"
border="0" usemap="#Map">
<map name="Map">
<area shape="rect"
coords="0,0,200,100"
href="file1.htm"
alt="kotak link">
<area shape="circle"
coords="354,41,36"
href="file2.htm"
alt="lingkaran link">
<area shape="poly"
coords="58,102,97,101,110,134,
119,119,177,195,69,196,
47,162,62,143" href="#">
</map>
</body>
</html>
Halaman 33
Contoh penggunaan image map:
Link 2
Link 1
Link 4
Link 3
Script dari image map diatas adalah :

<html>
<head><title>Image Map</title></head>
<body>
<p align="center"><map name="Peta">
<area href="profile.html" shape="rect" coords="114, 4, 228,
118">
<area href="fasilitas.html" shape="rect" coords="115, 119,
229, 234">
<area href="Prodi.html" shape="rect" coords="4, 2, 114, 118">
<area href="alumni" shape="rect" coords="4, 115, 114,
232"></map>
<img border="0" src="logostmik.jpg" width="230" height="235"
usemap="#peta"></p>
<p align="center"><b>Selamat Datang</b></p>
</body>
</html>
Halaman 34
MODUL 9
FORM DAN INPUT
Form merupakan elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna
web. Pengguna web dapat memasukkan input melalui halaman web.
Sintaks :
<form action= URL method=get/post enctype=>
</form>
Jenis masukan dalam suatu form dibedakan menjadi :
Text : digunakan untuk memasukkan suatu nilai untuk dikirimkan ke server. Nilai bisa berupa
angka atau teks.
Text Area : digunakan untuk memasukkan data dalam bentuk teks yang jumlah karakternya
banyak.
Radio : menyediakan beberapa pilihan, hanya satu pilihan yang bisa dipilih.
Check Box : menyediakan beberapa pilihan, bisa lebih dari satu pilihan.
List : pilihan dalam bentuk list., pilihan dapat lebih dari satu.
Button : mendefinisikan tombol untuk melakukan pemrosesan form.
o Submit : untuk memenggil url, setelah selesai penginputan form.
o Reset : untuk menginisialisasi setiap elemen form.
o Button : untuk memebuat form lebih interaktif, untuk memanggil script (fungsi) yang ada
dalam dokumen HTML.
o Image : digunakan sebagai pengganti button, button yang berbentuk gambar.
Praktikum 1
<html>
<head>
<title>formulir</title>
</head>
Halaman 35
<body>
<p><b>Formulir Pendaftaran Kursus</b></p>
<form method="POST" action=" " name=form_kursus>
<table width="100%">
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text" name="nama" size="39"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><input type="radio" value="L" checked
name="jkl">Laki-laki
<input type="radio" name="jkl"
value="p">Perempuan</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><input type="text" name="alamat" size="39"></td>
</tr>
<tr>
<td>Propinsi</td>
<td>:</td>
<td><select size="1" name="propinsi">
<option>Jawa Barat</option>
<option>Jawa Tengah</option>
<option>Jawa Timur</option>
</select></td>
</tr>
<tr>
<td>Pilihan Kursus</td>
Halaman 36
<td>:</td>
<td><input type="checkbox" name="kursus"
value="inggris">Bahasa Inggris<br>
<input type="checkbox" name="kursus"
value="komputer">Komputer</td>
</tr>
</table>
<p><input type="submit" value="Submit" name="Bsubmit"><input
type="reset" value="Reset" name="Breset"></p>
</form>
</body>
</html>
Simpan dengan nama form.html
Halaman 37
Praktikum 2 (validasi data)

Bukalah kembali file form.html.
Tambahkan script berikut pada bagian head :
<script language="VBscript">
<!-sub Bsubmit_OnClick
dim TheForm
Set Theform= document.form_kursus
if IsNumerik(TheForm.nama.value) then
Msgbox " Input anda salah"
Else
TheForm.submit
End If
End Sub
-->
</script>
Jalankan dengan browser.
Validasi Data dengan JavaScript:
<html>
<head>
<title>Membuat Validasi</title>
<script LANGUAGE="JAVASCRIPT">
function ValidasiForm()
{
if (document.FormTamu.nama.value=="") {
alert("Kolom nama tidak boleh kosong");
return false;
}
if (document.FormTamu.alamat.value=="") {
alert("Kolom Alamat tidak boleh kosong");
return false;
Halaman 38
}
if (document.FormTamu.email.value=="") {
alert("Kolom Email tidak boleh kosong");
return false;
}
}
</script>
</head>
<body>
<form
onSubmit="return
ValidasiForm()"
name="FormTamu"
method="post" action="">
<table class="TABLE" width="307" border="0" cellspacing="0"
cellpadding="3">
<tr align="left" bgcolor="#00FF00">
<th colspan="2" scope="col">Form Validasi </th>
</tr>
<tr>
<td width="92">Nama </td>
<td width="246">
<input
name="nama"
type="text"
id="nama"
size="25"
maxlength="35"></td>
</tr>
<tr>
<td>Alamat</td>
<td><input name="alamat" type="text"
id="alamat"
size="25" maxlength="35"></td>
</tr>
<tr>
<td>Email</td>
<td><input
name="email"
type="text"
id="email"
</tr>
<tr>
Halaman 39
<td> </td>
<td><input
type="submit"
name="Submit"
value="Kirim"></td>
</tr>
</table>
</form>
</body>
</html>
Jalankan hasilnya.
Halaman 40
MODUL 10
CSS (Cascading Style Sheet)
CSS merupakan sebuah dokumen yang dapat digunakan untuk melakukan pengaturan pada
seluruh komponen web. CSS bisa digunakan dengan berbagai metode, salah satu diantaranya
adalah diletakkan pada bagian Head.
Contoh penggunaan CSS :
<html>
<head><title>Membuat form bentuk cantik</title>
<style type="text/css">
<!-INPUT {
background-color:#00FF00;
border-style:outset;
border-width: 2PX;
}
TEXTAREA {
background-color:#00FF00;
border-style:outset;
border-width: 2PX;
}
.TABLE {
border-style : solid;
border-color:#00FF00;
border-width: 1PX;
}
-->
</style></head>
<body>
<form name="form1" method="post" action="">
<table class="TABLE" width="350" border="0" cellspacing="0"
cellpadding="3">
<tr align="left" bgcolor="#00FF00">
Halaman 41
<th colspan="2" scope="col">Form Cantik </th>

</tr>
<tr>
<td width="81">Nama </td>
<td width="107">
<input
name="nama"
type="text"
id="nama"
size="25"
maxlength="35"></td>
</tr>
<tr>
<td>Alamat</td>
<td><input name="alamat" type="text"
id="alamat"
</tr>
<tr>
<td>Email</td>
<td><input
name="email"
type="text"
id="email"
</tr>
<tr>
<td>Pesan</td>
<td>
<textarea name="pesan" cols="25" rows="4"
id="pesan"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input
type="submit"
name="Submit"
value="Kirim"></td>
</tr>
</table>
</form>
</body>
</html>
Halaman 42
MODUL 11
MEMPERCANTIK HALAMAN WEB
Cursor diikuti teks:
<html>
<head>
<title>Animasi Kursor</title>
<script language="JavaScript">
<!-var x,y
var step=20
var flag=0
var message="STMIK El Rahma"
message=message.split("")
var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50
}
var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50
}
function handlerMM(e){
x = (document.layers) ? e.pageX : event.clientX
y = (document.layers) ? e.pageY : event.clientY
flag=1
}
function textfollow() {
Halaman 43
if (flag==1 && document.all) {

for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0; i<message.length-1; i++) {
var thisspan = eval("document.all.span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}
if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0; i<message.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
var timer=setTimeout("textfollow()",10)
}
file://-->
</script>
<STYLE>
.spanstyle {
position:absolute;
Halaman 44
visibility:visible;
top:-50px;
font-size:8pt;
font-family:verdana;
color:black;
font-weight: bold;
}
a { color:FFFFCC; text-decoration:none }
a:hover { color:FFFF99; text-decoration:underline }
a:visited { color:FFFF99 }
</STYLE>
<script language="JavaScript">
<!-for (i=0;i<=message.length-1;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
//-->
</script>
</head>
<body onLoad="textfollow()">
Gerakan Mouse .....
</body>
</html>
Teks Berjalan Pada Status Bar
<html>
<head>
Halaman 45
<title>teks jalan</title>
<script language="VBScript">
<!-Dim Teks,Pjteks,Ambil1,Ambil2
Teks =" Coba teks berjalan " & Space(15)
Sub TeksJalan()
Pjteks=Len(Teks)
Ambil1=Mid(Teks, 2, Pjteks-1)
Ambil2=Mid(Teks,1,1)
Teks=Ambil1 & Ambil2
Window.Status=Teks
Window.SetTimeOut "TeksJalan", 200
End Sub
-->
</script>
</head>
<body OnLoad=TeksJalan>
</body>
</html>
Halaman 46

Modulweb 1

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modulweb 1

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL

UNIT PELAKSANA TEKNIS

Struktur Dokumen HTML :

disebut WWW server atau web server) digunakan program web

Navigator/Comunicator, Internet Explorer, NCSA Mosaic, Arena,

menjelajahi dunia maya atau web. Tampilan web yang sangat

bila tidak netter akan tersesat kedalam rimba informasi yang

memiliki perkembangan yang sangat cepat karena dengan layanan

(multimedia). Untuk mengakses layanan WWW dari sebuah komputer

Lulusan S-1 yang Kompetitif

Sebuah perenungan untuk anda para mahasiswa

Perintah-perintah yang digunakan :

maka browser akan menampilkan tabel dengan border.

dan rata tengah.

Biaya SPP Per semester STMIK El Rahma Yogyakarta

LPK Non El Rahma

Left-x, top-y, right-x, bottom-y

CENTER-X, CENTER-Y, RADIUS

X1, Y1, X2, Y2, XN, YN

Contoh penggunaan image map:

Script dari image map diatas adalah :

Praktikum 2 (validasi data)

<th colspan="2" scope="col">Form Cantik </th>

<textarea name="pesan" cols="25" rows="4"

if (flag==1 && document.all) {

Anda mungkin juga menyukai