MODUL - sman78-jkt.sch.idsman78-jkt.sch.id/sumberbelajar/bahanajar/MODUL HTML.pdf · Contoh dari web browser : Opera, Mozzila, Netscape Navigator, ... sebenarnya yang tersusun dari

MODUL

PENGENALAN WEB DENGAN HTML

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

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.

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

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

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 Dunia Maya.html.

Apa Itu Internet?

Internet (Inter-Network) adalah sebutan untuk sekumpulan jaringan komputer yang

menghubungkan situs akademik, pemerintahan, komersial, organisasi, maupun

perorangan. Internet menyediakan akses untuk layanan telekomnunikasi dan sumber daya informasi

untuk jutaan pemakainya yang tersebar di seluruh dunia. Layanan internet meliputi komunikasi

langsung (email, chat), diskusi (Usenet News, email, milis), sumber daya informasi yang

terdistribusi (World Wide Web, Gopher), remote login dan lalu lintas file (Telnet, FTP), dan aneka

layanan lainnya.

Jaringan yang membentuk internet bekerja berdasarkan suatu set protokol standar yang

digunakan untuk menghubungkan jaringan komputer dan mengalamati lalu lintas dalam

jaringan. Protokol ini mengatur format data yang diijinkan, penanganan kesalahan (error handling),

lalu lintas pesan, dan standar komunikasi lainnya. Protokol standar pada internet dikenal

sebagai TCP/IP (Transmission Control Protocol/Internet Protocol). Protokol ini memiliki

kemampuan untuk bekerja diatas segala jenis komputer, tanpa terpengaruh oleh perbedaan

perangkat keras maupun sistem operasi yang digunakan.

Halaman 4

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

Entitas Keterangan

© Copyright

® Registered

Trade mark

Non breaking space

& Ampersand

« Anggle quotation mark (left)

» Anggle quotation mark (right)

£ Poundsterling

€ Euro

¥ Yen

Halaman 5

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

Halaman 6

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.

Praktikum 3


<HTML>

<HEAD>

<TITLE> Formatting Font </TITLE>

</HEAD>

<BODY>

<b>Bold</b>

<BR>

<u>Underline</u>

Halaman 7

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

Simpan dengan nama font.html


Halaman 8

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

Halaman 10

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>

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

Halaman 11

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

Halaman 12

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

Halaman 13

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>

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

Halaman 14

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

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>

</TR>

<TR>

<TD>2</TD>

<TD>Agus Riyanto</TD>

<TD>Sleman Yogyakarta</TD>

<TD>0274-377982</TD>

</TR>

<TR>

Halaman 16

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

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>

</table>

</body>

</html>

Simpan dengan nama tabel2.html


Halaman 18

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>

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

Halaman 19

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>

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

Halaman 20

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 21

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 22

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

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

Halaman 23

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

</html>

Simpan dengan nama form.html


Halaman 24

Halaman 25

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>

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

Halaman 26

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

Halaman 27

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



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

Halaman 28

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

MODUL 11

MEMPERCANTIK HALAMAN WEB

Cursor diikuti teks:


<html>

<head>

<title>Animasi Kursor</title>

<script language="JavaScript">



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



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

MODUL - sman78-jkt.sch.idsman78-jkt.sch.id/sumberbelajar/bahanajar/MODUL HTML.pdf · Contoh dari web browser : Opera, Mozzila, Netscape Navigator, ... sebenarnya yang tersusun dari

Documents