11 - Cara Menambahkan Gambar Di Html (Tag Image)
Sulit membayangkan sebuah halaman HTML tanpa gambar untuk standard web ketika ini. Pada tutorial mencar ilmu HTML cara menambahkan gambar di HTML ini kita akan mempelajari cara penggunaan tag image. Tag Image dipakai untuk menampilkan gambar kedalam halaman web, memakai <img>.
Atribut src dalam tag <img>
Atribut src ialah abreviasi dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Alamat ini sanggup relatif atau absolute. (perbedaan perihal alamat relatif dan alamat absolute telah kita bahas pada Belajar HTML: Cara Membuat link di HTML).
Untuk teladan arahan HTML perihal image ini, sediakan sebuah gambar yang akan dipakai sebagai tampilan, dan tempatkan gambar tersebut ke dalam satu folder dengan halaman contoh. Gambar sanggup berupa JPEG, PNG, maupun GIF.
Pada teladan dibawah ini aku memakai sebuah gambar koala.jpg yang berada dalam satu folder dengan halaman HTML ketika ini. Savelah sebagai img.html
Contoh penggunaan tag <img>:
1 2 3 4 5 6 7 8 9 10 | <!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 mempunyai elemen, sehingga eksklusif ditutup dengan />
<!DOCTYPE html><html><head> <title>Penggunaan Tag Image</title></head><body> <h1>Belajar Tag Gambar</h1> <img alt="gambar koala" src="koala.jpg"/></body></html> Atribut width dan height dalam tag <img>
Atribut lainnya membolehkan kita untuk memilih besar dari gambar yang ditampilkan, yaitu width dan height.
Contoh penggunaan atribut width dan height pada tag <img>:
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html><html><head> <title>Penggunaan Tag Image</title></head><body> <h1>Belajar Tag Gambar</h1> <img alt="Gambar Koala" src="koala.jpg" height="200" width="100" /></body></html> |
Pada penggunaan tag image diatas, gambar terlihat tidak proporsional, hal ini alasannya ialah penggunaan atribut width dan height ‘memaksa‘ gambar untuk tampil dengan nilai yang kita tetapkan.
Untuk mempertahankan proporsi gambar, namun tetap menciptakan gambar menjadi besar/kecil, cantumkan hanya salah satu atribut saja (width saja atau height saja, namun tidak keduanya). Misalkan kalau kita memutuskan atribut width=300px (tanpa mencantumkan height), maka web browser akan menampilkan gambar dengan lebar 300px, dan menghitung secara otomatis tinggi gambar biar gambar tetap proporsional.
Untuk menampilkan data, baik itu berasal dari database atau dari sumber lain, akan lebih rapi kalau memakai tabel. Dalam tutorial mencar ilmu HTML dasar selanjutnya, kita akan membahas perihal Cara Membuat tabel di HTML memakai tag <table>.
Dosen Desain Web 1 | Muqorobin, S.Kom
Dosen Desain Web 1 | Muqorobin, S.Kom
