Tempat-tempat yang indah

src=" Hawaii.jpg" width="161"

didunia

height="99">

Inilah tempat-tempat wisata dunia yang banyak


dikunjungi oleh

height="89">

wisatawan tiap tahunnya.

Colloseum : ada di Romawi

Ikuti link pada gambar untuk

melihat secara detail.

src="Borobudur.jpg" width="132"

src="lawu.jpg" width="136" height="95">

height="92">

Tersedia paket perjalanan

wisata dengan harga mulai 100$ US

href="mailto:[email protected]">Pesan sekarang

Gunung Lawu

juga

TOP




align="left">



Gunung yang indah dan penuh dengan legenda



Simpan dengan nama Tempat_wisata.html

ini terletak di Propinsi Jawa Timur, dengan



Jalankan dari web browser.

ketinggian sekitar 3265 diatas permukaan laut.

Praktikum 2 

Harga paket perjalanan wisata : Rp.

detail_tempat_wisata.html

500.000 (3H2M)

Hawaii

Detail Tempat

align="left">

Wisata

Halaman 13

Kepulauan hawaai merupakan pulau yang indah

MODUL 5

dengan pantai-pantai

LIST

yang eksotis. Dengan tarian yang khas, dan keramah-tamahan penduduknya.

List merupakan bentuk yang umum yang biasa kita gunakan untuk

Jenis-jenis list dalam HMTL :

Harga paket perjalanan wisata : $500.000



List dengan nomor (OL : Ordered List)

(3H2M)

nomor ingin diganti dengan type yang lain (romawi, abjad huruf

href="wisata_dunia.html">Kembali<

besar/kecil), maka kita tinggal mengisi atribut type pada tag

/p>

Contoh untuk list dengan angka romawi :








List tanpa nomor (UL: Unordered List) Jenis bullet pada unordered list bisa diganti dengan mengisikan atribut type pada tag


Cek semua link yang terdapat pada kedua file HTML diatas

Contoh
: bila ingin bullet berbentuk kotak. 

List definisi

Praktikum 1: 

Cobalah script berikut ini :

Halaman 14

<TITLE>

Ordered

List

&

Unordered



Cobalah script berikut ini :

List









<TITLE> definition list



An ordered List :











1. Coffee








Tea





Coffee





Milk





Black hot drink








Ice Cream




An unordered List :




sweet Cold drink








• Coffee





• Tea





• Milk




Simpan dengan nama definition.html





Jalankan dengan web browser



Simpan dengan nama list.html



Jalankan dengan web browser

Praktikum 2:

Halaman 15

MODUL 6

Praktikum 1

TABEL 

Ketikkan script berikut

Elemen-elemen tabel : Elemen

Keterangan

... Mendefinisikan sebuah tebel dalam HTML. Jika atribut border dituliskan, maka browser akan menampilkan tabel dengan border. …

Mendefinisikan sel header tabel, secara default teks dalam sel ini ditebalkan dan rata tengah.

…

