Web Programming 2

itus web.Layout situs

yang baik akan menjadikan halaman web web baik juga. Dengan desain

halaman web yang baik dan tepat akan membuat pengunjung merasa nyaman

dengan tampilan (layout) halaman web tersebut, dan tetap dapat fokus pada isi

(content). Desain halaman web tidak mengganggu kejelasan bagian isi.

Pada desain layout yang tepat, pengunjung dapat berpindah ke halaman lain

dengan mudah melalui navigasi yang baik, mudah dan informatif. Pengunjung

merasa bahwa setiap halaman dari situs merupakan satu kesatuan. Setiap

halaman memiliki posisi dan kesamaan tampilan (layout), yang berbeda hanya isi

(content).

Adanya layout tata letak yang baik dapat membuat halaman lebih cantik dan

seimbang, terutama enak dilihat dan mudah dibaca. Desain layout suatu

halaman web meliputi penyusunan:

- pembagian tempat pada halaman

- pengaturan jarak sepasi

- pengelompokan teks dan grafik

- serta penekanan pada suatu bagian tertentu

Beberapa model layout yang biasa digunakan dalam mendesain suatu

halaman web, diantaranya yaitu

- Top Index

Î digunakan untuk menampilkan link yang banyak ke situs lain, seperti

search engine

105 |

Gambar 10.2 model layout top index

Navigasi atau daftar isi berada dibagian atas dari halaman web, seperti pada berikut

merupakan tampilan dari www.google.com

Gambar 10.3 contoh halaman web dengan layout top index

- Bottom Index

Î Biasanya digunakan apabila isi dari halaman banyak berhubungan

dengan topik tunggal

106 |

Gambar 10.4 model layout bottom index

Navigasi atau daftar isi berada dibagian bawah dari halaman web, seperti

pada berikut merupakan tampilan halaman web education and training

berikut ini

Gambar 10.5 contoh halaman web dengan layout bottom index

107 |

- Left Index

Î Digunakan untuk layar dengan resolusi yang lebar sehingga mudah

dalam penyediaan navigasi, tanpa menimbulkan kekacauan penyajian

pada halaman utama

Gambar 10.6 model layout left index

Navigasi atau daftar isi berada dibagian kiri dari halaman web, seperti pada

berikut merupakan tampilan halaman web berikut ini

108 |

Gambar 10.7 contoh halaman web dengan layout left index

- Layout Split

Î Merupakan model yang banyak dipakai, karena terjaga keseimbangan

dalam halaman web

Gambar 10.8 model layout split

Navigasi atau daftar isi berada dibagian kanan dan kiri dari halaman web,

seperti pada berikut merupakan tampilan halaman web yang diambil dari

theme wordpress berikut ini

109 |

Gambar 10.9 contoh halaman web dengan layout split

- Alternating Index

Î digunakan untuk halaman yang banyak menampilkan grafik, foto dan

produk yang disertai dengan teks berupa keterangan, harga, jumlah, dan

lain - lain.

Gambar 10.10. model layout alternating index

Navigasi atau daftar isi berada dibagian kanan dan kiri dari halaman web,

seperti pada berikut merupakan tampilan halaman web yang diambil dari

theme di http://www.csszengarden.com/050// berikut ini

110 |

Gambar 10.11 contoh halaman web dengan layout alternating index

3) Desain halaman web dengan konsep tabel

- Top Index

Berikut yaitu listing program untuk membuat layout “top index” halaman

web dengan elemen table.

<!DOCTYPE html>

<head>

<title>Top index</title>

</head>

<body>

<table width="800" height="542" border="1"

align="center">

<tr>

<td height="23" align="center"

111 |

bordercolor="#FFFFFF" bgcolor="#FFFF00"><strong><font

size="+5">Banner

atau iklan</font></strong></td>

</tr>

<tr>

<td height="27" align="center"

bgcolor="#FFCCCC"><font color="#FF0000">Daftar

isi atau navigasi </font></td>

</tr>

<tr>

<p>Body atau contents(isi)</p>

<p><font color="#006600">Body atau

contents(isi)</font></p>

<p><font color="#CC0000">Body atau

contents(isi)</font></p>

<p><font color="#FFFF00">Body atau

contents(isi)</font></p>

<p><font color="#FF6633">Body atau

contents(isi)</font></p></td>

</tr>

<tr>

<td height="23" align="center"

bgcolor="#CCFF99"><font color="#9966CC">Info

tambahan atau lain-lain </font></td>

</tr>

</table>

</form>

</body>

</html>

Bila listing program di atas dijalankan maka akan menghasilkan tampilan

halaman web seperti berikut ini :

112 |

Gambar 10.12 penerapan <table> pada layout top index

- Bottom Index

Berikut yaitu listing program untuk membuat layout “bottom index” halaman

web dengan elemen table.

<!DOCTYPE html>

<head>

<title>Top index</title>

</head>

<body>

<table width="800" height="542" border="1"

align="center">

<tr>

113 |

<td height="23" align="center" bordercolor="#FFFFFF"

bgcolor="#FFFF00"><strong><font size="+5">Banner

/ Judul</font></strong></td>

</tr>

<tr>

<p>Body atau contents(isi)</p>

<p><font color="#006600">Body atau

contents(isi)</font></p>

<p><font color="#CC0000">Body atau

contents(isi)</font></p>

<p><font color="#FFFF00">Body atau

contents(isi)</font></p>

<p><font color="#990033">Body atau

contents(isi)</font></p></td>

</tr>

<tr>

<td height="23" align="center"

bgcolor="#CCFF99"><font color="#FF0000"><strong><font

size="+2">Daftar

isi atau navigasi </font></strong></font><font

color="#9966CC" size="+2"> </font></td>

</tr>

</table>

</form>

114 |

</body>

</html>

Bila listing program di atas dijalankan maka akan menghasilkan tampilan

halaman web seperti berikut ini :

Gambar 10.13 penerapan <table> pada layout bottom index

- Left Index

Berikut yaitu listing program untuk membuat layout “left index” halaman

web dengan elemen table.

<!DOCTYPE html >

<head>

<title>Left Colour</title>

</head>

115 |

<body>

<table width="800" height="447" border="1"

align="center" cellspacing="1">

<tr>

<th width="160" rowspan="3" valign="top"

bgcolor="#993366"><p>Home</p>

<p>Profile</p>

<p>About Us</p>

<p>Contact Us</p></th>

<th width="627" height="23" align="center"

bgcolor="#FFFF99"><strong><font color="#CCCCCC"

size="+4">Electronic

Shop</font></strong></th>

</tr>

<tr>

<td height="176" align="center" valign="top"

bgcolor="#FFFF99"><p> </p>

<p>Selamat datang di web kami, penjualan produk

online ini yaitu yang pertama di kota kami.

kualitas dan harga dapat dipercaya langsung saja

pesan dan menjadi langganan kami.

116 |

</p></td>

</tr>

<tr>

<font size="+2">profilkami.com</font></td>

</tr>

</table>

</form>

</body>

</html>

Bila listing program di atas dijalankan maka akan menghasilkan tampilan

halaman web seperti berikut ini :

Gambar 10.14 penerapan <table> pada layout left index

- Layout Split

Berikut yaitu listing program untuk membuat layout “split” halaman web

dengan elemen table.

117 |

<!DOCTYPE html >

<head>

</head>

<body>

<table width="800" height="512" border="1"

align="center">

<tr>

<td width="15%" rowspan="2" align="center"

bgcolor="#99CC99"><strong>Daftar

Isi </strong> </td>

<td width="67%" height="23" align="center"

bgcolor="#FFCCFF"><font

size="+3"><strong>Banner/judul</strong></font></td>

<td width="18%" rowspan="2" align="center"

bgcolor="#99CC99"><strong>Daftar

Isi </strong> </td>

</tr>

<tr>

<td height="456" align="center"

bgcolor="#CCCCCC">

<p>Body atau contents(isi)</p>

<p><font color="#006600">Body atau

118 |

contents(isi)</font></p>

<p><font color="#CC0000">Body atau

contents(isi)</font></p>

<p><font color="#FFFF00">Body atau

contents(isi)</font></p>

<p><font color="#990033">Body atau

contents(isi)</font></p>

</td>

</tr>

<td height="23" colspan="3" align="center">Lain-

lain </td>

</tr>

</table>

</form>

</body>

</html>

Bila listing program di atas dijalankan maka akan menghasilkan tampilan

halaman web seperti berikut ini :

