HTML link tag | belajar <link> element
Referensi Belajar HTML link tag. Tutorial dan panduan mengenai element <link /> yang digunakan untuk menghubungkan file CSS. Mencakup pembahasan lebih detail dan lengkap yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <link>.
Deskripsi
Penjelasan HTML link tag
HTML <link> element menunjukkan sebuah hubungan (link) antara dokumen (HTML) yang bersangkutan dengan sumber file dari luar (eksternal).
<link> ditulis di dalam element <head>..</head> tanpa tag penutup (end tag), juga merupakan element kosong tanpa konten apapun yang hanya berisi attribute saja. <link> element selalu digunakan untuk merujuk file CSS yang berekstensi .css, yang berisi aturan kode CSS, sehingga kode tersebut dapat diaplikasikan untuk mendesain dan memberi sentuhan tampilan yang menarik pada sebuah dokumen web yang merujuk file tersebut.
Element <link> dapat ditulis lebih dari satu kali, tergantung kebutuhan file CSS yang ingin dirujuk dan dipergunakan. Semakin banyak, tentunya semakin memperlambat loading halaman tersebut.
Jika Anda bermaksud ingin belajar HTML link yang merujuk (membuka) website atau dokumen lain ketika diklik, silahkan pelajari HTML <a> tag.
Attributes
Atribut HTML Tag <link>
Menentukkan bagaimana element <link> tersebut menangani permintaan cross origin.
Menentukkan lokasi file (CSS) atau dokumen yang di-link (dirujuk). Biasanya, sumber file CSS yang ingin diaplikasikan pada dokumen yang bersangkutan.
Menentukkan bahasa yang digunakan pada link yang dirujuk tersebut.
Menentukkan target media atau alat yang ingin diberlakukan untuk dokumen yang merujuk file (CSS) tersebut.
Menentukkan hubungan (relationship) antara dokumen yang bersangkutan dengan dokumen yang di-link.
Menentukkan ukuran (size) dari sumber yang di-link. Hanya digunakan untuk <link> element yang memiliki attribute rel="icon".
Menentukkan tipe media (media type) dari sumber yang di-link.
Global Attributes
Atribut Secara Global (Keseluruhan)
<link> tag mencakup global attributes.
Event Attributes
Atribut event (Peristiwa)
<link> tag mencakup event attributes.
Attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.
Example
Contoh HTML <link> element
Contoh memasukkan style (CSS) dalam dokumen HTML.
Gunakan element <link> seperti berikut:
<link rel="stylesheet" href="/assets/css/dul-button.css">
-
rel="styesheet"= Menunjukkan bahwa file yang dirujuk adalah file stylesheet (CSS). hrefattribute digunakan untuk menentukkan lokasi file (CSS) yang ingin disisipkan. Pada contoh diatas filedul-button.cssberada dalam folder assets/css/ yang terletak di website apacara.com.
Selanjutnya, element <link> seperti contoh diatas, ditulis didalam element <head>..</head> dalam sebuah dokumen HTML. Contoh lengkapnya, adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/assets/css/dul-button.css">
</head>
<body>
</body>
</html>
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html>
<head>
<title>Demo HTML link tag</title>
<link rel="stylesheet" href="/assets/css/dul-button.css">
</head>
<body>
<p>Pada contoh berikut, terlihat tombol (button) yang telah diberi style dari dul-button.css diatas.</p>
<button class="btn-dul btn-dul-default">default</button>
<button class="btn-dul btn-dul-primary">primary</button>
<button class="btn-dul btn-dul-success">success</button>
<button class="btn-dul btn-dul-info">info</button>
<button class="btn-dul btn-dul-warning">warning</button>
<button class="btn-dul btn-dul-danger">danger</button>
<button class="btn-dul btn-dul-clean">clean</button>
</body>
</html>
SHARE