Menampilkan Gambar Pada HTML
Gambar adalah komponen yang penting pada website. Baik untuk tujuan desain maupun menampilkan informasi yang informatif.
Selain itu, kita juga akan sangat sering menggunakan gambar pada website. Misalnya seperti menampilkan logo website, gambar artikel, dan lain-lain.
Pada tutorial ini teman-teman akan belajar cara menampilkan gambar pada website HTML.
Menampilkan Gambar Pada HTML
HTML telah menyediakan tag untuk menampilkan gambar pada halaman website. Kita bisa menggunakan tag <img>
dan menambahkan atribut src=""
di dalamnya.
Selanjutnya isi atribut src=""
dengan nama file gambar yang ingin ditampilkan.
<img src="nama_file_gambar.jpg" alt="keterangan gambar di sini">
Gunakan tag <img>
untuk menampilkan gambar di HTML. Isi nama file gambar dalam atribut src=""
, dan isi keterangan gambar pada atribut alt=""
.
Baik, kita akan mencoba menampilkan gambar pada HTML.
Menampilkan Gambar Pada HTML
Hal pertama yang harus kamu siapkan adalah sebuah file gambar. Dan sebuah file HTML.
Pada contoh ini saya menyediakan sebuah file gambar dengan nama foto.jpg. Dan sebuah file HTML bernama belajar.html
Dan pastikan file foto.jpg berada dalam folder yang sama dengan file belajar.html.
Kemudian tulis script berikut pada file belajar.html
<img src="foto.jpg" atribut="foto saya yang keren">
Kemudian coba jalankan file belajar.html dengan cara membuka file belajar.html pada firefox atau google chrome.
Seperti yang terlihat pada gambar di atas. Gambar foto berhasil tampil pada halaman HTML.
Menampilkan Gambar Dari Folder Yang Berbeda
Cara sebelumnya adalah cara menampilkan gambar pada HTML dimana file HTML dan file gambarnya berada pada folder yang sama.
Lalu bagaimana cara menampilkan gambar yang berada pada folder yang berbeda?
Karena dalam pengembangan website nantinya, pasti kita akan mengumpulkan file gambar dalam 1 folder khusus.
Agar tidak berantakan dan bercampur dengan file lainnya dalam folder proyek website kita.
Jika gambar berada dalam sebuah folder, maka silahkan tulis nama folder tersebut dalam atribut src=""
, perhatikan contoh berikut.
<img src=”folder_gambar/nama_file_gambar.png”>
Perhatikan struktur berikut.
Proyek_website
| – belajar.html
| – siswa
| – foto.jpg
Misal dari file belajar.html kita ingin memanggil / menampilkan file foto.jpg yang berada dalam folder siswa, maka :
<img src="siswa/foto.jpg">
Lalu bagaimana jika file gambar berada di luar folder tempat file HTML berada?
Perhatikan struktur berikut
Proyek_website
| – admin
| – belajar.html
| – siswa
| – foto.jpg
Jika file belajar.html berada dalam folder admin, sedangkan file foto.jpg berada dalam folder user, maka caranya seperti berikut.
<img src="../siswa/foto.jpg">
Perhatikan coding di atas, kita bisa menggunakan tanda “../
” untuk kembali ke folder yang berada di belakang.
Menampilkan Gambar Dari Link Internet
Gambar yang bisa ditampilkan pada halaman website tidak harus berada dalam folder proyek kita.
Melainkan kita bisa langsung menyisipkan url gambar yang berada di internet.
Misal kita akan coba menampilkan logo codingan.id yang berada di server codingan.id
<img src="https://www.codingan.id/gambar/sistem/logo1.png">
Mengatur Ukuran Gambar Pada HTML
HTML juga telah menyediakan atribut untuk mengatur ukuran file gambar saat ditampilkan pada halaman HTML/website.
Yaitu kita bisa menggunakan atribut height=""
untuk mengatur panjang gambar, dan gunakan atribut width=""
untuk mengatur ukuran lebar gambar.
<img src="codingan.jpg" height="200" width="500">
Kita bisa mengisi ukuran pada atribut height=""
dan width=""
sesuai dengan yang kita inginkan.
Sekian tutorial menampilkan gambar pada HTML, selanjutnya kita akan masuk ke tutorial cara membuat table pada HTML.