Image HTML

Oke kali ini saya akan mejelaskan bagaimana cara menyisipkan sebuah gambar/image pada dokumen HTML. Nah pada saat hendak menyisipkan image/gambar itu di dokumen HTML, maka tag yang di gunakan adalah tag <img src=”nama_gambar”>
Daripada lama-lama mending kita langsung praktek aja.Hehe
Ini dia contohnya:

<html>
<body>
<img src=”http://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Tux.png/220px-Tux.png” />
<p>Contoh di atas adalah gambar dari si Tux</p>
</body>
</html>

Dan ini dia hasilnya:


Contoh di atas adalah gambar dari si Tux

Penjelasan:
Jadi dari script HTML di atas, pada img src-nya itu menuju kesebuah URL/alamat web yang sebelumnya sudah di upload sebuah gambar.
Nah bagaimana kalau ingin memakai gambar yang terletak di komputer?

Sebenarnya mudah saja. Misal anda mempunyai gambar bernama gambarku.jpg di komputer. Nah file gambarku.jpg itu anda copy dan simpan dalam satu folder bersama script misal img.html

Bingung?

Lihat gambar di bawah ini:

img-html

Tampilan di atas adalah folder img dan di dalamnya terdapat 2 buah file, yaitu gambarku.png dan img.html. Ini dia contohnya:

img-html1

Nah mengerti kan maksudnya?
Sekarang edit file img.html menjadi seperti ini:

<html>
<body>
<img src=”gambaruku.png” />
<p>Contoh di atas mendemonstrasikan img src pada file gambar dengan lokasi path yang sama dengan dokumen htmlnya</p>
</body>
</html>

Nah ini dia kira-kira hasilnya pas file img.html dibuka:

img-html2

Aignment Image

Nah dari judul di atas, align image adalah mengatur pemosisian gambar pada saat ditampilkan oleh browser.
Contoh:

<html>
<body>
<p>Ini Adalah gambar
<img src=”http://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Tux.png/220px-Tux.png&#8221; align=”bottom” />
Si tux yang ganteng dengan align bottom (default).Hehe</p>
<p>Ini Adalah gambar
<img src=”http://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Tux.png/220px-Tux.png&#8221; align=”middle” />
Si tux yang ganteng dengan align middle.Hehe</p>
<p>Ini Adalah gambar
<img src=”http://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Tux.png/220px-Tux.png&#8221; align=”top” />
Si tux yang ganteng dengan align top.Hehe</p>
</body>
</html>

Hasilnya bisa di lihat di browser masing-masing ya?Hehe

Floating Image

Floating image itu sama aja dengan menampilkan gambar secara mengambang. Bisa mengambang di sebelah kiri atau kanan teks.
Contoh kodenya:

<html>
<body>
<img src=”gambaruku.png” align=”left” />
<p>Gambar ini akan mengambang di sebelah kiri. Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla </p>
<img src=”gambaruku.png” align=”right” />
<p>Gambar ini akan mengambang di sebelah kanan. Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla </p>
</body>
</html>

Image Adjustment

Kali ini adalah contoh bagaimana mengatur ukuran suatu image.
Contohnya:

<html>
<body>
<p>
<img src=”gambaruku.png”  width=”40″ height=”40″ /><br />
<img src=”gambaruku.png”  width=”45″ height=”45″ /><br />
<img src=”gambaruku.png”  width=”50″ height=”50″ /><br />
</p>
<p>
Kita dapat mengatur ukuran sebuah gambar dengan menggunakan perintah di atas, tapi alangkah lebih baiknya apabila gambar itu telah di sesuaikan dahulu dengan menggunakan aplikasi untuk meresize gambar seperti Gimp dan lain-lain. Jadi tak perlu lagi menggunakan perintah width dan height, karena untuk mempercepat proses load pada website kita.
</p>
</body>
</html>

Alternative Teks Image

Oke sekarang saya akan menjelaskan apa itu teks alternative image. Teks alternatife image tu biasanya digunakan apabila disaat ada seseorang yang mengakses website kita, tapi saat dia mengakses website kita itu, kemampuan menampilkan image pada browser yang digunakan itu dimatikan, jadi otomatis si pengakses itu kan gak bisa melihat gambar di website kita. Nah di sinilah fungsi dari alternative image digunakan, yaitu untuk memberitahu bahwa itu adalah sebuah gambar dengan menampilkan sebuah teks. Misal seperti saat kita mengakses 0.facebook.com, nah disitu kan gak terlihat ada gambar kan? Tapi facebook memberitahu dengan sebuah teks bertulisan image sekaligus dengan link-nya. Atau misal saat kita menggunakan browser yang terkenal di Linux dengan mode teksnya yaitu Lynx.. Nah daripada bingung, mending lihat dah ini dia contohnya:

<html>
<body>
<p>
<img src=”gambaruku.png”  alt=”Gambar” /><br />
</p>
<p>
Dengan alternative image, maka gambar akan ditampilkan dengan sebuah teks bertuliskan Gambar..</p>
</body>
</html>

Gambar sebagai suatu Link

Pernah gak melihat gambar bertulisan donwload here atau download saja dengan bentuk bulat, persegi, dan lain-lain?
Nah kalau sudah pernah, itu adalah penampakan dari gambar sebagai suatu link.Hehe
Contohnya:

<html>
<body>
<p>
<a href=”test.html”><img border=”0″ src=”download-button.gif” /></a>
</p>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s