Image and link

Dalam kesempatan kali ini penulis ingin menyampaikan sedikit mengenai bagaimana cara menampilkan gambar pada halaman web dan cara membuat link. Untuk prosesnya sendiri cukup mudah, hanya dengan menyisipkan tag html untuk keperluan tersebut, tidak perlu menggunakan algoritma ataupun berpikir panjang. Namun dengan demikian otomatis Anda harus hafal, minimalnya tahu tag apa yang digunakan untuk menampilkan gambar atau membuat link tersebut. apa maksud minimalnya tahu? Ialah karena di zaman yang se-modern sekarang ini. Cukup dengan Anda mengetahui kata kuncinya saja, walau Anda sendiri tidak hafal bagaimana cara menyisipkan gambar atau  membuat link tersebut, dapat dengan mengetikannya di mesin pencari /  browser, maka apa yang Anda butuhkan akan dengan mudah ditemukan. Namun kembali untuk kata kunci, Anda harus paham apa yang sebenarnya Anda cari, seperti saat Anda ingin mencari tahu cara menampilkan gambar di halaman web namun Anda hanya mengetikan pada browser “gambar”. Maka Anda sendiri akan kesulitan untuk mencarinya, karena mesin pencari tidak akan sepenuhnya mengerti apa yang Anda inginkan jika kata kunci yang Anda gunakanpun tidak sesuai dengan apa yang Anda maksudkan. Dan dengan demikian gambar yang akan muncul ialah gambar-gambar yang memang berformat gambar, bukan cara menampilkan gambar di halaman web. Dan itulah yang dimaksud oleh penulis mengapa walau Anda tidak hafal dengan tag htmlnya, setidaknya Anda tahu apa yang harus Anda cari pada saat Anda membutuhkannya.

Agar lebih mempersingkat waktu, maka alangkah lebih baiknya jika kita langsung saja kepada pembahasan, tidak perlu banyak berbasa-basi lagi. Untuk yang pertama ialah mengenai cara menampilkan gambar pada halaman web, tentunya Anda butuh code untuk menyisipkan gambarnya pada program html Anda. Dan tag yang digunakan dalam penyisipan gambar cukup mudah, karena hanya menggunakan satu tag yaitu tag img. Tag img ini merupakan tag yang digunakan untuk menyisipkan suatu gambar pada halaman web dengan program html. Caranya cukup mudah untuk menyisipkan gambar dengan tag yang satu ini, ialah dengan menuliskan <img>. Namun tidak cukup demikian karena Anda sendiri tentunya tidak tahu kan gambar apa yang akan Anda sisipkan pada halaman web Anda jika hanya ada tulisan img saja. Maka dengan itu penulis ingin menjelaskan sedikit mengenai attribute tag img sendiri. Atributnya antara lain yang pertama yaitu ada atribut src, atribut ini ialah untuk menentukan gambar mana yang ingin Anda gunakan/tampilkan pada halaman web Anda. Pada atribut ini berisikan sebuah url / alamat dari gambar tersebut berada. Jika Anda ingin membuat program tersebut secara offline, maka penulis sarankan untuk meletakan gambar tersebut dalam folder yang sama dengan program html yang telah Anda buat, karena untuk mempermudah dalam menentukan alamatnya. Jika terdapat dalam satu folder yang sama, ambil lah gambar tersebut memiliki nama gumilar.jpg. Maka Anda dapat menuliskan tag img seperti <img src=’gumilar.jpg’>. Namun jika misalkan gambar tersebut terdapat dalam folder yang sama namun gambar tersebut diletakan dalam folder baru didalam folder tersebut, maka Anda harus menuliskannya dengan nama folder itu sendiri. Misal nama foldernya “gambar”, maka Anda harus menulis <img src=’gambar/gumilar.jpg’>. Begitupun jika Anda menempatkan antara program html dengan gambarnya dalam folder yang berbeda, Anda harus menambahkan lagi dalam urlnya. Misal terdapat sebuah folder yang didalamnya berisikan 2 folder, yang satu bernama gambar untuk menyimpan gambarnya, yang satu diberi nama html untuk menyiman program htmlnya. Maka Anda harus menuliskan tag img seperti <img src=’../gambar/gumilar.jpg’>. Tanda ../ merupakan perintah untuk mundur satu langkah dari folder tampat html itu berada, sehingga setelah keluar dari folder tersebut, code html dapat menyusup kedalam folder gambar untuk mencari file gumilar.jpg. Kurang lebih seperti itu proses untuk menyisipkan gambar dan cara penyimpanan gambar untuk program yang offline.

Untuk program yang online sendiri cukup mudah, ialah cukup dengan menyisipkan url dari gambar tersebut kedalam tag <img src=’...’>, Anda tinggal mengganti titik-titik tersebut dengan url dari gambar yang Anda tuju. Sama halnya dengan yang offline tadi. Hanya saja jika offline, Anda harus pandai-pandai membaca dan mengolah folder tempat penyimpanan si gambar dengan htmlnya. Namun untuk yang offline cukup dengan menulliskan misal <img src=’http://goomilar97.blogspot.co.id/gumilar.jpg’>, cukup dengan seperti demikian maka gambarpun akan dengan sendirinya tampil dalam halaman web Anda. Namun tetap saja untuk url sendiri tidak dapat ditebak-tebak, harus sesuai dengan alamat asli dari gambar tersebut pada saat diupload.

