Berjumpa lagi di apa aja dot kom.
Pada tutorial kali ini saya akan memberikan cara bagaimana menampilkan gambar
kedalam file html kita. Langsung saja simak tutorial-nya di bawah ini.
1.
Pertama buatlah file html dengan nama
‘html_gambar.html’ atau terserah sesuka kalian namun dengan ekstensi html. Saya
sarankan juga untuk membuat folder baru terlebih dahulu.
2.
Kemudian buka file tersebut dengan text editor
terserah kalian, untuk tutorial ini saya menggunakan notepad++.
3.
Tuliskan struktur html dasar seperti di bawah
ini. Kalian juga bisa menambahkan beberapa struktur lainnya.
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan
Gambar</title>
</head>
<body>
</body>
</html>
4.
Kemudian kita siapkan dulu gambar yang akan kita
tampilkan, copy gambar tersebut ke dalam folder dimana file html kamu berada.
Di sini saya menggunakan gambar dengan nama lampu sebagai contoh.
5.
Jika sudah disiapkan, kemudian tuliskan tag html
<img src=”nama file gambar kamu dengan diikuti ekstensi” di dalam tag
<body>. Sebagai contoh perhatikan code di bawah
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan
Gambar</title>
</head>
<body>
<img
src="lampu.jpg">
</body>
</html>
6.
<img> merupakan tag html untuk menampilkan
gambar, tag ini harus diikuti dengan attribute src, yaitu penunjuk dimana
gambar yang akan kalian tampilkan terletak. Untuk isi dari src harus sesuai. Jika
file gambar kita berada di dalam folder lain yang berada di dalam folder yang
sama dengan file html tersebut maka kita perlu mengetikan nama folder tersebut.
Misalnya jika saya menaruh file lampu di dalam folder gambar.
7.
Maka saya perlu menuliskan folder gambar di
dalam attribute src. Untuk lebih jelasnya silahkan lihat contoh di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan
Gambar</title>
</head>
<body>
<img
src="gambar/lampu.jpg">
</body>
</html>
8.
Jika sudah silahkan kalian coba buka file html
kalian dengan browser chrome atau yang lainnya.
9.
Jika gambar kalian belum tampil perhatikan
masalah – masalah di bawah ini
a.
Kemungkinan besar penyebab gambar tidak tampil
adalah kesalahan penulisan isi dari attribute src, di sini kalian coba
perhatikan secara teliti dari nama file hingga ekstensi filenya. Untuk melihat ekstensi filenya kalian dapat
klik organize di pojok kiri atas, kemudian masuk tab view, dan uncheck hide
extension for knowns file.
b.
Kemudian jika nama dan ekstensi file sudah
sesuai namun gambar tetap tidak muncul, coba kalian lihat apakah gambar
tersebut berada di dalam folder tertentu. Jika iya pastikan kalian menuliskan
folder terkait ke dalam attribute src. Misalnya jika gambar kalian berada di
dalam folder “gambarku” tuliskan src=”gambarku/gambar.png”,
c.
Kalian juga bisa mengatur lebar dan tinggi
gambar dengan attribute tambahan seperti width , dan juga height.
Saya rasa
sekian tutorial yang dapat saya berikan, jika masih ada yang kurang jelas bisa
langsung ditanyakan di kolom komentar. Terima kasih dan sampai jumpa.
0 Comments
Berkomentarlah secara baik dan sopan tanpa ada unsur SARA dan juga penghujatan.