119 |

Gambar 10.15 penerapan <table> pada layout split

- Alternating Index

Berikut yaitu listing program untuk membuat layout “alternating index”

halaman web dengan elemen table.

<!DOCTYPE html >

<head>

<title>alternating</title>

</head>

<body>

<table width="800" height="738" border="1"

align="center">

<tr>

<td height="248" align="center"

120 |

bgcolor="#FF66CC"><font size="+1"><strong>Teks/Daftar

isi</strong></font></td>

<td align="center" bgcolor="#FFFFCC"><font

color="#000066" size="+7"><strong><em>Gambar

</em> </strong></font></td>

</tr>

<tr>

<td height="261" align="center"

bgcolor="#FFFF99"><font color="#CC0000"

size="+7"><strong><em>Gambar

</em></strong></font><font

size="+7"><em></em></font></td>

<td align="center" bgcolor="#FF66CC"><font

size="+1"><strong>Teks/daftar

isi</strong></font></td>

</tr>

<td height="150" colspan="2" align="center"><font

color="#FFFFFF"><strong><font size="+1">Lain-

lain</font></strong></font></td>

</tr>

</table>

</form>

</body>

121 |

</html>

Bila listing program di atas dijalankan maka akan menghasilkan tampilan

halaman web seperti berikut ini :

Gambar 10.16 penerapan <table> pada layout alternating index

c. Rangkuman

Pada kegiatan belajar desain Web dengan Konsep Tabel dapat

disimpulkan menjadi beberapa point penting seperti berikut

ƒ Tabel pada umumnya digunakan untuk menampilkan data tabular dalam

bentuk baris dan kolom. perpotongan baris dan kolom di dalam tabel disebut

dengan sel.

ƒ HTML menyediakan beberapa elemen yang dikhususkan untuk memenuhi

beberapa hal yang disebutkan sebelumnya, yaitu elemen table,tr,td,th,

caption.

122 |

ƒ Secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari

containing block, Logo, navigation, content, white space

ƒ Desain layout suatu halaman web meliputi penyusunan:

- pembagian tempat pada halaman

- pengaturan jarak sepasi

- pengelompokan teks dan grafik

- serta penekanan pada suatu bagian tertentu

ƒ Beberapa model layout yang biasa digunakan dalam mendesain suatu

halaman web, diantaranya yaitu top index, bottom index, left index, layout

split, alternating index

11. Kegiatan Belajar 11 : Menyajikan Format Tampilan Gambar

a. Tujuan Pembelajaran

Setelah mengikuti kegiatan belajar 11 ini Peserta Didik diharapkan dapat :

1) Memahami Format tampilan gambar

2) Menyajikan Format tampilan gambar

b. Uraian Materi

Memasukkan Gambar ke dalam Halaman Web

Suatu halaman web akan terlihat kaku, terkesan formal, dan sedikit menjemukan

bila tidak disertai dengan gambar. Kita bisa lihat saat ini, halaman web yang ada

di internet, hampir semuanya memasukkan unsur gambar, animasi, bahkan

audio dan video untuk menarik dan membuat tercengang para pengunjungnya.

Sebagai contoh lain, misalnya ingin membuat halaman web yang berisi koleksi

foto, maupun barang-barang yang sesuai dengan hobi. Dalam kasus ini, tentu

harus memahami teknik untuk menampilkan foto tersebut ke dalam halaman web

sehingga akan tampil rapi dan menarik.

Cara yang diperlukan untuk memasukkan atau menambahakan gambar ke

dalam suatu halaman web sangatlah mudah. HTML telah menyediakan tag

khusus untuk keperluan ini, yaitu <img>. Tag ini merupakan tag tunggal atau

tidak memiliki pasangan. Atribut terpenting dari tag <img> yaitu SRC (source

atau sumber), yang berisi file gambar yang akan ditampilkan ke dalam halaman

web.

Bentuk umum penggunaan tag <img> yaitu :

Jika file yang akan ditampilkan berada di direktori lain, atau bahkan berada di

situs web lain, makan perlu menyebutkan juga lokasi dari file tersebut.

Contoh:

Atau

128 |

Contoh hasil dokumen HTML di Web Browser seperti gambar berikut :

Gambar 11.1. Menyajikan Format Gambar

Format gambar yang sering digunakan dalam halaman web yaitu GIF (.gif )

dan JPEG (.jpg atau . jpeg ). GIF yaitu singkatan dari Graphics Interface

Format sedangkan JPEG, yaitu singkatan dari Joint Photographic Expert

Group. Selain kedua format tersebut, saaat ini juga sudah mulai banyak

digunakan gambar dengan format PNG (.png ), yanag merupakan singkatan dari

Portable Network graphics.

Menggabung Gambar dan Teks

Jika kita ingin menggabungkan ataumenyisipkan gambar di dalam suatu teks

atau paragraf tertentu, terdapat pilihan posisi gambar yang harus diperhatikan:

Secara vertikal:

x Teks bisa berada sejajar dengan bagian atas gambar

x Teks bisa berada sejajar dengan bagian tengah gambar

x Teks bisa berada sejajar dengan bagian bawah gambar

Secara horisontal:

129 |

x Gambar bisa berada di bagian kiri teks/paragraf

x Gambar bisa berada di bagian kanan teks/paragraf

Untuk posisi gambar yangdilihat dari arah vertikal dapat ditentukan dengan

mengisi nilai TOP, MIDDLE, atau BOTTOM ke dalam atribut ALIGN yang

terdapat pada tag <img>.

Contoh hasil dokumen HTML di Web Browser seperti gambar berikut :

Gambar 11.2. Menggabungkan Gambar dan Teks arah vertikal

Adapun untuk posisi gambar yang dilihat dari arah horisontal ditentukribut an

dengan mengisi nilai LEFT dan RIGHT kedalam ALIGN pada tag <img>. Dengan

mengisi atribut tersebut dengan nilai LEFT maka gambar akan berada di sebelah

kiri teks. Sebaliknya, jika diisi RIGHT akan menyeabkan posisi gambar akan

berada di sebelah kanan teks.

Contoh hasil dokumen HTML di Web Browser seperti gambar berikut :

130 |

Gambar 11.3. Menggabungkan Gambar dan Teks arah horisontal

Memperkecil dan Memperbesar Ukuran Gambar

gambar yang ditampilkan pada dokumen HTML terkadang tidak memiliki ukuran

gambar yang sama dengan ukuran sebenarnya. Untuk menghasilkan gambar

dengan kualitas yang mirip aslinya, penentuan ukuran juga menjadi hal yang

penting untuk diperhatikan. Maka dari itu perbandinganya harus sesuai dengan

ukuran asli dari gambar tersebut. Untuk menentukan ukuran gambar, kita perlu

mengisi atribut HEIGHT berfungsi untuk menetukan tinggi gambar dan WIDTH

untuk menetukan lebar gambar. Perhatikan contoh berikut ini.

Kode diatas akan menampilkan gambar dari file komputer.jpg yang berada dalam

direktori images sesuai dengan ukuran asli (misal 500X375 pixel).

Untuk memperkecil gambar tersebut, kita tinggal memperkecil nilai-nilai tersebut,

misalnya

Memberi keterangan pada gambar

131 |

Agar lebih terkesan informatif, anda dapat memberikan keterangan yang relevan

dan seperlunya (tidak berlebihan) terhadap gambar yang anda tampilkan pada

halaman web. Keterangan ini akan muncul dalam bentuk tooltip ( sesaat, hanya

beberapa detik) pada saat penunjung mengarahkan kursor (penjujuk mouse) ke

atas gambar.

Untuk membuat keterangan semacam ini, kita dapat menggunakan atribut TITLE

maupun ALT pada tag <img>.

Contoh hasil dokumen HTML di Web Browser seperti gambar berikut :

Gambar 11.4. Menyajikan format gambar dengan keterangan

Pada gambar di atas dapat dilihat bahwa keterangan gambar terlihat pada saat

mouse di atas gambar, di sana tertulis “Komputer Desktop” sebagai keterangan

gambar.

c. Rangkuman

ƒ Untuk menampilkan format gambar digunakan tag <img>, dengan atribut

src=”letak dan nama file gambar”, serta ukuran width=”” untuk lebar

gambar dan height=”” untuk tinggi gambar.

ƒ Untuk membuat keterangan menggunakan atribut TITLE maupun ALT

pada tag <img>.

132 |

d. Tugas

