Kali ini saya akan membahas tentang bagaimana cara menampilkan image/gambar di halaman HTML. Sebagai lanjutan tutorial WEB tentang HTML. Sebelum nya saya sudah membuat tutorial cara membuat link di HTML , bagi kawan kawan yang belum membaca bisa dilihat disini.
Menampilkan gambar di HTML tidak sesulit yang dibayangkan. Yang perlu diingat dalam menampilkan digambar ialah link gambar tersebut. Ingat.. Link gambar tersebut. Pada dasarnya konsep nya sama dengan bagaimana cara kita membuat link. Source gambar yang harus kita perhatikan, agar gambar yang kita ingin tampilkan muncul dihalaman HTML. Disini kita akan menggunakan tag HTML yaitu tag <img> Berikut contoh membuat gambar di HTML.
1.) Persiapkan Gambar yang ingin ditampilkan, bisa format tipe jpg,png, atau gif . namun disini saya
akan menggunakan gambar jpg. Yaitu gambar koala.jpg.
akan menggunakan gambar jpg. Yaitu gambar koala.jpg.
2.) Seperti biasa, Buat Halaman dasar HTML. Simpan di dalam folder (disini saya menggunakan
xampp, jadi saya menyimpan nya di folder htdocs. Mungkin ini akan saya bahas ketika saya
membuat pembahasan tentang PHP). Simpan dengan nama gambar1.html
membuat pembahasan tentang PHP). Simpan dengan nama gambar1.html
<html>
<head>
<title>Menampilkan Gambar di Halaman HTML - 1</title>
</head>
<body align=’center’>
<h2>Contoh Menampilkan Gambar di HTML - 1 </h2>
<h4>Dibawah ini akan muncul gambar yang akan di tampilkan</h4>
<img src=”./koala.jpg”>
</body>
</html>
Penjelasan Tag :
- <title>Menampilkan Gambar di Halaman HTML - 1</title> sebagai judul halaman
- <body align=’center’> , berarti semua elemen yang berada di dalam tag <body> memiliki align / perataan tengah , karena value nya = center.
- <h2>Contoh Menampilkan Gambar di HTML - 1 </h2>, Tag heading 2,
- <h4>Dibawah ini akan muncul gambar yang akan di tampilkan</h4> , Tag Heading 4.
- <img src=”./koala.jpg”> , tag inilah yang akan menampilkan gambar di halaman kita , src (source) nya ialah sesuai dengan nama gambar. Dan ingat, pastikan letakkan gambar di dalam 1 root folder dengan halaman html. Karena gambar berada dalam 1 folder , maka source nya cukup “./koala.jpg” .
3.) Setelah disimpan, coba tampilkan di browser dengan cara klik kanan, open with browser, atau jika kalian meletakannya di c:/xampp/htdocs , maka ketikkan di browser :
-> localhost/namafolder/namafile.html.
4.) Maka tampilan gambar akan seperti ini.
5.) Karena gambar memiliki ukuran yang besar yaitu 1024x768 pixel,
mungkin terlalu besar di halaman kita, tenang.. kita bisa mengatur ukuran gambar dengan cara menambahkan atribut width dan height pada tag img. Berikut koding nya.
<html>
<head>
<title>Menampilkan Gambar di Halaman HTML - 1</title>
</head>
<body align=’center’>
<h2>Contoh Menampilkan Gambar di HTML - 1 </h2>
<h4>Dibawah ini akan muncul gambar yang akan di tampilkan</h4>
<img width="300px" height="300px" src=”./koala.jpg”>
</body>
</html>
Penjelasan :
- <img width=’300px' height=’300px’ src=”./koala.jpg”> , width berarti lebar yaitu 300 pixel, dan height berarti tinggi yaitu 300 pixel.
6.) Maka Hasil gambar kita tadi akan berubah ukuran menjadi lebih kecil dari yang sebelumnya.
Intinya di src pada tag <img>, konsep nya hampir sama dengan cara kita membuat link, apabila gambar berada didalam folder, maka di src nya ketikan ‘./namafolder/namafile.jpg’ . dan jika didalam folder ada folder lagi maka ketikkan ‘./namafolder/namafolderlagi/namafile.jpg’ , nah begitu seterusnya. ingat, yang harus kita perhatikan ialah di src nya harus sesuai berada di folder.
Mungkin itu saja untuk konsep dasar menampilkan gambar di html, cukup sederhana dan mudah. Bagi kawan-kawan yang masih bingung , bisa tanyakan di kolom komentar.
Baiklah, sekian dari saya , semoga bermanfaat. Terima kasih dan Selamat Mencoba !
No comments