Beranda / html / Komputer / Pemrograman / Web

Gambar HTML | Tutorial HTML 17

Oleh Sopyan Posting Komentar
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

Hasil Program 1 : Menampilkan Gambar HTML

Penjelasan Program 1

Contoh Program 1 : Menampilkan Gambar HTML
  • 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

Hasil Program 2 : Atribut alt

Penjelasan Program 2

Contoh Program 2 : Atribut alt
  • 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>

Hasil Program 3

Hasil Program 3 : style, width dan height

Penjelasan Program 3

Contoh Program 3 : style, width dan height
  • 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

Hasil Program 4 : Ujicoba atribut style

Penjelasan Program 4

Contoh Program 4 : Ujicoba Atribut style
  • 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

Hasil Program 5 : Gambar di Folder Lain

Penjelasan Program 5

Contoh Program 5 : Gambar di Folder Lain
  • 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

Hasil Program 5 : Menampilkan Gambar Dari Server Lain

Penjelasan Program 5

Contoh Program 5 : Menampilkan Gambar Dari Server Lain
  • 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

Hasil Program 6 : Gambar Animasi

Penjelasan Program 6

Contoh Program 6 : Gambar Animasi
  • 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

Hasil Program 7 : Gambar Sebagai Link

Penjelasan Program 7

Contoh Gambar 7 : Gambar Sebagai Link
  • 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>

Hasil Program 8

Hasil Program 8 : Gambar Floating

Penjelasan Program 8

Contoh Program 8 : Gambar Floating
  • 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

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

Posting Komentar untuk "Gambar HTML | Tutorial HTML 17"