Latihan 1. Memasukkan Gambar ke dalam Halaman Web

9 Buatlah direktori baru dengan nama images di dalam direktori kerja

9 Siapkanlah file gambar berupa computer, dengan tiga format berbeda

yaitu GIF, JPEG dan PNG. Copy file gambar yang akan di tampilkan ke

dalam direktori images

Catatan : Dalam contoh ini menggunakan file komputer.gif, komputer.jpeg,

dan komputer.png.

9 Buatlah dokumen HTML berikut:

<html>

<head>

<title>Gambar</title>

</head>

<body>

<p>Latihan Menambahkan Gambar GIF, JPG, dan PNG</h2>

<p>Menampilkan gambar dalam format GIF:</p>

<p>Menampilkan gambar dalam format JPG:</p>

<p>Menampilkan gambar dalam format PNG:</p>

</body>

</html>

9 Simpan file dengan nama gambar.html dan tempatkan ke dalam direktori

kerja

9 Bukalah file tersebut melalu web browser

133 |

Pada contoh di atas,ditampilkan tiga gambar dengan format yang berbeda.

Gambar pertama (paling atas) menggunakan format GIF, kedua JPG, dan ketiga

PNG. Seperti yang terlihat, format-format tersebut dapat ditampilkan dengan baik

di dalam halaman web. Nilai yang kita isikan untuk atribut SRC di atas

mengandung nama direktori images.

Ini artinya file tersebut disimpan di ddirektori images, dimana direktori images itu

sendiri berada dalam direktori kerja (satu direktori dengan file gambar.html).

Latihan 2. Menggabung Gambar dan Teks (bagian 1)

Catatan: Dalam contoh ini menggunakan file yang sama seperti pada

Latihan 1.

9 Buatlah dokumen HTML berikut :

<html>

<head>

<title>Gambar</title>

</head>

<body>

<h2>Latihan Menggabung Gambar dan teks (bag.1)</h2>

<p>

Komputer 1 (menggunakan align=TOP)

</p>

<p>

<img src=”images/komputer.jpg”/> align=”middle”/>

Komputer 2 (menggunakan align=MIDDLE)

</p>

<p> <img src=”images/komputer.png”/> align=”bottom”/>

134 |

Komputer 3 (menggunakan align=BOTTOM)

</p>

</body>

</html>

9 Simpan file dengan nama gambar_plusteks.html dan tempatkan ke

dalam direktori kerja

9 Bukalah file tersebut melalui web browser.

Dari hasil di atas tampak jelas bahwa pada gambar bagian pertama teks berada

sejajar dengan bagian atas gambar. Untuk melakukan hal ini, kita perlu mengisi

atribut ALIGN dengan nilai TOP.

Pada gambar kedua, teks berada di tengah-tengah gambar karena kita mengisi

nilai MIDDLE pada atribut ALIGN.

Terakhir, pada gambar ketiga, teks berada sejajar dengan bagian bawah gambar

karena kali ini atribut ALIGN yaitu BOTTOM

Latihan 3. Menggabung Gambar dan Teks (Bagian 2)

9 Masih menggunakan file gambar yang sama dengan latihan 1

9 Tulislah tag html berikut :

<html>

<head>

<title>Gambar</title>

</head>

<body>

<h2>Latihan Menggabung Gambar dan Teks (Bag. 2) </h2>

<p><u>Gambar ada di sebelah kiri teks:</u></p>

135 |

<p>

Pada paragraf ini gambar akan ditempatkan di sebelah

kiri teks. Hal ini disebabkan atribut ALIGN diisi dengan

nilai LEFT. Pada paragraf ini gambar akan ditempatkan di

sebelah kiri teks. Hal ini disebabkan atribut ALIGN diisi

dengan nilai LEFT. Pada paragraf ini gambar akan ditempatkan

di sebelah kiri teks. Hal ini disebabkan atribut ALIGN diisi

dengan nilai LEFT. Pada paragraf ini gambar akan ditempatkan

di sebelah kiri teks. Hal ini disebabkan atribut ALIGN diisi

dengan nilai LEFT. Pada paragraf ini gambar akan ditempatkan

di sebelah kiri teks. Hal ini disebabkan atribut ALIGN diisi

dengan nilai LEFT.

</p>

<p><u>Gambar ada di sebelah kanan teks:</u></p>

<p>

Pada paragraf ini gambar akan ditempatkan di sebelah kanan

teks. Hal ini disebabkan atribut ALIGN diisi dengan nilai

RIGHT. Pada paragraf ini gambar akan ditempatkan di sebelah

kanan teks. Hal ini disebabkan atribut ALIGN diisi dengan

nilai RIGHT. Pada paragraf ini gambar akan ditempatkan di

sebelah kanan teks. Hal ini disebabkan atribut ALIGN diisi

dengan nilai RIGHT. Pada paragraf ini gambar akan

ditempatkan di sebelah kanan teks. Hal ini disebabkan

atribut ALIGN diisi dengan nilai RIGHT. Pada paragraf ini

gambar akan ditempatkan di sebelah kanan teks. Hal ini

disebabkan atribut ALIGN diisi dengan nilai RIGHT.

</p>

</body>

</html>

9 Simpan file dengan nama gambar_plusteks2.html dan tempatkan ke

dalam direktori kerja.

9 Bukalah file tersebut melalui web browser

136 |

Latihan 4 Memperkecil gambar

9 Masih menggunakan file gambar yang sama dengan latihan 1

Catatan: Dalam contoh ini menggunakan file komputer.jpg.

9 Buatlah dokumen HTML berikut:

<html>

<head>

<title>gambar</title>

<head>

<body>

<h2>Latihan memperkecil gambar</h2>

<p>

<u>gambar ukuran asli (500X375 pixel ):</u><br />

</p>

<p>

<u> gambar yang diperkecil (320X230 pixel) :</u><br />

<p>

<body>

<html>

9 Simpan file dengan nama gambar_perkecil.html dan tempatkan kedalam

direktori kerja

9 Bukalah file tersebut melalui web browser

Latihan 5. Memperbesar Gambar

Masih menggunakan file gambar yang sama dengan latihan 1

Catatan: Dalam contoh ini menggunakan file komputer.jpg.

137 |

9 Buatlah dokumen HTML berikut:

<html>

<head>

<title>gambar</title>

<head>

<body>

<h2>Latihan memperbesar gambar</h2>

<p>

<u>gambar ukuran asli (500X375 pixel) :</u><br />

</p>

<u> gambar yang diperbesar (600X440 pixel) :</u><br />

<p>

<body>

<html>

9 Simpan file dengan nama gambar_perkecil.html dan tempatkan kedalam

direktori kerja

9 Bukalah file tersebut melalui web browser

Sebaliknya, untuk memperbesar gambar tersebut, kita perlu memperbesar nilai-

nilai dari atribut di atas, misalnya menjadi 600X420 pixel. Kodenya akan tampak

seperti berikut:

Hati-hati dalam memperbesar gambar, jangan sampai gambar terlihat pecah.

Cari nilai-nilai optimal untuk mengubah nilai dari tersebut WIDTH dan HEIGHT.

Latihan 6: memberi keterangan pada gambar

Catatan : Dalam contoh ini menggunakan file komputer.jpg.

9 Buatlah dokumen HTML berikut:

138 |

<html>

<head>

<title>gambar</title>

<head>

<body>

<h2>Latihan pemberi keterangan pada gambar</h2>

<p>arahkan penunjuk mouse anda ke atas gambar dibawah ini

untuk melihat keterangan yang dimaksud!</p>

<p>

<img src=”images/komputer.jpg”

title=”Komputer Desktop” />

</p>

</body>

</html>

Simpan file dengan nama gambar_keterangan.html dan tempatkan

kedalam direktori kerja

9 Jalankan file tersebut melalui web browser

Coba perhatikan teks toolip yang muncul pada hasil di atas. Teks tersebut yaitu

teks yang diisikan ke dalam atribut title pada tag <img>. Untuk keperluan yang

sama, juga dapat menggunakan atribut ALT.

Latihan 7. Latihan fungsi ALT

Buatlah seperti dokumen html pada Latihan 6, tetapi tag untuk gambarnya yaitu

sbb :

Beri nama file fungsi-alt.html, biarkan di direktori image tanpa file gambar

notebook.jpg

12. Kegiatan Belajar 12 : Format Tampilan Audio

a. Tujuan Pembelajaran

Setelah mengikuti kegiatan belajar 12 ini Peserta Didik diharapkan dapat :

