Tag - Tag Image & Link

Tag-tag Image & Link

            Image disini diartikan citra atau gambar, yang  digunakan pada suatu homepage (laman) untuk mempercantik tampilan sehingga apabila laman di-publish akan banyak menarik pengunjung untuk melihatnya. Suatu Citra memang mempunyai “seribu satu” makna yang setiap orang mempunyai kata yang berbeda dalam menafsirkan suatu citra.

            Meskipun citra merupakan daya tarik tersendiri dalam menghiasi suatu laman, akan tetapi perlu diperhatikan bahwa semakin banyak citra yang menghiasi suatu laman, maka kecepatan tampil dari laman tersebut memerlukan waktu yang relatif lama dibandingkan laman-laman yang tanpa citra. Oleh sebab itu maka digunakan citra yang mempunyai ukuran kecil, yaitu menggunakan  teknik kompresi, sehingga citra dapat dimampatkan sedemikian sehingga menjadi lebih kecil ukuran byte-nya dari sebelum dilakukan kompresi. File citra dengan ekstensi *.BMP sangat tidak baik untuk digunakan untuk menghiasi laman, karena tidak menggunakan teknik kompresi sehingga ukurannya besar.

            Berikut ini adalah file-file citra yang mempunyai teknik kompresi tinggi dan sering dijumpai dan digunakan untuk menghiasi laman di Internet, yaitu:

Ø  Citra dengan format kompresi PNG (Portable Network Graphics), menggunakan teknik kompresi pengelompokan jumlah pixel, yaitu  pixel yang sama disimpan sekali dan diikuti dengan jumlah pixel pada citra aslinya, sehingga format citra ini sesuai untuk citra yang mempunyai banyak pixel sama, seperti pada citra statistik seperti diagram batang, pie chart, scatter diagram dan sebagainya.

Ø  Citra dengan format kompresi JPEG (Joint Photographic Experts Groups), menggunakan format  warna 24 bit (16 juta/ 16.776.960), menggunakan teknik progressive, yaitu menampilkan sebagian citra secara bertahap, sehingga gambar tidak perlu di-download secara keseluruhan (serupa dengan teknik interlacing pada GIF), biasanya digunakan untuk menampilkan citra yang memerlukan kualitas tinggi. Untuk memperkecil citra maka sebaliknya dilakukan teknik blur (teknik perataan pixel, sehingga citra tampak buram) dahulu kemudian baru dikecilkan.

Ø  Citra dengan format kompresi GIF (Graphics Interchange Format), menggunakan format warna 8 bit (256), teknik penyimpanan interlacing sehingga citra dapat dilihat pada jendela browser secara bertahap (tidak perlu menunggu sampai semua file terkirim). Disamping itu juga menggunakan teknik transparan sehingga citra dapat digunakan sebagai latar belakang yang terlihat secara samar-samar. Dengan menggabungkan beberapa citra maka didapatkan suatu animasi citra yang bergerak, contohnya menggunakan software GIF Animator.

Suatu citra dapat digunakan sebagai loncatan untuk menuju ke informasi yang lain (link), dengan menunjuk dan klik pada citra tersebut.  Ada dua cara untuk membuat hal tersebut dapat terjadi, pertama menggunakan link alamat, yaitu menggunakan tag <a href> dan kedua menggunakan cara yang lebih rinci lagi, dimana link hanya dapat dilakukan pada citra, sehingga beberapa area dari citra dapat mempunyai link yang berbeda, seperti pada aplikasi informasi peta dimana terdapat beberapa kota, yang dapat ditunjuk dan diklik untuk memberikan informasi lebih lanjut mengenai kota tersebut.

 Dalam Bab ini juga diberikan contoh-contoh mengenai cara bagaimana untuk membuat link tersebut baik menggunakan cara pertama yang dapat digunakan untuk membuat suatu hyperlink dari kata, kalimat dan citra maupun menggunakan cara kedua yang hanya digunakan pada citra saja.  Pada saat suatu kata, kalimat atau citra digunakan sebagai jalan hyperlink, maka kata dan kalimat tersebut akan berubah warna biru dengan garis bawah, sedangkan pada citra, maka citra tersebut dikelilingi dengan kotak warna biru. Kemudian apabila penunjuk mouse diletakkan diatas kata, kalimat atau citra tersebut maka pointer mouse akan berubah menjadi bentuk tangan, yang menandakan bahwa kata, kalimat atau citra tersebut mempunyai link ke tempat lain. Link alamat ada tiga yaitu alamat direktori file, alamat http, dan alamat bagian lain dari halaman pada script HTML yang sama.