Mendefinisikan sebuah baris tabel dalam tabel. Anda dapat mendefinisikan atribut untuk seluruh baris : align(left,center,right) dan/atau valign (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.

<TITLE> Belajar Tabel

Daftar Pegawai STMIK



Halaman 16



Praktikum 2





Ketikkan script berikut ini





















No	Nama	Alamat	Telepon
1	Asih Winantu	Bantul Yogyakarta	0274-441170
2	Agus Riyanto	Sleman Yogyakarta	0274-377982




cellspacing="0" width="100%">





1



Daftar Nilai Pemrograman Web

3	M Wahib
Blora Jawa Tengah	0274-377982



Nama Nilai











Simpan dengan nama tabel1.html

Tugas



Jalankan dengan web browser

Praktikum Lutfia

Halaman 17

80

Praktikum 3 (tugas)

85



Buatlah dokumen HTML dengan tampilan sebagai berikut :

yulia

Biaya SPP Per semester STMIK El Rahma Yogyakarta

90 93

Tahun ajaran 2005/2006 Lulusan

Periode Daftar

Biaya

I

Rp. 650.000

II

Rp. 700.000

III

Rp. 750.000

I

Rp. 675.000

II

Rp. 725.000



III

Rp. 775.000



I

Rp. 700.000

II

Rp. 750.000

III

Rp. 800.000

Ardian 100

LPK El Rahma

98

LPK Non El Rahma

SMU/Sederajat 

Simpan dengan nama tabel2.html



Jalankan dengan web browser

Halaman 18


MODUL 7

noresize target="contents" src="bawah.htm">

FRAME

Sintaks :





Buat file dengan nama atas.html





Praktikum 1





<marquee width="661" height="19">STMIK EL

Buat file dengan nama Frame.html

RAHMA : Menggapai Ilmu Menuju
Rahmat

rows="64,*,79" frameborder="0">








target="contents" src="atas.htm">



Buat file dengan nama utama.html

Halaman 19














src="LOGOSTIMIK.jpg" width="61" height="61"



align="middle">



Sejarah Singkat



SELAMAT DATANG DI SITUS STMIK EL



Program Studi



RAHMA




Fasilitas





---





Alumni





STMIK El Rahma Yogyakarta



Info Kerja



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



Buat file dengan nama bawah.html

program studi yaitu Sistem Informasi,



Teknik Informatika, Manajemen Informatika,



Teknik Komputer dan Komputerisasi



Akuntansi.












© STMIK EL RAHMA
2005





Buat file dengan nama kiri.html







Halaman 20

MODUL 8 Jalankan file frame.html, pastikan hasilnya seperti gambar berikut :

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

height=”tinggi tampilan gambar”


usemap=”#nama_map” border=0>

height="200"

<map name=”nama_map”>

border="0" usemap="#Map">

<area shape=”jenis map”

<map name="Map">

coords=”koordinat map” href=”file yang

<area shape="rect"

dipanggil”>

coords="0,0,200,100"



href="file1.htm" alt="kotak link">

Coordinat dari object relatif terhadap pojok kirai atas image. Coordinate

Value

<area shape="circle" coords="354,41,36"

Rect

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

href="file2.htm"

Circle

CENTER-X, CENTER-Y,

alt="lingkaran link"> <area shape="poly"

RADIUS Poly

X1, Y1, X2, Y2, … XN, YN

coords="58,102,97,101,110,134, 119,119,177,195,69,196,

Contoh:

47,162,62,143" href="#">















Halaman 22

Contoh penggunaan image map:

<area href="profile.html" shape="rect" coords="114, 4, 228, 118"> <area href="fasilitas.html" shape="rect"

Link 2

coords="115, 119, 229, 234"> Link 1 <area href="Prodi.html" shape="rect" coords="4, 2, 114, 118"> <area href="alumni" shape="rect" coords="4, 115, 114, 232">
Link 4

width="230" height="235" usemap="#peta">
Link 3

Selamat Datang



Script dari image map diatas adalah :

<map name="Peta">

Halaman 23

MODUL 9



List : pilihan dalam bentuk list., pilihan dapat lebih dari satu.

FORM DAN INPUT



Button : mendefinisikan tombol untuk melakukan pemrosesan form. o Submit : untuk memenggil url, setelah selesai penginputan

Form merupakan elemen HTML yang digunakan untuk mendapatkan

form.

masukan dari pengguna web. Pengguna web dapat memasukkan input

o Reset : untuk menginisialisasi setiap elemen form.

melalui halaman web.

o Button : untuk memebuat form lebih interaktif, untuk memanggil script (fungsi) yang ada dalam dokumen HTML. o Image : digunakan sebagai pengganti button, button yang

Sintaks :


berbentuk gambar.

enctype=””>


Praktikum 1 

Jenis masukan dalam suatu form dibedakan menjadi : 







Ketikkan script berikut :

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



Formulir Pendaftaran Kursus



bisa dipilih.



Check Box : menyediakan beberapa pilihan, bisa lebih dari satu

name=”form_kursus”>

pilihan.



Halaman 24





Jawa Barat



Jawa Timur











checked name="jkl">Laki-laki Perempuan



Komputer




Nama	:	<select size="1" name="propinsi">	:	Jawa Tengah size="39">
Jenis Kelamin
:	Pilihan Kursus		:	Bahasa Inggris
Alamat
:





size="39">

name="Bsubmit">


value="Reset" name="Breset">







Propinsi



Halaman 25





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



Jalankan dengan browser.

Validasi Data dengan JavaScript: 

Ketikkan script berikut :

Halaman 26



}