1) Memahami format tampilan file audio

2) Menyajikan audio dalam tampilan web

b. Uraian Materi

1.) Format tampilan file audio

Kebanyakan file audio diputar melalui sebuah plug-in, misalnya seperti

flash. Namun, browser yang berbeda mungkin memiliki berbagai plug-in. HTML5

mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan

file audio pada halaman web: elemen <audio> </audio>.

Untuk memasukkan suara pada html bisa menggunakan tag

<audio>. Format suara yang telah didukung hingga saat ini yaitu MP3, Ogg

dan WAP. File-file Audio yang didukung HTML5 yaitu MP3,WAV, dan OGG.

Tidak semua tipe file audio tersebut didukung oleh browser.

ƒ OGG merupakan format audio yang didukung oleh Mozilla firefox, opera,

dan google chrome.

ƒ MP3 merupakan format audio yang didukung oleh Google Chrome dan

safari.

ƒ WAV merupakan format audio yang didukung oleh Mozilla Firefox dan

Opera.

Jenis file audio untuk dukungan pada web browser bisa dilihat pada tabel berikut

ini.

Browser MP3 Wav Ogg

Internet

Explorer

Yes no no

Chrome Yes yes yes

Firefox no

update: firefox 21

running on windows

7, windows 8,

windows vista,

android now supports

mp3

yes yes

143 |

Safari yes yes no

Opera no yes yes

a. Dari tabel di atas dapat dilihat bahwa bila saat meletakan file mp3 di web

yang kita buat, akan ada beberapa orang yang tidak bisa memutar hasil

embed mp3 di web yan telah kita buat tersebut. Hal tersebut bisa jadi

disebabkan browser yang digunakan tidak support pada file berekstensi

mp3.

b. MIME untuk format audio

MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme

untuk mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video,

dan lain sebagainya agar browser tidak salah menterjemahkan konten yg

diterima. Tidak hanya pada web, email juga menggunakan MIME. Berikut yaitu

tipe mime untuk format audio.

Format MIME-type

MP3 audio/mpeg

Ogg audio/ogg

Wav audio/wav

2.) Menyajikan audio dalam tampilan web

File audio seperti mp3 dapat dilantunkan melalui tag<audio> < /audio>.

Berikut yaitu format lengkap untuk memainkan musik ke dalam aplikasi

web.

<html>

<head>

<title>cek suara</title>

</head>

<body>

</audio>

144 |

</body>

</html>

Ketika mencoba listing program diatas , file audio ditempatkan dalam satu

folder yang sama dengan file *.htm dan nama file audio nya disesuaikan dengan

file audio yang anda gunakan. Untuk listing program di atas menggunakan file

audio bernama "house.mp3" dan "house.ogg".

Bila listing program diatas dijalankan akan menghasilkan tampilan audio di

browser . Tekan tombol play untuk memulai menjalan audionya.

Gambar 12.1 tampilan audio saat dalam web

Atribut yang digunakan pada tag <audio> </audio> dapat juga

menggunakan atribut autoplay, loop dan controls. Detail atribut pada audio

yaitu sebagai berikut :

Atribut Sintaks Keterangan

autoplay <audio autoplay="autoplay"> memulai audio secara otomatis

pada web terbuka

controls <audio controls = "controls" > menampilkan kontrol seperti

volume, audio, dan juga tombol

untuk memulai/pause

loop <audio loop="loop"> mengulang audio kembali

setelah pemutaran awal selesai

muted <audio muted =”muted” > mematikan suara

preload <audio preload="preload"> memuat ulang audio ketika

halaman dimuat ulang

src <audio>

source

src="/usr/home/damay/house.ogg"

Value dari src yaitu file audio

tersebut berserta lokasi filenya

bisa juga mengarahkan suatu

Tombol

play

145 |

</audio> alamat url/web audio tertentu

Berikut yaitu listing program audio yang telah diberi atribut control,

autoplay serta loop . Ketika listing program tersebut dijalankan maka audio akan

berjalan secara otomatis tanpa harus ditekan tombol play .

<html>

<head>

<title>cek suara</title>

</head>

<body>

<audio controls = "controls" autoplay="autoplay"

loop="loop" >

</audio>

</body>

</html>

Bila listing program diatas dijalankan akan menghasilkan tampilan audio di

browser . Audio akan mulai diperdengarkan tanpa harus menekan tombol play.

Audio akan terus dimainkan kembali ketika audio sudah habis waktunya karena

pada atribut audio di set “loop”.

146 |

Gambar 12.2 tampilan audio saat dimainkan dalam web

3.) Plug-in audio

Plug-in merupakan sebuah program komputer kecil yang memperluas

fungsi standar dari sebuah browser. Plug-in dapat ditambahkan ke halaman

HTML menggunakan tag <object> atau tag <embed>.

Tag <embed>

Tag <embed> diartikan sebagai sebuah wadah untuk konten eksternal (non-

HTML). Adapun potongan kode untuk memainkan file *.mp3 yang

embed/tertanam di halaman web yaitu

<!DOCTYPE html>

<html>

<body>

<p>Bila anda tidak dapat mendengar suara, maka kemungkinan browser yan anda

gunakan tidak support dengan format file audionya</p>

<p>atau bisa juga speaker anda sedang off :)</p>

</body>

</html>

Setelah kode diatas dijalankan dibrowser mozilla firefox maka pada web

akan akan muncul tampilan berikut, dan file house.mp3 tidak terdengar suaranya

karena browser mozilla firefox tidak mendukung file audio *.mp3.

147 |

Gambar 12.3 tampilan audio dengan tag <embed>

Tag <object>

Format audio dapat pula didefiniskan sebagai obyek ekternal untuk konten

non HTML dengan menggunakan tag<obyek>. Berikut ini potongan kode

program untuk menampilkan file audio

<!DOCTYPE html>

<html>

<body>

data="house.ogg"></object>

<p>Bila anda tidak dapat mendengar suara, maka

kemungkinan browser yan anda gunakan tidak support

dengan format file audionya</p>

<p>atau bisa juga speaker anda sedang off :)</p>

</body>

</html>

Setelah kode diatas dijalankan dibrowser mozilla firefox maka pada web

akan terdengar suara dari file "house.ogg"

Gambar 12.4 tampilan audio dengan tag <obyek>

148 |

c. Rangkuman

Dari kegiatan belajar berikut ini dapat dibuat rangkuman materi sebagai

berikut :

o cara standar untuk menanamkan file audio pada halaman web: elemen

<audio> </audio>.

o File-file Audio yang didukung HTML5 yaitu MP3,WAV dan OGG.

o Atribut Audio dituliskan dalam elemen <audio xxxxxx= “ xxxxxx” >

o Atribut Audio yang digunakan dalam penulisan html diantaranya controls,

autoplay, loop, muted, preload dan src.

o File audio dapat juga dituliskan menggunakan tag <embed> dan

tag<object>

d. Tugas

Sebelum mengerjakan tugas, buatlah kelompok. terdiri atas 2-3 orang. Dalam

kegiatan ini masing-masing kelompok kerjakan tugas berikut :

1. Buatlah sebuah halaman web yang bisa memainkan audio secara

otomatis namun tidak terlihat media kontrol dari audio, seperti tampilan

dibawah ini

2. Buktikan kebenaran tabel ke kompabilitasan dari format file audio

terhadap jenis browser dengan cara mencoba macam-macam file audio

ke dalam browser internet explorer, chrome, firefox, safari serta opera

Browser MP3 Wav Ogg

Internet

Explorer

yes no no

Chrome yes yes yes

Firefox no yes yes

Safari yes yes no

13. Kegiatan Belajar 13 : Format Tampilan Video dan Animasi

a. Tujuan Pembelajaran

Setelah mengikuti kegiatan belajar 13 ini peserta Didik diharapkan dapat :

1) Memahami format tampilan file video

2) Memahami format tampilan animasi

3) Menyajikan tampilan file video dalam tampilan web

4) Menyajikan tampilan animasi dalam tampilan web

b. Uraian Materi

1) Format tampilan file Video

Untuk menampilkan video pada halaman web dapat ditangani secara

langsung oleh HTML5. Tag yang digunakan untuk menampilkan video yaitu

<video> </video>. Namun tidak semua format videonya dapat ditampilkan di web.

Sementara ini, hanya beberapa format video yang bisa diproses, di antaranya

