Download - Modul Dasar HTML
Oleh;Mulyadi_Ibnu_Syaamil, S.Kom
@ 2010
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
1
DASAR – DASAR HTML
HTML (Hyper Text Markup Language) merupakan bahasa yang digunakan untuk pembuatan
web, standar bahasa HTML di publikasikan di www.w3.org oleh World Wide Web Consortium
(W3C) Untuk merender kode-kode HTML diperlukan web browser seperti Internet Explorer,
Mozilla, Netscape dll
HTML berupa kode-kode tag yang menginstruksikan web browser untuk menghasilkan
tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka
dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer.
HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain
yang memiliki kemampuan browser.
Komponen-komponen HTML
Komponen dasar sebuah halaman web seperti terlihat pada bagan di bawah ini;
contoh berikut :
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Isi website….
</body>
</html>
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
2
Pengaturan teks
Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks
seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini yang biasa
digunakan dalam pengaturan teks :
Tag Heading
<Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai
antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan
<H6> merupakan ukuran terkecil.
Contoh :
<H2>Tutorial Html</H2>
Hasilnya akan terlihat seperti :
Tutorial Html
Tag Font <FONT> Untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE, COLOR.
SIZE: Ukuran font yang digunakan, berkisar antara 1 - 7 dengan 1 merupakan ukuran
terkecil dan 7 merupakan ukuran terbesar.
FACE: Jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing
dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus
digunakan tanda garis bawah ( _ ). Dalam memilih jenis font ini harus
dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya
akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya
kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font
standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa
menggunakan graphic.
COLOR: Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga
langsung menggunakan nama warna (red misalnya).
Contoh :
<FONT SIZE=4 FACE="Verdana, Arial, Helvetica" COLOR="#FF0000">Contoh teksyang berwarna merah</FONT>
Hasilnya akan terlihat seperti :Contoh teks yang berwarna merah
Penggunaan Bentuk teks dapat menggunakan tag berikut;
<B> Bold text
<I> Italic text
<U> Underscore
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
3
<PRE> Preformatted Text <DFN> Definition
Paragraph Baru:
<P> Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran </P> tapi juga
bisa tidak diberi.
Line Break:
<BR> Digunakan untuk pindah ke baris baru.
No Line Break:
<NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris
bawahnya bila baris pertama sudah terlalu panjang.
Alignment (Perataan teks), digunakan untuk mengatur perataan teks atau paragraph, tag
yang dapat digunakan untuk pengaturan alignment terdiri dari tag ;
<center> untuk perataan tengah
<left> Untuk Perataan Kiri
<right> Untuk perataan kanan
<justify> Untuk perataan kiri dan kanan
Horizontal Rule garis horizontal menggunakan tag <hr>
<hr> Untuk membuat garis dengan bentuk horizontal
<size> Untuk memntukan tebal garis<color> Untuk menentukan warna garis<align> Untuk mengatur letak perataan garis
Contoh :
<hr size=6 color=”blue” align=”center” width=800>
Maka akan tampil
Garis bentuk horizontal, dengan tebal 6, warna biru, terletak pada rata tengah,
dan lebarnya 800
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
4
Latihan 1
<html><Head><Title>Latihan Pengaturan Teks</Title></Head>
<Body><center><h1>BELAJAR PEMROGRAMAN WEB</h1><br><br></center>Pemrograman adalah pemrograman yang menghasilkan aplikasi web<br>Bahasa yang digunakan adalah HTML<br>Untuk menjalankan aplkasi web menggunakan web browser<br>Dan aplikasinya diletakkan di web server<br><br>Selamat belajar</Body></html>
Latihan 2
<html><Head><Title>Pengaturan Font 2</Title></Head><Body><center><font face=”Arial” size=5 color=”blue”> BELAJAR PEMROGRAMAN WEB<br><br></font></center>
<font face=”verdana” size=4><b><u>H T M L</u></b><br>Pemrograman adalah pemrograman yang menghasilkan aplikasi web Bahasa yang digunakan adalah HTML Untuk menjalankan aplikasi web menggunakan web browser Dan aplikasinya diletakkan di web server</font>
<p><font face=”Comic Sans MS” size=5><i>Selamat belajar</font></p></Body></html>
T U G A S
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
5
1) Buatlah Tampilan seperti dibawah ini;Pemberian warna pada teks bebas
2) Apabila telah selesai Upload Script dan hasilnya (di Print Screen) di blog masing-masing dengan nama tugas 2
3) Kirimkan alamat blog ke email: [email protected] (bagi yang belum mengirimkan tugas 1 membuat blog)
BAHASA PEMROGRAMAN HTML
HTML (Hyper Text Markup Language) merupakan bahasa yang digunakan untuk pembuatan web, standar bahasa HTML di publikasikan di www.w3.org oleh World
Wide Web Consortium (W3C) Untuk merender kode-kode HTML diperlukan web browser seperti Internet Explorer, Mozilla, Netscape dll
Perkembangan HTMLSaat ini terdapat banyak sekali HTML authoring (software yang digunakan untuk membuat atau mendesain halaman web). Macromedia Dreamweaver, Adobe GoLive, MS FrontPage dan lain sebagainya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak akan memperoleh hasil yang maksimal. Mengapa ? Karena walaupun software-software tersebut semakin menawarkan kemudahan dalam membuat halaman web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut secara manual. Terutama untuk halaman web yang sangat komplit.
Struktur dasar HTMLHTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/").
L I S T S
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
6
Terdapat tiga tipe list (daftar) yang dapat digunakan, yaitu : List yang tidak terurut yan ditandai
dengan Bullet (Unordered List), List Terurut yang di nomori (Ordered List), serta List dengan
definisi tertentu (Definition List)
1. Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet, setiap teks yang
akan dimasukan kedalam list, diberi tanda Tag <LI> (list Item).
Contoh :
<UL>
<LI> Item nomer 1 </LI>
<LI> Item nomer 2 </LI>
<LI> Item nomer 3 </LI>
</UL>
Hasil dari kode di atas adalah:
Item nomer 1
Item nomer 2
Item nomer 3
Ada tiga bentuk yang dapat dipilih pada atribut type, yaitu disc (piringan), square (kotak),
serta circle (lingkaran).
Contoh :
<html><head>
<title>Lat Tag UL</title></head><body>
Daftar Mata Kuliah Semester II<UL COMPACT TYPE=square>
<li> Internet dan HTML </li><li> Design Grafis </li><li> Rekayasa Perangkat Lunak</li></UL>
</body></html>
2. Ordered Lists: <OL> Juga digunakan untuk membuat daftar item, dengan tiap item dapat
menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag.
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
7
Contoh :
<OL TYPE=I>
<LI> Item nomer 1 </LI>
<LI> Item nomer 2 </LI>
<LI> Item nomer 3 </LI>
</OL>
Hasil dari kode di atas adalah :
1. Item nomer 1
2. Item nomer 2
3. Item nomer 3
Untuk TYPE penomoran Anda dapat menggunakan lima jenis penomoran, yaitu:
1 Default numbers, 1, 2, 3, etc.
A Huruf besar. A, B, C, etc.
a Huruf kecil. a, b, c, etc.
I Romawi huruf besar. I, II, III, etc.
i Romawi huruf kecil , i, ii, iii, etc.
Contoh;
<html><head>
<title>Lat Tag OL</title></head><body>
Daftar Jurusan dan kelas Semester II<ol TYPE="I"><li> Teknik Informatika / A1 </li><li> Teknik Informatika / A2 </li><li> Teknik Informatika / A3 </li><li> dst....</li></UL>
</body></html>
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
8
3. Definition Lists: <DL> digunakan untuk membuat sebuah Definition List. Definition list
terdiri dari 2 bagian, yaitu bagian Tema (Definition Term) dan definisinya (Definition
Description).
Contoh :
<DL>
<DT> Item pertama. </DT>
<DD> Penjelasan tentang item pertama. </DD>
<DT> Item kedua. </DT>
<DD> Penjelasan tentang item kedua </DD>
</DL>
Hasil dari kode di atas adalah :
Item pertama.
Penjelasan tentang item pertama.
Item kedua.
Penjelasan tentang item kedua
Tugas Latihan LISTBuatlah sebuah tampilan seperti berikut;
I m a g e
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
9
Digunakan untuk menampilkan image, gambar yang dapat ditampilkan pada halaman web
Anda dapat berupa gambar diam atau bergerak (animasi). Atribut yang dapat digunakan untuk
pengaturan gambar (image) adalah sebagai berikut;
Atribut FungsiAlign (perataan);justifyLeftRight
Gambar terletak rata kiri kananGambar terletak disebelah kiriGambar terletak disebelah kanan
Border Memberikan garis tepi gambarWidth Menentukan lebar gambarHight Menentukan tinggi gambarAlt Memberikan nama gambar
penulisan script:
<img src=”nama_file/URL” width=x height=h align=”left/right/justify”>
Contoh 1;
<html><head>
<title>Memasukan Gambar </title></head><body>
<font color="white"><center><image src="image_2.jpg" width=250 hight=250 border=3></center>
</body></html>
Maka Hasil dari script diatas
Background Website
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
10
Pemberian background pada sebuah website dapat menggunakan warna maupun
gambar;
1. Menggunakana background warna ;
Tag yang digunakan untuk memberikan warna background adalah terletak
didalam tag <body>. Yaitu : <body bgcolor="nama warna">
Contoh;
<html><head>
<title>warna background </title></head><body bgcolor="black">
<font color="yellow" size=5>tampilan ini merupakan contoh menggunakan background warna
</body></html>
2. Menggunakan background gambar;
Tag yang digunakan untuk memberikan gambar background adalah terletak
didalam tag <body>. Yaitu: <body background="nama_file">
Contoh;
<html><head><title>warna background </title></head><body background="image_bg.jpg">
<font color="red" size=6>tampilan ini merupakan contoh menggunakan background GAMBAR</font>
</body></html>
Memasukan file animasi SWF ( Shockwave Flash )
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
11
File swf dapat dimasukan kedalam script html dengan cara memanggil file swf yang
telah dibuat dengan menggunakan software lain, missal flash, swishmax, dan lain-lain.
Adapun cara memangil file swf, yaitu dengan menambahkan tag;
<object width=L height=T><param name="movie" value="namaflashnya.swf"><embed src="namaflashnya.swf" width=L height=T>
Penggunaan tag <object> dan tag <param> pendefinisian yang menunjukan bahwa file
tersebut berbasis object. Anda dapat cukup menggunakan tag yang paling bawah,
yaitu:
<embed src="namaflashnya.swf" width=L height=T>
Contoh;
<html><head>
<title>warna background </title></head>
<body background="image_bg.jpg"><font color="red" size=6><center>tampilan ini merupakan contoh File SWF</center></font>
<center><embed src="file_swf.swf" width=150 hight=150></embed></center>
</body></html>
Membuat Tulisan Berjalan
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
12
(MARQUEE)
Marquee adalah tag HTML yang berguna untuk membuat tampilan yang bergerak vertical atau horizontal. Untuk membuat tulisan berjalan, maka kita menggunakan tag <marquee>;Contoh;
<marquee>Membuat Tulisan Berjalan</marquee>
Yang dapat digerakkan bukan hanya teks tapi gambar atau bahkan video pun juga bisa menggunakan tag Marquee ini,Contoh;
<marquee>ini adalah Gambar berjalan<img src="image.jpg"></marquee>
WIDTH and HEIGHT
Atribut ini digunakan untuk menentukan ukuran dari tampilan untuk tag MARQUEEContoh :
<marquee width=200 height=50> lebar dan tinggi area marquee</marquee>
DIRECTION
Atribut ini digunakan untuk menentukan arah gerak dari tampilan apakah ingin ke kiri, kanan, atas, atau bawah. Pengaturan arah tulisan berjalan dapat dilakukan dengan menambahkan fungsi direction pada tag html <marquee> dengan memilih arah tulisan tersebut berjalan, yaitu :
UP Arah tulisan berjalan ke atasDown Arah tulisan berjalan ke bawahRight Arah tulisan berjalan ke kananLeft Arah tulisan berjalan ke kiri
Contoh;
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
13
<marquee direction=left>Membuat Tulisan Berjalan kekiri </marquee>
<marquee direction=right>Membuat Tulisan Berjalan kekanan </marquee>
<marquee direction=up>Membuat Tulisan Berjalan keatas</marquee>
<marquee direction=down>Membuat Tulisan Berjalan kebawah </marquee>
BEHAVIOUR
Atribut ini digunakan untuk menentukan bagaimana tampilan bergerak, jika sebelumnya yang ditentukan adalah arahnya maka pada atribut BEHAVIOUR yang ditentukan adalah perilaku geraknya.
Contoh :
BEHAVIOR = SCROLL
Dengan penentuan BEHAVIOR = SCROLL maka tampilan akan bergerak sesuai arah yang ditentukan dan akan kembali mengulangi gerakan dari titik awal gerakan.
<marquee behaviour=scroll> teks ini contoh behavour scroll</marquee>
BEHAVIOR = SLIDE
Dengan penentuan BEHAVIOR = SLIDE maka tampilan akan bergerak sesuai arah yang ditentukan lalu kemudian berhenti di titik akhir tanpa mengulangi gerakan sebelumnya.
<marquee behaviour=slide>teks ini contoh behavior slide</marquee>
BEHAVIOR = ALTERNATEDengan penentuan BEHAVIOR = ALTERNATE maka tampilan akan bergerak bolak-balik.
<marquee behavior=alternate> teks ini contoh behavior alternate</marquee>
SCROLL DELAY
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
14
Atribut ini digunakan untuk menentukan jeda waktu antara tiap gerakan dari tampilan.
Nilai yang diisi untuk atribut ini adalah berupa angka dalam mili detik. dengan
menambahkan fungsi scrolldelay pada tag html <marquee> , semakin besar angka
yang dimasukan pada scrolldelay maka tulisan tersebut akan berjalan semakin lambat.
Contoh;<marquee Scrolldelay=10>Mengatur kecepatan Tulisan Berjalan </marquee>
SCROLL AMOUNT
Meskipun kelihatannya hampir sama dengan atribut sebelumnya SCROLLDELAY, SCROLLAMOUNT memiliki sedikit perbedaan dengan atribut tersebut. Jika SCROLLDELAY berfungsi untuk menentukan jeda waktu antara tiap gerakan, maka atribut SCROLLAMOUNT berfungsi untuk menentukan jauhnya lompatan untuk setiap gerakan.
Contoh berikut merupakan perbedaan antara marquee normal dengan marquee yang mempunyai nilai SCROLLAMOUNT 20 mili detik dan 70 mili detik:
<marquee> teks marquee normal </marquee>
<marquee scrollamount=20> teks marquee scrollamount 20/detik </marquee>
<marquee scrollamount=70> teks marquee scrollamount 70/dtik</marquee>
BGCOLOR
Penggunaan atribut BGCOLOR pada tag MARQUEE akan menghasilkan jalur gerakan memiliki warna. Prinsip kerja atribut ini sama dengan atribut BGCOLOR pada tag TABLE yaitu memberikan warna latar.
Contoh :
<marquee bgcolor=yellow> teks marquee dengan warna background kuning</marquee>
HSPACE
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
15
Atribut ini berguna untuk memberikan jarak antara tampilan bergerak dengan tulisan yang ada disamping kanan dan kiri tulisan.Contoh :
Halo kawan <marquee width=25% bgcolor=yellow>
Klikbelajar.com <br />
Tempat dimana kamu bisa belajar segalanya !!
</marquee> Halo kawan..
Kode diatas mempunyai nilai HSPACE default yaitu 0 sehingga tidak ada jarak dikiri dan kanan marquee Sedangkan kode berikut ini mempunyai nilai HSPACE sebesar 70.
Halo kawan <marquee hspace=70 width=25% bgcolor=yellow>
Klikbelajar.com <br />
Tempat dimana kamu bisa belajar segalanya !!
</marquee> Halo kawan..
VSPACE
Atribut ini berguna untuk memberikan jarak antara tampilan bergerak dengan tulisan yang ada diatas dan dibawah tulisan.Contoh :
Halo kawan <br><marquee width=25% bgcolor=yellow>
Klikbelajar.com <br>
Tempat dimana kamu bisa belajar segalanya !!
</marquee><br>Halo kawan..
Kode diatas mempunyai nilai HSPACE default yaitu 0.
Sedangkan dibawah ini kode untuk memberikan jarak sebesar 50 px diatas dan dibawah marquee.
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
16
Halo kawan <br><marquee vspace=50 width=25% bgcolor=yellow>
Klikbelajar.com <br>
Tempat dimana kamu bisa belajar segalanya !!
</marquee><br>Halo kawan..
LOOP
Pengulangan dari tampilan bergerak dengan tag MARQUEE dapat diatur jumlahnya dengan atribut ini. Jika kamu tidak mengatur jumlah pengulangan dengan atribut loop maka secara otomatis akan diartikan bahwa tampilan itu akan bergerak terus menerus tanpa batas.
Contoh penggunaan :
<marquee loop=2> teks berjalan dengan mengulang 2 kali</marquee>
Memberikan fungsi pada tulisan berjalan, ketika pointer terletak diatas (mouse over)
atau pointer keluar tampilan website (mouse out) maka bisa berhenti atau berjalan
sesuai dengan keinginan,
Contoh ;
<marquee onmouseover="this.stop()"; onmouseout="this.start()">Tulisan Berhenti karena Mouse</marquee>
Dari tag html diatas maka. Tulisan yang berjalan akan berhenti jika pointer dipindahkan
ke atas tulisan yang berjalan, dan tulisan tersebut berjalan kembali ketika pointer tidak
terletak diatas teks yang berjalan tersebut.
HYPERLINK
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
17
Hyperlink atau tautan dalam HTML sangatlah penting karena ia yang menghubungkan
antara satu Halaman dengan halaman lain. Untuk membuat Hyperlink, bahan yang
diperlukan adalah tag <a>. Tag ini merupakan tag yang paling umum digunakan pada
dokumen HTML. A adalah Singkatan dari Anchor yang dalam bahasa Indonesia berarti
jangkar, tetapi akan lebih tepat jika diartikan sebagai tautan dikarenakan tag ini
digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML
yang lain.
Contoh;
<A HREF="awal.html">Tautan ini menuju halaman awal</A>
Catatan;
dokumen yang akan digunakan sebagai tautan harus terletak dalam satu direktori/folder
ATRIBUT HYPERLINK
HREFAtribut ini merupakan atribut yang wajib digunakan pada tag Anchor karena atribut ini digunakan untuk menentukan arah tautan yang dimaksud. Jika kita ingin menautkan ke halaman tujuan.html maka kita tinggal tulis HREF="tujuan.html". Begitu juga bila kita ingin menautkan ke halaman http://google.com maka kita tinggal menuliskan HREF="http://google.com".
NAMEAtribut ini digunakan untuk memberikan nama dari suatu tautan. Atribut ini berbeda dengan atribut HREF yang akan mengubah warna teks menjadi biru dan teks tersebut akan memiliki garis bawah, atribut NAME tidak akan mengubah tampilan teks sama sekali dengan teks yang lain. Penggunaannya pun berbeda dengan atribut HREF yang digunakan untuk mengarahkan ke halaman lainnya, atribut NAME hanya berguna untuk memberikan nama dari suatu tautan
TARGETTARGET adalah pilihan cara pembukaan suatu link dalam browser. Link tersebut akan dibuka di jendela baru atau di halaman yang sedang dibuka saat itu dapat di setting melalui atribut TARGET.
A. Untuk membuat suatu link di buka di jendela baru kalian dapat memasukkan "_blank" dalam atribut target.
Contoh; <a href="tampilan2.html" target="_blank">Klik disini untuk membuka tampilan 2</a>
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
18
B. Sedangkan untuk membuat suatu link dibuka di halaman yang sedang dilihat saat itu juga gunakan "_self".
Contoh; <a href="tampilan2.html" target="_self">Klik disini untuk membuka tampilan 2</a>
TITLEAtribut ini digunakan untuk memberikan keterangan tambahan dari sebuah tautan. Atribut ini akan menampilkan keterangan apabila mouse berada diatas tautan yang akan di-klik.
Contoh;<a href="tampilan_awal.html" title="kembali ke halaman awal">Tautan ini menggunakan title</a>
ACCESSKEYAtribut ini digunakan untuk memberikan tombol shortcut dari sebuah tautan, jadi tautan yang menggunakan atribut ACCESSKEY ini dapat diakses dengan tombol shortcut ALT +[ yang diinginkan].
Contoh;<a href="tampilan_awal.html" ACCESSKEY="H">Halaman awal</a>
Hyperlink dengan image
Hyperlink juga bisa diletakkan dalam gambar. Caranya sama persis seperti menaruh
hyperlink pada tulisan hanya saja tag <a> dan </a> menjepit tag gambar <img>.
<a href="coba2.html"><img src="image.jpg" /></a>
Latihan 1 ( simpan dengan nama : awal.html )
<html><head>
<title>HALAMAN AWAL</title>
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
19
</head><body bgcolor="black">
<FONT color="white">
<br><br><br><br><CENTER><B>B e l a j a r</B><BR> <FONT SIZE=5 COLOR="ORANGE"><B><blink>PEMROGRAMAN WEB</blink></B></FONT><BR><B>dengan</B> <FONT COLOR="RED" SIZE=7>H T M L</FONT>
<br><br><a href="awal.html">Halaman Utama</a> | <a href="galery.html">Galeri</a> | Contact<HR WIDTH=800></CENTER>
<center><marquee bgcolor="yellow" width=800 behavior=alternate><b><font color="black">Bahasa-bahasa Pemrograman WEB </font></b></marquee>
<br><marquee width=800><font color="red" size=3>H T M L</font></marquee><br><marquee scrollamount=20 width=800><font color="orange" size=3>P H P</font></marquee><br><marquee scrollamount=50 width=800><font color="white" size=3>A S P</font></marquee><br><marquee scrollamount=70 width=800><font color="blue" size=3>JAVA</font></marquee>
</center>
<HR WIDTH=800><center>CopyRight@2010</center></font>
</html>
Latihan 2 ( simpan dengan nama : galery.html )
<html><head>
<title>HALAMAN GALERY</title>
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
20
</head>
<body background="BG.PNG">
<center><img src="image_2.jpg" width=50 height=50><img src="image_2.jpg" width=100 height=100><img src="image_2.jpg" width=150 height=150><img src="image_2.jpg" width=100 height=100><img src="image_2.jpg" width=50 height=50>
<BR><BR><a href="awal.html">KLIK DISINI UNTUK KEMBALI KE AWAL...</a></center>
</body>
</html>
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “
21