4.1 Menyisipkan Citra

            Untuk dapat menyisipkan citra maka digunakan tag <img> diikuti dengan atribut nama file citra yang akan ditampilkan pada laman. Untuk itu perhatikan script dibawah ini:

<HTML> <HEAD><TITLE>IMAGE Inserting</TITLE></HEAD> <BODY> <TABLE> <TR> <TD><IMG SRC="ITS.BMP"></TD> <TD> <FONT SIZE=4> POLITEKNIK ELEKTRONIKA NEGERI SURABAYA<BR> INSTITUT TEKNOLOGI SEPULUH NOPEMBER SURABAYA </FONT> </TD> </TR> </TABLE> </BODY> </HTML>

4.1.1    Atribut Align

Penempatan citra dapat diatur sedemikian sehingga tampilan citra sesuai dengan teks yang menyertainya, yaitu citra dapat diletakkan diatas (default), ditengah, dibawah, kiri atau kanan teks seperti yang ditampilkan pada Gambar 4.2 dibawah ini.

<HTML> <HEAD> <TITLE> IMAGE Alignment </TITLE> </HEAD> <BODY> <H3> Citra ini<IMG SRC="ITS.BMP" ALIGN=BOTTOM>menggunakan atribut ALIGN=BOTTOM<P> Citra ini <IMG SRC="ITS.BMP" ALIGN=CENTER> menggunakan atribut ALIGN=CENTER<P> Citra ini<IMG SRC="ITS.BMP" ALIGN=TOP>menggunakan atribut ALIGN=TOP<P> <IMG SRC="ITS.BMP" ALIGN=LEFT > <IMG SRC="ITS.BMP" ALIGN=RIGHT> Citra sebelah kiri disisipkan menggunakan atribut ALIGN=LEFT, sehingga ditampilkan gambar seperti terlihat pada tampilan sebelah kiri teks. Sedangkan Citra sebelah kanan disisipkan menggunakan atribut ALIGN=RIGHT, sehingga ditampilkan gambar seperti terlihat pada tampilan sebelah kanan teks. </H3> </BODY> </HTML>

 

4.1.2    Atribut Height dan Weight

Untuk mengatur lebar dan tinggi ukuran pixel dari citra yang akan ditampilkan pada jendela browser, maka digunakan atribut HEIGHT dan WEIGHT, dimana HEIGHT adalah untuk mengatur ukuran lebar citra sedangkan WEIGHT untuk mengatur ukuran panjang citra. Penggunaan atribut ini tidak disarankan untuk memperkecil ukuran gambar, karena meskipun ukuran tampilan citra pada jendela browser kecil, tampilan tetap saja lambat karena citra asli yang dikirimkan ukurannya sebenarnya lebih besar dari ukuran yang ditampilkan pada jendela browser. Untuk  itu  disarankan menggunakan ukuran citra yang sebenarnya atau menggunakan atribut ini untuk memperbesar citra. Sedangkan untuk memperkecil citra sebelum disisipkan pada jendela browser sebaliknya diedit menggunakan editor citra (seperti Photoshop) untuk memperkecil ukuran citra.

Berikut ini diberikan contoh pengunaan atribut HEIGHT dan WEIGHT pada citra yang berukuran 75x75 pixel, dimana ukurannya diperbesar  menjadi 100 x 100 dan 150 x 150 pixel serta diperkecil menjadi 50 x 50.

