Link dan Image pada HTML
Link dan image pada HTML adalah dua tipe elemen yang berbeda. Kesamaan di antara keduanya adalah sama-sama menggunakan alamat atau URL.
Link pada HTML
Link pada HTML, atau disebut juga hyperlink, dibuat dengan elemen <a>. Kepanjangan dari a tersebut adalah anchor yang berarti jangkar. Akan tetapi kepanjangan tersebut tidak terlalu bermakna, sehingga jarang dibahas. Struktur dasar dari elemen <a> adalah:
<a href="tujuan">Keterangan</a>
Contohnya, apabila kita mengetik <a href="http://w3schools.com">Belajar membuat web</a>, maka akan tampak seperti berikut:
Secara default, perilaku dari link html adalah:
- Teks berwarna biru
- Bergaris-bawah
- Ketika hover (mouse berada di atas link) pointer mouse menjadi bentuk telunjuk
- Ketika diklik, browser akan menuju ke suatu tempat.
Keempat perilaku default di atas dapat diubah menggunakan CSS dan javascript yang akan kita bahas kemudian.
Uniform Resource Locator (URL)
Tujuan di dalam link dapat berupa alamat web, gambar ataupun file, bisa berada di dalam domain yang sama, ataupun domain yang berbeda.
URL ke halaman web di luar domain
<a href="http://www.w3schools.com/html/default.asp">HTML di w3schools</a>
Output:
HTML di w3schools
Pada link ke luar domain, biasanya menggunakan path absolut seperti di atas, yaitu dengan menyebutkan alamat domain (www.w3schools.com) dan path yang dituju (/html/default.asp).
URL ke halaman web di dalam domain
Untuk link internal di dalam domain, bisa juga menggunakan path absolut seperti di atas, tapi dapat juga menggunakan path relatif seperti berikut:
<a href="../blogs/15-Tips-agar-sesi-koding-Anda-lancar">Tips pemrograman</a>
Output:
Tips pemrograman
Alamat halaman topik ini adalah: https://icodeformoney.com/tuts/Link-dan-Image-pada-HTML. Berada pada domain icodeformoney.com, folder tuts, halaman Link-dan-Image-pada-HTML. Alamat relatif pada contoh di atas: ../blogs/15-tips-agar-sesi-koding-Anda-lancar. ../ berarti naik satu folder, dari folder icodeformoney.com/tuts/ ke root folder: icodeformoney.com/. blogs/ berarti masuk ke folder icodeformoney.com/blogs/. Dan 15-tips-agar-sesi-koding-Anda-lancar adalah topik yang dituju.
URL ke gambar
Selain ke suatu halaman web, link dapat juga ditujukan ke suatu gambar seperti berikut:
<a href="http://www.dailygalaxy.com/photos/uncategorized/polarbearbig_1.jpg">Beruang kutub</a>
Output:
Beruang kutub
URL ke file
URL yang menuju ke file, jika diklik akan mengakibatkan browser mendownload file tersebut.
Image pada HTML
Untuk menampilkan gambar pada halaman web, digunakan tag html: <img />. Tag img merupakan self-.closing tag sehingga tidak perlu tag penutup, melainkan hanya menambahkan tanda / di akhir tag pembuka. Alamat file gambar yang dituju dituliskan di dalam atribut src:
<img src="/images/images/Tutorial/html/erlen.png" style="height:260px; width:200px" alt="Erlenmeyer" />
Output:
Pada contoh di atas, alamat file erlen.png pada atribut src menggunakan alamat relatif. Tanda / di awal alamat menandakan root folder. Pada situs ini, tanda / sama dengan https://icodeformoney.com/. Atribut lainnya, style berisi kode CSS yang mengatur lebar dan tinggi gambar. Atribut alt menyatakan teks yang akan muncul bila gambar gagal ditampilkan. Teks di dalam atribut alt juga akan muncul di dalam tooltip yang muncul ketika penunjuk mouse diletakkan di atas gambar.
Dengan catatan, meskipun gambar erlen.png di atas tampil dengan ukuran 200x260px, karena ukuran file erlen.png yang sebenarnya adalah 493x642px, gambar yang dipanggil tetap file erlen.png yang 493x642px, dan ukuran filenya tetap besar. Jadi ketika Anda menyertakan sebuah gambar ke dalam halaman web, gambar tersebut sebaiknya di-resize ke ukuran seperlunya untuk menghemat bandwidth server maupun client.