HTML img tag

HTML Elemen <img> adalah tag yang digunakan untuk menyisipkan gambar di halaman website. sehingga bisa di akses oleh user untuk menampilkan profil identitas pengenal, poto gallery, background dan tampilan depan. Di dalam tag elemen <img> kita bisa mengaturnya untuk mengarahkan gambar mana yang akan di tampilkan yitu di dalam atribut src, lihat contoh seperti dibawah.

1. html tag <img> pemuatan gambar

Tag img di bawah memiliki dua atribut yang di perlukan yaitu src dan alt berikut:

src - Menentukan jalur pemuatan ke gambar tujuan

alt - Menentukan teks alternatif untuk gambar, jika gambar tidak dapat di muat atau ditampilkan karena alasan lain

<!DOCTYPE html>
<html>
<style>
h2 {font-family:monospace;}
</style>
<body>
<h2>Contoh: HTML Elemen &lt;img&gt;</h2> <hr>
<h2>Contoh Gambar Pemandangan </h2> 
<img src="https://cicagak.my.id/media-posts/images-post/images/gambar-1.jpg" alt="Gambar Pemandangan" width="640" height="360">
<h2>Contoh Gambar Pemandangan yang (Tidak dapat di muat)</h2>
<img src="https://cicagak.my.id/media-posts/images-post/images/gambar-1X.jpg" alt="Gambar Pemandangan" width="640" height="360">
</body>
</html>

Cicagak Berbagi

2. html tag <img> perataan gambar dengan css

Menentukan posisi perataan gambar di bawah ini ada lima jenis berbeda coba lihat dan perhatikan di bagian properti style vertical-align: bottom, middle, top | float: left, right

<!DOCTYPE html>
<html>
<style>
body {font-family:monospace;}
</style>
<body>
<h2>Contoh: HTML Elemen &lt;img&gt; Perataan Gambar Dengan CSS</h2> <hr>
<h2>vertical-align:bottom</h2>
<p>Ini adalah gambar perataan vertikal bawah <img style="vertical-align:bottom" src="https://cicagak.my.id/media-posts/images-post/images/cg.jpg" alt="Cicagak Berbagi" width="48" height="48"> Ini adalah gambar perataan vertikal bawah</p>
<br><br>
<h2>vertical-align:middle</h2>
<p>Ini adalah gambar perataan vertikal tengah <img style="vertical-align:middle" src="https://cicagak.my.id/media-posts/images-post/images/cg.jpg" alt="Cicagak Berbagi" width="48" height="48"> Ini adalah gambar perataan vertikal tengah</p>
<br><br>
<h2>vertical-align:top</h2>
<p>Ini adalah gambar perataan vertikal atas <img style="vertical-align:top" src="https://cicagak.my.id/media-posts/images-post/images/cg.jpg" alt="Cicagak Berbagi" width="48" height="48"> Ini adalah gambar perataan vertikal atas</p>
<br><br>
<h2>float:left</h2>
<p>Ini adalah gambar melayang di sebelah kiri <img style="float:left;" src="https://cicagak.my.id/media-posts/images-post/images/cg.jpg" alt="Cicagak Berbagi" width="48" height="48"> Ini adalah gambar melayang di sebelah kiri, Ini adalah gambar melayang di sebelah kiri</p>
<br><br>
<h2>float:right</h2>
<p>Ini adalah gambar melayang di sebelah kanan <img style="float:right;" src="https://cicagak.my.id/media-posts/images-post/images/cg.jpg" alt="Cicagak Berbagi" width="48" height="48"> Ini adalah gambar melayang di sebelah kanan, Ini adalah gambar melayang di sebelah kanan</p>
</body>
</html>

Cicagak Berbagi

3. html tag <img> border dengan css

<!DOCTYPE html>
<html>
<style>
h2 {font-family:monospace;}
.img1 {border:1px solid black; box-shadow: 0 0 2px black;}
.img2 {border:10px solid white; box-shadow: 0 0 2px black;}
.img3 {border:10px outset white; box-shadow: 0 0 2px black;}
.img4 {border:2px dashed black; box-shadow: 0 0 2px black;}
.img5 {border:10px groove white; box-shadow: 0 0 2px black;}
.img6 {border:10px double black; box-shadow: 0 0 2px black;}
</style>
<body>
<h2 >Contoh: HTML Elemen &lt;img&gt; Jenis Boder Dengan CSS</h2> <hr>
<h2 >Border Solid 1px Hitam</h2 >
<img class="img1" src="https://cicagak.my.id/media-posts/images-post/images/gambar-1.jpg" alt="Gambar Pemandangan" width="320" height="178">
<h2 >Border Solid 10px Putih</h2 >
<img class="img2" src="https://cicagak.my.id/media-posts/images-post/images/gambar-1.jpg" alt="Gambar Pemandangan" width="320" height="178">
<h2 >Border Outset 10px Putih</h2 >
<img class="img3" src="https://cicagak.my.id/media-posts/images-post/images/gambar-1.jpg" alt="Gambar Pemandangan" width="320" height="178">
<h2 >Border Dashed 2px hitam Putih</h2 >
<img class="img4" src="https://cicagak.my.id/media-posts/images-post/images/gambar-1.jpg" alt="Gambar Pemandangan" width="320" height="178">
<h2 >Border Groove 10px Putih</h2 >
<img class="img5" src="https://cicagak.my.id/media-posts/images-post/images/gambar-1.jpg" alt="Gambar Pemandangan" width="320" height="178">
<h2 >Border Double 10px Hitam</h2 >
<img class="img6" src="https://cicagak.my.id/media-posts/images-post/images/gambar-1.jpg" alt="Gambar Pemandangan" width="320" height="178">
</body>
</html>