<HTML> <HEAD><TITLE>IMAGE Height & Weight</TITLE></HEAD> <BODY> <H3><TABLE> <TR><TD>Citra<IMG SRC="ITS.BMP">asli berukuran 75 x 75 pixel<P></TD><TD>Ukuran Citra<IMG SRC="ITS.BMP" HEIGHT=100 WEIGHT="100" ALIGN="RIGHT">setelah digunakan atribut HEIGHT=100 dan WEIGHT=100</TD> <TR><TD>Ukuran Citra<IMG SRC="ITS.BMP" HEIGHT=150 WEIGHT="150" ALIGN="LEFT">setelah digunakan atribut HEIGHT=150 dan WEIGHT=150</TD> <TD>Ukuran Citra<IMG SRC="ITS.BMP" HEIGHT=50 WEIGHT="50">setelah digunakan atribut HEIGHT=50 dan WEIGHT=50</TD> </TABLE></H3> </BODY> </HTML>

 

4.1.3    Atribut Alt

Untuk memperjelas maksud atau untuk memberikan keterangan pada suatu citra, maka dapatlah suatu citra tersebut diberikan suatu penjelasan mengenai maksud atau arti dari citra yang berada pada halaman web tersebut. Sehingga apabila penunjuk mouse berada diatas citra tersebut, maka akan muncul keterangan mengenai citra yang bersangkutan.

<HTML> <HEAD><TITLE>Tag Alt on Image</TITLE></HEAD> <BODY> <H3><IMG SRC="ITS.BMP" ALT="Logo ITS Surabaya juga digunakan di PENS">Letakkan penunjuk mouse diatas citra ini dan tunggu beberapa saat, maka akan ditampilkan keterangan dari citra ini.<P> Tunggulah beberapa saat lagi sehingga keterangan akan hilang dengan sendirinya. &copyW4515TA </H3> </BODY> </HTML>

4.2 Hyperlink

Seperti telah dijelaskan pada pengantar diatas, bahwa ada 2 cara untuk melakukan link ke lain dokumen, yang pertama adalah menggunakan tag alamat yaitu tag <a href> dan yang kedua adalah menggunakan tag pemetaan yaitu tag <map>.

4.2.1    Tag Alamat Relatif

Untuk keperluan pembuatan link ini maka paling tidak sudah tersedia minimal dua file HTML, dimana satu sebagai script utama dan lainnya sebagai script link.

 

<HTML> <HEAD><TITLE> HyperLink using three destination Address </TITLE></HEAD> <BODY> <FONT SIZE=5 FACE="ARIAL">System Mechanic</FONT><BR> <FONT SIZE=6 FACE="IMPACT">Menjaga Performa Sistem Komputer</FONT><BR><B>Melakukan perawatan pada sistem komputer merupakan cara yang paling mudah untuk mempertahankan performa komputer agar tetap stabil.</B><BR><FONT SIZE=6>T</FONT>elah banyak terbukti bahwa bila komputer telah lama digunakan, maka performa komputer tersebut akan menurun. Hal ini disebabkan karena banyaknya program yang telah dipasang, atau telah dilakukan bongkar pasang program-program aplikasi, sehingga masih menyisakan beberapa file yang menjadi sampah bagi windows, dan ditambah dengan konfigurasi pada registry yang tidak benar-benar dihapus dari sistem. Untuk menghapus file-file dan registry tersebut tidak mudah, diperlukan ekstra hati-hati, ini pun akan sangat sulit dilakukan dan memerlukan ketelitian. Dan yang sering terjadi adalah kerusakan sistem windows, karena kesalahan menghapus file atau registry.<BR> Untuk keperluan tersebut System Mechanic dari IOLO Inc, mengeluarkan produknya dengan nama System Mechanic versi 3.6 yang selalu siap merawat dan menjaga performa sistem windows sehingga performa akan selalu prima. Karena dengan software ini user dapat membersihkan file-file sampah dan pembersihan sistem registry dengan mudah dan aman. Selain itu System Mechanic juga dapat melakukan perbaikan pada file yang mengalami kerusakan serta melakukan penyusunan file seperti cara kerja Defrag.<P> <FONT SIZE=4>Fitur-Fitur:<FONT><BR>Pada versi terbaru ini, System Mechanic juga menambahkan beberapa fasilitas serta fitur, untuk memudahkan user melakukan perawatan pada sistem komputer. Beberapa fitur yang disediakan adalah:<P> <FONT SIZE=4><a href="SYSTEM.HTML">Clean System Registry</a><BR><a href="STARTUP.HTML">Windows Startup Manager</a><BR><a href="SETTING.HTML"> Customize Windows Setting</a><BR> <a href="SHORTCUT.HTML">Find Broken ShortCut</a><BR> <a href="OPTIMIZE.HTML">Optimize Internet</a><P></FONT><B><I>Sumber: Komputek edisi 250, minggu ke V tahun 2002</I></B> </BODY> </HTML>

