Belajar HTML #08: Cara Menampilkan Gambar di HTML

 Gambar akan membuat website kita terlihat lebih menarik. Karena otak kita lebih mudah menyerap informasi dengan visual dibandingkan hanya teks saja.

Karena itu, gambar sangatlah penting.

Pada tutorial ini, kita akan belajar cara menambahkan gambar di HTML.

Mari kita mulai.


Menambahkan Gambar di HTML

Gambar dapat kita tambakan di HTML dengan menggunakan tag <img>. Tag ini memiliki atribut wajib, yakni src.

Jika kita tidak mengisi atribut src, maka gambar tidak akan ditampilkan.


Alamat URL gambar pada atribut src dapat berupa URL maupun alamat path. Lalu tag <img> harus ditutup dengan menambahkan garis miring.


Pada contoh , kita menuliskan langsung nama file dari gambar. Ini karena kita menaruh gambar di dalam folder yang sama dengan file HTML.

Apabila file gambarnya tersimpan di folder yang berbeda, maka kita hanya perlu menuliskan alamat path-nya.

Misalkan, kita akan menyimpan gambar di dalam folder images.

Lalu bagaimana kalau gambarnya berada di internet atau website lain?

Nah, jika kita menggunakan gambar dari website lain..

..kita harus menuliskan alamat URL lengkap dari gambar tersebut.


Nah, berikutnya kita akan pelajar format gambar apa saja yang bisa digunakan di HTML dan juga atribut lainnya untuk <img>.

Silahkan lanjutkan..


Format File Gambar untuk HTML

Tidak semua format file gambar dapat ditampilkan di HTML. Karena tiap file gambar memiliki tujuan masing-masing.

Misalnya file gambar dengan format PSD, ia adalah file gambar untuk Photoshop. Jelas ini tidak akan bisa ditampilkan di HTML.

Lalu, format apa saja yang didunkung oleh HTML?

Berikut ini daftar beberapa format gambar yang sering digunakan dalam

web:

Nama FormatNama PanjangEkstensi
APNGAnimated Portable Network Graphics.apng
GIFGraphics Interchange Format.gif
ICOMicrosoft Icon.ico, .cur
JPEGJoint Photographic Expert Group image.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNGPortable Network Graphics.png
SVGScalable Vector Graphics.svg
WebPWeb Picture.webp

Format file ini juga akan bergantung pada versi browser yang digunakan.

Kita ambil contoh format WebP, ini adalah format file gambar baru yang dikembangkan oleh Google. Jika kita menggunakan browser versi lama, gambar ini tidak akan bisa ditampilkan.



Atribut untuk Tag <img>

Ada beberapa atribut yang sering digunakan pada tag <img>:

  • alt untuk teks alternatif untuk gambar;
  • width untuk menentukan lebar gambar;
  • height untuk menentukan tinggi gambar;
  • style untuk menentukan style CSS untuk gambar.

Mari kita coba satu per satu..

Atribut alt

Atribut alt adalah atribut untuk memberikan teks alternatif pada gambar saat gambar gagal ditampilkan.

kita sengaja mengosongkan nilai atribut src. Akibatnya gambar gagal ditampilkan dan yang akan digampilkan adalah teks alternatif.

Apakah kita wajib menggunakan atribut alt?

Sebenarnya tidak wajib, tapi sebaiknya tetap menggunakan atribut ini. Karena, nantinya teks alternatif akan dibaca oleh screen reader.

Screen reader adalah aplikasi pembaca yang digunakan oleh tuna netra agar bisa mengetahui informasi yang ada di komputer.

Selain itu, atribut alt juga sering digunakan untuk meletakan kata kunci untuk SEO.

Atribut width dan height

Atribut width dan height adalah atribut yang digunakan untuk menentukan lebar dan tinggi dari gambar.

Satuan yang digunakan untuk nilai width dan height adalah piksel (px). Jika kita memberikan nilai 200, artinya.. kita memberikan nilai 200px.

Atribut width dan height juga tidak wajib. Tapi baiknya ditambahkan agar ukuran gambar konsisten.

Atribut style

Atribut style merupakan atribut untuk menambahkan style CSS pada sebuah elemen. Atribut ini sering digunakan pada gambar untuk memberikan style atau efek tertentu.

Membuat gambar sebagai link pernah kita bahas di Tutorial membuat link di HTML, tapi tidak apa-apa.. kita akan bahas lagi biar semakin paham.

Baiklah…

