Setelah sebelumnya kita mempelajari tentang form, kali ini kita akan membahas tentang Cara Menampilkan Gambar.
Gambar adalah salah satu element yang penting dalam sebuah website, selain memperindah tampilan juga untuk memberikan informasi secara visual kepada pengunjung web kita.
Cara Menampilkan Gambar
Untuk menampilkan gambar dengan HTML, anda bisa menggunakan tag <img>. kemudian masukkan atribut “src=” pada tag <img>. atribut src berguna untuk menghubungkan dengan file gambar, jadi atribut src ini di gunakan untuk pemanggilan lokasi dan nama file gambar. jika file gambar terletak satu folder dengan file html yang bertugas untuk menampilkan gambar ini maka kita bisa langsung memasukkan nama file gambar yang ingin di tampilkan tersebut pada atribut src ini. tetapi jika file gambar berada pada folder yang berbeda dengan file html yang menampilkan gambar maka anda bisa menambahkan nama folder nya seperti misalnya “nama_folder/filegambar”. dan jika file gambar berada di luar folder file html yang menampilkan gambar maka anda bisa menambahkan perintah “../”.
Perhatikan contoh berikut untuk cara menampilkan gambar dengan HTML. di sini saya sudah menyediakan sebuah file gambar yang berekstensi .png atau kalian dapat menggunakan gambar kalian sendiri.
contoh
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar dengan HTML | dr-kone.blogspot.com</title>
</head>
<body>
<h1>Menampilkan gambar dengan HTML | dr-kone.blogspot.com;/h1>
<img src="nama file/folder/url gambar">
</body>
</html>
perhatikan kode di atasgunakan tag "img src" untuk memberitahu browser letak file gambar kita, kalian bisa menggunakan berbagai jenis gambar (png, jpeg, jpg dan lainnya).
Anda bisa menentukan ukuran gambar yang tampil dengan menambahkan atribut height=”” untuk mengatur tinggi gambar, dan menambahkan aribut width=”” untuk menentukan lebar gambar yang tampil.
contoh
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar pada HTML | dr-kone.blogspot.com</title>
</head>
<body>
<h1>Menampilkan gambar pada HTML | dr-kone.blogspot.com</h1>
<img src="nama file.jpg/(url gambar)" height="300px" width="500px;">
</body>
</html>
cobalah buat seperti contoh di atas, selanjutnya kita akan kita akan mempelajari style di html tanpa css.
Untuk melihat artikel/materi lainnya silahkan masuk di sini
Untuk melihat artikel/materi lainnya silahkan masuk di sini