pengenalan web pemrograman web (html) · pdf filebuka kembali file web.html pada program teks...

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>&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>

Halaman 8

</HTML>

Simpan dengan nama karakter_khusus.html

Lihat hasilnya dengan browser.

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>

<BR>

CO<sup>2</sup>

<BR>

H<sub>2</sub>O

</BODY>

</HTML>

Halaman 9

Simpan dengan nama font.html


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>

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


<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


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


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


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


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>


</tr>

<tr>

<td width="33%">yulia </td>



</tr>

<tr>

<td width="33%">Ardian</td>



</tr>

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


<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


Praktikum 2 (validasi data)

Bukalah kembali file form.html.

Tambahkan script berikut pada bagian head :

<script language="VBscript">



</script>

Jalankan dengan browser.

Validasi Data dengan JavaScript:


<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:


<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()


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">

<!--

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">



</script>

</head>

<body OnLoad=TeksJalan>

</body>

</html>

pengenalan web pemrograman web (html) · pdf filebuka kembali file web.html pada program teks...

Documents