Belajar HTML Part 13 : Menampilkan Gambar Pada HTML
SCRIPT KIDDIES - Menampilkan gambar dalam sebuah web sangatlah penting, coba bayangkan apa jadinya jika sebuah web tidak memiliki gambar ? Pasti sangat membosankan. Oleh karna menampilkan sebuah gambar sangatlah penting dalam pembuatan web. Dan pada tutor ke 13 ini kita akan mempelajari cara menampilkan gambar dengan HTML.
HTML sendiri memiliki tag khusus untuk menampilkan gambar yaitu <img> . Tag image dapat menampilkan gambar dengan berbagai ektensi yaitu png,jpg,jpeg,gif dan lain sebagainya.
CARA MENAMPILKAN GAMBAR PADA HTML
Untuk menampilkan gambar kita dapat menggunakan tag <img>. Kemudian masukkan atribur "src=" atribut src digunakan untuk menghubungkan gambar. Jadi atribut src ini berfungsi untuk pemanggilan lokasi gambar. Jika file gambar berada satu folder dengan file HTML dengan pekerjaan sobat maka kita tinggal memasukkan nama gambar tersebut. Jika lokasi gambar berada diluar atau berbeda dengan file HTML sobat maka untuk mengisi atribut src kita isi dengan alamat file itu contohnya /home/maestro/Pictures.
Perhatikan contoh penempatan gambar berikut. Disini saya menyediakan gambar dengan ektensi .png
Perhatikan gambar diatas, saya memiliki file gambar bernama script kiddies.png, perhatikan cara penggunaanya berikut
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML Part 13 : Menampilkan Gambar Pada HTML</title>
</head>
<body>
<h1>Menampilkan Gambar | SCRIPT KIDDIES</h1>
<img src="script kiddies.png">
</body>
</html> |
| Dan Gambar pun Berhasil Tampil |
Kita dapat menentukan ukuran gambar dengan menambahkan atribut height=" " untuk mengatur tinggi gambar dan weight=" " untuk mengatur lebar gambar yang tampil.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML Part 13 : Menampilkan Gambar Pada HTML</title>
</head>
<body>
<h1>Menampilkan Gambar | SCRIPT KIDDIES</h1>
<img src="script kiddies.png" width="30%" height="30%">
</body>
</html>
Untuk lebih memudahkan sobat mengatur ukuran gambar lebih baik menggunakan CSS daripada kita mengatur satu persatu atribut weight dan height pada setiap gambar. Untuk cara mengatur ukuran gambar dengan CSS akan saya bahas pada kesempatan yang akan datang, Sekian Terima Kasih
Tidak ada komentar :
Posting Komentar