Cara menampilkan gambar di css

Gambar merupakan salah satu bagian yang menarik dari sebuah tampilan website, perpaduan antara gambar dan warna yang pas membuat pengunjung betah berlama-lama untuk berkunjung dan menikmati sajian artikel yang tersedia. Gambar juga sangat membantu sebagai petunjuk informasi dari tulisan yang di publish, maka dari itu gambar merupakan bagian terpenting dalam hal ini.

Table of Contents Show

Artikel Kami Sebelumnya:
Bagaimana cara menampilkan gambar di HTML?
Bagaimana cara menghubungkan gambar dan CSS pada HTML?
Bagaimana jika gambar tidak muncul di HTML?
Bagaimana cara menampilkan gambar di website?

Di dalam dokumen HTML ada sebuah tag khusus untuk menampikan gambar, tagtersebut merupakan tag

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Menampilkan Gambar</title>
</head>
<body>
<h1>DEMO MENAMPILKAN GAMBAR MENGGUNAKAN HTML</h1>

<img src="team-work.jpg"/>

</body>
</html>

0. Tag ini tidak memiliki pasangan seperti tag-tag HTML lainnya. Maka dari itu untuk mengakhiri sebuah tag, disisipkan tanda slash (/) pada akhir tag. Bentuk umum penggunaan tag

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Menampilkan Gambar</title>
</head>
<body>
<h1>DEMO MENAMPILKAN GAMBAR MENGGUNAKAN HTML</h1>

<img src="team-work.jpg"/>

</body>
</html>

0 adalah sebagai berikut:

<img src= “foto.jpg” />

Tag

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Menampilkan Gambar</title>
</head>
<body>
<h1>DEMO MENAMPILKAN GAMBAR MENGGUNAKAN HTML</h1>

<img src="team-work.jpg"/>

</body>
</html>

2 memiliki beberapa atribut. Berikut atribut pada tag

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Menampilkan Gambar</title>
</head>
<body>
<h1>DEMO MENAMPILKAN GAMBAR MENGGUNAKAN HTML</h1>

<img src="team-work.jpg"/>

</body>
</html>

2 yang umum digunakan

Atribut src.

Atribut

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Menampilkan Gambar</title>
</head>
<body>
<h1>DEMO MENAMPILKAN GAMBAR MENGGUNAKAN HTML</h1>

<img src="team-work.jpg"/>

</body>
</html>

4berfungsi sebagai penunjuk lokasi atau sumber gambar yang akan ditampilkan. Berikut adalah contoh bagaimana cara menampilkan gambar menggunakan atribut src:

Nama File: tampil-gambar.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Menampilkan Gambar</title>
</head>
<body>
<h1>DEMO MENAMPILKAN GAMBAR MENGGUNAKAN HTML</h1>

<img src="team-work.jpg"/>

</body>
</html>

Hasil dari kodingan di atas:

Format Gambar yang Didukung oleh HTML.

Berikut jenis format gambar yang didukung oleh HTML:

FORMATEKSTENSIPNG (Portable Network Graphics).pngJPEG (Joint Photographic Expert Group image).jpg, .jpeg, .jfif, .pjpeg, .pjpGIF (Graphics Interchange Format).gifSVG (Scalable Vector Graphics).svgAPNG (Animated Portable Network Graphics).apngICO (Microsoft Icon).ico, .curWebP (Web Picture).webpEkstensi gambar di atas akan berjalan dengan baik jika dijalankan dengan browser yang terupdate.

Mengatur Letak Penyimpanan Gambar.

Pada contoh di atas kita sudah berhasil menampilkan gambar dengan format

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Menampilkan Gambar</title>
</head>
<body>
<h1>DEMO MENAMPILKAN GAMBAR MENGGUNAKAN HTML</h1>

<img src="team-work.jpg"/>

</body>
</html>

5. Perhatikan contoh

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Menampilkan Gambar</title>
</head>
<body>
<h1>DEMO MENAMPILKAN GAMBAR MENGGUNAKAN HTML</h1>

<img src="team-work.jpg"/>

</body>
</html>

6sebelumnya yaitu:

<img src=" team-work.jpg" />