Cara membuat link dengan gambar adalah dengan menggabungkan tag <a> dan tag <img>. Tag <a> harus mengapit tag <img>.

Link dapat kita buat pada bagian tertentu pada gambar dengan menggunakan tag <map> dan <area>.

Tag Tambahan untuk Gambar di HTML

Pada HTML versi 5, ada beberapa tag tambahan yang bisa digunakan untuk membantu tag <img>.

Diantaranya:

  • <figure> untuk membungkus gambar dan teks caption-nya;
  • <picture> untuk menentukan jenis gambar pada ukuran layar yang berbeda.

Mari kita coba:

Tag <figure>

Tag figure berfungsi untuk membungkus tag <img> atau gambar dengan teks caption. Teks caption adalah teks yang menjelaskan tentang gambar. Teks caption bisa dibuat dengan tag <figcaption>.



Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar Python: Cara Membaca dan Menulis File di Python

Gambar
  Baca dan tulis file adalah teknik dasar yang harus dipahami dalam pemrograman Python, karena banyak digunakan untuk pengolahan dan pemerosesan file. Paham cara membaca dan menulis file dengan Python akan membuatmu mampu membuat aplikasi yang bisa mengambil dan menyimpan data ke file. Selain itu juga, kamu akan lebih mudah memahami beberapa materi Python Pada Python, file hanya dikelompokkan menjadi dua tipe: File Teks : File yang berisi teks. Setiap baris teks memiliki EOL  (End of Line) . Contoh: TXT, MD, CSV, JSON, dsb. File Binary : File yang bukan teks, hanya bisa diproses oleh program tertentu yang memahami strukturnya. Contoh: EXE, JPG, MKV, M4A, 3GP, dsb. Pada tutorial ini, kita akan hanya belajar cara membaca dan menulis file teks saja. Untuk file  binary , mungkin nanti di kesempatan yang lain. Cara Membaca File di Python Python sudah menyediakan fungsi  open()  untuk membaca dan menulis file.  1 Fungsi ini memiliki dua parameter, yaitu nama file...
Baca selengkapnya

Belajar Javascript: Memahami Struktur Data Array pada Javascript

  Apa itu Array? Sebelum kita membahas Array, kita bahas dulu apa itu struktur data? Struktur data  merupakan cara-cara atau metode yang digunakan untuk menyimpan data di dalam memori komputer. Salah satu struktur data yang sering digunakan dalam pemrograman adalah  Array . Array merupakan struktur data yang digunakan untuk  menyimpan sekumpulan data  dalam satu tempat. Setiap data dalam Array memiliki indeks, sehingga kita akan mudah memprosesnya. Indeks array selalu dimulai dari angka nol ( 0 ). Pada teori struktur data… …Ukuran array akan bergantung dari banyaknya data yang ditampung di dalamnya. Cara Membuat Array pada Javascript Pada javascript, array dapat kita buat dengan tanda kurung siku ( [...] ). Cara Menambahkan Data ke Dalam Array Ada dua cara yang bisa dilakukan untuk menambah data ke dalam array: Mengisi menggunakan indeks; Mengisi menggunakan method  push() . Terdapat tiga data di dalam array  buah  dengan indeks: 0 :  "Apel" ...
Baca selengkapnya

Belajar Javascript #7: Memahami 6 Bentuk Percabangan pada Javascript

Gambar
  Apa itu percabangan dan kenapa dinamakan percabangan? Buat yang belum pernah kuliah atau belajar tentang algoritme dan flowchart, mungkin ini istilah yang baru pertama kamu dengar. Isitilah ini sebenarnya untuk menggambarkan alur program yang bercabang. Pada flow chart, logika  “jika…maka”  digambarkan dalam bentuk cabang. Karena itu, ini disebut percabangan. Selain percabangan, struktur ini juga disebut:  control flow ,  decision , struktur kondisi, Struktur if, dsb. Percabangan akan mampu membuat program berpikir dan menentukan tindakan sesuai dengan logika/kondisi yang kita berikan. 1. Percabangan  if Percabangan  if  merupakan percabangan yang hanya memiliki  satu blok pilihan  saat kondisi bernilai benar. Flowchart  tersebut dapat kita baca seperti ini: “Jika total belanja lebih besar dari Rp 100.000, Maka tampilkan pesan  Selamat, Anda dapat hadiah ” Kalau dibawah Rp 100.000 bagaimana? Ya pesannya tidak ditampilkan. 2. ...
Baca selengkapnya