HTML 3
Apa jadinya web tanpa ada link? Apakah kamu bisa membayangkan? Pengunjung harus mengetik sendiri alamat URL dari web yang ingin dia buka.
Misalkan:
Ia ingin membuka halaman about, maka harus mengetik:
https://blog.zulma.id/posts/Autumn-In-Java
Lalu ia ingin beralih ke halaman About, maka harus mengetik lagi:
Cukup rumit bukan! 😫
Apa itu Link di HTML?
Link atau Hyperlink adalah elemen HTML yang berfungsi menghubungkan suatu halaman web ke halaman web yang lain. Elemen ini bisa diklik dan nanti akan membuka halaman lain sesuai alamat URL yang diberikan.
Pengertian link
Tidak hanya untuk menghubungkan halaman, link juga punya fungsi lain seperti scroll top, download file, menjalankan fungsi javascript, dll.
Cara Membuat Link di HTML
Link pada HTML dapat dibuat dengan tag a, kemudian tag ini harus memiliki atribut href untuk menentukan alamat URL tujuan dari link. Bentuk sederhananya adalah seperti ini:
Tag untuk membuat link di HTML
Contoh: link.html
1 |
|
Link akan ditampilkan dengan warna biru dan garis bawah. Ini adalah style standar dari setiap browser. Tentu saja ini bisa kita ubah-ubah sesuai selera. lalu sekarang coba klik link tersebut!
Link error 404
Lha! Kok error?
Link yang kita buat ini akan membuka halaman about.html, tapi file ini belum kita buat atau belum ada. Karena itu, pasti error. Untuk mengatasi ini, kita harus membuat file about.html dan disimpan dalam satu folder dengan file link.html.
File about.html
Isi file about.html seperti ini:
1 |
|
Halaman link.html dan about.html berhasil terhubung. Tapi tunggu sebentar, Mengapa alamat URL pada atribut href ditulis dengan nama file?
1 | <a href="about.html">About us</a> |
Bukannya harus alamat URL lengkap yang pakai http bla bla? Ini karena link yang kita buat adalah internal link dan juga file about.html masih dalam satu folder dengan file link.html. Jadi boleh menuliskan langsung nama filenya, tanpa harus lengkap dengan http. Untuk lebih jelasnya, mari kita pelajari jenis-jenis link dalam HTML.
Jenis-jenis Link pada HTML
Berdasarkan alamat URL yang dituju, link pada HTML dibagi menjadi dua kelompok:
Internal Link
Internal link adalah link yang menuju ke domain atau halaman web itu sendiri. Internal link biasanya digunakan untuk menghubungkan halaman yang satu dengan yang lainnya dalam satu website atau domain.
External Link
External link adalah link yang menuju domain lain. Eksternal link digunakan untuk membuka web atau domain lain. Misalnya seperti: membuka halaman facebook, membuka chat whatsapp, membuka youtube, dan sebagainya.
Singkatnya:
Selama link itu membuka web lain, maka ia adalah external. Tapi kalau tetap membuka web itu sendiri maka itu internal.
- Contoh Internal Link
Buatlah file baru bernama index.html kemudian isi dengan kode berikut:
1 |
|
Kemudian buat lagi file baru bernama contact.html dengan isi sebagai berikut:
1 |
|
Terakhir, buat file about.html dengan isi sebagai berikut:
1 |
|
Pastikan semua file ini disimpan dalam satu folder. Setelah itu, coba buka index.html dengan browser.
- Contoh Eksternal Link
Cara membuat eksternal link sebenarnya sama saja seperti internal link. Perbedaannya terletak pada alamat URL yang diberikan.
Sebagai contoh.. ini adalah eksternal link yang menuju halaman facebook:
1 | <a href="https://www.facebook.com/mineversal">Facebook Mineversal</a> |
Maka saat link tersebut diklik, kita akan membuka halaman https://www.facebook.com/mineversal.
Contoh lain lagi:
Link CTA (call to action) untuk whatsapp.
1 | <a href="https://api.whatsapp.com/send?phone=6287111&text=Hi">Chat dengan Saya</a> |
Pada link tersebut, kita memberikan alamat URL whatsapp dan nantinya akan membuka halaman tersebut. Ini juga bisa disebut eksternal link, karena ia akan membuka halaman whatsapp. Oh iya, di sana kita berikan parameter berupa nomer hp dan juga teks. Nah, biar lengkap. kita akan coba tambahkan eksternal link pada file contact.html.
Silakan buka file contact.html kemudian ubah kodenya menjadi seperti ini:
1 |
|
Atribut-atribut untuk Link
Selain atribut href terdapat juga beberapa atribut yang sering ditambahkan pada link, seperti: target, title, rel, style, dan lain-lain.
Menggunakan Atribut target
Atribut ini berfungsi untuk menentukan target dari pembukaan link. Ada beberapa target yang biasanya digunakan:
- _blank akan membuka link pada jendela atau tab baru;
- _self akan membuka link pada halaman itu sendiri (default target);
- _top menuju bagian paling atas pada halaman;
- _parent membuka link pada frame induk;
- nama-frame akan membuka link pada iframe dengan nama tertentu;
Contoh:
1 | <a href='https://www.facebook.com/mineversal' target='_blank'>Facebook</a> |
Saat link tersebut diklik, browser akan membuka tab baru. Ini karena kita memberikan atribut target dengan nilai _blank.
Berikutnya, kita akan mencoba menampilkan link ke dalam sebuah frame. Buatlah file baru bernama link-frame.html, kemudian isi kodenya seperti ini:
1 |
|
Menggunakan Atribut title
Atribut ini berfungsi untuk membuat tooltips. Tooltips adalah informasi tambahan yang akan tampil saat link disentuh pointer atau saat kita menahan tap di hp.
Contoh:
1 |
|
Cara Mengubah Warna Link di HTML
Warna default link adalah biru, ini bisa kita ubah dengan style CSS. Warna bisa kita berikan untuk teks dan latar belakang (background).
Caranya:
Tambahkan atribut style kemudian isi dengan style css untuk mengubah warna, yakni color (untuk teks) dan background-color (untuk latar).
Contoh:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html lang="en">
<head>
<title>Tutorial Link di HTML</title>
</head>
<body>
<h1>Selamat Datang</h1>
<p>
<a href="index.html" style="color:red">Home</a> |
<a href="contact.html" style="color:green">Contact</a> |
<a href="about.html" style="color:deeppink;">About</a> |
<a href="download.html" style="color:white;background-color: orange;">Download</a>
</p>
<hr>
<p>
Selamat datang di websiteku. Coba klik menu di atas,
maka kamu akan membuka halaman yang berbeda. Semua
link di atas adalah internal link.
</p>
<hr>
<div>Copyright © 2020 by Petani Kode</div>
</body>
</html>
Fungsi Menarik Lainnya dari Link
Seperti yang penulis bilang sebelumnya, link tidak hanya digunakan untuk menghubungkan halaman web saja. Ia juga bisa digunakan untuk beberapa fungsi tertentu seperti:
Membuat Link Buntu
Link buntu adalah link yang tidak akan membuka apa-pun. Ia biasanya digunakan sebagai placeholder atau sampel saja.
Cara membuatnya:
Tambahkan tanda pagar atau tanda pagar dan tanda seru pada atribut href.
Contoh:1
2
3
4
5
6
7
8
9
10
11
12
<html lang="en">
<head>
<title>Tutorial Link di HTML</title>
</head>
<body>
<p>
<a href="#">Link Buntu</a>
<a href="#!">Link Buntu 2</a>
</p>
</body>
</html>
Perhatikan!
Pada contoh tersebut kita mengisi URL-nya dengan tanda pagar. Arti tanda pagar pada URL sebenarnya adalah anchor (jangkar).
Jangkar ini nantinya akan membawa kita ke lokasi tertentu di dalam dokumen HTML. Jika hanya diisi pagar saja, maka ia tidak akan kemana-mana.
Membuat Link Anchor
Link anchor adalah link yang menuju ke suatu elemen tertentu. Cara kerjanya seperti saat kita mengaitkan jangkar, lalu ditarik ke sana. Karena itu, dia dinamakan anchor.
Anchor link
Cara membuat link anchor adalah dengan mengisi alamat URL dengan tanda pagar (#), lalu diisi dengan nama id dari elemen yang akan dituju.
Contoh:
1 |
|
Kalau kita perhatikan dari sourcce diatas, kita menggunakan #top sebagai URL.
1 | <a href="#top">Kembali ke Atas!</a> |
Sedangkan elemen yang memiliki id=”top”, tidak ada di dalam HTML yang kita tulis. Mengapa link anchor ini bisa menuju ke atas? Ini karena browser sudah paham, jika ada link anchor yang menuju ke #top maka ia akan dibawa ke bagian teratas dari dokumen (Scroll top HTML).
Membuat Link untuk Memanggil Fungsi Javascript
Link dapat juga digunakan untuk memanggil fungsi Javascript. Pemanggilan fungsi Javascript biasanya dilakukan dengan atribut even seperti onclick, onmouseover, onmouseout, dan sebagainya.
Contoh:1
2
3
4
5
6
7
8
9
10
11
12
13
<html lang="en">
<head>
<title>Tutorial Link di HTML</title>
</head>
<body>
<p>
<a href="#" onclick="alert('Hello World!')">Jalankan JS</a>
<br>
<a href="#!" onmouseover="alert('link sudah kamu sentuh!')">Coba Sentuh Link ini</a>
</p>
</body>
</html>
Sebenarnya hampir semua elemen bisa menjalankan fungsi Javascript dengan atribut event. Khusus untuk link. Dia bisa juga menjalankan fungsi Javascript melalui atribut href atau URL.
Contoh:
1 |
|
Hasilnya akan sama seperti contoh sebelumnya.
Membuat Link dengan Gambar
Membuat gambar sebagai link kadang sering dilakukan dalam web. Cara membuatnya sangat mudah, kita hanya perlu membungkus tag img dengan tag a.
Contoh:
1 | <a href="#"><img src="https://www.petanikode.com/img/logo.svg" /></a> |
Semua area gambar akan menjadi link dan jika kita klik, maka akan dibawa ke halaman yang akan dituju oleh link tersebut.
Membuat Link untuk Download File
Link kadang juga digunakan sebagai link untuk download file. Cara membuatnya sangat mudah, kita hanya perlu memasukkan alamat URL dari file yang akan di-download.
Contoh:
1 |
|
Pada contoh di atas, kita menuliskan langsung nama filenya. Ini karena HTML link-download.html berada dalam satu folder dengan contoh-file.zip. Lalu, bagaimana kalau filenya berada di tempat lain? Anda hanya perlu mengganti saja URL-nya.
Contoh:
1 | <a href="https://releases.ubuntu.com/20.04/ubuntu-20.04-desktop-amd64.iso">Download Ubuntu</a> |
Membuat Link untuk Mengirim Email
Link kadang juga digunakan untuk mengirim email.
Cara membuatnya:
Ubah URL tujuan dari link dengan mailto, lalu diikuti dengan alamat email yang akan menerima email.
Contoh:
1 |
|
Jika kamu membukanya di Google Chrome, maka ia akan membuka Gmail. Tapi jika dibuka di Firefox, ia akan memilih aplikasi email yang tersedia di komputer.
Cara Menampilkan Gambar di HTML
Website tanpa gambar = membosankan. Setuju? Ya saya juga setuju. Gambar akan membuat website kita terlihat lebih menarik. Karena otak kita lebih mudah menyerap informasi dengan visual dibandingkan hanya teks saja. Karena itu, gambar sangatlah penting. Pada tutorial ini, kita akan belajar cara menambahkan gambar di HTML.
Menambahkan Gambar di HTML
Gambar dapat kita tambakan di HTML dengan menggunakan tag img. Tag ini memiliki atribut wajib, yakni src. Jika kita tidak mengisi atribut src, maka gambar tidak akan ditampilkan. Alamat URL gambar pada atribut src dapat berupa URL maupun alamat path. Lalu tag img harus ditutup dengan menambahkan garis miring.
Contoh:
1 |
|
Perhatikan!
Pada contoh di atas, kita menuliskan langsung nama file dari gambar. Ini karena kita menaruh gambar di dalam folder yang sama dengan file HTML. Apabila file gambarnya tersimpan di folder yang berbeda, maka kita hanya perlu menuliskan alamat path-nya. Misalkan, kita akan menyimpan gambar di dalam folder images. Maka di HTML, kita bisa tulis seperti ini:1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
<p>
<img src="images/sawah.jpg" />
</p>
</body>
</html>
Lalu bagaimana kalau gambarnya berada di internet atau website lain? Jika kita menggunakan gambar dari website lain, kita harus menuliskan alamat URL lengkap dari gambar tersebut.
Contoh:
1 |
|
Gampang kan?
Nah, berikutnya kita akan mempelajari format gambar apa saja yang bisa digunakan di HTML dan juga atribut lainnya untuk img.
Format File Gambar untuk HTML
Tidak semua format file gambar dapat ditampilkan di HTML. Karena tiap file gambar memiliki tujuan masing-masing. Misalnya file gambar dengan format PSD, ia adalah file gambar untuk PhotoShop. Jelas ini tidak akan bisa ditampilkan di HTML. Lalu, format apa saja yang didukung oleh HTML? Berikut ini daftar beberapa format gambar yang sering digunakan dalam web:
| Nama Format | Nama Panjang | Ekstensi |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
| WebP | Web Picture | .webp |
Format file ini juga akan bergantung pada versi browser yang digunakan. Kita ambil contoh format WebP, ini adalah format file gambar baru yang dikembangkan oleh Google. Jika kita menggunakan browser versi lama, gambar ini tidak akan bisa ditampilkan.
Atribut untuk Tag img
Ada beberapa atribut yang sering digunakan pada tag img:
- alt untuk teks alternatif untuk gambar;
- width untuk menentukan lebar gambar;
- height untuk menentukan tinggi gambar;
- style untuk menentukan style CSS untuk gambar.
Atribut alt
Atribut alt adalah atribut untuk memberikan teks alternatif pada gambar saat gambar gagal ditampilkan.
Contoh:1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar Candi Borobudur:</p>
<p>
<img src="" alt="Candi Borobudur" />
</p>
</body>
</html>
Pada contoh tersebut, kita sengaja mengosongkan nilai atribut src. Akibatnya gambar gagal ditampilkan dan yang akan ditampilkan adalah teks alternatif. Apakah kita wajib menggunakan atribut alt? Sebenarnya tidak wajib, tapi sebaiknya tetap menggunakan atribut ini. Karena, nantinya teks alternatif akan dibaca oleh screen reader. Screen reader adalah aplikasi pembaca yang digunakan oleh tuna netra agar bisa mengetahui informasi yang ada di komputer. Selain itu, atribut alt juga sering digunakan untuk meletakan kata kunci untuk SEO.
Atribut width dan height
Atribut width dan height adalah atribut yang digunakan untuk menentukan lebar dan tinggi dari gambar.
Contoh:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
<p>
<img src="images/sawah.jpg" width="200" height="150" alt="Sawah"/>
<img src="images/sawah.jpg" width="150" height="100" alt="Sawah"/>
<img src="images/sawah.jpg" width="50" height="50" alt="Sawah"/>
</p>
</body>
</html>
Satuan yang digunakan untuk nilai width dan height adalah piksel (px). Jika kita memberikan nilai 200, artinya kita memberikan nilai 200px. Atribut width dan height juga tidak wajib. Tapi baiknya ditambahkan agar ukuran gambar konsisten.
Atribut style
Atribut style merupakan atribut untuk menambahkan style CSS pada sebuah elemen. Atribut ini sering digunakan pada gambar untuk memberikan style atau efek tertentu.
Contoh:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Style Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
<p>
<img src="images/sawah.jpg" style="width: 160px;border: 3px solid red;" />
<img src="images/sawah.jpg" style="width: 160px;border-radius: 10px;" />
<img src="images/sawah.jpg" style="width: 100px;height: 100px;border-radius: 100%;" />
</p>
</body>
</html>
Gambar pertama kita berikan style garis (border) dengan ukuran 3px, jenis solid, dan warnanya adalah merah. Lalu gambar kedua, kita berikan style border-radius untuk menciptakan lengkungan pada pojok gambar. Pada gambar ketiga, kita berikan nilai 100% pada border-radius yang akan menciptakan lingkaran.
Membuat Gambar Background
Sebenarnya ini sudah masuk ke dalam pembahasan tentang CSS, tapi tidak apa-apa kita bahas di sini. Agar gambar bisa ditampilkan sebagai background, maka kita harus menggunakan CSS dengan atribut background-image lalu diisi dengan URL dari gambar.
Contoh:
1 |
|
Membuat Link dengan Gambar
Membuat gambar sebagai link pernah kita bahas di Tutorial membuat link di HTML, tapi tidak apa-apa. kita akan bahas lagi biar semakin paham.
Cara membuat link dengan gambar adalah dengan menggabungkan tag a dan tag img. Tag a harus mengapit tag img.
Contoh:
1 |
|
Link dapat kita buat pada bagian tertentu pada gambar dengan menggunakan tag map dan area.
Contoh: 11
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Gambar Sebagai Link</h1>
<p>Coba sentuh dan klik gambar ini:</p>
<p>
<img src="https://www.w3schools.com/html/workplace.jpg" usemap="#workmap"/>
<map name="workmap">
<area shape="rect" coords="34,44,270,350" title="Computer" href="#!">
<area shape="rect" coords="290,172,333,250" title="Phone" href="#!">
<area shape="circle" coords="337,300,44" title="Coffee" href="#!">
</map>
</p>
</body>
</html>
Tag Tambahan untuk Gambar di HTML
Pada HTML versi 5, ada beberapa tag tambahan yang bisa digunakan untuk membantu tag img.
Di antaranya:
- figure untuk membungkus gambar dan teks caption-nya;
- picture untuk menentukan jenis gambar pada ukuran layar yang berbeda.
Mari kita coba:
Tag figure
Tag figure berfungsi untuk membungkus tag img atau gambar dengan teks caption. Teks caption adalah teks yang menjelaskan tentang gambar. Teks caption bisa dibuat dengan tag figcaption.
Contoh:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
<p>
<figure>
<img src="images/sawah.jpg" width="300" alt="Sawah"/>
<figcaption>Landscape sawah dan langit</figcaption>
</figure>
</p>
</body>
</html>
Tag picture
Di era mobile seperti saat ini, website tidak hanya dibuka melalui komputer saja, tapi juga smartphone.
Ukuran layar komputer dengan smartphone tentunya berbeda. Karena itu, website harus bersifat responsif agar bisa menyesuaikan diri dengan media yang digunakan.
Nah, tag picture hadir untuk mengatasi masalah ini. Tag ini berfungsi untuk menentukan gambar mana yang akan ditampilkan pada ukuran layar tertentu.
Mari kita coba contohnya:
1 |
|
Sejauh ini kita sudah belajar cara menampilkan gambar di HTML. Intinya, kamu hanya perlu mengingat cara menggunakan tag img.
