Labwork 3

MODUL 3
IMAGE, IFRAME, MENU DAN HYPERLINK DENGAN HTML

A. TUJUAN PRAKTIKUM
a. Mahasiswa mampu membuat hyperlink halaman web menggunakan HTML
b. Mahasiswa mampu membuat menu navigasi web dengan HTML
c. Mahasiswa mampu membuat tampilan HTML berupa gambar
B. ALOKASI WAKTU 1 x 50 menit
C. DASAR TEORI
a. IMAGE
Tag IMG di gunakan untuk menginsertkan image ke document HTML.
Syntaxnya:
<IMG SRC = “URL”>
b. IFRAME
iFrame adalah singkatan dari Inline Frame, sebuah komponen dari file HTML yang
memungkinkan Anda menyematkan video, dokumen, dan file lainnya ke dalam
sebuah halaman website.
Proses untuk menyematkan file dengan teknik ini disebut sebagai embed iFrame.
Pada sebuah file HTML, penggunaan iFrame ditandai dengan adanya tag <iframe>.
c. MENU
Terdapat beberapa tipe dalam menuliskan menu
<OL>…</OL>, Ordered List, membuat menu berurut, baik dengan nomor, huruf
atau bilangan romawi.
Properties:
Start=, menentukan awal penomoran daftar
Type=, jenis urutan penomoran. Terdaapat beberapa type=A,a,I,i,1
<UL>…</UL>, Unordered List, membuat menu tanpa suatu urutan.

Biasanya ditandai dengan lingkaran, kotak dan cakram
<LI>…</LI>, menampilkan item dari suatu daftar
Properties:
TYPE= jenis urutan penomoran. Terdaapat beberapa type=A,a,I,i,1, untuk

OL
TYPE= disc, square, circle, untul <UL>
Value=mengubah nilai awal dari suaru daftar
d. ANCHOR
<A> alias <ANCHOR>, menyatakan suatu hyperlink.
Properties:
HREF= “URL/ file”, menyatakan suatu alamat yang dituju
<A HREF="http://..."> , link document di WWW server.
<A HREF="ftp://...">, link ke site FTP(File Transfer Protocol)
<A HREF="gopher://..."> , link ke gopher server
<A HREF="mailto:..."> , link ke alamat email
<A HREF="news:..."> , link ke newsgroups
<A HREF="#:..."> ,link ke identifier yang memiliki name sama
etc
TARGET, medefinisikan window pembukaan suatu link
_self , window dibuka di window yang sama
_parent , window dibuka di window induk
_top , window dibuka mengganti keseluruhan isi window

_blank , membuat window sendiri
NAME= menyatakan titik anchor dalam suatu dokumen HTML
D. LANGKAH-LANGKAH
1. Latihan 1
a. Ketik script HTML berikut
<html>
<head>
<title>Latihan 1</title>
</head>
<body>
<h1>Image Sederhana:</h1>
<table border=`1` width=’30%’>
<tr>
<td>Nama</td>
<td>:</td>
<td>Budi</td>
</tr>
<tr>
<td>Usia</td>
<td>:</td>
<td>20 Tahun</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td>Rock Bottom</td>
</tr>
</table>
</body>
</html>
b. Simpan dalam folder anda dengan nama Latihan1.html

c. Buka di browser, perhatikan hasil tampilannya. Apa yang membuat kedua gambar
itu berbeda?
2. Latihan 2
a. Ketik script HTML berikut
<html>
<head>
</head>
<body>
<h1>Frame Sederhana:</h1>
<ul>
<center>
<iframe src="" frameborder="0" width="50%"></iframe>
</center>
</ul>
</body>
</html>
b. Masukkan link website program studi S1 PTIK UNS.

c. Simpan dalam Latihan2.html.
d. Browse, perhatikan hasilnya
3. Latihan 3
a. Ketik kode berikut
<html>
<head>
</head>
<body>
<h1>List Sederhana:</h1>
<ol type="1">
<li>FKIP
<ul type=`a`>
<li>PTIK</li>
<li>PGSD</li>
<li>PGPAUD</li>
<li>PTM</li>
<li>PTB</li>
</ul>
</li>
<li >MIPA
<ul type=`a`>
<li>Matematika</li>
<li>Kimia</li>
<li>Fisika</li>
<li>Biologi</li>
</ul>
</li>
<li>Hukum</li>
<li>Kedokteran</li>
</ol>
</body>
</html>
b. Simpan dengan Latihan3.html.

