Membuat Link dan Gambar dalam HTML

Kemudahan dalam aplikasi berbasis web salah satunya adalah bisa menghubungkan satu dokumen dengan dokumen lainnya, baik dalam satu server aplikasi web maupun dengan server aplikasi web yang berbeda di seluruh dunia maya.  HTML menyediakan hypertext link yang merupakan daerah teks (ataupun gambar) yang bisa link (menyambungkan) ke dokumen HTML yang lain. Seiring berkembangnya teknologi internet, bukan hanya teks dan gambar yang bisa link ke dokumen tertentu, file multimedia pun sudah dapat dibuat link ke dokumen yang diinginkan.

Link

Kekuatan utama dokumen HTML terletak pada hypertext link atau hyperlink atau lebih singkat lagi disebut link. Dengan hyperlink ini kita bisa membuka dokumen HTML lain atau langsung menuju ke bagian tertentu sebuah dokumen HTML. Hyperlink ini dapat diletakkan pada teks tertentu ataupun pada sebuah image, bila diletakkan pada teks maka teks tersebut (secara default) akan digaris-bawahi dan warnanya menjadi berbeda. Sintaksis penulisan :

 <a href=url_tujuan> nama link </a>

Beberapa atribut yang sering ditambahkan atau sering digunakan dalam penggunaan sintak diatas adalah seperti dibawah ini:

Membuat Link Ke Dalam Dokumen

Seringkali halaman web adalah halaman yang panjang dan selalu membukanya dari posisi awal akan sangat melelahkan bagi pengguna. Untuk itu akan lebih memudahkan bila kita langsung merujuk pada bagian tertentu sebuah halaman web. Caranya dengan menyisipkan Tag Anchor <a> dengan atribut "name" di bagian dokumen yang akan dituju.

Untuk perintah standartnya : 

<a name="nama_section"> </a>

Untuk menggunakan link yang akan merujuk ke bagian dokumen itu, ditambahkan '#nama_section" menjadi :

<a href="sebuah_halaman.html#nama_section"> langsung ke nama_section </a>

Gambar

Untuk menyisipkan gambar kita dapat memanfaatkan tag <IMG>. Format file gambar yang bisa ditampilkan bisa bermacam-macam, misalnya jp, jpeg, pcx, gif, psd, dan sebagainya. Pada umumnya, perancang web hanya menggunakan kombinasi dari tiga format file gambar saja yaitu jpeg, gif dan psd. Sintaksis yang digunakan secara standar adalah 

Membuat obyek gambar menjadi sebuah hyperlink

Apabila kita mengakses sebuah website, seperti facebook atau search engine google terdapat logo dari dua website tersebut. Logo tersebut merupakan gambar dimana kita sering dapat melakukan klick terhadap gambar tersebut dan merujuk ke sebuah link tertentu. Berikut contoh sintaks penggunaan obyek gambar menjadi hyperlink : 

<img src='url gambar' alt='nama alternatif gambar' width='tinggi' height='lebar'> 

Tag <img> adalah tag HTML untuk mendefinisikan sebuah gambar.

•      Atribut src adalah sumber/url dari gambar.

•      Atribut alt adalah untuk memberikan nama alternatif gambar. Apabila gambar tidak bisa ditampilkan, maka yang muncul adalah nama alternatifnya.

•      Atribut height dan width adalah untuk mengatur ukuran gambar.

contoh:

<img src=‟sepeda.jpg' alt='Click Me!' width=100' height='100'>