Apa jadi sebuah web hanya berisi keseluruhan hanya teks? Sama sekali tidak menarik dan membosankan. Untuk itu perlu sekiranya disisipkan gambar. Untuk menyisipkan gambar dalam html caranya cukup mudah. Yaitu dengan menggunaka format:
Dalam penyisipan gambar ini juga bisa dikustomisasi beberapa hal. Seperti alt dan title, panjang dan lebar serta tampilan rata-an (di tengah, kanan, atau kiri) serta bordernya. Untuk Lebih lengkap coba perhatikan dan compile kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Menyisipan Gambar pada HTML</title>
</head>
<body>
<h3 id="judul1">Lagi Belajar Menyisipkan Gambar pada HTML</h3>
<p>Ini adalah pembelajaran saya dalam penyisipan gambar. Tujuannya agar web saya terlihat mantab sekali.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSEx69cSU-QG6FuqW2rRbEfCMOntFSsxJlUMM-saD-R9YnuaR6_IPuQvqmzdGk2TndPpxXFkwZdMnXJCyUblKfD3ExbIEVn77ZR97YBpVvYuzwldr6LAUEimlXmrc5SLdkyatG3JhZFJc/s1600/international+shopping.png" title =" ini gambar bro " alt="Beneran ini gambarnya" height="100px" width =" 300px"
align="left"/>
Semoga dengan adanya pembelajaran ini saya bisa membuat sebuah website yang ok punya
</p>
</body>
</html>
Dari bagian kode yang berwarna merah, terlihat beberapa ada tambahan dari format awal penyisipan gambar. Tambaha tersebut yang pertama ada title =" ini gambar bro " ini sama fungsinya ketika menyisipkan link. Ketika kursor ditaruh pada gambar maka akan terlihat judul gambar.
Selanjutnya ada : alt="Beneran ini gambarnya" fungsi alt ini adalah sebagai bahan referensi untuk mesin pencari dalam mengenali maksud gambar ini apa. Dari literatur yang diperoleh dari internet, alt ini berperan untuk SEO -nya web pada search engine.
Berikutnya ada height="100px" width =" 300px" bagian ini dimaksudkan untuk mengatur ukuran tampilan gambar. Ukuran tersebut ditulis dalam pixel. height adalah untuk tinggi gambar dan width untuk menentukan lebar gambar yang ditampilkan.
Terakhir ada align="left" yang menunjukan posisi gambar. Dalam contoh di atas gambar berada pada bagian kiri. Perintah lain bisa digunakan adalah center untuk posisi gambar ditengah, right untuk posisi gambar dikanan. Untuk demonya anda bisa ganti kode di atas lalu compile kode tersebut.
Untuk gambar ini digunakan tag penutup </img> pada akhir element. Namun untuk mempersingkat penulisan bisa digunakan self-closing dengan mengunakan /> pada akhir element tersebut. Itulah cara mudah menyisipkan gambar pada halaman html.
<img src="alamatgambar"/>Alamat gambar disini merujuk pada sumber hostingan gambar. Jika, untuk melihat alamat gambar ini bisa pada bagian mana disimpan gambar tersebut dalam hostingan. Sementara jika gambar diambil dari sumber web lain, alamat gambar bsa diambil dengan cara : KLik kanan gambar - Copy Image Address.
Dalam penyisipan gambar ini juga bisa dikustomisasi beberapa hal. Seperti alt dan title, panjang dan lebar serta tampilan rata-an (di tengah, kanan, atau kiri) serta bordernya. Untuk Lebih lengkap coba perhatikan dan compile kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Menyisipan Gambar pada HTML</title>
</head>
<body>
<h3 id="judul1">Lagi Belajar Menyisipkan Gambar pada HTML</h3>
<p>Ini adalah pembelajaran saya dalam penyisipan gambar. Tujuannya agar web saya terlihat mantab sekali.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSEx69cSU-QG6FuqW2rRbEfCMOntFSsxJlUMM-saD-R9YnuaR6_IPuQvqmzdGk2TndPpxXFkwZdMnXJCyUblKfD3ExbIEVn77ZR97YBpVvYuzwldr6LAUEimlXmrc5SLdkyatG3JhZFJc/s1600/international+shopping.png" title =" ini gambar bro " alt="Beneran ini gambarnya" height="100px" width =" 300px"
align="left"/>
Semoga dengan adanya pembelajaran ini saya bisa membuat sebuah website yang ok punya
</p>
</body>
</html>
Selanjutnya ada : alt="Beneran ini gambarnya" fungsi alt ini adalah sebagai bahan referensi untuk mesin pencari dalam mengenali maksud gambar ini apa. Dari literatur yang diperoleh dari internet, alt ini berperan untuk SEO -nya web pada search engine.
Berikutnya ada height="100px" width =" 300px" bagian ini dimaksudkan untuk mengatur ukuran tampilan gambar. Ukuran tersebut ditulis dalam pixel. height adalah untuk tinggi gambar dan width untuk menentukan lebar gambar yang ditampilkan.
Terakhir ada align="left" yang menunjukan posisi gambar. Dalam contoh di atas gambar berada pada bagian kiri. Perintah lain bisa digunakan adalah center untuk posisi gambar ditengah, right untuk posisi gambar dikanan. Untuk demonya anda bisa ganti kode di atas lalu compile kode tersebut.
Untuk gambar ini digunakan tag penutup </img> pada akhir element. Namun untuk mempersingkat penulisan bisa digunakan self-closing dengan mengunakan /> pada akhir element tersebut. Itulah cara mudah menyisipkan gambar pada halaman html.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment