HTML IMAGE (GAMBAR)
OBJEKTIF:
Setelah mempelajari materi ini diharapkan siswa dapat memahami penggunaan elementelement
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">
Buku Panduan Teori dan Praktikum – Disain Web
SMK NEGERI 1 BANYUANYAR
31
PRAKTIKUM
Gunakan teks editor misalkan "Notepad" untuk menyunting dan
menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut
dengan menggunakan web browser.
Praktek 1:
Tampilkan gambar image027.jpg dengan ukuran width dan height 160pixel dan border
8pixel :
Nama file: praktek6_1.html
<html>
<head>
<title>praktek6_1</title>
</head>
<body>
<img width="160" height="160" src="image027.jpg">
</body>
</html>
Tugas tambahan:
Letakkan gambar tersebut ke kanan, setelah itu ke kiri.
Praktek 2:
Dari Latihan 1 ubah gambar menjadi yang terdapat dalam direktori /images dengan nama
image050.jpg
Nama file: praktek6_2.html
<html>
<head>
<title>praktek6_2</title>
</head>
<body>
<img width="160" height="160" src="./images/image050.jpg">
Buku Panduan Teori dan Praktikum – Disain Web
SMK NEGERI 1 BANYUANYAR
32
</body>
</html>
Praktek 3:
Tampilkan gambar image027.jpg dengan ukuran width dan height 80pixel dan border
8pixel serta teks seperti di bawah ini:
Kehadiran Web Teknisi Jardiknas dapat memudahkan
penyebaran informasi antara Biro Perencanaan dan
Kerja Sama Luar Negeri - dan anggota Teknisi
Jardiknas. Keuntungan bila sistem jaringan informasi
ini terbentuk, komunikasi antar Biro Perencanaan dan
Kerja Sama Luar Negeri dan Provider dan anggota
Teknisi Jardiknas akan lebih cepat terjalin, informasi
dapat dengan cepat sampai dan tepat sasaran pula.
Salam Pendidikan...! Dr. Ir. Gatot Hari Priowirjanto
Nama file: praktek6_3.html
<html>
<head>
<title>Praktek6_3</title>
</head>
<body>
<img width="80" height="80" src="image027.jpg" align="left" border="8">
Kehadiran Web Teknisi Jardiknas dapat memudahkan penyebaran informasi antara Biro
Perencanaan dan Kerja Sama Luar Negeri - dan anggota Teknisi Jardiknas. Keuntungan bila
sistem jaringan informasi ini terbentuk, komunikasi antar Biro Perencanaan dan Kerja Sama
Luar Negeri dan Provider dan anggota Teknisi Jardiknas akan lebih cepat terjalin, informasi
dapat dengan cepat sampai dan tepat sasaran pula. Salam Pendidikan...! Dr. Ir. Gatot Hari
Priowirjanto
</body>
</html>
Buku Panduan Teori dan Praktikum – Disain Web
SMK NEGERI 1 BANYUANYAR
33
Tidak ada komentar:
Posting Komentar