Element Link Pada HTML. Pengertian, Fungsi, Serta Cara Kerja Beserta Contoh
Sebagai pemula yang menpelajari HTML, kita akan mengenal beberapa element dasar seperti <head>, <body>,<h1>,<p> dan juga <img>. Tapi ada salah satu element yang hampir selalu ada di setiap website modern namun serin diabaikan karna tidak menampilkan apapun di halaman website, yaitu element <link>.
Element link sangat penting pada sebuah website karna tanpa element <link> ini maka website tidak akan memiliki tampilan yang menarik karna file CSS tidak dapat dimuat. selain itu favicon, font external hingga berbagai optimasi performa website juga bergantung pada element ini.
pada kesempatan kali ini kita akan mempelajari secara lengkap apa itu element <link> dan bagaimana cara kerja beserta fungsi-fungsinya. beberapa atribut penting serta contoh penggunaannya serta pertanyaan yang sering di pertanyakan oleh pemula akan dibahas pada artikel ini.
Apa Itu Element <link>
<head>
<link rel="stylesheet" href="style.css>
</head>
Pada Contoh element link diatas terdapat atribut rel="stylesheet" yang menunjukan bahwa file yang dihubungkan adalah stylesheet CSS. Sedangkan atribut href="style.css" menunjukan lokasi file CSS berada.
Mengapa Element Link Diletakan didalam Elemen Head.
Pada bagian head berisi beberapa informasi penting mengenai halaman web. Saat browser membuka sebuah halaman website, maka browser akan membaca bagian <head> terlebih dahulu sebelum menampilkan isi halaman web.
Pada saat kita membuka browser dan menuliskan alamat sebuah web, maka browser akan membuka halaman kemudian membaca tag <head>, kemedian browser akan menemukan element link, lalu browser akan mengunduh beberapa file seperti file CSS, jenis font, favicon dan lain sebagainya. karna itu hampir semua element link akan di letakan didalam <head>.
Apa Saja Fungsi Element <link>
Ada beberapa fungsi yang sangat vital yang akan dilakukan oleh element link pada html beberapa diantaranya adalah menghubungkan file CSS. dan ini merupakan penggunaan yang paling umum. jika kita memilki struktur folder pada website kita seperti berikut :
website/
|
|___ index.html
|
|___ style.css
|
|___ logo.png
maka browser akan membaca file index.html dan berikut adalah contoh isi file index.html :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>BELAJAR HTMl</h1>
</body>
</html>
Pada saat browser membaca file index.html dan pada bagian element link maka browser akan membaca sebuah perintah yang menghubungkan sumber daya yang ditautkan dengan dokumen html, pada kasus ini kita perlu menentukan sumber daya yang ditautkan adalah sebuah stylesheet berupa sebuah file dengan nama "style.css" yang berada didalam direktori/folder website kita. berikut adalah contoh isi file style.css :
h1(
color: blue;
fone-size: 40ps;
)
Selain itu, fungsi element link pada html adalah menambahkan Favicon, Favicon itu sendiri adalah ikon kecil yang muncul pada tab dan hampir semua web profesional selalu menggunakan favicon, seperti contoh :
Atribut yang digunakan untuk menambahkan favicon pada tab browser adalah sebagai berikut :
<link rel="icon" href="favicon.ico">
atau :
<link rel="icon" type="image/png" href="favicon.png">
Selain menambahkan Favicon, element link juga digunakan untuk menambahkan/menggunakan google font. hampir semua website modern sering menggunakan font eksternal. sebagai contoh penggunaan element link untuk menambahkan font eksterrnal seperti google font adalah sebagai berikut :
<link rel="preconnect"
href="https://font.googleapis.com">
<link rel="stylesheet"
href="https://font.googleapis.com/css2?family=Poppins&display="swap">
dan untuk mengatur tampilan dari font dari google tersebut kiys bisa mengatur pada file CSS dengan kode berikut ini :
body{
font-family: "Poppins", sans-serif;
)
dan untuk membantu browser membuat koneksi lebih awal ke server tertentu (preconnect), element link juga sangat berguna untuk pengambilan data yang lebih cepat, seperti contoh :
<link rel="preconnect"
href="https://font.gstatic.com">
dan masih banyak lagi yang dapat dilakukan oleh element link.
CARA KERJA ELEMENT LINK
Prinsip dasar dari dari sebuah komputer adalah membaca perintah satu-persatu dimulai dati bagian awal(atas) hingga akhir(bawah). berikut adalah ilustrasi dari cara kerja element link :
index.html
|
|
Browser membaca <head?
|
|
Menemukan
<link rel="stylesheet">
|
|
Mengambil style.css
|
|
CSS diterapkan
|
|
Halaman ditampilkan dengan design
Kesalah yang sering dilakukan oleh pemula dalam menempatkan element link adalah meletakan didalam element body, sedangkan element itu sendiri selalu ditempatkan didalam element head:
<head>
<link rel="stylesheet"
href="style.CSS">
</head>
dan salah menuliskan lokasi file yang.
BEST PRACTICE
Praktek terbaik dalam menggunakan element link agar lebih optimal adalah selalu simpan element link didalam tag head, gunakan nama file yang konsisten dan mudah dipahami seperti style.css atau main.css, dan juga selalu kelompokan file CSS berdasarkan fungsi jika proyek mulai berkembang. agar tidak membebani browser, gunakan preconnect dan preload hanya jika benar-benar digunakan.
Gunakan ukuran favicon yang sesuai untuk berbagai perangkat, dan selalu hindari membuat stylesheet yang tidak digunakan karna dapat memperlambat waktu memuat halaman website. gunakan jalur (path) yang benar baik itu jalur relatif atapun jalur absolut, sebelum benar-benar diluncurkan, ada baiknya untuk menguji halaman website dibeberapa browser untuk memastikan semua sumber berhasil dimuat.
0 Response to "Element Link Pada HTML. Pengertian, Fungsi, Serta Cara Kerja Beserta Contoh"
Post a Comment