Assalamu'alaikum poinreaders,
Pada kesempatan kali ini kita akan belajar sebuah materi mengenai HTML, yaitu tentang Links tag. Links adalah sebuah tag pada html yang digunakan untuk menghubungkan dokumen satu dengan dokumen lainnya yang bersumber dari dalam (internal) maupun dari luar (external). Selengkapnya simak ulasan berikut...
Pada kesempatan kali ini kita akan belajar sebuah materi mengenai HTML, yaitu tentang Links tag. Links adalah sebuah tag pada html yang digunakan untuk menghubungkan dokumen satu dengan dokumen lainnya yang bersumber dari dalam (internal) maupun dari luar (external). Selengkapnya simak ulasan berikut...
1. <a>
Fungsi :
Fungsi :
Mendefinisikan sebuah hyperlink yang digunakan untuk menghubungkan halaman satu ke halaman lain.
Format Penulisan :
<a>...</a>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| charset | char_encoding | optional | Menentukan character-set pada dokumen yang terhubung. |
| coord | coordinates | optional | Menentukan koordinat link. |
| download | filename | optional | Menentukan bahwa target akan di-download ketika pengguna mengklik hyperlink. |
| href | URL | wajib | Menentukan URL dari halaman yang akan dituju. |
| hreflang | language_code | optional | Menentukan bahasa pada dokumen yang terhubung. |
| media | media_query | optional | Menentukan media/perangkat apa yang akan dioptimalkan pada dokumen yang terhubung. |
| name | section_name | optional | Menentukan nama anchor (tag <a>). |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
optional | Menentukan hubungan antara dokumen yang berjalan dan dokumen yang dituju. |
| rev | text | optional | Menentukan hubungan antara dokumen yang dituju dan dokumen yang berjalan. |
| shape | default rect circle poly |
optional | Menentukan bentuk link. |
| target | _blank _parent _self _top framename |
optional | Menentukan dimana dokumen yang dituju akan dibuka. |
| type | media_type | optional | Menentukan jenis media dari dokumen yang dituju. |
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag anchor</title>
</head>
<body>
Silahkan klik link dibawah ini untuk mengunjungi official website kami:<br>
<a href="http://www.pointopoin.com/" target="_blank">www.pointopoin.com</a>
</body>
</html>
2. <link>
Fungsi :
Menghubungkan dokumen yang bersangkutan dengan sumber file yang berasal dari luar (external).Format Penulisan :
<link>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| charset | char_encoding | optional | Menentukan pengkodean karakter dari dokumen yang terhubung. |
| crossorigin | anonymous use-credentials |
optional | Menentukan bagaimana sebuah elemen menangani permintaan cross-origin. |
| href | URL | wajib | Menentukan lokasi dokumen yang akan dihubungkan. |
| hreflang | language_code | optional | Menentukan bahasa teks dalam dokumen yang terhubung. |
| media | media_query | optional | Menentukan pada perangkat apa dokumen yang terhubung akan ditampilkan. |
| rel | alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet |
wajib | Menentukan hubungan antara dokumen yang berjalan dan dokumen terkait. |
| rev | reversed_relationship | optional | Menentukan hubungan antara dokumen terkait dan dokumen yang berjalan. |
| sizes | Height x Width any |
optional | Menentukan ukuran file yang terhubung (hanya untuk atribut rel yang bernilai "icon"). |
| target | _blank _self _top _parent frame_name |
optional | Menentukan dimana dokumen yang terhubung harus dimuat. |
| type | media_type | optional | Menentukan jenis media dari dokumen yang terhubung. |
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag link</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>Ini adalah teks yang sudah diberi stylesheet</h1>
</body>
</html>
3. <nav>
Fungsi :
Mendefinisikan link navigasi (navigation links).Format Penulisan :
<nav>...</nav>
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag nav</title>
</head>
<body>
<nav>
<a href="link/link1.html">Link 1</a> |
<a href="link/link2.html">Link 2</a> |
<a href="link/link3.html">Link 3</a>
</nav>
</body>
</html>
Semoga materi yang saya sampaikan tentang HTML dapat dipahami poinreaders. Silakan tulis pertanyaan seputar materi yang telah dibahas pada kolom komentar. jangan lupa follow akun sosial kami agar poinreaders bisa mendapatkan materi terbaru tentang pemrograman.