Tutorial HTML Part 13 : Cara Menampilkan Gambar pada HTML

09 November 2019 15:12 Fauzan (Codekop) 1,316x

HTML

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.

Contoh Pemanggilan 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 :

Contoh pemanggilan gambar terletak dalam folder :

<!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.

Contoh pemanggilan gambar terletak luar folder :

<!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.

Contoh pemanggilan gambar dengan url web :

<!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.