Cicagak Berbagi

4. html tag <img> border radius degan css

<!DOCTYPE html>
<html>
<style>
h2 {font-family:monospace;}
.img1 {border-radius:2px;}
.img2 {border-radius:10px;}
.img3 {border-radius:50%;}
</style>
<body>
<h2 >Contoh: HTML Elemen &lt;img&gt; Jenis Boder Dengan CSS</h2> <hr>
<h2 >Border Radius 2px </h2 >
<img class="img1" src="https://cicagak.my.id/media-posts/images-post/images/gambar-1.jpg" alt="Gambar Pemandangan" width="320" height="178">
<h2 >Border Radius 10px </h2 >
<img class="img2" src="https://cicagak.my.id/media-posts/images-post/images/gambar-1.jpg" alt="Gambar Pemandangan" width="320" height="178">
<h2 >Border Radius 50% 240x240</h2 >
<img class="img3" src="https://cicagak.my.id/media-posts/images-post/images/cg.jpg" alt="Gambar Pemandangan" width="240" height="240">
</body>
</html>

Cicagak Berbagi

5. html tag <img> mengatur kegelapan

<!DOCTYPE html>
<html>
<style>
h2 {font-family:monospace;}
.img1 {opacity:1;}
.img2 {opacity:0.7;}
.img3 {opacity:0.5;}
.img4 {opacity:0.3;}
</style>
<body>
<h2 >Contoh: HTML Elemen &lt;img&gt; Mengatur Kegelapan Dengan CSS</h2> <hr>
<h2 >Opacity 1</h2 >
<img class="img1" src="https://cicagak.my.id/media-posts/images-post/images/gambar-1.jpg" alt="Gambar Pemandangan" width="320" height="178">
<h2 >Opacity  0.7</h2 >
<img class="img2" src="https://cicagak.my.id/media-posts/images-post/images/gambar-1.jpg" alt="Gambar Pemandangan" width="320" height="178">
<h2 >Opacity 0.5</h2 >
<img class="img3" src="https://cicagak.my.id/media-posts/images-post/images/gambar-1.jpg" alt="Gambar Pemandangan" width="320" height="178">
<h2 >Opacity 0.7</h2 >
<img class="img4" src="https://cicagak.my.id/media-posts/images-post/images/gambar-1.jpg" alt="Gambar Pemandangan" width="320" height="178">
</body>
</html>

Cicagak Berbagi

6. html tag <img> hover dengan css

<!DOCTYPE html>
<html>
<style>
h2 {font-family:monospace;}
.img1{border:solid 2px transparent; margin:4px;}
	.img1:hover {border:solid 2px gold; box-shadow:0 0 2px black; cursor:pointer;}
.img2{border:solid 5px transparent; margin:1px;}
	.img2:hover {border:solid 5px white; box-shadow:0 0 2px black; cursor:pointer;}
.img3{margin:5px;}
	.img3:hover {opacity:0.6; cursor:pointer;}
</style>
<body>
<h2 >Contoh: HTML Elemen &lt;img&gt; Mengatur Kegelapan Dengan CSS</h2> <hr>
<h2 >Hover: Border Solid 2px Gold</h2 >
<img class="img1" src="https://cicagak.my.id/media-posts/images-post/images/gambar-100.jpg" alt="Gambar Pemandangan" width="160" height="90">
<img class="img1" src="https://cicagak.my.id/media-posts/images-post/images/gambar-101.jpg" alt="Gambar Pemandangan" width="160" height="90">
<img class="img1" src="https://cicagak.my.id/media-posts/images-post/images/gambar-102.jpg" alt="Gambar Pemandangan" width="160" height="90">
<h2 >Hover: Border Solid 5px White</h2 >
<img class="img2" src="https://cicagak.my.id/media-posts/images-post/images/gambar-100.jpg" alt="Gambar Pemandangan" width="160" height="90">
<img class="img2" src="https://cicagak.my.id/media-posts/images-post/images/gambar-101.jpg" alt="Gambar Pemandangan" width="160" height="90">
<img class="img2" src="https://cicagak.my.id/media-posts/images-post/images/gambar-102.jpg" alt="Gambar Pemandangan" width="160" height="90">
<h2 >Hover: Opacity 0.6</h2 >
<img class="img3" src="https://cicagak.my.id/media-posts/images-post/images/gambar-100.jpg" alt="Gambar Pemandangan" width="160" height="90">
<img class="img3" src="https://cicagak.my.id/media-posts/images-post/images/gambar-101.jpg" alt="Gambar Pemandangan" width="160" height="90">
<img class="img3" src="https://cicagak.my.id/media-posts/images-post/images/gambar-102.jpg" alt="Gambar Pemandangan" width="160" height="90">
</body>
</html>

Cicagak Berbagi