sovyan.comsovyan.com
html Komputer Pemrograman Web
Beranda / Pemrograman / Web / Gambar HTML | Tutorial HTML 17

Gambar HTML | Tutorial HTML 17

Oleh sopyan • November 24, 2023 • 3 Dilihat • 6 Menit membaca •
Assalamualaikum Sob, di artikel kali ini kami akan membagikan tutorial
mengenai HTML gambar, Di dalam mendesain web, gambar dapat meningkatkan
tampilan dan desain halaman web menjadi lebih cantik.

Contoh Program 1 : Menampilkan Gambar HTML

<!DOCTYPE html>
<html>
<body>
  <h2>Gambar Bunga</h2>

  <img src=“bunga.jpeg” alt=“Mawar” width=“300” height=“200”>
</body>
</html>

Hasil Program 1

Penjelasan Program 1

  • Di baris 4 Kita membuat judul.
  • Di baris 5 kita menampilkan gambar bunga dengan ukuran lebar 300 piksel dan
    lebar 200 piksel.

Sintaks Gambar HTML

Untuk menyematkan gambar pada halaman web menggunakan tag HTML <img>.
Dengan menggunakan tag <img>, kita membuat ruang penahan untuk gambar
yang direferensikan, secara teknis gambar tidak dimasukkan ke dalam halaman
web, gambar hanya ditautkan (di link) ke halaman web.
Tag <img> merupakan tag kosong yang tidak memiliki tag akhir, tag
<img> hanya berisi atribut saja.
Untuk menggunakan tag <img> terdapat 2 atribut wajib yang harus selalu
kita gunakan :
  • src – digunakan untuk merujuk tempat gambar disimpan.
  • alt – digunakan untuk membuat teks alternatif dari gambar.
Sintaks tag <img>


<img src=“url” alt=“teks alternatif”>

Atribut src

Untuk menunjuk tempat (url) gambar yang akan ditampilkan, menggunakan atribut
src.
Catatan : Kita akan mendapatkan ikon tautan rusak dan teks alt jika browser tidak
dapat menemukan gambar. Oleh karena kita harus memastikan gambar berada di
tempat yang sesuai dengan alamat yang telah kita tunjuk.

Atribut alt

Untuk menampilkan gambar, kita juga wajib menggunakan atribut alt untuk
menampilkan teks alternatif. Jadi ketika gambar gagal dimuat (karena koneksi
lambat, error pada sintaks kode, karena pengguna menggunakan mode tanpa gambar
atau menggunakan mode pembaca layar). Kita bisa tahu gambar yang rusak itu
menampilkan tentang apa.

Contoh Program 2 : Atribut alt

<!DOCTYPE html>
<html>
<body>
  <h2>Gambar Bunga</h2>

  <img src=“kembang.jpeg” alt=“kembang” width=“300” height=“200”>
</body>
</html>

Hasil Program 2

Penjelasan Program 2

  • Di baris 4 kita membuat sebuah judul.
  • Di baris 5 kita menampilkan sebuah gambar dengan lebar 300 piksel dam tinggi
    200 piksel.

Catatan : Pembaca layar (screen reader) adalah program perangkat lunak untuk
membaca kode HTML, software ini dapat membuat pengguna mendengarkan isi
konten. Program ini sangat bermanfaat untuk orang yang memiliki gangguan
penglihatan.

Ukuran Gambar – Lebar dan Tinggi

Kita bisa menggunakan atribut style ataupun dengan atribut width dan height,
untuk menentukan ukuran lebar dan tinggi gambar.
Atribut width dan height selalu menentukan lebar dan tinggi gambar dalam
satuan piksel.

Contoh Program 3 : Ukuran Gambar.

<!DOCTYPE html>
<html>
<body>

  <h2>Gambar dengan atribut style</h2>

  <img src=“bunga.jpeg” alt=“bunga”
style=“width:100px;height:200px;”>
  

  <h2>Gambar dengan atribut width dan height</h2>

  <img src=“bunga.jpeg” alt=“bunga” width=“300” height=“200”>
</body>
</html>
Baca juga: Panduan Lengkap HTML Form Attributes yang Wajib Lo Tahu! (Tutorial HTML Part 54)

