Kode Gambar dalam HTML


Assalamu'alaikum! Hei, hari ini aku mau cerita sedikit tentang gambar. Kemarin ada yang nanya ke aku soal gambar di Blogger, jadi aku mau cerita sedikit aja. Oh, ya, ngomong-ngomong gambar, aku punya cerita unik dan lucu buatku. Eheh, lagi-lagi lucu, ya?

Adikku yang kelas satu SD, mau bikin blog! Aduh, manis banget, deh! Dulu, dia main interner itu cuma buat main game, nyari gambar, dan paling banter nonton kartun di YouTube. Semua itu pun juga nggak jauh-jauh dari Ben 10—sekarang berkembang jadi Generator Rex juga. :P

Sekarang, adikku udah punya e-mail, sekalipun belum terlalu berguna. Soalnya dia cuma mau lihat tema-tema di Gmail yang lucu-lucu. Gara-gara aku bikin blog, ternyata dia tertarik juga! Tapi, isinya jelas masih "adikku banget". Katanya, ntar dia mau bikin gambar, terus diposting. Awalnya dia agak ragu juga, soalnya dia ngaku gambarannya jelek. Aku bilang nggak papa, pasti nggak jelek-jelek banget. Sayangnya, kemungkinan besar kalo dia kesenengan, itu bisa ngganggu kegiatannya yang lebih penting, terutama belajar. Jadi, aku bilang ke dia, postingnya per minggu aja, tiap hari Ahad, misalnya, biar dia tetep bisa belajar. Do'ain adikku, ya, biar blognya sukses!^^ Paling, ntar nggak jauh-jauh amat dari Ben 10 atau Generator Rex... :D

Oh, ya, malah jadi ke mana-mana, nih! XP Kita kembali ke topik tentang gambar. Sebenernya, semua gambar di internet itu punya URL sendiri. Kalo nggak ngerti URL (Uniform Resource Locator), gampangnya bisa disamain sama address atau alamat di address bar. Misalnya kalo blog ini, alamatnya: http://onlyformytest.blogspot.com/, itu berarti URLnya juga itu. Intinya, URL itu untuk menunjukkan lokasi suatu dokumen atau gambar di internet. Kalo gambar, aku juga punya contoh, misalnya ini: http://i48.tinypic.com/2qlz96a.jpg.

Boleh diskip? Biar cepet... XD

Kalo di Blogger, semua gambar yang kita upload akan disimpan di Album Web Picasa. Jadi, kalau sewaktu-waktu kita mau pakai lagi, kita bisa langsung pakai tanpa harus mengupload ulang. Oke, semuanya pasti udah tahu caranya masukin gambar ke dalam postingan, karena di semua blog caranya sama sekalipun sistemnya agak berbeda. Tenang aja, intinya sama, kok!^^

Kalo gitu, kita skip lagi aja, ya! Aku mau langsung ke gambar di sidebar. Oh, ya, FYI, sidebar itu adalah tempat di pinggir kanan, kiri, maupun keduanya, di mana widget—gadget kalo bahasanya Blogger—bisa ditampilkan. Di Blogger, kita bisa langsung nambahin gambar pakai fungi Tambah Gadget. Pilih aja gadget Gambar, dan kita bisa mengupload atau menampilkan gambar dengan mengetikkan URL gambar. URL gambar itu, pastinya diakhiri dengan ekstension gambar, semisal .jpg, .png, .gif, atau ekstension gambar lainnya.

Untuk me-resize (mengubar ukuran) gambar lewat Blogger, perhatikan opsi di paling bawah tentang ukuran. Pilih satu, dan lewat situlah gambar bisa berubah ukurannya.

Tapi, ada cara lain untuk menampilkan gambar di sidebar—nantinya kita akan tahu kalau fungsi ini juga bisa digunakan di banyak tempat lainnya. Pertama, perhatikan kode di bawah ini:

<img src="url-gambar" alt="kalimat-pengganti" title="judul" width="panjang" height="tinggi" border="0">

  • Warna merah diisi dengan URL gambar yang kamu punya. URL gambar ini harus tersedia dan valid di internet.
  • Warna oranye adalah judul gambar yang hanya tampil jika gambar tidak dapat ditampilkan. Ini boleh dihilangkan, kalo emang nggak berkenan... :D
  • Warna hijau digunakan sebagai judul gambar. Sewaktu kursor berada di atas gambar, maka judul akan muncul. Boleh dicoba, tapi kalo nggak mau juga nggak usah ditulis!^^
  • Warna biru berisi ukuran gambar. Di sinilah kita me-resize gambar kita. Perlu diingat, ukuran di sini ditulis dalam satuan piksel atau biasa disingkat px. Kalo fungsi ini nggak dituliskan, maka ukuran gambar akan sesuai dengan aslinya.
  • Warna pink berfungsi untuk memberikan garis tepi (border) pada gambar. Border di sini juga menggunakan satuan piksel. Ketika fungsi ini nggak ditulis, maka gambar nggak ada bordernya, atau akan disesuaikan dengan pengaturan CSS. Note: Kalo bingung CSS, abaikan saja dulu. Ntar lain waktu kita bahas, key? ;)

Itu adalah dasar-dasarnya. Sekarang, aku kasih satu contoh, oke? Di bawah ini adalah sebuah kode gambar:

<img src="http://i42.tinypic.com/14tro95.jpg" title="Forever Friends">

Kode di atas akan menjadi gambar seperti ini:



Karena fungsi border nggak ditulis, maka border yang kamu lihat sekarang itu telah disesuaikan sama kode CSS yang udah tercakup dalam template.

Sekarang udah punya gambaran, kan? Jangan lupa, pastikan URL yang dimasukkan itu benar. Kalo mau punya URL gambar buat foto-fotomu sendiri, bisa diupload ke Blogger (Picasa Web Album), Photobucket, Flickr, atau tempat-tempat penyimpanan foto lainnya.

Kelihatan rumit? Kalo iya, coba sedikit tenangkan diri, lalu resapi kata-kata yang aku kutip dari sebuah novel ini:

Apapun yang kaurasakan, simpan di dalam.

Kalo merasa sulit, cobalah menyimpannya, jangan sampai perasaan itu keluar menjadi sebuah keluhan atau cacian dan makian. Ubah saja perasaan sulit itu menjadi perasaan lain yang bisa membuat kita semakin optimis. Yakin aja, kalo kita bisa, kalo semua yang kita lakukan sekarang akan bermanfaat ke depannya nanti, kalo setelah melewati ini, maka kita akan mendapatkan kepuasan tersendiri.

Coba dan lihat aja! Percaya, deh! :)

Leave a Reply

(: my notes of thoughts :)
Powered by Blogger.