2008

Modul Praktikum Pengantar

Komputer dan Internet

Tim Asisten Grup B

Universitas Kristen Duta
Wacana
Yogyakarta
Modul Praktikum Pengantar Komputer dan Internet HTML
Part II Page 0
by : Tim Asisten Grup B

IMAGE MAP
Anda bisa menggunakan image yang ada pada website Anda untuk
membuat image map. Image map adalah suatu area pada image yang bisa kita
beri hyperlink. Area ini biasanya disebut hot spots. Koordinat dari hotspots
ditentukan dengan menggunakan bidang geometri seperti segiempat(rectangle),
poligon, dan lainnya.
Bentuk-bentuk(shape) yang dapat digunakan sebagai hotspots :
o Rect
Hotspots berbentuk empat (rectangle).
Contoh penggunaan :
<area shape=rect coords= left-x,left-y,right- x,right-y
href="menu.html" alt=MenuKotak>
o Circle
Hotspots berbentuk lingkaran (circle).
Contoh penggunaan :
<area shape=circle coords= center-X,center-Y, radius
href="menu.html" alt=MenuLingkaran>
o Poly
Hotspots berbentuk area poligon.
Contoh penggunaan :
<area shape=poly coords=X1,Y1,X2,Y2,...,Xn,Yn
href="menu.html" alt=MenuPoligon>
Cara pendeklarasian map
Sebelum Anda membuat sebuah map, Anda harus mendeklarasikan
map terlebih dahulu dengan menggunakan tag map. Caranya :
<map name=peta>
<area shape=rect coords= left-x,left-y,right- x,right-y
href="menu.html" alt=MenuKotak>
<area shape=circle coords= center-X,center-Y, radius
href="menu.html" alt=MenuLingkaran>
<area shape=poly coords=X1,Y1,X2,Y2,...,Xn,Yn
href="menu.html" alt=MenuPoligon>
</map>
Cara memanggil map
Untuk memanggil map yang telah Anda buat, pada tag <img src>
ditambahkan tag :
usemap=#nama_map

<map name="peta">
<area shape=rect coords="0,0,50,70" href="menu.html" alt="MapKotak">
Contoh :<area shape=circle coords="90,120,30" href="mine.html" alt="MapLingkaran">
<area shape=poly coords="150,217, 190,257, 150,297,110,257" href="new.html"
alt="MapPoly">
Modul Praktikum Pengantar Komputer dan Internet HTML Part II Page 1
</map>

by : Tim Asisten Grup B

<img src="gambar.jpg" alt="Gambar" border=0 width=300 height=300

usemap="#peta">

FORM
Form HTML merupakan tag yang paling penting dalam pemrograman, di
dalam pemrograman Internet khususnya dalam pembuatan aplikasi berbasis
web. Form menyediakan property masukkan yang berupa text box, check box,
radio button, dan button.
Untuk mendeklarasikan sebuah form digunakan tag <form > <form>.
Di dalam tag ini didefinisikan elemen-elemen form seperti yang telah disebutkan
diatas. Selain tag, elemen form juga dapat menuliskan sembarang teks, tag,
maupun image.
Atribut elemen form:
action= lokasi dan nama file (file yang menangani form)
method= [ get | post ] (metode HTTP untuk men-submit form)

Properti Masukan pada Elemen Form

1. Text Box<input type=text>
Digunakan untuk memasukkan input berupa teks.
size= ukuran dari text box dalam karakter, default 20
maxsize= maksimal banyaknya karakter yang diterima
name= nama dari variable yang dikirim ke suatu aplikasi
value= akan menampilkan isinya sebagai nilai default

2. Password<input type=password>
Digunakan untuk memasukkan password.
size= ukuran dari text box dalam karakter, default 20
maxsize= maksimal banyaknya karakter yang diterima
name= nama dari variable yang dikirim ke suatu aplikasi

Modul Praktikum Pengantar Komputer dan Internet HTML Part II Page 2

by : Tim Asisten Grup B

3. Hidden<input type=hidden>
Digunakan untuk mengirim data dari suatu aplikasi yang tidak diinginkan
untuk dilihat oleh browser.
name= nama dari variable yang dikirim ke suatu aplikasi
value= nilai dari variable
4. Check box<input type=checkbox>
Check box digunakan untuk dapat memilih lebih dari satu pilihan.
name= nama dari variable yang dikirim ke suatu aplikasi
value= nilai dari variable
checked(check box yang sudah ditandai)

5. Radio Button<input type=radio>

Radio button digunakan agar dapat memilih hanya salah satu pilihan.
name= nama dari variable yang dikirim ke suatu aplikasi
value= nilai dari variable
checked(check box yang sudah ditandai)

6. Push button<input type=button >

Elemen ini biasanya digunakan dengan JavaScript atau VBscript untuk
menghasilkan suatu aksi
name= nama dari variable yang dikirim ke suatu aplikasi
value= label teks diatas tombol
7. Push button<input type=submit>
Setiap elemen form membutuhkan tombol submit untuk mengirimkan
nama dan nilainya kesuatu aplikasi yang ditentukan dalam atribut ACTION
dalam elemen FORM.
name= nama dari variable yang dikirim ke suatu aplikasi
value= label teks diatas tombol
8. Image submit Button<input type=image src=url>
Digunakan untuk menggantikan tombol standar submit dengan image.

Modul Praktikum Pengantar Komputer dan Internet HTML Part II Page 3

by : Tim Asisten Grup B

name= nama dari variable yang dikirim ke suatu aplikasi

9. Reset<input type=reset>
Digunakan untuk mereset masukkan dalam form.
value= label teks diatas tombol
10.

Text Area<textarea> </textarea>