Hasil Program 3

Penjelasan Program 3

  • Di baris 4 kita membuat judul.
  • Di baris 5 kita menampilkan gambar dengan lebar 100 piksel dan tinggi 200
    piksel.
  • Di baris 7 kita membuat judul.
  • Di baris 8 kita menampilkan gambar dengan lebar 300 piksel dan tinggi 200
    piksel.

Catatan : Jika kita tidak menentukan ukuran lebar dan tinggi gambar,
kemungkinan halaman web akan berkedip ketika gambar dimuat.

Lebih Baik Menggunakan width dan height atau style ?

Atribut width, height ataupun style, semuanya dapat digunakan di HTML.
Namun penggunaan atribut style lebih direkomendasikan karena dapat mencegah
style sheet mengubah ukuran gambar.

Contoh Program 4 : Ujicoba Atribut style

<!DOCTYPE html>
<html>

<head>
  <style>
  img{
    width:500%;
  }
  </style>
</head>

<body>

  <h2>Gambar dengan atribut style</h2>

  <img src=“bunga.jpeg” alt=“bunga”
style=“width:100px;height:200px;”>
  

  <h2>Gambar dengan atribut width dan height</h2>

  <img src=“bunga.jpeg” alt=“bunga” width=“300” height=“200”>
</body>
</html>

Hasil Pogram 4

Penjelasan Program 4

  • Di baris 6 sampai baris 8 kita membuat semua elemen <img> berukuran
    100 persen.
  • Di baris 13 kita membuat judul.
  • Di baris 14 kita menampilkan gambar dengan lebar 100 piksel dan tinggi 200
    piksel.
  • Di baris 16 kita membuat judul.
  • Di baris 17 kita menampilkan gambar dengan lebar 300 piksel dan tinggi 200
    piksel.

Menampilkan Gambar Dari Folder Lain

Kita harus menyertakan nama folder pada atribut src jika kita memiliki gambar
pada sub-folder.

Contoh Program 5 : Gambar Di Folder Lain

<!DOCTYPE html>
<html>
<body>
  

  <img src=“gambar/senyum.png” alt=“wajah senyum”
style=“width:200px;height:200px;”>
  
</body>
</html>

Hasil Program 5

Penjelasan Program 5

  • Di baris 5 kita menampilkan gambar dengan lebar 200 piksel dan tinggi 200
    piksel.

Gambar Dari Server/Situs Lain

Kita juga bisa menampilkan gambar dari server atau situs lain, untuk
melakukannya kita harus menggunakan url absolut (alamat lengkap) di atribut
src.

Contoh Program 5 : Menampilkan Gambar Dari Server Lain

<!DOCTYPE html>
<html>
<body>
  

  <img
src=“https://upload.wikimedia.org/wikipedia/id/a/a9/TikTok_logo.svg”
alt=“logo tiktok” style=”width:200px;height:200px;”>
  
</body>
</html>

Hasil Program 5

Penjelasan Program 5

  • Di baris 5 kita menampilkan gambar yang berada di situs lain dengan ukuran
    lebar 200 piksel dan tinggi 200 piksel.

Catatan : Gambar eksternal mungkin dilindungi hak cipta jadi kita harus
mendapatkan izin untuk menggunakannya dan juga sewaktu-waktu gambar tersebut
bisa dihapus oleh pemiliknya.

Gambar Animasi

Kita juga bisa menampilkan gambar animasi GIF, caranya kita hanya harus
memiliki gambar dengan ekstensi .gif.

Contoh Program 6 : Animasi GIF

<!DOCTYPE html>
<html>
<body>
  

  <img src=“persib.gif” alt=“animasi persib”
style=“width:200px;height:200px;”>
  
</body>
</html>

Hasil Program 6

Penjelasan Program 6

  • Di baris 5 kita menampilkan animasi GIF dengan ukuran lebar 200 piksel dan
    tinggi 200 piksel.

Gambar sebagai link

Kita bisa membuat gambar menjadi sebuah link, caranya dengan menempatkan tag
<img> di dalam tag <a>

Contoh Program 7 : Gambar Sebagai Link