Gambar 4.6 File HTML utama HyperLink

Berikut file HTML guna mendukung HyperLink dari Gambar 4.6 diatas, file ini disimpan terpisah dengan file HTML utama diatas, dan disimpan dengan nama “SYSTEM.HTML”.

<HTML> <HEAD><TITLE>Clean System Registry</TITLE></HEAD> <BODY> <H3>Clean System Registry</H3> Fasilitas ini disediakan untuk melakukan pembersihan secara aman pada sistem registry,  dimana uninstall program aplikasi tidak benar-benar membersihkan sistem registry-nya. Faktor inilah yang menyebabkan performa komputer semakin menjadi lambat. <P> <A HREF="LINK-A.HTML">Kembali ke System Mechanic</A> </BODY> </HTML>

 

4.2.2    Tag Alamat Absolut

Hampir sama dengan link alamat relatif diatas, perbedaannya hanyalah pada alamat yang digunakan, yaitu menggunakan alamat URL  (Uniform Resources Locator), contohnya www.eepis-its.edu, yang berarti menampilkan homepage  PENS-ITS yaitu ditulis <a href=”http://www.eepis-its.edu”>PENS ITS</a>.

4.2.3    Tag Alamat Halaman

Berbeda dengan link yang dilakukan diatas, yaitu melompat pada halaman lain selain halamannya sendiri. Berikut ini link dilakukan pada halaman yang sama, dengan syarat bahwa bagian yang akan dilompati melebihi dari satu jendela browser.