yaitu WebM ,OGG , MP4. Berikut daftar ke kompabilitasan dari masing-masing

browser terhadap file video.

Browser MP4 WebM Ogg

Internet Explorer Yes no no

Chrome Yes yes yes

Firefox no

update: firefox 21

running on windows

7, windows 8,

windows vista, and

android now

supports mp4

yes yes

Safari Yes no no

Opera No yes yes

Dari tabel di atas dapat dilihat bahwa bila saat meletakan file mp4 di web

yang kita buat, akan ada beberapa orang yang tidak bisa memutar hasil embed

mp4 di web yan telah kita buat tersebut. Hal tersebut bisa jadi disebabkan

browser yang digunakan tidak support pada file berekstensi mp4.

Bila anda hendak menampilkan video pada halaman web sedangkan file

video yang anda miliki berformat seperti *.avi, maka video dengan format *.avi

152 |

tersebut harus dikonversi terlebih ke format yang didukung oleh HTML5 dengan

menggunakan program gratis atau melalui layanan situs web.

Contoh program yang dapat mengkonversi format video yaitu :

ƒ Miro Video Converter dapat diunduh secara gratis atau melalui layanan

www.microvideoconverter.com .

ƒ FormatFactory Æ di unduh gratis di http://format-factory.en.softonic.com

ƒ http://video.online-convert.com Æ layanan konversi secara online

MIME untuk format Video

MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme untuk

mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain

sebagainya agar browser tidak salah menterjemahkan konten yg diterima. Tidak

hanya pada web, email juga menggunakan MIME. Berikut yaitu tipe mime

untuk format video.

Format MIME-type

MP4 video/mp4

WebM video/webm

Ogg video/ogg

2) Menyajikan file Video pada tampilan web

File video seperti mp4 dapat dimainkan pada halaman web melalui

tag<video> < /video>. Ketika mencoba menjalankan video pada halaman web

, file video ditempatkan dalam satu folder yang sama dengan file *.htm dan nama

file audio nya disesuaikan dengan file audio yang anda gunakan.Berikut yaitu

format lengkap untuk memainkan video ke dalam aplikasi web

<html>

<head>

<title>cek video</title>

</head>

<body>

153 |

browser anda tidak mendukung format video ini.

</video>

</body>

</html>

Atribut Height dan Width dalam tag <video> digunakan untuk menentukan

tinggi dan lebar penampilan video. Atribut Src menentukan file video.

Bila listing program diatas dijalankan akan menghasilkan tampilan video di

browser chrome . Tekan tombol play untuk memulai menjalankan videonya

Gambar 13.1 video pada tampilan web menggunakan browser chrome

Bila dijalankan akan menghasilkan tampilan video di browser mozilla firefox,

video tidak akan muncul hal ini dikarenakan browser mozilla firefox tidak

mendukung format file *.mp4.

154 |

Gambar 13.2 video pada tampilan web menggunakan browser mozilla firefox

Tag <video> memiliki beberapa atribut, tidak hanya width dan height saja.

Kontrol atribut menambahkan kontrol video, seperti play, pause, dan volume.

Berikut ini yaitu atribut – atribut yang digunakan pada tag <video>.

Atribut Sintaks Deskripsi

autoplay <video autoplay="autoplay"> Memulai secara otomatis video

controls <video controls = "controls" >

Atau juga bisa ditulis

menampilkan tombol kontrol

video

height <video height="240"> mengatur tinggi frame video

width <video width="320"> mengatur lebar frame video

loop <video loop=”loop”> Memutar video secara berulang-

ulang

muted <video muted=”muted”> mematikan fungsi suara pada

video

poster <video poster="anak.gif"> memunculkan poster/gambar

pada saat video buffer atau

diunduh.

preload <video preload="preload"> memuat ulang video

src <source src="bola.mp4"

type="video/mp4">

memberikan link video

Poster

Atribute poster berfungsi untuk memunculkan poster/gambar pada saat video

buffer atau diunduh. Misalnya saat buffer video akan muncul gambar “anak.gif”

maka dalam tak <video> disisipkan atribut poster=”anak.gif” dengan catatan file

anak.gif diletakan dalam folder yang sama dengan file html nya.

155 |

Gambar 13.3 anak.gif gambar yang akan disisipkan sebagai poster

Berikut yaitu potongan kode yang menggunakan atribut poster

<html>

<head>

<title>cek video</title>

</head>

<body>

<video width="320" height="240" controls

poster="anak.gif">

browser anda tidak mendukung format video ini.

</video>

</body>

</html>

Ketika kode program di atas dijalankan maka akan menghasilka tampilan web

seperti berikut ini

156 |

Gambar 13.4 Tampilan video menggunakan atribut poster=”anak.gif”

SRC

Source atau src digunakan disini sama halnya untuk keperluan video dan

audio, hanya saja pada <source> akan menggunakan 2 sumber dimana file

tersebut memiliki isi yang sama tetapi format yang berbeda. Tujuannya disini

yaitu web browser akan memilih memutar yang mana nantinya sesuai dengan

format yang didukung oleh web browser tersebut .Dapat dilihat pada potongan

kode berikut :

<html>

<head>

<title>cek video</title>

</head>

<body>

browser anda tidak mendukung format video ini.

</video>

</body>

</html>

157 |

4.) Menyajikan animasi pada tampilan web

File animasi juga dapat ditampilkan pada halaman web dengan cara di

embed-kan. Embed digunakan untuk melampirkan file dari eksternal seperti

*.swf dan lain-lain sebagainya. Perintah yang digunakan yaitu

Untuk penulisan kode embed selengkapnya yaitu sebagai berikut ini.

<html>

<head>

<title>animasi</title>

</head>

<body>

</body>

</html>

Bila kode program diatas dijalankan maka akan muncul file animasi

“siboy.swf” pada halaman web.

158 |

Gambar 13.5 animasi siboy.swf pada halaman web

Pada halaman web selain animasi dalam bentuk *.swf dengan menggunakan

perintah < embed> dapat juga menampilkan animasi dalam bentuk *.gif. Hal ini dapat

dilihat pada potongan kode berikut dimana file rose.gif merupakan gambar bergerak

(animasi)

<html>

<head>

<title>animasi</title>

</head>

<body>

</body>

</html>

Saat kode program diatas dijalankan maka animasi akan muncul

dihalama web seperti terlihat pada gambar berikut

159 |

Gambar 13.6 animasi rose.gif pada halaman web

Untuk attribut penggunaan embed bisa ditambahkan pada tag tersebut

attribut seperti pada tabel berikut ini.

Atribut Nilai Keterangan

height pixels mendefenisikan ukuran tinggi frame

media.

src URL memberikan sumber media yang

dilampirkan

type MIME_type menspesifikasikan tipe dari MIME

width pixels mengatur lebar dari frame media pada

saat program dijalankan di browser.

c. Rangkuman

o cara standar untuk menanamkan file audio pada halaman web: elemen

<video> </video>.

o File-file video yang didukung HTML5 yaitu MP4,WebM dan OGG.

o Atribut video dituliskan dalam elemen <video xxxxxx= “ xxxxxx” >

o Atribut Audio yang digunakan dalam penulisan html diantaranya autoplay,

controls, height, width, loop, muted,poster, preload, src.

o Animasi dapat ditampilkan dalam web dengan menuliskan <embed

src="file.swf">

o File animasi berupa *.swf dan *.gif dapat ditampilkan pada halaman web.

d. Tugas

Sebelum mengerjakan tugas, buatlah kelompok. terdiri atas 2-3 orang. Dalam

kegiatan ini masing-masing kelompok kerjakan tugas berikut :

160 |

1. Buatlah sebuah halaman web yang bisa memainkan video secara

otomatis namun tidak terlihat media kontrol dari videonya

2. Buktikan kebenaran tabel ke kompabilitasan dari format file video

terhadap jenis browser dengan cara mencoba macam-macam file video

ke dalam browser internet explorer, chrome, firefox, safari serta opera

Browser MP4 WebM Ogg

Internet Explorer Yes no no

Chrome Yes yes yes

Firefox No yes yes

Safari Yes no no

Opera No yes yes

3. Kemudian secara bergantian masing-masing kelompok

mempresentasikan hasilnya didepan kelas.

e. Tes Formatif

Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir

soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya

pada lembar jawaban test formatif yang telah disediakan.

1. Bagaimanakah cara menyisipkan file video ke dalam tampilan web

2. Apa sajakah format file video yang dapat disispkan dalam tampilan

