Setelah anda mengetahui struktur dari sebuah file HTML dan apa saja yang harus ditulis pertama kali. Selanjutnya saya akan mengajak anda untuk mempelajari cara memuat/menampilkan sebuah gambar dan memahami apa itu atribut HTML.
Untuk memuat sebuah gambar pada dokumen HTML, kita akan menggunakan
tag <img>.
Lalu dimana kita meletakkan gambar tersebut?
Di dalam tag <img> kah?
dapat memiliki satu atau lebih atribut, atribut ini berfungsi untuk menyimpan informasi yang berkaitan dengan tag tersebut.
Pada tag ![]()
kita akan menggunakan atribut src untuk menyimpan lokasi gambar :
![]()
Selanjutnya untuk memasukkan nilai pada atribut, kita gunakan operator sama dengan (=) diikuti dengan lokasi gambar yang diapit oleh tanda kutip.
Tag img termasuk ke dalam tag spesial dan tidak memiliki tag penutup (Disebut juga sebagai Self Closed Tag), seperti tag-tag lainnya. Ini dikarenakan tag ini tidak memiliki konten seperti :
Sebagai pengganti, kita tambahkan tanda slash (/) sebelum kurung tutup :
1. Buat file HTML baru dengan nama latihan.html
2. Masukan sebuah gambar dan simpan satu folder dengan file HTML kalian.
<img src=‚gambar.jpg‛ />
3. Ketikan kode seperti gambar dibawah ini:
<!DOCTYPE HTML>
<HTML>
<head>
<title>Judul File HTML</title>
</head>
<body>
<p><h1>ini adalah contoh pemuatan gambar HTML</h1><p>
<img src="///C:/Users/Altf4/Desktop/codein/belajar_html/avatar1.jpg" />
</body>
</HTML>
4. Untuk meihat hasil nya ketik localhost/nama_folder/latihan.html
Setiap tag img, selain memiliki atribut src untuk menyimpan lokasi gambar, kalian juga harus menyertakan atribut alt yang akan digunakan sebagai teks alternatif ketika gambar tidak berhasil dimuat atau gambar hilang.
<img src=‚logo.png‛ alt=‚Ini adalah teks alternatif‛ />
Dan atribut lainnya adalah atribut width dan height, yang berfungsi untuk menentukan lebar dan tinggi dari gambar tersebut. Memang hal ini tidak perlu dilakukan karena gambar secara otomatis akan terload dengan ukuran sebenarnya, namun hal ini sangat dianjurkan untuk mempercepat proses pemuatan gambar.
<img src=‚logo.png‛ alt=‚Ini adalah teks alternatif‛ width=362 height=123 />
Kalian tidak perlu memberi tanda kutip pada nilai lebar dan panjang. Nilai ini bisa anda dapatkan dengan mengklik kanan gambar tersebut dan pilih menu properties. Pada tab details akan anda temui ukuran gambar tersebut.
Dengan penambahan atribut alt, ketika gambar yang dimaksud hilang/tidak/gagal termuat maka akan muncul sebuah icon broken file, dan isi dari atribut alt akan ditampilkan disana.
Contoh saya menyimpan gambar di Desktop maka untuk pemanggilan nya:
<img src="///C:/Users/Altf4/Desktop/codein/belajar_html/avatar1.jpg" />
Cara mengetahui direktori nya klik kanan pada gambar tersebut kemudian propertis.
Perlu diingat jika kalian tidak menulis kan tempat penyimpanan file di kode hmtl nya,
Maka gambar yang kalian cantum kan tidak akan tampil walau pun disimpan di folder sama.
Demikian lah tutorial kali ini
-Codein-
0 komentar:
Post a Comment