<HTML> <HEAD> <TITLE>HyperLink in One Page</TITLE> </HEAD> <BODY> <A NAMA="top"> <H1><A name="top"> Sekilas tentang FrontPage</A></H1> <H2><UL> <LI><A href="#one"> Ketahuilah Situs Anda Secara Keseluruhan</A><P></LI> <LI><A href="#two"> Memformat Teks Sebagai Subscript</A><P></LI> <LI><A href="#three"> Selalu Gunakan Huruf Kecil</A><P></LI> <LI><A href="#four"> Membuat Thumbnail</A><P></LI> <LI><A href="#five"> Gambar Background Yang Tidak Bergeser</A><P></LI> <LI><A href="#six"> Memasang Gambar Secara Sepotong-Sepotong</A><P></LI> </UL></H2> <P><P> <B><I>Sumber:</I></B> <A href="http://members.tripod.com/catetan0/cat_fp.htm"> http://members.tripod.com/catetan0/cat_fp.htm</A> <P><P> </H5><HR align="center"> <H3><A name="one">Ketahuilah Situs Anda Secara Keseluruhan</A></H3> Ketika sedang mengerjakan proyek Web Anda, ketahuilah seluruh komponen yang ada, seperti berapa space yang dibutuhkan oleh seluruh file, berapa banyak file image, apakah ada link yang terputus, dan sebagainya. Untuk mengetahui hal ini Anda cukup memilih menu View*Reports, dan mengklik Site Summary. FrontPage akan melakukan analisis, dan melaporkannya kepada Anda. <FONT SIZE="2" COLOR="#0000FF"><I>(InfoKomputer Internet Vol. II No. 2)</I></FONT> <H5><A href="#top">Kembali ke Atas</A></H5><HR align="center"> <H3><a name="two"> Memformat Teks Sebagai Subscript</a></h3> Apakah Anda mengira bahwa pada halaman Web Anda tidak bisa membuat subscript atau superscript untuk penulisan naskah ilmiah Anda? Dengan FrontPage 2000, Anda mudah melakukannya. Seleksilah karakter atau teks yang hendak Anda buat sebagai subscript atau superscript, lalu pilih menu Format*Font. Tentukan format yang Anda inginkan pada tab Font lalu klik OK. Berhasil bukan? <FONT SIZE="2" COLOR="#0000FF"><I> (InfoKomputer Internet Vol. II No. 2)</I></FONT> <H5><A href="#top">Kembali ke Atas</A></H5><HR align="center"> <H3><a name="three"> Selalu Gunakan Huruf Kecil</a></h3> Pernahkah Anda merasa kebingunan setelah meng-upload Web content dan menemukan bahwa tidak semua link-nya bisa berjalan, seperti ketika Anda mengujinya secara lokal? Hindari perasaan frustasi ketika hal itu terjadi serta biaya pulsa yang dikeluarkan untuk membenahinya secara remote. Kuncinya, gunakanlah semua huruf kecil untuk nama file dan folder, baik path maupun link (kecuali ke situs eksternal milik orang lain). Anda tentu tahu bahwa server UNIX atau Linux, huruf besar (uppercase) dan huruf kecil (lowercase) dibedakan. Anda juga tidak bisa menjamin bahwa Anda akan selalu menggunakan server NT, karena mungkin saja Anda akan pindah atau ganti server. <FONT SIZE="2" COLOR="#0000FF"><I>(InfoKomputer Internet Vol. II No. 2)</I></FONT> <H5><A href="#top">Kembali ke Atas</A></H5><HR align="center"> <H3><a name="four">Membuat Thumbnail</a></h3> Salah satu cara meringankan "bobot" halaman Web yang mengandung file image adalah dengan mengecilkan ukuran file image tersebut. Tetapi adakalanya pengunjung Web justru menginginkan image yang lebih jelas dan tentu saja ini berarti lebih besar. Untuk mengatasinya dapat dilakukan dengan memasang file image yang berukuran kecil pada halaman Web, dan jika pengunjung tersebut menghendaki image aslinya, pengunjung tersebut tinggal mengklik pada image kecil itu untuk menampilkan image yang asli. Image kecil ini disebut thumbnail. Pada FrontPage, membuat thumbnail sama mudahnya dengan me-resize dan resample image. Klik pada image yang akan dibuatkan thumbnail, lalu klik icon Auto Thumbnail pada toolbar Picture. Pada saat Anda menyimpan halaman Web yang mengandung file image yang dibuat thumbnail, Anda akan diminta untuk memberi nama file image kecil (thumbnail) yang tercipta. Anda juga dapat mengatur ukuran thumbnail ini beserta border dan level edge-nya melalui menu Tools*Page Options, lalu mengklik tab Auto Thumbnail.  <FONT SIZE="2" COLOR="#0000FF"><I>(InfoKomputer Internet Vol. II No. 3)</I></FONT> <H5><A href="#top">Kembali ke Atas</A></H5><HR align="center"> <H3><a name="five">Gambar Background Yang Tidak Bergeser</a></h3> Apakah Anda ingin memasang gambar pemandangan atau foto sebagai latar belakang? Jika halaman Web Anda panjang melebihi tinggi jendela browser, halaman Web Anda bisa digulung ke bawah, dan gambar latar belakang akan di-tile untuk memenuhi halaman Web. Tentu saja gambar latar belakang ini akan tampak dobel bahkan bisa tampak cuma setengahnya. Bayangkan jika pemotongannya pas di gambar hidung Anda, pasti akan lucu tampaknya. Untuk menghindari gambar latar belakang yang bisa digeser, aturlah gambar latar belakang tersebut sebagai watermark, melalui kotak dialog Page Properties (menu Format*Background).  <FONT SIZE="2" COLOR="#0000FF"><I>(InfoKomputer Internet Vol. II No. 3)</I></FONT> <H5><A href="#top">Kembali ke Atas</A></H5><HR align="center"> <H3><a name="six">Memasang Gambar Secara Sepotong-Sepotong</a></h3> Jika Anda memasang sebuah gambar atau foto yang berukuran besar di halaman Web Anda, dapat dipastikan waktu loading halaman Web tersebut akan lambat karena harus men-download file gambar yang berukuran bear jadi sebelum halaman Web Anda tampil sempurna, pengunjung Web Anda sudah bosan menunggu, lalu pindah ke alamat situ yang lain. Agar gambar yang besar dapat ditampilkan secara perlahan-lahan, pecahlah gambar tersebut menjadi beberapa bagian (misalnya dipotong menjadi 3x3) lalu digabungkan dengan tabel. Untuk memotong gambar ini dengan mudah, Anda dapat menggunakan software seperti MacroMedia FireWorks. Dengan cara ini, selalu halaman Web Anda menjadi lebih ringan di-load, foto atau gambar Anda tersebut menjadi tidak mudah "dicolong" orang yang biasa menggunakan klik-kanan mouse dan memilih Save Picture As....  <FONT SIZE="2" COLOR="#0000FF"><I> (InfoKomputer Internet Vol. II No. 3)</I></FONT> <H5><A href="#top">Kembali ke Atas</A></H5></H5><HR align="center"> Ucoks<BR> Copyright © 2000. All rights reserved.<BR> Revised: March 14, 2001.<BR> </BODY> </HTML>