web

3. Sebutkan dan jelaskan atribut-atribut yang dimiliki pada penulisan

penyisipan file audio kedalam format web

4. Bagaimanakah cara menyisipkan file animasi ke dalam tampilan web

5. Apa sajakah format file animasi yang dapat disispkan dalam tampilan

web

6. Sebutkan dan jelaskan atribut-atribut yang dimiliki pada penulisan

penyisipan file animasi kedalam format web

f. Lembar Jawaban Tes Formatif

LJ- 01 : menyisipkan file video

.................................................................................................................................

161 |

.................................................................................................................................

LJ- 02 : format file video

.................................................................................................................................

LJ- 03 : atribut format file video

.................................................................................................................................

LJ- 04 : menyisipkan file animasi

.................................................................................................................................

162 |

.................................................................................................................................

LJ- 05 : format file animasi

.................................................................................................................................

LJ- 06 : atribut format file animasi

.................................................................................................................................

163 |

g. Lembar Kerja Peserta Didik

164 |

14. Kegiatan Belajar 14 : Format Tampilan Gambar dengan Map

a. Tujuan Pembelajaran

Setelah mengikuti kegiatan belajar 14 ini Peserta Didik diharapkan dapat :

1) Memahami format tampilan gambar dengan map

2) Menyajikan tampilan gambar dengan map

b. Uraian Materi

Format gambar yang ditambahkan dalam dokumen HTML, diantaranya

dalam format GIF, JPEG, PNG. Untuk menambahkan gambar kedalam

dokumen HTML digunakan tag <IMG> dengan dilengkapi atribut img. Atribut tag

<img> yang sering digunakan diantaranya src, align, width, height, alt dan

penulisan skrip secara umum yaitu sebagai berikut :

Gambar dengan map memungkinkan untuk memasang beberapa link dalam

satu gambar. Hal tersebut memudahkan kita dalam memanggil sebuah halaman

web dengan hanya menempatkan sekelompok gambar menjadi satu gambar.

Untuk membuat image map, harus ditambahkan atribut USEMAP pada tag

image.

Tampilan gambar dengan map merupakan suatu area pada gambar /image

yang dapat diberi hyperlink area yang biasanya disebut ”hotspots”. Koordinatnya

gambar ditentukan menggunakan bidang geometri seperti rectangle, polygon dan

lain sebagainya. Map sendiri dapat diartikan sebagai peta. Untuk membuat

image map digunakan tag <map> dan <area>.

Perintah <map> dapat didukung oleh pelbagai browser, diantaranya

internet explorer, mozilla firefox, opera, google chrome maupun safari.

Gambar 14.1 browser yan mendukung tag <map>

165 |

Tag <map> digunakan untuk mendefinisikan sebuah tampilan gambar

map pada sisi client-side. Sebuah gambar map yaitu gambar merupakan area

yang dapat diklik. Nama dari gambar yang dibutuhkan pada penulisan atribut

pada tag <map>.Hal ini dikaitkan dengan <img> usemap atribut dan menciptakan

hubungan antara gambar dan map nya. Bagian dari tag <map> berisi sejumlah

elemen <area>, yang mendefinisikan suatu lokasi/daerah saat diklik di gambar

map dapat menghubungkan ke gambar lainnya yang sudah ditentukan.

Format penulisan gambar map

Penulisan skript secara umum yaitu sebagai berikut :

</map>

Keterangan:

Nama map Æ nama dari map yang nantinya akan dipanggil oleh <image

usemap>

Area shape Æ jenis shape yang digunakan untuk menggambarkan area dari

gambar map. Adapun jenis shape map yan dapat digunakan

yaitu

Tipe Shape Keterangan

Default Semua area image

Rect Area kotak tertentu

Poly Area poligon

Circle Area lingkaran tertentu

Aturan untuk menuliskan nilai untuk menentukan koordinat pada image

yang berguna sebagai area hyperlink dapat dilihat pada daftar tabel di bawah ini

Tipe Shape Keterangan

Rect left-x, top-y, right-x, bottom-y

Circle center-x, center-y, radius

Poly x1, y1, x2, y2, ...xn, yn.

166 |

Berikut yaitu contoh penulisan kode program untuk menampilkan

gambar map, dimana tag<area> menggunakan atribut shape

(http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap).

<html>

<body>

<p>Klik gambar matahari atau salah satu planet yang

terlihat lebih detail</p>

<img src="planets.gif" width="145" height="126"

alt="Planets" usemap="#planetmap">

<area shape="rect" coords="0,0,82,126" alt="Sun"

href="sun.htm">

<area shape="circle" coords="90,58,3" alt="Mercury"

href="mercur.htm">

<area shape="circle" coords="124,58,8" alt="Venus"

href="venus.htm">

</map>

</body>

</html>

Pada kode program untuk menampilkan gambar dengan map

ƒ <img src="planets.gif"> Î menampilkan gambar “planets.gif”

ƒ <map

name="planetmap">

Î memberi nama map=planetmap untuk

kemudian planetmap tersebut dipanggil oleh

tag<img usemap=”#planetmap”> untuk

ditampilkan pada halaman web sebagai

gambar map.

ƒ <area shape="rect"

coords="0,0,82,126"

Î Penentuan area map dan koordinat area

167 |

Bila kode program diatas dijalankan maka pada browser akan muncul

gambar seperti dibawah ini. Gambar akan menampilkan gambar matahari

beserta 2 planet disekitarnya. Bila diklik misalnya planet A maka akan muncul

gambar D yang merupakan gambar detail planet A.

Gambar 14.2 tampilan gambar dengan map

Pada HTML 5 ada beberapa atribut baru dan ada pula atribut HTML4.01 yang

tidak berlaku pada HTML 5. Berikut yaitu daftar atribut yang berhubungan

dengan gambar map

Atribut Nilai Keterangan

alt Berupa teks, misal

Alt=”planet”

Aternatif teks tertentu untuk menunjukan

href

coords Titik koordinat

coords="0,0,82,126"

Berisi nilai koordinat dari shape/bentuk

area yang ditentukan

download Nama file Hyperlink dari target untuk download

Ini baru di HTML 5

href URL Target hyperlink untuk area

hreflang language_code Bahasa tertentu dari target URL

Ini baru di HTML 5

mediaNew media query Media/perangkat tertentu untuk target URL

baru di HTML 5

nohref value Tidak didukung dalam HTML5.

rel alternate baru di HTML 5

Tampilan map

pertama kali

Tampilan map

setelah A diklik

168 |

author

bookmark

help

license

nofollow

noreferrer

prefetch

tag

hubungan tertentu antara dokumen yang

sedang aktif dengan target URL

shape default

rect

circle

poly

Shape/bentuk yang digunakan sebagai

area

target _blank

_parent

_self

_top

framename

Target URl

type MIME_type Tipe MIME sebagai target URL

baru di HTML 5

c. Rangkuman

Dari kegiatan belajar ini dapat dibuat rangkuman materi sebagai berikut :

o Untuk menambahkan gambar kedalam dokumen HTML digunakan tag

<IMG>

o Untuk membuat image map, harus menambahkan atribut USEMAP pada

tag image. <IMG SRC = ”directori gambar / nama gambar”

usemap="#planetmap">

o Untuk membuat image map digunakan tag <map> dan <area>.

o Tag <map> digunakan untuk mendefinisikan sebuah tampilan gambar

map pada sisi client-side

o Bagian dari tag <map> berisi sejumlah elemen <area>

o Format penulisan gambar map

169 |

</map>

o Area shape merupakan jenis shape yang digunakan untuk

menggambarkan area dari gambar map.

o Area shape yang digunakan pada map Default, Rect, Poly, Circle

o Atribut yang digunakan pada tag <area> diantaranya alt, coords,

download, href, hreflang, media, nohref, rel, shape, target, type

d. Tugas

Sebelum mengerjakan tugas, buatlah kelompok. terdiri atas 2-3 orang. Dalam

kegiatan ini masing-masing kelompok kerjakan tugas berikut :

1. Buatlah tampilan gambar dengan map seperti contoh berikut

No. Tampilan awal gambar map Gambar detail gambar map

4 Hewan dalam kandang

ayam

Kambing

Kucing

170 |

sapi

2. Kemudian secara bergantian masing-masing kelompok

mempresentasikan hasilnya didepan kelas.

171 |

e. Tes Formatif

Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir

soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya

pada lembar jawaban test formatif yang telah disediakan.