<!DOCTYPE html>
<html>
<body>

  <a href=“https://www.filesop.com”>

  <img src=“senyum.png” alt=“wajah senyum”
style=“width:200px;height:200px;”>
  </a>
</body>
</html>

Hasil Program 7

Penjelasan Program 7

  • Di Baris 4 Sampai baris 6 kita membuat link yang menuju ke sebuah situs, disini
    kita membuat gambar sebagai linknya dengan ukuran lebar 200 piksel dan
    tinggi 200 piksel.

Gambar Mengambang

Kita bisa menampilkan gambar mengambang di bagian kiri atau kanan teks dengan
menggunakan properti CSS float.

Contoh Program 8 : Gambar Mengambang

<!DOCTYPE html>
<html>
<body>
  
  <p>

  <img src=“senyum.png” alt=“wajah senyum”
style=“float:right;width:50px;height:50px;”>
    Gambar mengambang di kanan
    Gambar mengambang di kanan
    Gambar mengambang di kanan
  </p>
  

  <p><img src=“senyum.png” alt=“wajah senyum”
style=“float:left;width:50px;height:50px;”>
    Gambar mengambang di kiri
    Gambar mengambang di kiri
    Gambar mengambang di kiri
  </p>
  
</body>
</html>
Baca juga: Panduan Lengkap HTML Forms: Bikin Formulir Keren di Website! (Tutorial HTML Part 53)

Hasil Program 8

Penjelasan Program 8

  • Di Baris 5 sampai baris 10 kita membuat sebuah paragraf yang di dalamnya
    terdapat gambar mengambang di kanan dengan lebar 50 piksel dan tinggi 50
    piksel.
  • Di baris 12 sampai baris 16 kita membuat paragraf yang terdapat gambar
    mengambang di kiri dengan lebar 50 piksel dan tinggi 50 piksel.

Format Gambar Yang Umum

Di bawah ini merupakan jenis file gambar yang paling umum yang didukung oleh
semua browser :
Singkatan Format File Ekstensi File
APNG Animation Portable Network Graphics .apng
GIF Graphic Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group Image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg

Rangkuman Artikel HTML Gambar

  • Elemen HTML <img> digunakan untuk menampilkan gambar.
  • Atribut HTML src digunakan untuk menunjuk URL dari gambar.
  • Atribut HTML alt digunakan menampilkan teks alternatif jika gambar tidak
    dapat ditampilkan.
  • Atribut HTML width dan height atau Properti CSS width dan height
    digunakan untuk menentukan ukuran lebar dan tinggi dari gambar.
  • Properti CSS float digunakan untuk membuat gambar melayang ke kanan atau ke
    kiri.

Catatan : Kita harus menggunakan gambar dengan hati-hati karena halaman web
yang memiliki gambar dengan ukuran besar kinerjanya akan lambat dan
membutuhkan waktu.

Tag Gambar HTML

Tag Deskripsi
<img> Digunakan untuk menampilkan gambar
<map> Digunakan untuk memetakan gambar
<area> Digunakan untuk menentukan area yang dapat di klik pada peta gambar
<picture> Mendefinisikan wadah untuk beberapa sumber gambar
Itulah tutorial mengenai HTML gambar, semoga artikel kali ini dapat
bermanfaat, sampai jumpa di tutorial selanjutnya.

sopyan

Seorang blogger yang senang berbagi berbagai informasi dan tutorial.

Artikel Terkait

Komentar

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Populer

01

Tips Meningkatkan Kecepatan Website E-commerce untuk Hasil Penjualan yang Lebih Optimal

Oktober 8, 2024 • 58 Dilihat
02

Tutorial HTML part 1: Apa Itu HTML dan Kenapa Penting?

Januari 7, 2025 • 42 Dilihat
03

Strategi Ampuh untuk Launching Produk Baru: Gabungan Online dan Offline

Desember 28, 2024 • 41 Dilihat
04

HTML: Awal Perjalanan Lo di Dunia Coding yang Kece Abis! (Tutorial HTML part 1)

Januari 22, 2025 • 40 Dilihat
05

Cara Monetisasi Blog dengan Google AdSense: Panduan Lengkap untuk Pemula

Januari 10, 2025 • 38 Dilihat