REKAYASA PERANGKAT LUNAK (RPL)

SMK TELEKOMUNIKASI TUNAS HARAPAN

MODUL PEMROGRAMAN WEB HTML
No. Modul : Materi : Menampilkan TEACHER : FAIZI W, S.Kom
Gambar di HTML
#6 Dasar Pengenalan HTML Waktu : 1 x 45 ‘

1. Tujuan
a. Siswa dapat mengetahui tentang penulisan untuk menampilkan gambar di HTML
b. Siswa dapat mempraktekkan dalam menampilkan gambar di HTML

2. Prosedur Percobaan
a. Buat folder di Drive D:, dengan nama folder nama anda_absen. Misal :
Faizi_06
b. Buat subfolder praktek 1 di dalam folder yang sudah dibuat sebelumnya.
c. Bukalah aplikasi web editor (seperti: Notepad, Notepad ++) dan dan tuliskan
beberapa elemen struktur dokumen HTML yang ada dalam kajian teori singkat
yang dianjurkan untuk diuji coba pada contoh di bawah.
d. Simpan elemen-elemen struktur dokumen HTML tersebut dalam format : *.html
e. Jalankan masing-masing contoh elemen-elemen struktur dokumen HTML
tersebut dengan bantuan : Internet Explorer atau Internet Mozilla Firefox atau
Opera atau Chrome atau browser lain yang tersedia di dalam komputer saudara.

3. Kajian Materi
a. Menampilkan Gambar di HTML
Gambar akan membuat website kita terlihat lebih menarik. Karena otak
kita lebih mudah menyerap informasi dengan visual dibandingkan hanya teks
saja.Karena itu, gambar sangatlah penting.

Gamabar dapat kita tambakan di HTML dengan menggunakan

tag <img>. Tag ini memiliki atribut wajib, yakni src.

Jika kita tidak mengisi attribute src., maka gambar tidak akan di
tampilkan. Disitu lah fungsi gambar pada website agar lebih menarik saat orang
lain membuka laman web kita.
 Tag pembuka untuk Alamat path atau URL gambar yang
membuat gambar akan ditampilkan

<img src=”path/to/gambar.jpg”/>

Atribute untuk menentukan Tag penutup

gambar yang akan ditampilkan
Hasilnya:

Alamat URL gambar pada attribute src dapat berupa URL mauapu alamat path.
Lalu tag <img> harus ditutup dengan menambahkan garis miring
Contoh:

Hasilnya:

Pada contoh di atas,

kita menuliskan
langsung nama file dari
gambar. Ini karena kita
menaruh gambar di
dalam folder yang sama
dengan file HTML.
 Apabila file gambarnya tersimpan di folder yang berbeda,
maka kita hanya perlu menuliskan alamat path-nya.

Misalkan, kita akan menyimpan gambar di dalam

folder images.

Folder images yang ber isi File HTML yang akan

gambar images menampilkan gambar

Contohnya:
Hasilnya :

Lalu bagaimana kalau gambarnya berada di internet atau

website lain?

Nah, jika kita menggunakan gambar dari website lain..

..kita harus menuliskan alamat URL lengkap dari gambar

tersebut.

Contoh:

Klik

Klik

Klik kanan Pilih

salin alamat
gambar
 Paste alamat link
gambar yg di salinhtmln

Hasilnya:
b. Format File Gambar untuk HTML

Tidak semua format file gambar dapat ditampilkan di HTML. Karena tiap file
gambar memiliki tujuan masing-masing.

Misalnya file gambar dengan format PSD, ia adalah file gambar untuk Photoshop.
Jelas ini tidak akan bisa ditampilkan di HTML.

format yang di gunakan oleh HTML?

c. Atribute untuk Tag <img>

Ada beberapa atribut yang sering digunakan pada tag <img>:

 alt untuk teks alternatif untuk gambar;

 width untuk menentukan lebar gambar;
 height untuk menentukan tinggi gambar;
 style untuk menentukan style CSS untuk gambar.
1. Atribute alt
Atribut alt adalah atribut untuk memberikan teks alternatif pada gambar saat
gambar gagal ditampilkan. Contoh:

Hasilnya:

Pada contoh tersebut, kita sengaja mengosongkan nilai atribut src. Akibatnya
gambar gagal ditampilkan dan yang akan digampilkan adalah teks alternatif.

Apakah kita wajib menggunakan atribut alt?

Sebenarnya tidak wajib, tapi sebaiknya tetap menggunakan atribut ini. Karena,
nantinya teks alternatif akan dibaca oleh screen reader.

Screen reader adalah aplikasi pembaca yang digunakan oleh tuna netra agar
bisa mengetahui informasi yang ada di komputer.
 Selain itu, atribut alt juga sering digunakan untuk meletakan kata kunci untuk
SEO.

2. Atribute width dan height

Atribut width dan height adalah atribut yang digunakan untuk menentukan
lebar dan tinggi dari gambar.

Contoh:

Hasilnya :
 Satuan yang digunakan untuk nilai width dan height adalah piksel (px). Jika
kita memberikan nilai 200, artinya.. kita memberikan nilai 200px.

Atribut width dan height juga tidak wajib. Tapi baiknya ditambahkan agar
ukuran gambar konsisten.

3. Atribute Style

Atribut style merupakan atribut untuk menambahkan style CSS pada sebuah
elemen. Atribut ini sering digunakan pada gambar untuk memberikan style
atau efek tertentu.
Contoh:

Hasilnya
 Gambar pertama kita berikan style garis (border) dengan ukuran 3px, jenis solid,
dan warnanya adalah merah.

Lalu gambar kedua, kita berikan style border-radius untuk menciptkan

lengkungan pada pojok gambar.

Pada gambar ketiga, kita berikan nilai 100% pada border-radius yang akan
menciptkan lingkaran.

d. Membuat Gambar Background

Sebenarnya ini sudah masuk ke dalam pembahasan tentang CSS, tapi tidak apa-apa
kita bahas di sini.

Agar gambar bisa ditampilkan sebagai background, maka kita harus menggunakan
CSS dengan atribut background-image lalu diisi dengan URL dari gambar.

Contoh:

Hasilnya:
d. Membuat Link dengan gambar

Cara membuat link dengan gambar adalah dengan menggabungkan tag <a> dan
tag <img>. Tag <a> harus mengapit tag <img>.

Contohnya :

Hasilnya :
TAG Tambahan untuk gambar di HTML

1. Tag <figura>

Tag figure berfungsi untuk membungkus tag <img> atau gambar dengan teks caption. Teks
caption adalah teks yang menjelaskan tentang gambar. Teks caption bisa dibuat dengan
tag <figcaption>.

Contohnya:

Hasilnya :