Setelah lama tidak membuat postingan diblog ini, kali ini kita belajar menambahkan media file yang didukung oleh HTML kedalam browser. Media yang akan ditambahkan pada postingan kali ini adalah gambar.
Untuk gambar, gunakan tag <img> yang dimana tag berisi 2 atribut, yakni src (path untuk sumber gambarnya) dan alt (teks alternatif dalam image, akan terlihat jika gambar dalam src tidak dapat ditampilkan dengan baik). Misalnya akan menampilkan gambar dibawah ini kedalam browser.
Sumber : Pixiv
Maka script yang digunakan adalah sebagai berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Penerapan Media File dalam HTML</title>
</head>
<body>
<img src="Nauimusuka (Bookshelf).jpg" alt="Rak Buku">
</body>
</html>
Hasil di browser :
.png)
Hasil di atas dengan zoom 33% dikarenakan resolusi gambar terlalu besar untuk tampilan website (resolusi asli 2200x1650 px). Perlu diingat bahwa tag <img> termasuk kedalam self-closing tag, jadi tidak perlu menambahkan tag penutup. Bagaimana cara memperkecilnya ? Tinggal tambahkan atribut width dan height dalam tag <img>, misalnya dengan lebar sebesar 500px dan tinggi sebesar 300px dengan script sebagai berikut.
<img src="Nauimusuka (Bookshelf).jpg" alt="Rak Buku" width="500px" height="300px">
Hasil di browser (tanpa memperkecil zoom di browser):
.png)
Anda juga bisa menggunakan satuan persentase dalam menentukan width dan height serta menggunakan contoh script diatas kedalam bentuk CSS sebagai berikut.
<img src="Nauimusuka (Bookshelf).jpg" alt="Rak Buku" style="width: 500px; height: 300px;">
Lantas apa bedanya dengan atribut bawaan HTML ?. Bedanya nilai atribut dalam tag <img> HTML dapat ditulis ulang oleh nilai lain yang sudah didefinisikan sebelumnya sedangkan dalam style CSS tidak. Misalnya menggunakan kedua contoh script sebelumnya, lalu tambahkan width dan height dalam tag head (Internal CSS) sebagai berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Penerapan Media File dalam HTML</title>
<style>
img{
width: 40%;
height: 40%;
}
</style>
</head>
<body>
<img src="Nauimusuka (Bookshelf).jpg" alt="Rak Buku" style="width: 500px; height: 300px;">
<br>
<img src="Nauimusuka (Bookshelf).jpg" alt="Rak Buku" width="500px"; height="300px">
</body>
</html>
Hasil di browser :
.png)
Dapat dilihat bahwa gambar pertama tidak mengalami perubahan ukuran sedangkan gambar kedua mengalami perubahan akibat nilai width dan heightnya telah diatur duluan dalam tag <style> dalam tag <head>
Terakhir, apa format file yang mendukung di semua web browser ? Contoh diatas menggunakan format .jpg. Selain itu dapat menggunakan format file lain, seperti .png, .apng, .gif, dan .ico.
Sekian tutorial kali ini, untuk bagian berikutnya akan dilanjutkan nanti. Terimakasih.
0 Komentar