Sulit membayangkan sebuah halaman HTML tanpa gambar untuk standard web saat ini. Pada tutorial belajar HTML cara menambahkan gambar di HTML ini kita akan mempelajari cara penggunaan tag image. Tag Image digunakan untuk menampilkan gambar kedalam halaman web, menggunakan <img>. Show Atribut src dalam tag <img>Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute. (perbedaan tentang alamat relatif dan alamat absolute telah kita bahas pada Belajar HTML: Cara Membuat link di HTML). Untuk contoh kode HTML tentang image ini, sediakan sebuah gambar yang akan digunakan sebagai tampilan, dan tempatkan gambar tersebut ke dalam satu folder dengan halaman contoh. Gambar dapat berupa JPEG, PNG, maupun GIF. Pada contoh dibawah ini saya menggunakan sebuah gambar koala.jpg yang berada dalam satu folder dengan halaman HTML saat ini. Savelah sebagai img.html Contoh penggunaan tag <img>: <!DOCTYPE html> <html> <head> <title>Penggunaan Tag Image</title> </head> <body> <h1>Belajar Tag Gambar</h1> <img src="koala.jpg" /> </body> </html> Perhatikan bahwa tag <img> tidak memiliki elemen, sehingga langsung ditutup dengan />  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 width=300px (tanpa mencantumkan height), maka web browser akan menampilkan gambar dengan lebar 300px, dan menghitung secara otomatis tinggi gambar agar gambar tetap proporsional. eBook HTML Uncover Duniailkom Anda serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih lengkap hingga fitur terbaru HTML5. Penjelasan lebih lanjut bisa ke: eBook HTML Uncover Duniailkom. Pada sebuah halaman website, gambar merupakan unsur yang penting yang mampu membuat website menjadi lebih indah. Semua website profesional pasti memiliki gambar pada halamannya. Karena jika tidak ada gambar, maka sebuah website sangat tidak menarik bagi pengunjung. Di sini kita akan belajar HTML yaitu menampilkan gambar di HTML dengan tag <img>. Tag <img> merupakan kependekan dari image. Jadi, tag <img> ini berfungsi untuk menambahkan gambar di HTML. Tag <img> memiliki banyak atribut, seperti src, alt, dll yang akan kita bahas sekarang. Cara Menampilkan Gambar di HTMLAda beberapa atribut pada tag img yang perlu (dan wajib) Anda gunakan supaya gambar pada website Anda lebih optimal. Berikut adalah beberapa atribut yang penting pada tag img.
Sekarang, langsung kita masuk praktiknya. Buatlah file dengan nama gambar.html dan letakkan di folder manapun. Setelah itu, letakkan gambar dengan nama makinrajin.png di dalam folder yang sama dengan file gambar.html. Contoh : Setelah membuat file gambar.html dan meletakkan gambar dalam direktori yang sama, sekarang perhatikan coding di bawah ini dan ketikkan di file gambar.html. [sourcecode language=”plain”] Bisa dilihat hasilnya dengan cara double click pada gambar.html dan akan muncul hasil seperti di bawah (tampilan tergantung gambar Anda) : Lalu, coba modifikasi syntax menjadi seperti di bawah ini : [sourcecode language=”plain”] Di sini kita memodifikasi gambar dengan menambahkan atribut width dan height. Artinya kita memberikan tinggi sebesar 70 px dan lebar sebesar 300 px. Maka hasilnya akan seperti di bawah ini : Anda juga bisa hanya menggunakan salah satu atribut tersebut seperti width atau height saja, tergantung kebutuhan. Selanjutnya kita akan mencoba menambahkan atribut title pada tag img menjadi seperti di bawah ini : [sourcecode language=”plain”]<img src="makinrajin.png" title="Ini title" width="300" height="70">[/sourcecode] Maka ketika cursor berada pada gambar, akan muncul tulisan “ini title”. Berikut hasilnya : Sekarang kita coba untuk menguji atribut alt. Atribut alt itu berfungsi untuk menampilkan tulisan ketika gambar tidak berhasil dimuat (mungkin karena koneksi internet yang lambat atau nama dan path gambar yang salah). Kita akan coba mengubah nama gambar menjadi salah untuk mengetahui fungsi atribut alt. Coba ubah tag img menjadi seperti di bawah : [sourcecode language=”plain”]<img src="gambar.png" alt="Ini alt">[/sourcecode] Gambar.png kan tidak ada pada folder yang telah kita buat sebelumnya, jadi otomatis gambar tidak akan tampil dan akan keluar hasil seperti di bawah : Jika gambar tidak berada pada folder yang sama, Anda bisa memanggil gambar tersebut dengan menggunakan “../”. Jadi penerapannya adalah sebagai berikut : [sourcecode language=”plain”]<img src="../gambar.png">[/sourcecode] Artinya adalah kita memanggil gambar yang berada 1 tingkatan di luar folder milik file .html. Jika letak gambar berada 2 tingkatan di luar file .html, Anda bisa menambahkan 2 kali “../”, yaitu seperti di bawah : [sourcecode language=”plain”]<img src="../../gambar.png">[/sourcecode] Anda bisa membuat gambar tersebut menjadi bisa diklik dan mengarah ke halaman lain maupun domain lain dengan cara menambahkan tag <a> di luar gambar. Contoh penggunaan link pada gambar adalah seperti di bawah ini : [sourcecode language=”plain”]<a href=”url link”><img src=”url gambar”></a>[/sourcecode] Jadi, ketika gambar diklik akan mengarah ke url pada tag . Untuk lebih jelasnya, Anda bisa baca panduan cara membuat link pada HTML. Demikianlah cara menampilkan gambar di HTML dengan menggunakan tag Tag apa yang digunakan untuk menampilkan gambar pada halaman HTML?Gambar dapat kita tambakan di HTML dengan menggunakan tag <img> . Tag ini memiliki atribut wajib, yakni src . Jika kita tidak mengisi atribut src , maka gambar tidak akan ditampilkan.
Apa tag untuk menampilkan gambar?Dalam HTML, tag yang berfungsi untuk menampilkan gambar adalah tag <img>, singkatan dari image. Tag <img> merupakan jenis tag yang berdiri sendiri atau dalam konteks elemen, merupakan elemen tanpa tag penutup (empty element). Tag <img> memiliki atribut khusus yaitu src singkatan dari source yang berarti sumber.
Tag HTML manakah yang benar untuk menyisipkan gambar?Nah, tag yang digunakan untuk memasukan gambar pada dokumen HTML adalah menggunakan tag <img>.
Apa itu tag img?Tag <img>: Menyisipkan Gambar Pada HTML
HTML element tag <img> (image) merupakan tag HTML digunakan untuk menyisipkan suatu gambar ke dalam suatu halaman HTML. HTML element tag <img> berfungsi sebagai kontainer bagi suatu sumber daya gambar yang merujuk pada suatu URL dengan isi data file gambar.
|
Apa tag yang digunakan untuk menampilkan gambar pada web HTML?
Pos Terkait
Copyright © 2024 berikutyang Inc.
