SleeepingCodings - Tutorial menampilkan gambar pada HTML kali ini bisa dibilang sangat mudah, karena kita hanya perlu memanggil dengan perintah yang sangat sederhana, Cara penulisan tag beserta atributnya juga sangat mudah yaitu <img src="">, Cara menampilkan gambar pada HTML berguna untuk menyisipkan gambar di script HTML untuk dimunculkan ke Web Browser entah digunakan sebagai background atau untuk kebutuhan lainnya.
PENGGUNAAN TAG IMG
Untuk menampilkan gambar dengan HTML, kita bisa menggunakan tag <img> kemudian memasukkan atribut "src=" pada tag <img>, atribut src berguna untuk menghubungkan sekaligus untuk memanggil lokasi dan nama file gambar tersebut, agar file gambar yang terletak satu file dengan file HMTL dapat dipanngil hanya dengan memasukkan nama file gambarnya saja dengan menggunakan atribut src tadi. Namun jika file gambar berada pada folder yang berbeda dengan file HTML maka kita harus memanggil / menambahkan nama foldernya terlebih dahulu baru nama gambar yang ingin kita masukkan, misalnya cara pemanggillannya "nama_folder/filegambar", dan jika file gambar berada di luar folder file HTML maka cara kita memanggilnya hanya dengan menambahkan perintah "../", disini saya sudah menyediakan sebuah file gambar berekstensi .png
Perhatikan contoh gambar berikut, untuk cara menampilkan gambar dengan HTML :
 |
| Gambar 1.1 Menampilkan Gambar pada HTML |
Perhatikan letak gambar di atas, saya akan memberikan tutorial tentang bagaimana cara memanggil file gambar ber-ekstensi index.png yang berbeda folder dengan index.html - nya, ini dia, di gambar terlihat bahwa file gambar berekstensi .png berada di folder Documents, Web, html, images nah berikut cara memanggil gambar yang di letakkan pada folder yang berbeda :
index.html
<!DOCTYPE html>
<html>
<head>
<title>sleeping-codings.blogspot.com</title>
</head>
<body>
<h1>Menampilkan Gambar pada HTML | sleeping-codings.blogspot.com</h1>
<img src="images/sleepingcodings.png">
</body>
</html>
dan ini script yang saya buat beserta hasilny ketika saya jalankan di web browser :
 |
| Gambar 1.2 Menampilkan Gambar pada HTML |
 |
| Gambar 1.3 Menampilkan Gambar pada HTML |
Nah, gampang bangetkan tutorial menampilkan gambar pada HTML kali ini,nah pastinya gambarny muncul kan kalau kita liat di web browser, dan tentunya gambar yang kita tampilkan diatas pastinya ada yang menganggap terlalu kecil, dan gimana cara mengatur gambar agar terlihat lebih besar, Teman" bisa mengatur ukuran gambar hanya dengan menambahkan atribut height="" untuk mengatur ketinggian gambarnya, dan width="" untuk mengatur lebar gambar yang ingin di tampilkan pada halaman web browser teman" .
index.html
<!DOCTYPE html>
<html>
<head>
<title>sleeping-codings.blogspot.com</title>
</head>
<body>
<h1>Menampilkan Gambar pada HTML | sleeping-codings.blogspot.com</h1>
<img src="images/sleepingcodings.png" height ="250px" width="125px">
</body>
</html>
 |
| Gambar 1.4 Menampilkan Gambar pada HTML |
 |
| Gambar 1.5 Menampilkan Gambar pada HTML |
Nah, pasti berbedakan dari gambar di atas, kalau gambar di atas agar lebar namun yang ini lebih kecil dan agak tinggi, karena disini kita mengatur height (tinggi) dan kita atur width (lebar), dan kita atur posisinya agar lebih bagus dengan tag <center> beserta css yang menggunakan cara inline di h1 <h1 align="center">
KESIMPULAN
Nah, jadi gimana temen" ? gampangkan, sebetulnya semua ilmu, apapun itu kalau kita pelajari dan kita pahami dengan serius bakal mendatangkan manfaat tersendiri loh apalagi kita amalkan kepada teman" kita yang belum memahami & membutuhkan ilmu tersebut, jadi penggunaan tag dan atribut untuk menampilkan gambar sangatlah mudah, hanya dengan cara menuliskan <img src="">, dan jika ingin mengatur ukurannya tinggal kita tambahkan atribut <img src="" height="" width="">. Jadi teruslah belajar, dan jika dari tutorial diatas masih mengalami eror silahkan komen sekaligus menyertakan screenshoot teman", Author akan dengan senang hati membantu teman", selamat mencoba dan terus mengulangi kesalahan agar mendapat pengalaman lebih.
REFERENSI
1. MalasNgoding
No comments:
Post a Comment