Selain src, masih ada atribut lain yang dapat digunakan untuk mengolah gambar Anda dalam suatu halaman web, seperti halnya pada saat Anda ingin menambahkan garis disetiap sisi gambar sebagai bingkai, Anda dapat menggunakan atribut border. Atribut yang satu ini dapat Anda atur ketebalan garisnya dengan ukuran pixel atau persentase. Untuk penulisannya sendiri Anda daat menuliskannya dengan <img src=’..’ border=’2px’> yang artinya border tersebut ketebalannya 2 pixel. Dan ada pula atribut yang dapat Anda gunakan untuk menentukan posisi dari gambar yang Anda ingin tampilkan, misal jika gambar tersebut ingin diletakan diantara tulisan dan posisinya berada disebelah kiri tulisan, maka Anda dapat menuliskannya dengan <img src=’..’ align=’left’>, dan untuk pilihan posisi gambar html sendiri antara lain ada center, left, right, justify, top, bottom, middle, baseline. Silahkan dicoba masing-masing pilihannya untuk mengetahui perbedaannya masing-masing. Selain src, border dan atribut align, ada pula atribut untuk menentukan lebar dan tinggi dari gambar yang Anda ingin tampilkan. Untuk lebar Anda dapat menggunakan atribut width dan untuk tingginya Anda dpat menggunakan atribut height. Sama seperti sebelumnya untuk penggunaan ialah dengan cara menuliskan terlebih dahulu tag imgnya seperti <img src=’..’ width=’..’ height=’..’ align=’..’> dan yang lainnya. Namun jika ada pertanyaan mengapa penulis selalu memberi contoh tag img yang didalamnya selalu ada atribut src, ialah karena untuk menentukan gambar mana yang akan digunakan ialah dengan menggunakan atribut tersebut, tanpa atribut tersebut, maka semua atribut lainnya tidak akan mengubah dari gambar yang ingin Anda tampilkan.

Begitu untuk masalah tag img sebagai tag untuk menampilkan gambar di halaman html, namun untuk link sendiri ialah dengan cara menyisipkan tag anchor yang disertai dengan href. Pada tag anchor href atau yang biasa kita kenal dengan tag <a href> ini merupakan tag untuk membantu kita dalam pembuatan link, baik itu link untuk mengirim email, link untuk menuju webpage lain, ataupun untuk mempermudah proses download. Bagaimana caranya? Cukup mudah, ialah dengan cara menuliskan tag tersebut yang disertai dengan url didalamnya, misal Anda ingin membuat link untuk menuju webpage lain, maka Anda tinggal menuliskan <a href=’http://goomilar.blogspot.co.id’> tulisan yang ingin dibuat link </i>, atau pada saat Anda ingin menyisipkan link untuk sebuah pengiriman email, mudah saja tinggal menambahkan perintah mailto, bagaimana caranya? Ialah dengan menulis terlebih dahulu tag anchor hrefnya, seperti <a href=’mailto:remonc97@gmail.com’> kirim email untuk goomilar </a>, maka dengan demikian proses tersebut sudah dianggap selesai. Atau untuk mempermudah proses download, tinggal ditambahkan saja <a href=’http://goomilar.blogspot.co.id/download/file.zip’> tulisan yang ingin dibuat link </i>. Dengan semua proses tersebut, maka pembuatan link sebenarnya sudah cukup, terkecuali jika Anda ingin menambahkan variasi lain pada bentuk tulisan dll, karana tulisan yang diberi link pemberian warnanya sedikit berbeda dengan tulisan biasa yang tidak mengandung link. Untuk link, terdapat beberapa atribut pula yang dapat digunakan. Seperti atribut href seperti yang sudah dicontohkan diatas, atribut target untuk target window yang dituju (terdapat pilihan self, blank, top, parent), ada atribut name untuk nama labelnya dan atribut title untuk tooltipsnya. Atribut title sendiri akan berguna pada saat kursor didekatkan pada tulisan yang diberi link tersebut, maka akan ada tulisan yang muncul sebagai pemberi petunjuk, dan itu bebas dapat ditentukan oleh pembuat programnya. Untuk memperjelas penjelasan diatas, silahkan perhatikan contoh program berikut:

<html>

                <head/>

                <body>

                                <img src='gambar/gumilar.jpg' border='2px' width='400px' height='400px' align='left'>

                                semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar semua yang ditulis disini akan berada disebelah kanan gambar <br>

                                <img src='gambar/gumilar.jpg' border='12px' width='200px' height='200px'><br><br>

                                <a href='mailto:remonc97@gmail.com'>kirim email untuk goomilar</a><br><br>

                                <a href='goomilar97.blogspot.co.id' target='blank' title='kunjungi halaman goomilar 97..'>inilah blog milik goomilar</a>                         

                </body>

</html>

Dan hasil dari contoh program diatas ialah: