Membuat Elemen Link pada Gambar

02.12.2010 by dfian in de el el

Dalam blog / website, peran sebuah link sangat vital. Hal ini dikarenakan blog / website adalah sebuah media informasi yang terkait disetiap halamannya. Elemen link berfungsi sebagai penghubung antara suatu halaman dengan halaman
lain, atau ke URL lain bahkan dalam satu halaman untuk berpindah ke sub judul lain. Dengan begitu antara halaman satu dengan yang lainnya bisa dengan mudah diakses hanya dengan sekali klik.

Untuk membuat link, standar penulisannya adalah

<a href = ”URL_tujuan”> hypertext </a>
Contoh :
<a href=” http://www.dfian.com/”> Info Blogger | weblog review </a>

Selain itu, banyak juga yang menggunakan link pada suatu gambar. Format penulisannya :
<a href=”URL_tujuan”><img src=”URL_gambar” alt=”Alternate Text”></a>

Contoh :

Dalam perkembangannya penggunaan link pada gambar banyak digunakan sebagai pemanis tampilan blog bahkan bisa juga sebagai sebagai banner untuk tujuan komersil. Banyak dijumpai dalam blog, penempatan banner biasanya diletakkan di bagian sidebar dan rata-rata berkolom dua.
Beberapa waktu lalu, ada seorang teman blogger “Fajri” yang menanyakan bagaimana cara membuat ikon link yang tersusun secara rapi. Sebenarnya format banner yang tersusun 2 x 2 tersedian pada beberapa desain template tertentu. Akan tetapi bila belum ada, bisa menggunakan cara sederhana berikut ini, yaitu menggunakan table.
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan dalam bentuk tabel pada kode HTML, digunakan tag yaitu diawali dengan tag <table> dan diakhiri tag </table>.
Elemen tabel berisi properti <tr>…</tr> untuk menentukan baris (table row) yang didalamnya terdapat properti <td>…</td> untuk menampilkan data pada setiap sel tabel (table data).
Struktur lengkap dari elemen tabel adalah sebagai berikut:

Atribut Elemen Table
width = panjang ( lebar tabel, pixel atau persen )
height = panjang ( tinggi tabel, pixel atau persen)
border = pixel ( tebal garis tepi )
cellspacing = pixel ( spasi antar sel )
cellpadding = pixel ( spasi di dalam )
align = [ left | center | right ] ( perataan tabel)
bgcolor = warna ( warna latar belakang tabel)

Atribut Table Row
align = [left| center|right] (perataan sebaris sel secara horizontal)
valign = [top|middle|bottom] (perataan sebaris sel secara vertical)
bgcolor = warna ( warna latar belakang baris)

Atribut Table Data
rowspan = angka (baris yang di span oleh sel)
colspan = angka (kolom yang di span oleh sel)
align = [ left | center | right ] ( perataan horizontal)
valign = [top | middle | bottom ] (perataan vertical)
width = pixel ( lebar sel, pixel atau persen )
height = panjang ( tinggi sel, pixel atau persen)
bgcolor = warna ( warna latar belakang sel)

Contoh :

Untuk bagian “img src=”, URL gambar bisa mengunakan layanan penyimpanan data online, salah satu situs penyimpanan foto dan gambar seperti www.photobucket.com. Di sana Anda akan mendapatkan link ke gambar yang telah diupload. Contohnya ada dibagian paling bawah blog ini.
Apabila ukuran gambar/table tidak sesuai maka bisa diatur pada bagian width dan height-nya, sehingga tampilan akhirnya bisa sesuai dan pas. Jika sudah, copy kode HTML tersebut ke dalam gadget HTML (blogger) atau widget Text (Wordpress).

Semoga bermanfaat.

Bookmark and Share :