Seperti yang telah kita ketahui, atribut src berfungsi sebagai penunjuk lokasi atau sumber gambar. Pada baris code di atas, team-work.jpg ditulis secara langsung di dalam atribut src, ini menunjukkan bahwa lokasi gambar disimpan satu folder dengan dokumen yang memanggil gambar tersebut (tampil-gambar.html) kira-kira gambaran penyimpanannya seperti ini:

Pada gambar di atas, file team-work.jpg dan file tampil-gambar.html disimpan dalam satu folder yang sama yaitu folder belajar HTML.

Lalu, Bagaimana Jika Letak Penyimpanannya Berada di Folder yang Berbeda?

Mari perhatikan gambar berikut!

Gambar di atas menunjukkan bahwa file team-work.jpg disimpan ke dalam folder img yang masih sama-sama terbungkus oleh folder belajar HTML. Jika kita hanya menuliskan baris code

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Menampilkan Gambar</title>
</head>
<body>
<h1>DEMO MENAMPILKAN GAMBAR MENGGUNAKAN HTML</h1>

<img src="team-work.jpg"/>

</body>
</html>

7 maka akan terjadi error, gambar tidak akan tampil di layar browser.

Artikel Kami Sebelumnya:

Mengenal Format Text Pada HTML
Cara Membuat Hyperlink Pada HTML
Membuat List (Daftar) Menggunakan HTML

Untuk menampilkannya kita cukup maju satu langkah ke folder img dengan menuliskan baris code berikut:

<img src= "img/ team-work.jpg" />

Dan Bagaimana Jika Letak Penyimpanan Gambarnya Berada Di Website Lain?

Mudah saja, kita cukup menuliskan alamat url gambarnya secara lengkap ke dalam atribut src. Caranya mudah yaitu:

Buka halaman website yang ingin kamu tampilkan gambarnya
Klik kanan pada gambar, lalu klik copy image address
Setelah itu paste (salin) url yang sudah di copy tadi ke dalam atribut src

Disini saya mencontohkan menampilkan gambar Rumah Gadang dari webite iNews:

ref: https://sumbar.inews.id/

Berikut contoh code-nya:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Menampilkan Gambar</title>
</head>
<body>
<h1>DEMO MENAMPILKAN GAMBAR DARI WEBSITE LAIN</h1>
<p>Rumah Gadang, Rumah Adat Minangkabau</p>
<img src="https://img.inews.co.id/media/822/files/inews_new/2021/07/24/rumah_gadang.jpg" alt="rumah gadang"/>

</body>
</html>

Hasilnya:

Atribut Height and Width untuk Mengatur Ukuran Gambar.

Pada dasarnya gambar yang ditampilkan ke dalam dokumen HTML tidak memiliki ukuran yang sama, maka hal ini juga harus diperhatikan untuk menjaga tampilan sebuah website.

Untuk menentukan ukuran gambar, kita memerlukan aribut height dan width pada tag <img>.

Artribut height berfungsi untuk menentukan tinggi gambar, sedangkan atribut width berfungsi untuk mengatur lebarya gambar. Perhatikan code berikut.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Menampilkan Gambar</title>
</head>
<body>
<h1>DEMO MENGATUR UKURAN GAMBAR MENGGUNAKAN HTML</h1>

<img src="team-work.jpg"/> 
<img src="team-work.jpg" height="250" width="350"/>

</body>
</html>

Hasilnya:

Perbedaan dua ukuran gambar, setelah diberikan properti width.

Atribut title untuk Menambah Judul Pada Gambar.

Kita dapat menambahkan judul pada gambar dengan menggunakan atribut

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Menampilkan Gambar</title>
</head>
<body>
<h1>DEMO MENAMPILKAN GAMBAR MENGGUNAKAN HTML</h1>

<img src="team-work.jpg"/>

</body>
</html>

8pada tag

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Menampilkan Gambar</title>
</head>
<body>
<h1>DEMO MENAMPILKAN GAMBAR MENGGUNAKAN HTML</h1>

<img src="team-work.jpg"/>

</body>
</html>

9. Adapun contoh code-nya adalah sebagai berikut!

<!DOCTYPE html>
<html>
<head>
	<title>Menampilkan Gambar</title>
</head>
<body>

<h1>DEMO MEMBERI JUDUL PADA GAMBAR</h1>