1. Apakah yang dimaksud dengan gambar map ?

2. Tulisankan listing kode utama untuk menampilkan sebuah map

3. Sebutkan jenis shape yang dapat digunakan sebagai target area dari map

4. Sebutkan dan jelaskan sedikitnya 5 atribut yang digunakan dalam tag

<area>

5. Apa arti dari penggalan listing kode program berikut

<img src="planets.gif" width="145" height="126" alt="Planets"

usemap="#planetmap">

f. Lembar Jawaban Tes Formatif

LJ- 01 : gambar map

.................................................................................................................................

LJ- 02 : listing kode utama untuk menampilkan sebuah map

.................................................................................................................................

LJ- 03 : jenis shape pada tag <area>

172 |

.................................................................................................................................

LJ- 04 : 5 atribut dalam tag <area>

.................................................................................................................................

.......................................................................................................................

LJ- 05 : arti dari kode

.................................................................................................................................

g. Lembar Kerja Peserta Didik

173 |

174 |

15. Kegiatan Belajar 15 : Menyajikan Hyperlink

a. Tujuan Pembelajaran

Setelah mengikuti kegiatan belajar 15 ini Peserta Didik diharapkan dapat :

1) Memahami Anatomi hyperlink

2) Menyajikan hyperlink

b. Uraian Materi

1) Anatomi hyperlink

Salah satu kelebihan dokumen HTML yaitu memiliki kemampuan untuk saling

terkait dengan dokumen lain. Link (sebutan singkat dari hyperlink text) yaitu

suatu metode yang digunakan dalam HTML untuk membuat hubungan antar

halaman yang terdapat dalam satu situs web. Semua halaman web yang ada di

internet hampir bisa dipastikan memiliki link. Secara umum, fungsi link yaitu

untuk memudahkan pengunjung web dalam menulusuri/menjelajahi seluruh isi

atau informasi yang tersimpan dalam situs web bersangkutan.

Dalam keadaan default (normal), suatu link akan ditandari dengan teks berwarna

biru yang memiliki garis bawah. Meskipun demikian, kita dapat mengubah warna

dan gaya link sesuai dengan kebutuhan dan keinginan kita melalui pembuatan

kode CSS.jika kita mengarahkan kursor ke suatu link tertentu, maka penunjuk

mouse akan berubah menjadi gambar tangan dengan satu jari yang sedang

menunjuk, seperti yang ditunjukkan oleh gambar di bawah ini.

Contoh link

Konsep atau cara kerja link dalam HTML dapat diilustrasikan melalui gambar

berikut :

175 |

Halaman 1

Halaman 2 Halaman 3

Gambar 15.1. Konsep atau cara kerja link dalam HTML

Pada gambar diatas, masing-masing halaman memiliki keterkaitan satu

sama lain. Artinya, masing-masing halaman tersebut dapat dipanggil atau

ditampilkan dari halaman manapun. Hal ini bisa terjadi jika setiap halaman di atas

memiliki link.

Mengenal Tag <a> (anchor)

Untuk membuat suatu link, HTML menyediakan satu tag khusus, yaitu tag <a>,

yang berpasangan dengan </a>. Setiap teks yang diapit oleh tag ini akan

ditampilkan sebagai link. Bentuk umum pembuat link dalam dokumen HTML

yaitu sebagai berikut :

Atribut HREF dalam tag <a> berfungsi untuk menentukan dokumen atau

halaman mana yang akan dipanggil saat link tersebut di klik atau dipilih oleh

pengunjung web.

Contoh :

<a href=”about.html”>Tentang Kami</a><br />

<a href=”contact.html”>Kontak</a>

Pada contoh diatas kita membuat tiga buah link dengan teks : Home, Tentang

kami, dan kontak. Ketika pengunjung melakukan klik terhadap link pertama

176 |

(home), web browser akan menampilkan dokumen yang disimpan dalam file

index.html. Begitu juga dengan link kedua (Tentang Kami) dan ketiga (Kontak),

setiap di klik akan menjadikan web browser menampilkan dokumen yang

terdapat pada file about.html dan contact.html.

Berikut ini ada beberapa hal yang perlu diperhatikan dalam pemberian nama

dokumen web, agar link dapat berfungsi dengan baik :

x Penamaan file dengan huruf kecil semua

x Jangan ada spasi serta hindari non-karakter alphabet

c. Rangkuman

Dari kegiatan belajar diatas dapat dibuat rangkuman materi seperti berikut

ƒ Link (sebutan singkat dari hyperlink text) yaitu suatu metode yang

digunakan dalam HTML untuk membuat hubungan antar halaman yang

terdapat dalam satu situs web.

ƒ Tag untuk membuat link yaitu <a href=””>, dimana atribut href=”” berisi

URL atau alamat dari halaman yang akan dituju.

d. Tugas

9 Buatlah dokumen HTML berikut :

<html>

<head>

</head>

<body>

<h2>Latihan Membuat Link</h2>

<h3><u>Dokumen 1</u></h3>

<p>Klik link di bawah ini untuk melihat isi halaman

web pada dokumen2.html:</p>

<p><a href=”link-dokumen2.html”>Lihat Dokumen

177 |

2</a></p>

</body>

</html>

9 Simpan file dengan nama link-dokumen1.html dan tempatkan ke dalam

direktori kerja.

9 Buatlah file baru, lalu buatlah dokumen HTML berikut :

<html>

<head>

</head>

<body>

<h2>Latihan Membuat Link</h2>

<h3><u>Dokumen 2</u></h3>

<p>

Ini yaitu isi halaman yang terdapat pada dokumen 2.

Untuk kembali ke dokumen 1, silahkan klik link di

bawah ini.

</p>

<p>

<a href=”link-dokumen1.html”>Lihat Dokumen 1</a>

</p>

</body>

</html>

9 Bukalah file link-dokumen1.html melalui web browser

9 Klik link yang ada pada dokumen1. Apa yang kamu lihat ? halaman web akan

berpindah ke dokumen 2 bukan ?

9 Klik link yang ada pada dokumen 2. Kali ini, kamu akan melihat kembali isi

halaman dari dokumen1.

178 |

e. Tes Formatif

1. Apa tag untuk membuat link dokumen web?

2. Apa yang diisikan pada atribut href=”…” ?

3. Tulislah tag yang menyajikan hyperlink ke dokumen-dokumen berikut :

a. profile2.html

b. staf/guru.html

c. www.google.com

d. profile.doc

4. Untuk soal 3.a) ternyata nama file yang dituju yaitu “profile 2.html”, jadi ada

spasi sebelum 2, apa yang terjadi? Apakah dokumen tetap dapat dibuka?

5. Untuk soal 3.d) apa yang terjadi jika ada file profile.doc?

f. Lembar Jawaban Tes Formatif

LJ- 01 : Tag untuk membuat link dokumen web

.................................................................................................................................

LJ- 02 : Isi dari atribut href=

.................................................................................................................................

LJ- 03 : Penulisan tag hyperlink-nya sebagai berikut ::

.................................................................................................................................

179 |

................................................................................................................................

.................................................................................................................................

LJ- 04 : Adapun hasilnya sbb :

.................................................................................................................................

LJ- 05 : Adapun hasilnya sbb :

.................................................................................................................................

g. Lembar Kerja Peserta Didik

180 |

181 |

16. Kegiatan Belajar 16 : Jenis – Jenis Link dalam HTML

a. Tujuan Pembelajaran

Setelah mengikuti kegiatan belajar 16 ini Peserta Didik diharapkan dapat :

1) Memahami jenis-jenis link dalam HTML

2) Menyajikan jenis-jenis link dalam HTML

b. Uraian Materi

1) Jenis-jenis Link dalam HTML

Dalam HTML, link dibedakan menjadi 3 jenis, yaitu :

x Link absolut

x Link relatif

x Link ke bagian dokumen tertentu

HTML membedakan ketiga jenis link diatas berdasarkan lokasi atau alamat

dokumen yang akan diakses. Dengan demikian, perbedaannya hanya terletak

pada nilai atribut HREF-nya saja.

Link Absolut

Link Absolut yaitu link yang akan menunjuk ke halaman dari situs web lain.

Penulisan alamatnya pun harus ditulis secara lengkap. Sebagai contoh, jika tema

atau isi dari situs web yang kita buat yaitu pemrograman HTML, maka kita

dapat membuat link ke situs web lain yang memiliki tema yang sama atau

relevan. Tujuannya yaitu agar pengunjung bisa memperoleh informasi lebih

