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>.
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
Halaman 2
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>
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
Halaman 3
server atau web server) digunakan program
web client yang disebut web browser atau
browser saja. Jenis-jenis 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
gambar-gambar 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 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 4
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 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
Halaman 5
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?
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 Kegunaan
<b> Mendefinisikan teks yang ditebalkan.
<big> Mendefinisikan teks yang besar ukurannya.
<em> Mendefinisikan teks yang ditekankan
<I> Mendefinisikan teks yang dimiringkan – Italic
<small> Mendefinisikan teks yang kecil ukurannya
<strong> Mendefinisikan teks yang ditebalkan.
<sub> Mendefinisikan teks yang dijadikan subscript.
<sup> Mendefinisikan teks yang dijadikan superscript.
<u> Mendefinisikan teks yang digaris bawahi – Underline
<s> Mendefinisikan teks yang di coret – strikethrough
Karakter-karakter khusus
Halaman 6
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>
</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
jaringan-jaringan 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
Halaman 7
(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>
</p>
<hr>
<center>
<font face=”century” size=3
color=brown>© STMIK EL RAHMA
<br><b>Yogyakarta</b></font>
</center>
</body>
</html>
Praktikum 2
Ketikkan script berikut menggunakan teks editor.
<HTML>
<HEAD>
<TITLE> karakter khusus </TITLE>
</HEAD>
<BODY>
Copyright © <br>
Trademark ™ <br>
Registered ® <br>
Poundsterling £ <br>
Yen ¥ <br>
Euro €<br>
</BODY>
Halaman 8
</HTML>
Simpan dengan nama karakter_khusus.html
Lihat hasilnya dengan browser.
Praktikum 3
Ketikkan script berikut menggunakan teks editor.
<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>
<BR>
CO<sup>2</sup>
<BR>
H<sub>2</sub>O
</BODY>
</HTML>
Halaman 9
Simpan dengan nama font.html
Lihat hasilnya dengan browser.
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
Ketikkan script berikut :
<html>
<head>
Halaman 10
<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 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 11
Praktikum 2 (Tugas)
Buatlah dokumen HTMl dengan tampilan sebagai berikut :
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
Ketikkan script berikut :
<html>
<head>
<title>Wisata Dunia</title>
Halaman 12
</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>
<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>
Halaman 13
<p align="center"><a
href="mailto:[email protected]">Pesan sekarang
juga</a></p>
<hr>
<a href="#atas">TOP</a>
</body>
</html>
Simpan dengan nama Tempat_wisata.html
Jalankan dari web browser.
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">
Halaman 14
Kepulauan hawaai merupakan pulau yang indah
dengan pantai-pantai
yang eksotis. Dengan tarian yang khas, dan
keramah-tamahan penduduknya.
</p>
<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
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>
Halaman 15
<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>
</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
Jalankan dengan web browser
Halaman 16
MODUL 6
TABEL
Elemen-elemen tabel :
Elemen Keterangan
<table>...</table> Mendefinisikan sebuah tebel dalam HTML. Jika
atribut border dituliskan, maka browser akan
menampilkan tabel dengan border.
<th>…</th> Mendefinisikan sel header tabel, secara default teks
dalam sel ini ditebalkan dan rata tengah.
<tr>…</tr> Mendefinisikan sebuah baris tabel dalam tabel.
Anda dapat mendefinisikan atribut untuk seluruh
baris : align(left,center,right) dan/atau valign
(top,middle,bottom)
<td>…</td> 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>
<TD>1</TD>
<TD>Asih Winantu</TD>
<TD>Bantul Yogyakarta</TD>
<TD>0274-441170</TD>
Halaman 17
</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
Jalankan dengan web browser
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>
Halaman 18
<td width="33%" align="center">80</td>
<td width="34%" align="center">85</td>
</tr>
<tr>
<td width="33%">yulia </td>
<td width="33%" align="center">90</td>
<td width="34%" align="center">93</td>
</tr>
<tr>
<td width="33%">Ardian</td>
<td width="33%" align="center">100</td>
<td width="34%" align="center">98</td>
</tr>
</table>
</body>
</html>
Simpan dengan nama tabel2.html
Jalankan dengan web browser
Praktikum 3 (tugas)
Buatlah dokumen HTML dengan tampilan sebagai berikut :
Biaya SPP Per semester STMIK El Rahma Yogyakarta
Tahun ajaran 2005/2006
Lulusan Periode Daftar Biaya
LPK El Rahma
I Rp. 650.000
II Rp. 700.000
III Rp. 750.000
LPK Non El
Rahma
I Rp. 675.000
II Rp. 725.000
III Rp. 775.000
SMU/Sederajat
I Rp. 700.000
II Rp. 750.000
III Rp. 800.000
Halaman 19
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>
</body>
</html>
Buat file dengan nama utama.html
<html>
<head>
<title>SELAMAT DATANG DI SITUS STMIK EL
RAHMA</title>
Halaman 20
</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>
<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>
Halaman 21
Jalankan file frame.html, pastikan hasilnya seperti gambar berikut :
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”
Halaman 22
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
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 23
Contoh penggunaan image map:
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>
Link 1 Link 2
Link 3 Link 4
Halaman 24
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
Ketikkan script berikut :
<html>
<head>
<title>formulir</title>
</head>
<body>
<p><b>Formulir Pendaftaran Kursus</b></p>
<form method="POST" action=" "
name=”form_kursus”>
<table width="100%">
Halaman 25
<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>
<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>
Halaman 26
</html>
Simpan dengan nama form.html
Lihat hasilnya dengan browser.
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:
Ketikkan script berikut :
<html>
<head>
Halaman 27
<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;
}
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>
Halaman 28
</tr>
<tr>
<td>Email</td>
<td><input name="email" type="text"
id="email" size="25" maxlength="35"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit"
value="Kirim"></td>
</tr>
</table>
</form>
</body>
</html>
Jalankan hasilnya.
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;
Halaman 29
}
.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">
<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" size="25" maxlength="35"></td>
</tr>
<tr>
<td>Email</td>
<td><input name="email" type="text"
id="email" size="25" maxlength="35"></td>
</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>
Halaman 30
</form>
</body>
</html>
MODUL 11
MEMPERCANTIK HALAMAN WEB
Cursor diikuti teks:
Ketikkan script berikut :
<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() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
Halaman 31
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;
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++) {
Halaman 32
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>
<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>