Cara Menampilkan Gambar di Halaman Web

Gambar adalah elemen penting dari sebuah artikel. Gambar dapat membuat artikel jadi menarik dan gambar juga dapat membuat orang jadi paham. Tag yang digunakan untuk menampilkan gambar adalah tag <img>. Atribut yang paling penting dari tag image adalah src.

1. Cara Menampilkan Gambar
Tag img masuk ke dalam kategori Block-Line. Artinya tag ini punya sifat jatuh kebawah atau enter setelah nya.

Syntax

<img src="url" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqeMpDwQ-Ac-yU0KDPj_Iu7vdWrqU9dfdTXe_4fqzhyphenhyphenLtAqhDfpECdDNnICPz1QKIf6gAwYo6FWBWzUEAkJPPDjKEQfKqKCtx3Q4hubNDgbBDbIlGii2zQgt72PKvmZ44aFvAGzVr6fw/s1600/kucing.jpeg" />

2. Cara Mengatur Ukuran Gambar
Atribut width dan height dapat digunakan untuk mengatur ukuran gambar. Satuan ukuran yang umum digunakan yaitu px dan %.

Mengatur ukuran gambar

<img width="value" height="value"  src="url" />

<img width="100px" heigth="100px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqeMpDwQ-Ac-yU0KDPj_Iu7vdWrqU9dfdTXe_4fqzhyphenhyphenLtAqhDfpECdDNnICPz1QKIf6gAwYo6FWBWzUEAkJPPDjKEQfKqKCtx3Q4hubNDgbBDbIlGii2zQgt72PKvmZ44aFvAGzVr6fw/s1600/kucing.jpeg" />

Satuan yang dapat digunakan dalam ukuran gambar yaitu: px dan %

• Satuan px (pixel) di gunakan untuk ukuran gambar berdasarkan pixel
• Satuan % di gunakan untuk ukuran gambar berdasarkan persentase ukuran original gambar.

3. Cara Membuat Gambar Rata Tengah
Untuk membuat gambar rata tengah dapat menggunakan tag <center>. Tag center ini berfungsi juga untuk selain gambar.

Membuat gambar ketengah

<center><img width="value" height="value"  src="url" /><center>

<center><img width="100px" heigth="100px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqeMpDwQ-Ac-yU0KDPj_Iu7vdWrqU9dfdTXe_4fqzhyphenhyphenLtAqhDfpECdDNnICPz1QKIf6gAwYo6FWBWzUEAkJPPDjKEQfKqKCtx3Q4hubNDgbBDbIlGii2zQgt72PKvmZ44aFvAGzVr6fw/s1600/kucing.jpeg" /></center>

4. Cara Membuat Gambar Berbentuk Lingkaran

Untuk membuat gambar berbentuk linkaran caranya menggunakan atribut style atau css. properti css yang digunakan adalah border-radius.

Membuat gambar berbentuk lingkaran

<center><img style="border-radius: 50%" width="value" height="value"  src="url" /><center>

<center><img style="border-radius: 50%" width="100px" heigth="100px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqeMpDwQ-Ac-yU0KDPj_Iu7vdWrqU9dfdTXe_4fqzhyphenhyphenLtAqhDfpECdDNnICPz1QKIf6gAwYo6FWBWzUEAkJPPDjKEQfKqKCtx3Q4hubNDgbBDbIlGii2zQgt72PKvmZ44aFvAGzVr6fw/s1600/kucing.jpeg" /></center>

5. Cara Membuat Gambar Transparan

Untuk membuat gambar berbentuk linkaran transparan menggunakan atribut style atau css. properti css yang digunakan adalah opacity.

Membuat gambar berbentuk lingkaran

<center><img style="opacity: 0.5;" width="value" height="value"  src="url" /><center>

<center><img style="opacity: 0.5;" width="100px" heigth="100px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqeMpDwQ-Ac-yU0KDPj_Iu7vdWrqU9dfdTXe_4fqzhyphenhyphenLtAqhDfpECdDNnICPz1QKIf6gAwYo6FWBWzUEAkJPPDjKEQfKqKCtx3Q4hubNDgbBDbIlGii2zQgt72PKvmZ44aFvAGzVr6fw/s1600/kucing.jpeg" /></center>

Catatan:
Semua gambar di atas diambil menggunakan absolut url.
Untuk menampilkan gambar dengan dinamis url, tempatkan file html/php
satu folder dengan file gambar. kemudian url disi dengan nama file
dan extensi. Contoh <img src="gambar.jpg">

Baca Juga Tips Belajar HTML