REKAYASA PERANGKAT LUNAK (RPL)
SMK TELEKOMUNIKASI TUNAS HARAPAN
MODUL PEMROGRAMAN WEB HTML
No. Modul : Materi : Menampilkan TEACHER : FAIZI W, [Link]
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
[Link] 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/[Link]”/>
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 :