Gambar HTML


Gambar dapat digunakan sebagai penghias atau petunjuk suatu halaman. Dalam pembuatan artikel, gambar mempunyai pengaruh yang besar dalam kenyamanan visual user.


Sintak Gambar


Gambar didefinisikan menggunakan tag <img> dengan atribut src=”url”.

<img src="https://dribbble.com/shots/7587291-Laravel-6" alt="gambar_laravel" title="Tutorial Laravel 6" 
width="400px" height="300px">
laravel

Atribut Elemen Gambar


Elemen <img> seringkali digunakan bersandingan dengan atribut di bawah ini:

Atribut Keterangan
src Menentukan URL dari file media
alt Menampilkan teks alternatif bilamana konten aslinya gagal ditampilkan
width Menentukan lebar dari konten elemen
height Menentukan tinggi dari konten elemen

Cara Mengatur Ukuran Gambar


Terdapat dua cara dalam mengatur ukuran gambar, cara pertama dengan menggunakan atribut width dan height yang sudah seringkali disinggung sebelumnya. Sedangkan yang kedua menggunakan atribut style.


Mengatur Ukuran Gambar dengan Width dan Height


Cara pertama dengan menggunakan width dan height. Satuan default dari kedua atribut ini adalah pixel (px).

<img src="https://dribbble.com/shots/7587291-Laravel-6" width="400px" height="300px">


Mengatur Ukuran Gambar dengan Style


Cara kedua dengan menggunakan global atribut style dengan 2 properti masing-masing width dan heigth. Jika kurang jelas bisa diperhatikan di bawah.

<img src="https://dribbble.com/shots/7587291-Laravel-6" style="width:400px; height:300px;">


Lebih Disarankan Width dan Height atau Style?


Meskipun keduanya sama-sama valid di HTML. Namun untuk mengatur ukuran gambar lebih disarankan menggunakan style.


Gambar Dalam Folder Lain


Untuk mengakses gambar dari folder lain, bisa kalian tulis manual nama folder penyimpanan file gambar tersebut kemudian tulis nama dari file gambar yang bersangkutan.

<img src="/gambar/kopi.png" >

Gambar Dalam Server Lain


Sedangkan untuk mengakses gambar secara online atau dari server lain, bisa kalian dapatkan dahulu link dari sumber gambar yang bersangkutan.

<img src="https://kopiding.in/gambar/kopi.png">