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 kali 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
ntuk 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/Shodiq/Pictures.
Perhatikan contoh penempatan gambar berikut. Disini saya menyediakan gambar dengan ektensi .png
Setelah kita mempunyai gambar dan index.html masukkan script di bawah ini untuk menampilkan gambar image.png
<!DOCTYPE html>
<html>
<head>
<title>HTML : Menampilkan gambar pada HTML</title>
</head>
<body>
<h1>HTML : Menampilkan gambar pada HTML </h1>
<img src="image.png">
</body>
</html>
 |
| Hasil script saat di run |
<!DOCTYPE html>
<html>
<head>
<title>HTML : Menampilkan gambar pada HTML</title>
</head>
<body>
<center>
<h1>HTML : Menampilkan gambar pada HTML </h1> </center>
<img src="image.png" width="50%" height="30%">
</body>
</html>
 |
| Hasil run saat ukuran di ganti |
Contoh di atas merupakan implementasi tag <img> pada html dasar yang sangat simple , dan dengan aturan atribute height dan width. Ukuran pada gambar juga dapat kita tur menggunakan css , jika pada html kita mengatur satu-persatu ukuran gambar , tapi jika pada css kita dapat mengatur semua gambar. Ok sekian dulu post kali ini , sekian dan Terima Kasih
REFERENSI : www.malasngoding.com
EmoticonEmoticon