<img src="team-work.jpg" height="250" width="350" title="Team Work in Office" /> 

</body>
</html>

Hasilnya:

Judul pada gambar akan ditampilkan sebagai teks tooltip pada saat kita mendekatkan kearah gambar yang bersangkutan. Jika kita menggeser mouse keluar dari gambar, makan teks tooltip tidak akan muncul lagi.

Atribut alt untuk Menambahkan Teks Alternatif Pada Gambar.

alt berasal dari kata alternate teks yang merupakan teks alternatif. alt berfungsi sebagai teks alternatif jika gambar gagal ditampilkan pada browser. alt juga membantu memberikan informasi kepada user mengenai gambar seperti apa yang ditampilkan pada web browser.

Perhatikan contoh berikut!

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Menampilkan Gambar</title>
</head>
<body>
<h1>DEMO MEMBERI TEKS ALT PADA GAMBAR</h1>

<img src="" alt="team work in office" height="250" width="350" title="Team Work in Office" />

</body>
</html>

Pada baris code di atas sengaja tidak kita berikan nama dokumen gambar pada atribut src agar nantinya pada saat menjalankan browser gambar tersebut gagal ditampilkan. Berikut hasilnya:

Output di atas menampilkan teks alternatif ketika gambar gagal dimuat. Walaupun begitu, user masih tetap mengerti bahwa teks alternatif tersebut memberikan informasi bahwa gambar yang akan ditampilkan merupakan gambar orang yang sedang bekerjasama di dalam perusahaan. Begitulah kira-kira analisa sederhana user ketika melihat teks alternatif dari gambar yang gagal ditampilkan.

Memberikan Link Pada Gambar.

Untuk menambahkan link pada gambar, kita bisa membungkus tag <img/> ke dalam tag <a> berikut contoh nya!

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Menampilkan Gambar</title>
</head>
<body>
<h1>DEMO MEMBERIKAN LINK PADA GAMBAR</h1>

<a href="https://mandankoding.com/" target="_blank">
<img src="team-work.jpg" alt="team work in office" height="250" width="350" title="Team Work in Office" />
</a>

</body>
</html>

Hasilnya:

Jika diperhatikan gambar di atas terlihat seperti biasa saja, namun ketika gambar di atas di klik, maka akan muncul tab baru yang membawa kita ke halaman link yang telah dicantumkan pada gambar. Kita bebas menambahkan link absolute maupun link relative (yang sudah kita pelajari pada artikel cara membuat link pada HTML). silahkan klik gambar yang sudah diberi link dan perhatikan tampilan berikut.

Sekarang kita sudah berhasil menambahkan link di dalam gambar. Gambar yang di klik tadi membawa kita ke website Mandan Koding!

Bagaimana cara menampilkan gambar di HTML?

Gambar dapat kita tambakan di HTML dengan menggunakan tag <img> . Tag ini memiliki atribut wajib, yakni src . Jika kita tidak mengisi atribut src , maka gambar tidak akan ditampilkan. Alamat URL gambar pada atribut src dapat berupa URL maupun alamat path. Lalu tag <img> harus ditutup dengan menambahkan garis miring.

Bagaimana cara menghubungkan gambar dan CSS pada HTML?

Untuk menghubungkan CSS pada HTML, maka kita perlu memasukan sebuah kode pada berkas HTML. Perhatikan baik-baik kode tersebut, disitu menggunakan tag <link> yang digunakan untuk mengubungkan file CSS kedalam HTML, <link rel="stylesheet" type="text/css" href="style.css">

Bagaimana jika gambar tidak muncul di HTML?

Salah satu penyebab gambar tidak muncul di web adalah kesalahan nama folder gambar di kode HTML. Kesalahan tersebut membuat server tidak akan bisa menemukan gambar yang diminta untuk ditampilkan. Jika nama folder sudah dikoreksi, akses kembali halaman website yang gambarnya tidak muncul.

Bagaimana cara menampilkan gambar di website?

Untuk menampilkan gambar dengan HTML anda bisa menggunakan tag <img>. kemudian masukkan atribut “src=” pada tag <img>. atribut src berguna untuk menghubungkan dengan file gambar, jadi atribut src ini di gunakan untuk pemanggilan lokasi dan nama file gambar.