HTML adalah bahasa markup yang digunakan untuk membuat halaman web. Salah satu elemen penting dalam HTML adalah tag <img> yang digunakan untuk menampilkan gambar di halaman web. Tag <img> memiliki beberapa atribut yang memungkinkan pengguna untuk mengontrol tampilan dan perilaku gambar.


Dalam artikel ini, kita akan membahas secara rinci tag <img> dan atributnya yang tersedia di HTML.

  1. Pengertian Tag <img>

    2. Tag <img> adalah elemen HTML yang digunakan untuk menampilkan gambar di halaman web. Tag ini berfungsi sebagai tempat gambar yang ditampilkan pada halaman. Dalam tag <img>, kita bisa menentukan sumber gambar, ukuran gambar, alt text, dan atribut lainnya.


    Contoh penggunaan tag <img> adalah sebagai berikut:


    
  <img src="gambar.jpg" alt="Ini adalah gambar">
    Dalam contoh di atas, tag <img> digunakan untuk menampilkan gambar dengan nama "gambar.jpg". Alt text "Ini adalah gambar" akan ditampilkan jika gambar tidak dapat dimuat.
  2. Atribut Tag <img>
    3. Tag <img> memiliki beberapa atribut yang memungkinkan kita untuk mengontrol tampilan dan perilaku gambar. Berikut adalah beberapa atribut yang tersedia pada tag <img>:
    • Src: Atribut ini digunakan untuk menentukan sumber gambar.
      • Contoh penggunaannya adalah sebagai berikut:
      
  <img src="gambar.jpg">
    • Alt: Atribut ini digunakan untuk memberikan deskripsi teks pada gambar. Deskripsi ini akan ditampilkan jika gambar tidak dapat dimuat atau untuk membantu pengguna yang tidak dapat melihat gambar.
      • Contoh penggunaannya adalah sebagai berikut:
      
    <img src="gambar.jpg" alt="Ini adalah gambar">
    • Width: Atribut ini digunakan untuk menentukan lebar gambar dalam piksel.
      • Contoh penggunaannya adalah sebagai berikut:
      
    <img src="gambar.jpg" width="500">
    • Height: Atribut ini digunakan untuk menentukan tinggi gambar dalam piksel.
      • Contoh penggunaannya adalah sebagai berikut:
      
    <img src="gambar.jpg" height="500">
    • Title: Atribut ini digunakan untuk menambahkan judul pada gambar. Judul ini akan ditampilkan ketika pengguna mengarahkan kursor ke gambar.
      • Contoh penggunaannya adalah sebagai berikut:
      
    <img src="gambar.jpg" title="Ini adalah judul">
    • Class: Atribut ini digunakan untuk menambahkan kelas CSS pada gambar.
      • Contoh penggunaannya adalah sebagai berikut:
      
    <img src="gambar.jpg" class="gambar">
    • Style: Atribut ini digunakan untuk menambahkan gaya CSS langsung pada gambar.
      • Contoh penggunaannya adalah sebagai berikut:
      
    <img src="gambar.jpg" style="border: 1px solid black;">
  3. Kesimpulan

    4. Tag <img> adalah elemen HTML yang penting dalam menampilkan gambar di halaman web. Dalam tag <img>, kita bisa menentukan sumber gambar, ukuran gambar, alt text, dan atribut lainnya. Dengan mengenal atribut-atribut yang tersedia pada tag <img>, kita bisa mengontrol tampilan dan perilaku gambar dengan lebih detail dan membuatnya lebih menarik untuk pembaca.

Tag <img> sangat penting dalam membuat tampilan visual halaman web yang menarik dan informatif. Dalam artikel ini, kita telah membahas berbagai atribut yang tersedia pada tag <img> dan bagaimana penggunaannya.


Pertama-tama, atribut "src" digunakan untuk menentukan sumber gambar. Kita bisa mengambil gambar dari berbagai sumber seperti file lokal, URL, atau bahkan data URI. Dalam memilih sumber gambar, pastikan untuk memilih gambar dengan kualitas tinggi dan sesuai dengan konten halaman web.


Selanjutnya, atribut "alt" sangat penting untuk memberikan deskripsi teks pada gambar. Deskripsi ini akan membantu pengguna yang tidak dapat melihat gambar untuk memahami konten gambar. Selain itu, deskripsi juga akan ditampilkan jika gambar tidak dapat dimuat. Pastikan deskripsi yang diberikan relevan dengan konten gambar.


Atribut "width" dan "height" digunakan untuk menentukan ukuran gambar dalam piksel. Dalam menentukan ukuran gambar, pastikan untuk mempertimbangkan ukuran dan resolusi asli gambar. Jika ukuran gambar terlalu besar, halaman web akan memuat lebih lambat, sehingga dapat mempengaruhi pengalaman pengguna. Sebaiknya gunakan ukuran yang sesuai dengan kebutuhan konten.


Atribut "title" digunakan untuk menambahkan judul pada gambar. Judul ini akan ditampilkan ketika pengguna mengarahkan kursor ke gambar. Pastikan judul yang diberikan informatif dan membantu pengguna memahami konten gambar.


Atribut "class" dan "style" digunakan untuk menambahkan gaya CSS pada gambar. Dalam menambahkan gaya CSS, pastikan untuk mempertimbangkan kesesuaian dengan tampilan halaman web secara keseluruhan. Gunakan kelas dan gaya yang konsisten dengan gaya halaman web.


Dalam penggunaan tag <img>, pastikan untuk memperhatikan ukuran file gambar dan kualitas gambar untuk mempercepat waktu muat halaman web. Selain itu, pastikan deskripsi dan judul yang diberikan informatif dan membantu pengguna memahami konten gambar. Dengan memahami atribut-atribut yang tersedia pada tag <img>, kita bisa membuat tampilan halaman web yang lebih menarik dan informatif.