Menampilkan Gambar Pada HTML: Belajar HTML Dasar Part 11
Hallo pembaca setia bakuraid, kali ini bakura akan membahas tentang Menampilkan Gambar Pada HTML: Belajar HTML Dasar Part 11 artikel ini menejlaskan cara menampilkan gambar tag <img>. Langsung saja saya akan membahasnya.
HTML telah menyediakan sebuah tag khusus yang digunakan untuk menampilkan gambar atau image. Tag HTML tersebut adalah tag ” <img> “. Tag <img> di pakai untuk menampilkan gambar atau image dengan macam-macam ekstensi, contohnya yaitu jpg, png, gif, bmp, ico dan lain-lain. Apakah anda pernah membayangkan apa bila website tanpa gambar, maka akan terasa sangat membosankan dan kurang menarik. Oleh karena itu sangat penting untuk memahami tag <img> bahkan wajib untuk dipahami.
tersebut. Akan tetapi apabila file gambar letaknya berada beda folder dengan file .html yang digunakan menampilkan gambar, maka anda harus menambahkan nama folder nya sebelum nama file contohnya “nama_folder/filegambar”. Dan apabila file gambar letaknya berada di luar folder file .html yang digunakan untuk menampilkan gambar maka anda harus menambahkan “../filegambar”.
Perhatikan contoh kode berikut untuk menampilkan gambar dengan HTML. Sebelum itu kita siapkakan folder dengan gambar didalamnya dan file html dengan nama part11.html.
Perhatikan letak gambar di atas saya memiliki 2 file gambar yang pertama letaknya satu folder dengan file html bernama Logo.png dan yang kedua didalam folder gambar bernama Logo2.png. maka berikut ini cara menampilkan gambar dengan html.
Dari contoh hasil diatas pada gambar kedua yang ada dalam folder saya langsung menentukan ukuran gambar yang tampil dengan menambahkan atribut height=”” untuk mengatur tinggi gambar, dan menambahkan aribut width=”” untuk menentukan lebar gambar. Masing-masing saya memberi nilai 100px. maka tampil lah 2 gambar yang berbeda ukuran. Atribut lain yang dapat digunakan pada tag <img> adalah alt berfungsi sebagai keteangan gambar dan akan muncul pada saat gambar tidak tampil biasanya pada saat koneksi lambt. Gambar ini juga bisa dibuat link dengan cara memasukan tag <img> diantar tag <a href=""> </a>.
HTML telah menyediakan sebuah tag khusus yang digunakan untuk menampilkan gambar atau image. Tag HTML tersebut adalah tag ” <img> “. Tag <img> di pakai untuk menampilkan gambar atau image dengan macam-macam ekstensi, contohnya yaitu jpg, png, gif, bmp, ico dan lain-lain. Apakah anda pernah membayangkan apa bila website tanpa gambar, maka akan terasa sangat membosankan dan kurang menarik. Oleh karena itu sangat penting untuk memahami tag <img> bahkan wajib untuk dipahami.
Cara Menampilkan Gambar Pada HTML
Cara menampilkan gambar di HTML, anda dapat menggunakan tag <img>. Kemudian sisipkan atribut “src=” dalam tag <img>. Atribut src berfungsi untuk menghubungkan dengan file gambar, atribut src di pakai untuk manggil lokasi dan nama file gambar yang berada pada folder tertentu. Apabila file gambar letaknya satu folder dengan file .html yang digunakan untuk menampilkan gambar, maka langsung saja mengisikan atribut src dengan nama file gambar yang ingin di tampilkantersebut. Akan tetapi apabila file gambar letaknya berada beda folder dengan file .html yang digunakan menampilkan gambar, maka anda harus menambahkan nama folder nya sebelum nama file contohnya “nama_folder/filegambar”. Dan apabila file gambar letaknya berada di luar folder file .html yang digunakan untuk menampilkan gambar maka anda harus menambahkan “../filegambar”.
Perhatikan contoh kode berikut untuk menampilkan gambar dengan HTML. Sebelum itu kita siapkakan folder dengan gambar didalamnya dan file html dengan nama part11.html.
Perhatikan letak gambar di atas saya memiliki 2 file gambar yang pertama letaknya satu folder dengan file html bernama Logo.png dan yang kedua didalam folder gambar bernama Logo2.png. maka berikut ini cara menampilkan gambar dengan html.
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar HTML</title>
</head>
<body>
<h1>Menampilkan gambar pertama yang letaknya satu Folder</h1>
<img src="Logo.png">
<h1>Menampilkan gambar kedua yang letaknya didalam Folder gambar</h1>
<img src="gambar/Logo2.png" height="100px" width="100px";>
</body>
</html>Dari contoh hasil diatas pada gambar kedua yang ada dalam folder saya langsung menentukan ukuran gambar yang tampil dengan menambahkan atribut height=”” untuk mengatur tinggi gambar, dan menambahkan aribut width=”” untuk menentukan lebar gambar. Masing-masing saya memberi nilai 100px. maka tampil lah 2 gambar yang berbeda ukuran. Atribut lain yang dapat digunakan pada tag <img> adalah alt berfungsi sebagai keteangan gambar dan akan muncul pada saat gambar tidak tampil biasanya pada saat koneksi lambt. Gambar ini juga bisa dibuat link dengan cara memasukan tag <img> diantar tag <a href=""> </a>.
Kesimpulan dari artikel ini adalah tag <img> digunakan untuk menampilkan gambar, gambar yang di tampilkan bisa langsung di tentukan tinggi dan lebarnya, dan gambar juga bisa dibuat link untuk pindah halaman.
Sekian artikel kali ini tentang Menampilkan Gambar Pada HTML: Belajar HTML Dasar Part 11 semoga bermanfaat dan mudah dipahami serta dapat membantu anda dalam belajar tentang HTML. Bakura mengucapkan terimakasih atas kunjunganya silahkan cari artikel lain diblog ini.
Sekian artikel kali ini tentang Menampilkan Gambar Pada HTML: Belajar HTML Dasar Part 11 semoga bermanfaat dan mudah dipahami serta dapat membantu anda dalam belajar tentang HTML. Bakura mengucapkan terimakasih atas kunjunganya silahkan cari artikel lain diblog ini.
terima kasih kak, ilmunya sangat membantu, saya berharap blog ini terus berkembang agar bermanfaat bagi banyak orang.
BalasHapusjangan lupa kunjungi website kampus saya di https://www.atmaluhur.ac.id/
Nim : 1922500210
nama : Dian Oktavina
Kelas : SI2J