Menampilkan gambar pada HTML merupakan salah satu hal yang dasar dan wajib bagi setiap pengguna web. Jika website yang anda punya tanpa gambar akan sangat membosankan. Maka dari itu menampilkan gambar pada web menjadi masalah wajib di pelajari jika anda ingin membuat web ataupun blog.
HTML menyediakan fitur untuk menampilkan gambar berdasarkan url website ataupun direktori pada website. Fungsi untuk menampilkan gambar dengan menggunakan tag <img>, tag ini untuk menampilkan gambar dengan berbagai ekstensi bisa jpg,png,gif dan sebagainya.
Mengenal Attribut pada <img> :
src
merupakan attribut untuk menunjukan atau menghubungkan dimana tempat gambar itu berada, src ini dapat memanggil gambar yang terletak pada folder yang sama dengan file html. Jika gambar terletak diluar folder maka pemanggilannya dengan menggunakan "../".
width
untuk mengatur lebar pada gambar.
height
untuk mengatur panjang pada gambar.
1. Buat folder belajarhtml dan file gambar.html, atau bebas, dan letaknya dimana saja
2. Salin / Copy gambar ke folder belajarhtml, misal punya saya dengan gambar codekop.png
posisi gambar dan file :
3. Taruh kode ini ke gambar.html :
<!DOCTYPE html>
<html>
<head>
<title>Gambar HTML</title>
</head>
<body>
<h1> Menampilkan Gambar di HTML </h1>
<img src="codekop.png">
</body>
</html>
hasil :
Lalu, Anda dapat Menentukan atau mengatur ukuran gambar dengan menggunakan attribut width dan height.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Gambar HTML</title>
</head>
<body>
<h1> Menampilkan Gambar di HTML </h1>
<img src="codekop.png" width="300px" height="200px">
</body>
</html>
Hasil :
<!DOCTYPE html>
<html>
<head>
<title>Gambar HTML</title>
</head>
<body>
<h1> Menampilkan Gambar di HTML </h1>
<img src="img/codekop.png" width="300px" height="200px">
</body>
</html>
Keterangan : perhatikan script dengan attribut src menunjukan bahwa gambar terletak pada di dalam folder img. Dengan cara pemanggilan img/codekop.png.
<!DOCTYPE html>
<html>
<head>
<title>Gambar HTML</title>
</head>
<body>
<h1> Menampilkan Gambar di HTML </h1>
<img src="../codekop.png" width="300px" height="200px">
</body>
</html>
Keterangan : perhatikan script dengan attribut src menunjukan bahwa gambar terletak pada di luar folder file HTML. Cukup dengan cara menambahkan "../" yang artinya keluar direktori folder.
<!DOCTYPE html>
<html>
<head>
<title>Gambar HTML</title>
</head>
<body>
<h1> Menampilkan Gambar di HTML </h1>
<img src="https://cdn-images-1.medium.com/max/1096/1*28-1lYrYTQoLhi87mllgBw.png" width="300px" height="200px">
</body>
</html>
Keterangan : perhatikan script dengan attribut src menunjukan bahwa gambar terletak pada url https://cdn-images-1.medium.com/max/1096/1*28-1lYrYTQoLhi87mllgBw.png.
Oke itu saja belajar Cara Menampilkan Gambar pada HTML. Terima kasih sudah berkunjung, dan Selamat Belajar.
Artikel Di Update Pada : 09 November 2019, 15:1209-11-2018, 14:29 1245x
09-11-2018, 15:00 390x
10-11-2018, 8:49 421x
23-11-2018, 21:59 725x
26-11-2018, 9:35 390x
03-12-2018, 19:06 323x
20-08-2019, 18:12 10974x
31-01-2019, 7:16 9653x
21-06-2019, 22:24 7784x
17-04-2020, 15:54 4872x
20-05-2020, 19:32 4386x
01-09-2019, 17:15 3919x
Copyright © 2021 CODEKOP All rights reserved
Dibuat dengan di Bekasi Indonesia