Tutorial HTML Atribut Style Pada Gambar - Komputer Blog

Tutorial HTML Atribut Style Pada Gambar

Tutorial HTML Atribut Style Pada Gambar


Seletah kita menampilkan gambar pada HTML kita akan melanjutkan ke merubah ukuran gambar, posisi gambar dan menjadikan gambar sebagai link.
Merubah ukuran gambar, dan posisi gambar memburuhkan sentuhan dari atribut 'style'. Sebenarnya di dalam atribut 'style' berisi code-code dari CSS



Merubah ukuran gambar

Kita juga bisa merubah ukuran gambar hanya dengan menambahkan atribut 'style'. Di dalam 'style' kita tambahkan width : mengatur lebar, height : mengatur tinggi. Secara default ukuran yang digunakan adalah 'pixel' atau 'px'.
contoh :

<img src="http://wartadinus.com/wp-content/uploads/2016/11/1.1.jpg" alt="JalalKun" style='width: 640; height: 480;' />
Hasil

Mengatur ukuran gambar
Mengatur ukuran gambar


Merubah posisi gambar atau floating

Secara default posisi gambar yang dipanggil berada di sebelah kiri. Kita juga bisa memindahkan posisinya ke kanan. Kita hanya perlu menambahkan 'float' di dalam atribut 'style'

<img src="http://wartadinus.com/wp-content/uploads/2016/11/1.1.jpg" alt="JalalKun" style='float: right; width: 640; height: 480;' />

Hasil

Float kanan di HTML
Float kanan di HTML

Menjadikan gambar sebagai link

Gambar yang sudah kita panggil juga bisa kita jadikan sebagai link.
Baca Juga : Tutorial HTML Membuat Link
Kita hanya perlu mengapit gambar yang sudah kita panggil dengan tag <a>.
Contoh

<a href='http://www.wartadinus.com>
<img src="http://wartadinus.com/wp-content/uploads/2016/11/1.1.jpg" alt="JalalKun" style='float:right; width: 640; height: 480;' />
</a>

Gambar yang kita panggil akan diarahkan ke website Wartadinus.
Diberdayakan oleh Blogger.