:: 5-HTML IMAGE (GAMBAR) ::
OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat memahami
penggunaan element-element untuk menampilkan gambar.
MATERI:
Element IMG (Image)
ELEMENT IMG
Element IMG befungsi untuk menampilkan gambar. Element ini tidak mempunyai tag penutup dan mempunyai attribute yaitu align, alt (teks alternatif jika gambar tidak tampil), border, height, width, hspace (jarak kosong posisi horizontal, vspace (jarak kosong posisi vertikal), src (lokasi dari gambar itu disimpan beserta nama file-nya).
Sintaks:
<img
align="left"|"right"|"top"|"middle"|"bottom"
alt="text"
border="pixel"
width="pixel"|"%"
height="pixel"|"%"
hspace="pixel"
vspace="pixel"
src="uri">
Gunakan
teks editor misalkan "Notepad"
untuk menyunting dan
menyimpan script latihan di bawah ini. Untuk melihat
hasilnya
bukalah file tersebut dengan menggunakan web browser atau gunakan
editor yang telah tersedia pada modul ini dengan mengklik menu Editor.
Latihan
1:
Tampilkan gambar image027.jpg dengan ukuran width dan height 160pixel dan border 8pixel :
Nama
file: latihan5_1.html
<html> |
Tugas tambahan:
Letakkan gambar tersebut ke kanan, setelah itu ke kiri.
Latihan 2:
Dari Latihan 1 ubah gambar menjadi yang terdapat dalam direktori /images dengan nama image050.jpg
Nama
file: latihan5_2.html
<html> |
Latihan 3:
Tampilkan gambar image027.jpg dengan ukuran width dan height 80pixel dan border 8pixel serta teks seperti di bawah ini:
Nama
file: latihan5_3.html
<html> |