4.3      Tag Pemetaan (MAP)

Berbeda dengan link yang dilakukan diatas dimana link dilakukan dengan menunjuk kata, kalimat atau citra. Sedangkan yang dilakukan disini adalah suatu citra dapat mempunyai beberapa link, hal ini dilakukan dengan memberikan definisi daerah pada citra yang bersangkutan. Definisi dapat berupa titik, polygon, persegi panjang dan lingkaran/ ellips. Untuk keperluan tersebut maka diperlukan tag <MAP> dengan atribut SHAPE yang terdiri dari POINT COORDS=”x, y”, RECT COORDS = ”x1, y1, x2, y2”, POLY COORDS = ”x, y” dan CIRCLE COORDS=”x1, y1, x2, y2”.

Sebagai contoh disini diberikan suatu citra logo ITS, pada logo terdapat bagian kiri, tengah dan kanan yang mempunyai warna biru tua, kuning dan biru muda. Pemetaan dilakukan pada ketiga area tersebut, sehingga bila area-area tersebut diklik maka akan menuju ke link masing-masing.

<HTML> <HEAD> <TITLE> Image MAP Link </TITLE> </HEAD> <BODY> <IMG SRC="ITS.BMP" ALIGN=LEFT WIDTH=150 HEIGHT=150 USEMAP="#LOGOITS"> Daerah atau area dari suatu citra dapat digunakan sebagai link untuk menuju ke dokumen lain yang dihubungkan dengan citra tersebut. Citra logo its ini terdapat 3 (tiga) area yang dapat diklik, yaitu warna biru tua sebelah kiri, warna kuning ditengah dan warna biru muda diarea kanan. Sedangkan area putih (diluar logo tetapi masih didalam kotak) tidak mempunyai link. <MAP NAME="LOGOITS"> <AREA SHAPE=POLY COORDS="72,5, 55,5, 55,15, 40,20, 34,16, 18,33, 20,40, 17,45, 16,56, 7,56, 5,88, 16,88, 23,97, 16,105, 23,115, 43,135, 48,130, 55,135, 57,135, 60,145, 70,145, 70,120, 43,120, 43,110, 55,105, 36,90, 36,56, 47,59, 47,50, 54,54, 61,57, 64,20, 70,15, 72,5" HREF="BIRUTUA.HTML"> <AREA SHAPE=POLY COORDS="70,120, 43,120, 43,110, 55,105, 36,90, 36,56, 47,59, 47,50, 54,54, 61,57, 64,20, 70,15, 78,18, 80,59, 92,51, 92,62, 105,55, 105,90, 85,105, 99,109, 99,120, 70,120" HREF="KUNING.HTML"> <AREA SHAPE=POLY COORDS="72,5, 70,15, 78,18, 80,59, 92,51, 92,62, 105,55, 105,90, 85,105, 99,109, 99,120, 70,120, 70,144, 93,144, 93,134, 100,128, 112,135, 135,114, 128,110, 130,103, 133,95, 145,95, 145,65, 140,60, 130,55, 130,40, 110,15, 100,20, 85,5, 72,5" HREF="BIRUMUDA.HTML"> </MAP> </BODY> </HTML>

            Untuk membuat Map Citra ini diperlukan  ketelitian dalam hal membentuk titik-titik sebagai area dari citra, seperti area pada citra diatas disusun berdasarkan lekuk garis warna, misalkan  antara warna kuning dengan biru muda.