Cara Menambahkan Gambar dalam HTML
Sebuah halaman HTML pasti memiliki gambar, selain sebagai sarana untuk memperindah halaman HTML, gambar juga berguna sebagai penjelasan dari kat-kata, karena tidak semuanya dapat dijelaskan dengan kata-kata, makanya dibutuhkan gambar.
Tidak heran pada setandard web saat ini sangat jarang kita lihat lahaman HTML tanpa adanya gambar. Dengan memasang gambar pada halaman HTML maka halaman tersebut akan lebih bagus dan lebih segar. Pada tutorial kali ini kita akan mempelajari cara menampilkan gambar kedalam halaman web dengan penggunaan tag <img>.
Fungsi atribut src dalam tag <img>
Atribut src adalah singkatan dari source, merupakan atribut yang berisi tentang alamat dari sebuah gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute. (perbedaan tentang alamat relatif dan alamat absolute telah kita bahas pada Cara Membuat Link Pada HTML). Untuk memudahkan kita dalam mempelajari image ini, sebaik kita langsung memperaktekkannya. Untuk tutorial kali ini kita membutuhkan sebuah gambar, gambar dapat berupa JPEG, PNG, maupun GIF.
Dibawah ini saya sudah sediakan contoh Code HTML untuk menampilkan gambar. Pada contoh diibawah ini file Gambar dengan file HTML-nya berada dalam satu folder. Teman-teman dapat menulis code diibawah ini dan simpan dengan nama gambar.html
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Image</title>
</head>
<body>
<h1>
Menampilkan
Gambar </h1>
<img
src="gambar.jpg" />
</body>
</html>
Maka jika teman-teman jalankan pada web browser akan menghasilkan seperti gambar berikut ini :
Hati-hati dengan penulisan alamat dari gambar, sering gambar gagal tampil karena letak file HTML berbeda dengan file Gambar. Pada CODE diatas file HTML dan file GAMBAR nya berada dalam satu folder sehingga kita dapat langsung memanggil nama dari file gambar tersebut, jika file gambar berbeda folder dengan file HTML-nya kita haru sebutkan nama folder nya. Contoh file gambar berada dalam folder images maka kita harus merubah code HTML nya seperti ini : <img src="images/gambar.jpg" />
Fungsi Atribut alt dalam tag <img>
Dalam tag image juga memiliki atribut penting lainnya, yaitu alt. Atribut alt adalah singkatan dari alternative description, dimana alt digunakan untuk keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser, atau jika web broser telah disetting untuk tidak menampilkan gambar Atribut ini lah yang akan memberikan keterangan tentang gambar tersebut. Berikut adalah Contoh penggunaan atribut alt pada tag <img>:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Image</title>
</head>
<body>
<h1>Menampilkan
Gambar</h1>
<img
src=" gambar.jpg" alt=" Gambar
vektor saya " />
</body>
</html>
Hasil dari code diatas sama seperi gambar pertama karena alt digunakan untuk keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser. Atribut alt juga berperan penting untuk mesin pencari seperti Google. Karena cara kerja google yang meng-index seluruh situs dengan memproses tulisan yang ada, Google ‘tidak mengerti’ isi dari gambar tanpa bantuan deskripsi yang ditulis dalam atribut alt. Hal ini menambah pentingnya menambahkan atribut alt.
Mengatur ukuran gambar dengan Atribut width dan height dalam tag <img>
Selain atribut yang sudah dijelaskan diatas masih ada satu atribut lain yang juga sangat penting yaitu width dan height. Atribut width dan height adalah Atribut yang mengatur ukuran dari gambar yang kita tampilkan. Berikut contoh penggunaan atribut width dan height pada tag <img>:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Image</title>
</head>
<body>
<h1>
Menampilkan
Gambar </h1>
<img
src="gambar.jpg" alt=" Gambar vektor saya "
height="200" width="100" />
</body>
</html>
Maka jika teman-teman jalankan pada web browser akan menghasilkan seperti gambar berikut ini :
Pada penggunaan tag image diatas, gambar terlihat tidak proporsional, hal ini karena penggunaan atribut width dan height ‘memaksa‘ gambar untuk tampil dengan nilai yang kita tetapkan. Untuk mempertahankan proporsi gambar, namun tetap membuat gambar menjadi besar/kecil, cantumkan hanya salah satu atribut saja (width saja atau height saja, namun tidak keduanya). Misalkan jika kita menetapkan atribut height =200px (tanpa mencantumkan width), maka web browser akan menampilkan gambar dengan tinggi 200px, dan menghitung secara otomatis lebar gambar agar gambar tetap proporsional. Berikut ini contoh yang menggunakan hanya salah satu atribut saja.
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag
Image</title>
</head>
<body>
<h1> Menampilkan Gambar </h1>
<img src="gambar.jpg" alt="Gambar
Koala" height="200" />
</body>
</html>
Maka jika teman-teman jalankan pada web browser akan menghasilkan seperti gambar berikut ini :
Tutorial diatas hanya sebatas untuk menampilkan gambar, memberikan keterangan dari gambar dan mengatur lebar atau tinggi dari gambar. Jika teman-teman mau untuk memperindah dan mengatur letak tampilan dari gambar tersebut, teman-teman dapat menggunakan CSS. Terimakasi atas kunjungan nya, untuk tutorial lain nya akan saya bahas dilain waktu.
makasih gan tutornya, ane lagi cari cari cara ini buat diterapkan diblog
ReplyDeleteBagus ini untuk diterapkan di situs ane gan...
ReplyDeleteBagus juga tuh... Bisa dicobalah
ReplyDeletesip mantab jiwa, langsung praktek
ReplyDeleteTerimakasih kak, artikelnya sangat bermanfaat sekali untuk belajar menambahkan gambar pada html, materi yang disampaikan simpel tapi sangat mudah dipahami dan dimengerti.. Terus dilanjutkan artikelnya kak.... Perkenalkan nama saya Sintia, nim saya 1922500186 dan link Web kampus saya https://www.atmaluhur.ac.id/
ReplyDelete