c. Browse, berikut tampilannya
d. Ada yang berbeda antara kode dan tampilan. Apa yang membuatnya tidak sama?
Perbaikilah
4. Latihan 4
a. Ketik kode berikut
<html>
<head>
</head>
<body
<h1>Menu Sederhana </h1>
<ol type="1">
<li><a href='Latihan1.html`>Latihan 1</a></li>
<li><a href=`Latihan2.html'>Latihan 2</a></li>
<li><a href='Latihan3.html'>Latihan 3</a></li>
</ol>
</body>
</html>
Note:
• <a> menunjukkan sebuah hyperlink

• Jika ditulis <a href=”www.uns.ac.id”>, berarti yang dituju site
UNS
• Jika ditulis <a href=”mailto:siapaaaja@uns.ac.id>, berarti
yang dituju email, dan akan muncul default compose email.
b. Simpan dengan nama Latihan4.html. Browse,
c. Terlihat default bentuk link yang didefinisikan seperti di atas dengan tampilan
HARUSNYA seperti di atas.
d. Klik salah satu link, misal Latihan1, apa yang terjadi?
5. Latihan 5
a. Latihan 5 terdiri dari tiga buah file, yakni Latihan5a.html, Latihan5b.html, dan
Latihan5c.html.
b. Kode Latihan5a.html, tulis dan simpan.
<html>
<head>
</head>
<body>
<center>
<h1>Hai, Ini adalah primary page</h1>
<br>
<iframe src="Latihan5b.html" width="80%"

height="80%"></iframe>
</center>
</ol>
</body>
</html>
c. Kode Latihan5b.html, tulis dan simpan.

<html>
<head>
</head>
<body>
<center>
<h1>Hai, Ini adalah secondary page</h1>
<br>
<iframe src="Latihan5c.html" width="80%"

height="80%"></iframe>
</center>
</ol>
</body>
</html>
d. Kode Latihan5c.html, tulis dan simpan.

<html>
<head>
</head>
<body>
<center>
<h1>Hai, Ini adalah primary page</h1>
<br>
<ol type="1">
<li><a href="Latihan1.html"
target="_blank">Latihan 1</a></li>
<li><a href=" Latihan 2.html"

target="_self">Latihan 2</a></li>

target="_parent">Latihan 3</a></li>
target="_top">Latihan 4</a></li>
</ol>
</center>
</body>
</html>
e. Jalankan file Latihan5a.html. Berikut tampilannya.
f. Coba satu-satu diklik. Bagaimana hasilnya? Apakah yang menjadi perbedaan antar
keempat link tersebut?

Labwork 3

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Labwork 3

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL 3

IMAGE, IFRAME, MENU DAN HYPERLINK DENGAN HTML

B. ALOKASI WAKTU 1 x 50 menit

atau bilangan romawi.

Start=, menentukan awal penomoran daftar

Type=, jenis urutan penomoran. Terdaapat beberapa type=A,a,I,i,1

<UL>…</UL>, Unordered List, membuat menu tanpa suatu urutan.

<LI>…</LI>, menampilkan item dari suatu daftar

TYPE= jenis urutan penomoran. Terdaapat beberapa type=A,a,I,i,1, untuk

TYPE= disc, square, circle, untul <UL>

Value=mengubah nilai awal dari suaru daftar

HREF= “URL/ file”, menyatakan suatu alamat yang dituju

<A HREF="http://..."> , link document di WWW server.

<A HREF="ftp://...">, link ke site FTP(File Transfer Protocol)

<A HREF="gopher://..."> , link ke gopher server

<A HREF="mailto:..."> , link ke alamat email

<A HREF="news:..."> , link ke newsgroups

<A HREF="#:..."> ,link ke identifier yang memiliki name sama

TARGET, medefinisikan window pembukaan suatu link

_self , window dibuka di window yang sama

_parent , window dibuka di window induk

_top , window dibuka mengganti keseluruhan isi window

NAME= menyatakan titik anchor dalam suatu dokumen HTML

<table border=`1` width=’30%’>

b. Simpan dalam folder anda dengan nama Latihan1.html

<iframe src="" frameborder="0" width="50%"></iframe>

b. Masukkan link website program studi S1 PTIK UNS.

b. Simpan dengan Latihan3.html.

<h1>Menu Sederhana </h1>

<li><a href='Latihan1.html`>Latihan 1</a></li>

<li><a href=`Latihan2.html'>Latihan 2</a></li>

<li><a href='Latihan3.html'>Latihan 3</a></li>

• <a> menunjukkan sebuah hyperlink

<h1>Hai, Ini adalah primary page</h1>

<iframe src="Latihan5b.html" width="80%"

c. Kode Latihan5b.html, tulis dan simpan.

<iframe src="Latihan5c.html" width="80%"

d. Kode Latihan5c.html, tulis dan simpan.

<h1>Hai, Ini adalah primary page</h1>

<li><a href=" Latihan 2.html"

<li><a href=" Latihan 3.html"

e. Jalankan file Latihan5a.html. Berikut tampilannya.

Anda mungkin juga menyukai