Tuesday, February 17, 2009

Tutorial Menampilkan Gambar di Comment dan di Web-Page

Tutorial ini diperuntukkan bagi mereka yang belum begitu paham tentang bagaimana memasang gambar / image di Reply-box Comment maupun di Web Page ( halaman Website ), atau menyegarkan kembali ingatan tentang dasar pemikiran pemasangan Image, bagi yang lupa-lupa ingat.
Perintah / command untuk pemasangan image ini cukup sederhana, yaitu :

<img src="http://images.multiply.com/multiply/splash/headerlogo.gif"/>

dan browser akan menampilkannya sbb :




<img disebut sebagai "Tag dari perintah bahasa HTML" untuk menampilkan gambar / image di layar kamputer melalui Browser Internet.
Tag ini akan dikenali oleh browser sebagai perintah apabila disebelah kiri tulisan img diberi tanda < . Jika kode img tidak diberi tanda <, browser akan mengartikannya sebagai text saja, dan akan ditampilkan di layar sebagai tulisan img, tanpa mengandung arti apapun.
Semua Tag atau perintah pada HTML selalu mempunyai pasangan tanda < dan >.
Maksudnya adalah, browser harus diberi pengertian perintah dimulai dari mana dan berakhir di mana.
Jadi, perintah / tag <img src="http://images.multiply.com/multiply/splash/headerlogo.gif"/>
mempunyai arti sbb:
Tampilkan image ( <img ) yang source-nya ( src= ) berasal dari server http yaitu http://images.multiply.com di subdirectory ./multiply/splash/ dengan nama file headerlogo yang ber-extension .gif dan perintah selesai ( /> )


Dengan demikian maka, jelaslah bahwa perintah ini akan dilaksanakan oleh browser di seluruh dunia yang terhubung / connected dengan jaringan Internet untuk menampilkan gambar yang berada di server multiply.com

Gambar / image acapkali tidak berhasil ditampilkan apabila pada saat itu, secara real komputer kita tidak terhubung ke Internet, atau server multiply.com sedang ngadat dan tidak merespons permintaan browser. Semua hubungan, koneksi dimulai dari komputer kita yang berada di sudut ruangan, melewati Modem, melewati Routers, Backbone Asia, kabel bawah laut antar benua, melewati Backbone Amerika Utara dan seterusnya sampai ke server Multiply.com harus terhubung pasti dan tidak ada error 1 (satu) bit-pun agar perintah sederhana di atas terlaksana dengan baik.

Permintaan untuk menampilkan gambar / image tersebut, seperti yang telah saya sebutkan di atas, yaitu ditulis dengan bahasa HTML atau HyperText Markup Language.
Karena berupa text, maka kode perintah-perintahnya dapat kita kenali serta gampang dipahami. Text-nya sendiri berupa singkatan dari bahasa Inggris. Kita tidak perlu lagi berkomunikasi dengan browser memakai bahasa mesin 0100 0110 biner, yang mana 1 diwakili tegangan +5volt dan 0 dengan -5volt pada CPU berbasis tegangan 5volt.

Perintah sederhana seperti <img src="http://images.multiply.com/multiply/splash/headerlogo.gif"/> bisa diganti dengan source dari site / server manapun. Apakah dari Multiply.com, Google.com atau Photobucket.com dan lain sebagainya.
Apabila kita menginginkan gambar / image yang berada di hardisk komputer bisa dipanggil oleh browser yang terhubung ke jaringan World Wide Web ( sekarang cukup disebut Web saja ) dengan protocol TCP/IP atau Internet, maka gambar kita harus kita Upload ke server yang selalu terhubung 24 jam sehari, 7 hari seminggu.
Mengapa demikian ?
Jawabannya adalah, karena kita tidak bisa memperkirakan, kapan gambar akan diminta oleh user di seantero bumi ini untuk ditampilkan, pagi, siang, sore atau malam.
Gambar harus siap selama 24 jam sehari, 7 hari seminggu tanpa istirahat ( kecuali saat maintenance / perawatan ) atau dengan kata lain, siap dipanggil kapanpun.

Semoga bermanfaat.
Enjoy.

44 comments:

  1. mas lilok
    cara melihat source dari sebuah gambar di suatu web gimana mas?

    seumpamanya untuk mengtehui kalau gambar:


    sourcenya adalah http://images.multiply.com/multiply/splash/headerlogo.gif ini dari mana?

    ReplyDelete
  2. gampang saja, klik kanan pada gambar -> Copy link location
    alamat gambar akan disimpan di clipboard, Ctrl + V untuk paste.
    atau, klik kanan pada gambar -> View Image
    perhatikan di address-bar browser anda, di situ diterakan alamat lengkap gambar yang dimaksud.

    ReplyDelete
  3. he he he....
    kereen... tengkiyu mas...
    dari dulu aku kalo mau nampilin gambar mesti ambil dari photobucket terus soalnya.... gak taunya ternyata ada cara yang jauh lebih praktis...
    tengkiyu tengkiyu tengkiyu.....

    ReplyDelete
  4. mas kalau mau menjejerkan dua gambar gimana?
    aku barusan mau coba ndak bisa...

    ReplyDelete
  5. hehehe ... gajah di pelupuk mata kadang emang ga tampak (soalnya, yang nampak kutunya) ...
    makasih kembali.

    ReplyDelete
  6. wuih lengkapnya..
    thanks for sharing a.k.a.TFS om :D

    ReplyDelete
  7. @mas doni
    lakukan hal yg sama kepada gambar kedua seperti halnya yg anda lakukan pada headshot anda sebelumnya :D

    ReplyDelete
  8. he he he.... seep bos... beres... tengkiyu lagiii

    ReplyDelete
  9. Matabb banget mas Lilok,
    ma kasih atas tambahan ilmunya

    ReplyDelete
  10. banner aye model bginian semua ^ ^ ,
    hahhhh... sial, jadi ketahuan dah triknya ^

    ReplyDelete
  11. klo link PhotoBucket , gbr bisa diblokir klo belum join ma PB

    ReplyDelete
  12. pelan pelan dapet tambahan ilmunya hehehe **********

    ReplyDelete
  13. !! WARNING:: hatihati klo ngasih image di Box Comment , cari yg layoutnya dinamis/kompatibel klo sewaktu2 sipemilik situs ganti THEME , background colour BoxComment kadang2 ikut berubah !!

    ReplyDelete
  14. halah.... cobanya pake gambar sendiri za.... jangan bawa-bawa foto orang laeen!!!!
    hua ka ka ka

    ReplyDelete
  15. pengen ikutan belajar, tapi belum jelas cara mengaktifkan perintah itu
    diketik ato di save di kolom ccs?

    ReplyDelete
  16. diketikkan di box comment, seperti saya ketik saat ini.
    jika saya tuliskan <img src="http://images.lalarosa.multiply.com/logo">
    maka akan ditampilkan gambar sbb.

    ReplyDelete
  17. trims banyak ya bung dangdutkoplo hahahah3..

    ReplyDelete
  18. eh...ga kluar gambarnya...
    coba sekali lagi

    ReplyDelete
  19. Makasih kembali.
    Get more dangdut! | Belajar & Berbagi

    ReplyDelete
  20. kalau IMAGE bikinan kita setelah di host-kan imagenya kita di jadikan background di balik tulisan Multiply (dibalik Logo multiply) , kode CSS nya gmn OM ?

    tolong send message di Multiply saya juga ya om kalau sempat,, soalnya saya sibuk dinas luar kota jd jarang online tepat waktu.

    ReplyDelete