tentang tema tersebut yang ‘mungkin’ tidak/belum kita bahas pada situs web kita.

Contoh :

Pada contoh diatas, tujuan link yang dibuat akan mengarah ke situs web

http://www.w3.org/

182 |

Link Relatif

Link Relatif yaitu link yang tujuannya mengarah ke dokumen-dokumen lain

yang masih berada di dalam satu situs web yang sama (komputer yang sama).

Penulisan alamat tujuannya pun tidak perlu ditulis secara lengkap, cukup nama

dokumennya saja, dan nama direktorinya (jika ada).

Perhatikan contoh kode berikut :

<a href=”kontak.html”>Kontak</a>

<a href=”images/jeep/sahara.jpg”>Lihat Foto Jeep Wrangler

Sahara</a>

Tidak perlu ditulis lengkap seperti berikut :

<a href=http://www.situskita.com/kontak.html>Kontak</a>

Lihat Foto Jeep Wrangler Sahara</a>

Kita tidak perlu menulis alamat secara lengkap karena server web akan mencari

file kantak.html dan sahara.jpg di computer yang sama. jika halaman utama dari

situs web yang akan kita buat yaitu index. html, maka file kontak. html harus di

tempatkan di dalam direktori yang sama dengan file index.html ; sedangkan

sahara.jpg harus berada di dalam direktori images\jeep. Jika digambarkan,

struktur di rektori dan file-nya akan tampak sebagai berikut :

183 |

Link ke Bagian Dokumen tertentu

Materi ini akan dibahas pada Kegiatan Belajar berikutnya.

Menjadikan Gambar sebagai Link

Selain link berupa teks, gambar juga dapat dijadikan sebagai link. Konsepnya

sebenarnya sama saja dengan link berupa teks, perbedaannya hanya perlu

mengganti teks yang dijadikan sebagai link dengan tag <img>.

Link yang berupa teks:

Link yang berupa gambar:

Contoh :

</a>

root

images

jeep

sahara.jpg

Index.html

Kontak.html

184 |

Pada contoh di atas kita menjadikan gambar sahara1.jpg yang tersimpan di

dalam direktori images\jeep sebagai link untuk menuju ke dokumen detail-

sahara.html.

c. Rangkuman

Dari kegiatan belajar ini dapat dibuat rangkuman sebagai berikut :

ƒ HTML tag <a> mendefinisikan hyperlink.

ƒ Sebuah hyperlink (atau link) yaitu kata, kelompok kata, atau gambar yang

dapat diklik untuk menuju ke dokumen lain.

ƒ Untuk memindahkan kursor di atas link di halaman Web, panah akan

berubah menjadi tangan kecil.

ƒ Atribut yang paling penting dari elemen <a> yaitu atribut href, yang

menunjukkan tujuan link.

ƒ Jenis-jenis link dalam HTML, yaitu :

- Link absolut yaitu link yang akan menunjuk ke halaman dari situs web

lain

- Link relative yaitu link ke dokumen internal, dan penulisan alamat

tujuannya pun tidak perlu ditulis secara lengkap, cukup nama

dokumennya saja, dan nama direktorinya

- Link ke bagian dokumen tertentu atau internal link

ƒ HTML membedakan ketiga jenis link diatas berdasarkan lokasi atau alamat

dokumen yang akan diakses

d. Tugas

Link

9 Buat direktori baru dengan nama jeep di dalam direktori images

9 Copy file gambar yang akan digunakan ke dalam direktori image\jeep

Catatan: dalam contoh ini menggunakan file gambar dengan nama sahara.jpg

9 Buatlah dua dokumen HTML berikut:

index.html

<html>

<head>

185 |

</head>

<body>

<h2> Latihan Membuat link relatif</h2>

<p>Di jual Jeep Wrangler Sahara ( DIJAMIN PUAS ! ) :</p>

<p>

Tahun : 2011 <br />

Harga : Rp 975.000.000, - (NEGO) <br />

<p>

<a href= “images/jeep/sahara.jpg”> Lihat foto. mobil</a>

<br />

Untuk peminat serius, silahkan

<a href= “kontak.html”>hubungi kami</a>

</body>

</html>

kontak.html

<html>

<head>

</head>

<body>

<h2>Latihan membuat link relatif</h2>

<p>Untuk peminat serius, silahkan hubungi kami di : </p>

<strong>Auto Jeep Perkasa Showroom</strong><br />

Jl. Garuda Sakti no. 13 Bandung<br />

186 |

(022) 999-00333

</p>

<p><a href= “index.html”> kembali ke halaman utama</a></p>

</boby>

</html>

9 Tempatkan ke dalam direktori kerja

9 Jalankan file index.html melalui web brower

9 Coba buka file index.html dan bagaimana link yang terjadi?

Link Gambar

9 Copy file gambar yang akan digunakan ke dalam direktori images\jeep

Catatan : dalam contoh ini mengunakan file sahara.jpg

9 Jalankan aplikasi text editor

9 Buatlah dua file baru sebagai dokumen HTML berikut :

link –gambar .html

<html>

<head>

</head>

<body>

<h2>Latihan Membuat Link Berupa gambar</h2>

<p>Klik gambar dibawah ini untuk melihat

informasi detail:</p>

187 |

</a>

</body>

</html>

detail-sahara.html

<html>

<head>

</head>

<body>

<h2>Latihan Membuat Link Berupa Gambar</h2>

<p>

Merk: <strong>jeep</strong><br />

Seri: <strong>Wrangler</strong><br />

Tipe: <strong>Unlimited Sahara</strong><br />

Tahun: Pembuatan: 2011<br />

Transmisi: Automatic<br />

Silinder: 3.700<br />

Kilometer: 0 km (baru) <br />

Harga: Rp 975.000.00,- <br />

Keterangan tambahan: Mewah dan Gagah (Ready Stock)

<p/>

<p>

188 |

<a href=”link-gambar.html”> Kembali ke halaman utama<a/>

<p/>

</body>

</html>

9 Tempatkan kedua file tersebut ke dalam direktori kerja

9 Bukalah file link-gambar.html melalui web browser

Pada latihan di atas kita menggunakan gambar sebagai link untuk menuju atau

mengarah ke halaman web lain. Untuk mengetahui cara kerjanya, coba klik

gambar di atas!

Klik link Kembali ke halaman utama untuk mengarah ke halaman web semula

e. Tes Formatif

1. Sebutkan jenis-jenis link dalam dokumen HTML

2. Bagian apa yang penting dalam tag link?

3. Bagaimana cara menjadikan gambar sebagai link? Berikan contohnya!

4. Jelaskan beberapa tag link berikut ini :

a. <a href="info.html">Informasi Lengkap</a>

b. <a href="www.kemdikbud.go.id">Kementerian Pendidikan dan

Kebudayaan</a>

f. Lembar Jawaban Tes Formatif

LJ- 01 : Jenis-jenis link dalam dokumen HTML

.................................................................................................................................

189 |

.................................................................................................................................

LJ- 02 : Hal penting dalam tag link

.................................................................................................................................

.........................................................................

Web Programming 2

Diposting oleh kromx.blogspot.com

ARTICLE

Comments

ABOUT

ARCHIVE

FOLLOW US

TRANSLATE

VIEWER

SEARCH

Subscribe Us

Facebook

Privacy Policy for DARKWEBSITEXX.blogspot.com

Log Files

Google DoubleClick DART Cookie

Our Advertising Partners

Privacy Policies

Third Party Privacy Policies

Children's Information

Online Privacy Policy Only

Consent

Terms and Conditions

Cookies

License

Hyperlinking to our Content

iFrames

Content Liability

Reservation of Rights

Removal of links from our website

Disclaimer

Contact form

Advertisement

Web Programming 2

Diposting oleh kromx.blogspot.com

Anda mungkin menyukai postingan ini

ARTICLE

Comments

ABOUT

ARCHIVE

FOLLOW US

Social Plugin

TRANSLATE

VIEWER

SEARCH

Subscribe Us

Facebook

Privacy Policy for DARKWEBSITEXX.blogspot.com

Log Files

Google DoubleClick DART Cookie

Our Advertising Partners

Privacy Policies

Third Party Privacy Policies

Children's Information

Online Privacy Policy Only

Consent

Terms and Conditions

Cookies

License

Hyperlinking to our Content

iFrames

Content Liability

Reservation of Rights

Removal of links from our website

Disclaimer

Contact form