<script LANGUAGE="JAVASCRIPT">



function ValidasiForm()



{

if (document.FormTamu.nama.value=="")

{


onSubmit="return

ValidasiForm()"

name="FormTamu" method="post" action=""> alert("Kolom

nama

tidak

boleh

kosong");


class="TABLE"

width="307"

border="0" cellspacing="0" cellpadding="3"> return false;



}


if

Validasi

(document.FormTamu.alamat.value=="") { alert("Kolom

Alamat

tidak

colspan="2"

scope="col">Form

boleh

kosong");

Nama

return false;



}


if (document.FormTamu.email.value=="") {

id="nama"

size="25" maxlength="35">

alert("Kolom kosong");

tidak

boleh

Alamat

return false; }

Email


name="alamat"

type="text"

id="alamat" size="25" maxlength="35">

Halaman 27



MODUL 10



CSS (Cascading Style Sheet)

Email
name="email"

type="text"

id="email" size="25" maxlength="35">

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 :





form

border-style:outset; border-width: 2PX; } TEXTAREA { background-color:#00FF00; border-style:outset; border-width: 2PX;

Halaman 28

}



.TABLE {

Alamat

border-style : solid;


border-color:#00FF00;

name="alamat"

id="alamat" size="25" maxlength="35">

border-width: 1PX;



}



-->

Email




class="TABLE"

width="350"

border="0" cellspacing="0" cellpadding="3">
name="email"

type="text"

id="email" size="25" maxlength="35">



type="text"

colspan="2"

scope="col">Form

Cantik

Pesan


cols="25"

name="pesan" rows="4"

id="pesan">









Nama

 






id="nama"

value="Kirim">

Halaman 29



var xpos=new Array()



for (i=0;i<=message.length-1;i++) {



xpos[i]=-50 } MODUL 11

MEMPERCANTIK HALAMAN WEB

var ypos=new Array() for (i=0;i<=message.length-1;i++) { ypos[i]=-50

Cursor diikuti teks: 

Ketikkan script berikut :

} function handlerMM(e){ x



(document.layers)

?

e.pageX

:

?

e.pageY

:

event.clientX y

<script language="JavaScript">

var

thisspan

=

eval("document.all.span"+(i)+".style") thisspan.posLeft=xpos[i]

<STYLE> .spanstyle {

thisspan.posTop=ypos[i]

position:absolute;

}

visibility:visible;

}

top:-50px;

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

font-size:8pt;

for (i=message.length-1; i>=1; i--) {

font-family:verdana;

xpos[i]=xpos[i-1]+step

color:black;

ypos[i]=ypos[i-1] }

font-weight: bold; }

xpos[0]=x+step

a { color:FFFFCC; text-decoration:none }

ypos[0]=y

a:hover

for (i=0; i<message.length-1; i++) {

decoration:underline }

color:FFFF99;

var thisspan = eval("document.span"+i)

a:visited { color:FFFF99 }

thisspan.left=xpos[i]



thisspan.top=ypos[i] } }

{

text-

<script language="JavaScript">
Halaman 31

document.write("<span

id='span"+i+"'

class='spanstyle'>") document.write(message[i]) document.write("")


}

Pjteks=Len(Teks)

if (document.layers){

Ambil1=Mid(Teks, 2, Pjteks-1)

document.captureEvents(Event.MOUSEMOVE);

Ambil2=Mid(Teks,1,1)

}

Teks=Ambil1 & Ambil2

document.onmousemove = handlerMM;

Window.Status=Teks

//-->

Window.SetTimeOut "TeksJalan", 200



End Sub



-->





Gerakan Mouse .....











Teks Berjalan Pada Status Bar <script language="VBScript">

Halaman 32