sekarang kita akan belajar memasukan gambar pada HTML. sebuah halaman web tenpa sebuah gambar rasanya tidak enak dilihat, maka dari itu di dalam HTML ada tag untuk menyisipkan gambar pada dokumen HTML, yaitu tag image atau ditulis <img>. tag <img> digunakan untuk menyisipkan gambar pada dokumen HTML, dan tag ini tidak menggunakan tag penutup, tag ini dapat menampilkan gambar dengan format jpg, png atau gif
atribut src atau kependekan dari source yaitu atribut yang berisi alamat file gambar yang ingin ditampilkan. alamat file yang ditampilkan bisa dari komputer sendiri atau bisa dari situs lain.
berikut contoh penulisan, jika file gambar berada satu folder dengan dokumen html kita.
<img src="namaGambar.jpg">
jika file gambar kita berada di dalam folder berbeda yaitu sebagi berikut:
<img src="namaFolder/namaGambar.jpg">
jika diluar dari folder file html yaitu sebagai berikut:
<img src="../namaGambar.jpg">
berikut contoh lengkap penulisannya:
<!DOCTYPE html> <html> <head> <title>membuat gambar pada html</title> </head> <body> <h2>membuat gambar pada HTML</h2> <img src="gambar.jpg"> </body> </html>
mengatur ukuran gambar
dari hasil di atas terlihat bahwa gambar yang di tampilkan sangat besar sehingga tidak enak dipandang, maka dari itu ada atribut untuk mengatur ukuran gambar yaitu width dan height.
width digunakan untuk mengatur lebar gambar sementara height digunakan untuk mengatur tinggi gambar. value yang digunakan berupa angka.
<!DOCTYPE html> <html> <head> <title>membuat gambar pada html</title> </head> <body> <h2>membuat gambar pada HTML</h2> <img src="gambar.jpg" width="300" height="200"> </body> </html>
Atribut alternative description (alt)
atribut alt digunakan untuk menampilkan keterangan jika gambar gagal di tampilkan browser, atau browser sudah diatur untuk tidak menampilkan gambar.
<!DOCTYPE html> <html> <head> <title>membuat gambar pada html</title> </head> <body> <h2>membuat gambar pada HTML</h2> <img src="gambar.jpg" width="300" height="200" alt="gambar logo html"> </body> </html>
jika gambar gagal ditampilkan oleh browser maka hasilnya sebagai berikut.
Gambar sebagai link
link juga bisa berupa gambar, yaitu jika gambar tersebut di klik maka akan mengarah ke halaman yang lan. penerapan gambar sebagai link ini biasanya terdapat pada iklan.
cara membuat gambar sebagai link ini sebelumnya telah di bahas pada tutorial belajar membuat link HTML
berikut contoh penulisannya:
<!DOCTYPE html> <html> <head> <title>membuat gambar pada html</title> </head> <body> <h2>membuat gambar pada HTML</h2> <a href="http://otnasus18.blogspot.com"><img src="gambar.jpg" width="300" height="200" alt="gambar logo html"></a> </body> </html>
0 comments for "Belajar HTML Part 11: Cara Menambahkan Gambar Pada HTML"
Post a Comment