Html Image

12 Mei 2023

Setiap website pasti memiliki gambar untuk di tampilkan, betapa pentingnya gambar bagi sebuah webset.

Tag <img>

Html

<img src="...">

Tag <img> sebagai elemen gambar dalam bentuk Html dan src="..." adalah atribut untuk mengambil file gambar yang akan di tampilkan di browser.

Tag <img> tidak memiliki tak penutup seperti elemen lainnya. sebagai gantinya gunakan (/) garis miring di belakan nama tag.

Html

<img src="..."/>

📁 Folder
│
├─── 📄 index.html
│
╰─── 🖼 image.jpg

Jika file gambar Anda berada dalam folder yang sama cukup masukkan file gambar Anda seperti berikut

html

<img  src="image.jpg"/>

📁 Folder 
│
├─── 📁 Gambar 
│     │
│     ╰─── 🖼 image.jpg
│
╰─── 📄 index.html

Jika file gambar Anda berada di folder yang sama namun tersimpan dalam folder lagi cukup tulis seperti berikut.

Nama foldel garis miring (/) dan nama file gambar.

html

<img src="Gambar/image.jpg"/>

📁 Gambar 
│
╰─── 🖼 image.jpg

📁 Folder 
│
╰─── 📄 index.html

Namun jika file gambar Anda berada di dalam folder lain Anda cukup tambahkan garis miring (/) nama folder dan nama file gambar.

html

<img src="/Gambar/image.jpg"/>

📁 https://www.namesites.com/image.jpg

📁 Folder 
│
╰─── 📄 index.html

Jika gambar Anda tidak berada di dalam folder manapun namun berada di situs lain yang berbeda, Anda dapat memasukkan URL lengkap gambar seperti berikut.

html

<img src="https://dummyimage.com/300x300/111/fff"/>

Atribut alt="..."

Atribut alt="..." digunakan sebagai judul dari gambar dan sebagai pembaca layar.

html

<img alt="..." src="image.jpg"/>

Contoh :