Menambah Gambar Ke Dalam Web

Kali ini adalah salah satu tag terpenting dalam dunia html. Knp? Dengan memasukkan sebuah gambar dalam sebuah web atau blog anda tentulah akan menambah nilai dari web / blog anda itu sendiri. Web anda akan terlihat membosankan tanpa gambar walaupun kontennya menarik. Jadi titik balik keindahan web/blog adalah bagaimana anda memasukkan gambar menarik di dalamnya. Baiklah, kita langsung saja simak tabel berikut :

Tag image – ketikweb.blogspot.com
Kode HTML	Fungsi
<img src="lokasi dan nama file gambar" />	Memasukkan gambar. Lokasinya adalah dimana lokasi gambar tersimpan di web. Misalkan lokasinya berada di : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCROCOhggmq_gNDVIibKTgy0lyykeN7jrKTwkb7qIiHUjeeGmBpfppPUl9y7DLiNu5KDKlewP2hb456PhuZmkH5vJLbtatcNR_R2oc9XOVwf0oecIIcugJnFybTCVaWBTeDCJtIrmT8sg/s1600/ketikweb.gif".
<img src="lokasi dan nama file gambar" align=? />	Mengatur letak gambar pada halaman web atau blog. Atribut align dapat diisi dengan value: left, right, center; bottom, top, middle
<img src="lokasi dan nama file gambar" border=? />	Membuat border atau batas yang mengelilingi gambar layaknya bingkai. Atribut border diisi dengan value angka. Untuk angka 1 adalah yang terkecil.
<img src= “lokasi dan nama file gambar” alt=”letak alternatif” />	Mengatur tampilan lainnya jika gambar tidak dapat tampil.
<img src= “lokasi dan nama file gambar” width=? Height=? />	Mengatur ukuran lebar dan tinggi gambar. Valuenya dengan angka hitungan pixel.
Catatan : Semua atribut di atas bisa digabungkan. Contoh: <img src="images/cilbut.jpg" width="209" height="214" alt="Maaf gambarnya tidak muncul" />

Kita langsung pada prakteknya saja : Siapkan notepad atau software pembuat web anda (misalnya Adobe Dreamweaver). Buka file dokumen yang baru dan ketikkan kode html berikut :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Belajar web tag image - ketikweb.blogspot.com</title>
</head>
<body>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCROCOhggmq_gNDVIibKTgy0lyykeN7jrKTwkb7qIiHUjeeGmBpfppPUl9y7DLiNu5KDKlewP2hb456PhuZmkH5vJLbtatcNR_R2oc9XOVwf0oecIIcugJnFybTCVaWBTeDCJtIrmT8sg/s1600/ketikweb.gif" align="left" border="2" width="100" height="100" /></body>
</body>
</html>

Hasilnya kira - kira akan seperti ini :

Perhatikan statement berikut :

Gambar di atas diambil dari lokasi :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCROCOhggmq_gNDVIibKTgy0lyykeN7jrKTwkb7qIiHUjeeGmBpfppPUl9y7DLiNu5KDKlewP2hb456PhuZmkH5vJLbtatcNR_R2oc9XOVwf0oecIIcugJnFybTCVaWBTeDCJtIrmT8sg/s1600/ketikweb.gif

Kemudian gambar ini diatur letaknya pada sebelah kiri halaman dengan bingkai ketebalan 2 :
align="left"
border="2"

Lalu, gambar ini diatur hingga tampilannya dengan ukuran tinggi 100 dan lebar 100:
width="100" height="100"

dan jangan lupa penutup tag />.

Bagaimana kawan? Asikkan? Silahkan anda coba bereksperimen sendiri dengan menggunakan gambar anda sendiri. Sebelumnya mungkin saya sedikit penjelasan. Untuk mengambil gambar tentunya anda harus menyimpannya dulu di server web. Terserah anda dimana saja boleh. Setelah itu anda lihat lokasi file gambar yang anda simpan tersebut dimana. Lalu anda tinggal copy paste alamatnya untuk dimasukkan ke perintah tag <img src="lokasinya">.

Okey? Semoga bermanfaat. Sampai ketemu pada postingan berikutnya...

as website a html about html belajar css belajar website belajar html belajar pembelajaran bahasa inggris belajar bahasa inggris belajar php belajar mendesain web css to html cara web cara membuat web cara belajar web cara belajar cepat cara belajar code code html contoh css cara mendesain web cara mendesain website designer web design web design web free edit html e-book css ebook css free web html to css how to html. html code for, html code, html for program web pengertian web i web in html kode html membuat web .com membuat web membuat css membuat website gratis make a web mudah belajar metode belajar mendesain web mendesain website situs web syntax html tutorial web the web text to html tutorial css tutorial html tutorial php webmaster web belajar website belajar web site web page website web design web sites web indonesia web gratis web magazine web hosting.

Share ke Google	"Sobat suka postingan ini? Silahkan copy link dibawah ini dan paste ke web, blog, atau sosial media sobat yang nantinya akan menghubungkan sobat langsung dengan postingan ini. "
<a href="http://ketikweb.blogspot.com/2012/06/perkenalan-tag-image-pada-html.html">Menambah Gambar Ke Dalam Web</a>