Belajar Dasar HTML Part 10 - Cara Menampilkan Gambar Pada HTML (tag image)

Diposkan pada 9 Februari 20179 Februari 2017 oleh Febri Hidayan

Belajar Dasar HTML Part 10 - Cara Menampilkan Gambar Pada HTML (tag image)

Seorang programmer akan menggunakan gambar untuk membuat aplikasi web dan juga websitenya agar tampak hidup. Gambar merupakan bagian yang sangat penting untuk sebuah halaman web. Pentingnya kalau tidak ada gambar disuatu halaman web maka halaman web itu sendiri terlihat gersang dan tidak menarik pengunjung sama sekali. Apa lagi website-website yang membahas tentang gaya hidup, tutorial, dan website ini juga harus menyediakaan gambar hasil tutorial agar pengunjung senang dan ngerti hasilnya. Untuk lebih mengenal cara menggunakan tag <image> simak pembelajaran kita, sebagai berikut:

Pengertian Tag <img>

Tag <img> adalah salah satu yang kita gunakan untuk menampilkan gambar dengan attribut default-Nya yaitu scr. Semua bentuk format gambar bisa ditampilkan dengan tag image mulai dari format jpg, jpeg, png, gif, tiff, dan bmp. Agar lebih paham bisa lihat sintaks tag image dibawah ini:

Kode Tag <img>

<img src="alamat-gambar-yang-akan-ditampilkan">

Tag image juga memiliki atribut-atribut selain atribut scr, yaitu border, alt, width, height, style, align, selector class dan id. Hanya saja kita tidak mempelajari atribut style, class, dan id kenapa atribut ini digunakan untuk pembelajaran kita selanjutnya di CSS. Agar lebih paham untuk memahami atribut tag image silakan simak dengan berturutan, sebagai berikut:

Menggunakan Atribut Scr Pada Tag <img>

Atribut scr merupakan atribut default yang harus digunakan pada tag <img>. Fungsinya untuk memanggil dimana lokasi gambar berada. Kita bisa memunculkan gambar dari komputer kita dengan syarat masih dalam satu folder yang sama dengan file tag <img> ini. Bisa juga kita langsung menjalankan dari server, dengan menggunakan domain kita sendiri misalnya https://www.sekolahprogram.com/febrihidayan/html/favicon.png maka akan muncul gambarnya dari server Sekolah Program langsung. Untuk itu kita akan menggunakan cara keduanya agar lebih paham. Contoh penggunaan atribut scr, sebagi berikut:

Kode Atribut src

<!DOCTYPE html>
<html>
<head>
	<title>Sekolah Program</title>
</head>
<body>
<h2>Belajar Menggunakan Tag Image - Sekolah Program</h2>
<p>Lokasi pada komputer</p>
<img src="favicon.png">
<p>Lokasi pada server</p>
<img src="https://www.sekolahprogram.com/febrihidayan/html/favicon.png">
</body>
</html>

Maka hasilnya saat di web browser

Pemberitahuan: Apa bila lokasi pada server tidak berjalan kemungkinan file tersebut sudah saya hapus. Anda bisa menggunakan server lain atau ingin memunculkan foto facebook Anda yang tertera pada alamat Address (url).

Menggunakan Atribut Border Pada Tag <img>

Border atau sesuai artinya adalah perbatasan, dimana fungsi forder untuk membuat garis pada pinggiran gambar kita. Border memiliki value atau nilai yang berupa angka bisa kita buat angka satu atau lima, dan juga bisa angka lainnya sesuai keinginan kita. cara penulisan border yaitu border=”1”. Contoh Penggunaan Atribut Border, sebagai berikut:

Kode Atribut Border

<!DOCTYPE html>
<html>
<head>
	<title>Sekolah Program</title>
</head>
<body>
<h2>Belajar Menggunakan Tag Image - Sekolah Program</h2>
<p>Cara Menggunakan Border dengan nilai 1 hingga 5</p>
<img src="favicon.png" border="1">
<img src="favicon.png" border="2">
<img src="favicon.png" border="3">
<img src="favicon.png" border="4">
<img src="favicon.png" border="5">
</body>
</html>

Maka hasilnya saat di web browser

Menggunakan Atribut Alt Pada Tag <img>

Atribut alt singkatan dari alternative description, Atribut ini memiliki peran penting bagi penggunaan tag <img> dimana fungsinya untuk memberikan nama pada gambar yang kita telah tetapkan. Apabila suatu gambar tidak tampil maka atribut alt yang berguna untuk memunculkan nama gambar yang tidak tampil tersebut. Kegagalan tersebut biasanya terjadi karena file pada server tidak tersedia lagi atau masalah koneksi jaringan lambat yang tidak bisa mengunduh gambar tersebut. Ada juga beberapa alasan karena web browser yang kita gunakan telah di setting agar tidak bisa menampilkan gambar. Lihat contoh penggunaan atribut alt, sebagai berikut:

Kode Atribut Alt

<!DOCTYPE html>
<html>
<head>
	<title>Sekolah Program</title>
</head>
<body>
<h2>Belajar Menggunakan Tag Image - Sekolah Program</h2>
<h4>Cara Menggunakan alt</h4>
<p>berhasil menampilkan gambar</p>
<img src="favicon.png" alt="favicon">
<p>tidak berhasil menampilkan gambar</p>
<img src="html/favicon.png" alt="favicon">
</body>
</html>

Maka hasilnya saat di web browser

Catatan: Bisa kita lihat pada gambar diatas, atribut alt sangat pentung untuk memberikan judul pada gambar. Untuk alamat link pada src=”html/favicon.png” memang sengaja saya tambahakan html/ agar gambar tidak muncul.

Menggunakan Atribut Width dan Height Pada Tag <img>

Untuk atribut widht dan height, mungkin dari artinya kita sudah tahu widht (lebar) dan height (tinggi). Dimana atribut ini kita bisa menyesuaikan besar gambar yang ingin kita tampilkan. Akan tetapi apa bila kualitas gambar tidak memadai maka saat kita buat tampilannya besar maka akan terlihat buram. Untuk itu kita bisa menyesuaikan gambar agar terlihat berkualitas. Lihat contoh penggunaannya dari atribut ini, sebagai berikut:

Kode Atribut Width dan Height

<!DOCTYPE html>
<html>
<head>
	<title>Sekolah Program</title>
</head>
<body>
<h2>Belajar Menggunakan Tag Image - Sekolah Program</h2>
<h4>Cara Menggunakan atribut width dan height</h4>
<p>gambar akan tampil berkualitas <img src="favicon.png" width="30px" height="30px"></p>
<p>gambar akan tampil secara buram <img src="favicon.png" width="70px" height="70px"></p>
</body>
</html>

Maka hasilnya saat di web browser

Catatan: Kita bisa menggunakan px (pixel) dan % (persen). Berbedaan keduanya kalau yaitu terletak pada penggunaannya dimana pixel ukurannya permanen dan persen ukurannya sesuai besar tampilan browser yang kita gunakan misalnya kita menggunakan mode seluler maka tampilannya akan disesuaikan. Anda dapat mencobanya sendiri agar lebih paham dan jelas cara penggunaannya.

Penggunaan Atribut Align Pada Tag <img>

Align adalah cara kita untuk menentukan posisi gambar. Baik di kanan, dan kiri. Align juga memiliki nilai yaitu right dan left. Lihat contoh penggunaannya, sebagai berikut:

Kode Atribut Align

<!DOCTYPE html>
<html>
<head>
	<title>Sekolah Program</title>
</head>
<body>
<h2>Belajar Menggunakan Tag Image - Sekolah Program</h2>
<h4>Cara Menggunakan Atribut Align</h4>
<p> Posisi Kiri <img src="favicon.png" align="left"></p>
<hr>
<p><img src="favicon.png" align="right">Posisi Kanan</p>
</body>
</html>

Maka hasilnya saat di web browser

Pengankuan: Bagaimana pembelajaran kita kali ini sangat puas atau tidak?

Terkait

error: Dilarang Copy !!