Elemen untuk memasukkan teks secara leluasa seperti notepad.

name= nama dari variable yang dikirim ke suatu aplikasi
rows= panjang baris dalam karakter
cols= tinggi dalam karakter
11.

Select<select> </select>

Daftar isi dalam property select menggunakan tag <option>

name= nama dari variable yang dikirim ke suatu aplikasi
size= jumlah pilihan yang dapat terlihat
Latihan

Tampilan :

Modul Praktikum Pengantar Komputer dan Internet HTML Part II Page 4

by : Tim Asisten Grup B

CSS (Cascading Style Sheet) sebagai bahan tambahan

CSS adalah struktur yang terpisah dari tampilan pada halaman web.
Dalam pemakaian HTML murni kita pasti menggunakan tag <font> dan tag lain untuk
mengontrol bagaimana format dan layout dari halaman anda.
Hal ini mengikat presentasi halaman anda dengan isinya, dan terasa menyulitkan
dalam perancangan dan pengembangannya.
Jika anda memiliki sekian halaman yang memiliki format yang seragam, dan
kemudian ingin merubah format dasarnya, tentu yang anda lakukan adalah mengubah
tiap halaman tersebut.
Style Sheet menyediakan pemecahan terhadap masalah ini.
Dengan Style Sheet dapat mengontrol seluruh layout dari site anda, dan jika anda
mengubah tampilan dari web site anda cukup dengan memodifikasi style sheet.
Tiga cara menggunakan CSS
1. Inline Styles

Menambahkan attribute style kedalam tag XHTML-nya

Berlaku hanya pada tag dimana style ditambahkan
Contoh1.html (untuk mempermudah, silakan copy codingnya)
<html>
<body>
<p style="font-size: 25pt; font-weight:bold; font-style:italic;
color:red;">
By adding inline CSS styling to this paragraph, we can override
the default styles.
</p>
</body>
</html>

2. Embedded Styles

Diletakan pada tag <head>

Berlaku hanya untuk halaman dimana style didefinisikan
Contoh2.html (untuk mempermudah, silakan copy codingnya)
<HTML>
<head>
<title>Inline Styles example</title>
<style>
h1 { font-size: 16pt; font-weight:bold; color:red;}

Modul Praktikum Pengantar Komputer dan Internet HTML Part II Page 5

by : Tim Asisten Grup B

p{color:blue; font-size:8pt;}
</style>
</head>
<BODY>
<h1>Coba Embedded Style</h1>
<p>paragraph yang menggunakan style embedded css</p>
<p>paragraph yang menggunakan style embedded css</p>
</BODY>
</HTML>

Linked styles / External Styles

Diletakan diluar dokumen XHTML nya

Menggunakan property <link> untuk menghubungkan halaman XHTML dengan
file .css nya
my_style_sheet.css (untuk mempermudah, silakan copy
codingnya)
h1 { font-size: 16pt; font-weight:bold;} p {color:blue;}

contoh3.html
<html>
<head>
<link href="my_style_sheet.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<h1>Hello World !</h1>
<p>Hello Juga</p>
</body>
</body>
</html>

Latihan :
1. Ubahlah pada contoh2.html, menjadi : (untuk mempermudah,
silakan copy codingnya)
<HTML>
<head>

Modul Praktikum Pengantar Komputer dan Internet HTML Part II Page 6

by : Tim Asisten Grup B

<title>Inline Styles example</title>

<meta http-equiv="Content-type" content="text/html; charset=iso8859-1" />
<style type="text/css">
h1 { font-size: 16pt; font-weight:bold; color:red;}
p{color:red; font-size:8pt;}
</style>
</head>
<BODY>
<h1>Coba Embedded Style</h1>
<p>paragraph yang menggunakan style embedded css</p>
<h2> Coba h2 </h2>
<p>paragraph yang menggunakan style embedded css</p>
</BODY>
</HTML>

a. Style apa yang diikuti oleh <h2>? Mengapa?

b. Buatlah style pada <h2>, dengan ukuran font : 14 pt, dan
berwarna hijau.
2. Buatlah file berikut : (untuk mempermudah, silakan copy codingnya)
link.css
h1 { font-size: 20pt; font-weight:bold;} p {color:blue;}

lat.html
<HTML>
<head>
<link href="link.css" rel="stylesheet" type="text/css" />
<style type="text/css">
h1 { font-size: 5pt; font-weight:bold; color:red;}
p{color:blue; font-size:8pt;}
</style>
</head>
<body>
<h1 style="font-size:50pt">Hello World !</h1>
<p style="font-size: 25pt; font-weight:bold; font-style:italic;
color:red;">Hello Juga</p>
</body>
</body>
</HTML>

a. Style apa yang diikuti oleh tag <h1>, berapa ukuran

fontnya?
b. Apakah dari ketiga style di atas terdapat tingkat prioritas?
Jika ada, sebutkan!
c. Jelaskan perbedaan ketiga style di atas!

Modul Praktikum Pengantar Komputer dan Internet HTML Part II Page 7

by : Tim Asisten Grup B

3. Latihan Soal
Buatlah coding HTML sehingga halaman tersebut akan menampilkan bentukbentuk seperti di bawah ini!
1. List

2. Table

Modul Praktikum Pengantar Komputer dan Internet HTML Part II Page 8

by : Tim Asisten Grup B

3. Form

Ket:

Pendidikan terdiri dari SD, SMP, SMA, Mahasiswa

Keterangan menggunakan textarea

Modul Praktikum Pengantar Komputer dan Internet HTML Part II Page 9

by : Tim Asisten Grup B

4. Frameset

Modul Praktikum Pengantar Komputer dan Internet HTML Part II Page 10

by : Tim Asisten Grup B