Home / HTML / Belajar HTML – Link Element

Belajar HTML – Link Element

Tag <link> digunakan untuk membuat ‘hubungan’ antara halaman HTML dengan file lain, walaupun saat ini penggunaannya paling banyak adalah untuk menginput file CSS ke halaman HTML.

Link element memiliki beberapa atribut, yang paling sering digunakan adalah atribut href, dan atribut rel. Atribut href (singkatan dari hypertext references) digunakan untuk menulis alamat lokasi file external yang dituju, sedangkan atribut rel (singkatan dari relationship) berisi jenis ‘hubungan’ dengan file tersebut.

Sebagai contoh, untuk menginput file CSS: style.css ke dalam halaman web, berikut adalah cara penulisannya:

<link href="style.css" rel="stylesheet">

Atribut lain untuk tag <link> adalah type. Type berfungsi untuk menginformasikan jenis file yang akan di-link. Jika file tersebut adalah CSS, maka nilai atribut type adalah: “text/css“, seperti berikut ini:

<link href="style.css" type="text/css" rel="stylesheet">

Masih berhubungan dengan CSS, atribut media bisa ditambahkan untuk menentukan media mana saja file CSS tersebut akan tampil, apakah screen (layar komputer), print (sewaktu dicetak), atau all (semua media). Berikut contohnya:

<link href="style.css" type="text/css" rel="stylesheet" media="all" >

Apabila atribut media tidak ditulis, nilai defaultnya adalah media=”all”, yang berarti seluruh kode CSS akan diterapkan diseluruh media.

Belajar HTML - Link Element

Membuat Favicon

Selain untuk menginput file CSS, tag <link> juga bisa digunakan untuk menginput favicon ke halaman HTML. Favicon adalah gambar kecil yang dapat anda lihat pada bagian kiri halaman web, seperti pada gambar dibawah ini.

Belajar HTML - Link Element

Untuk menampilkan gambar ini, siapkan sebuah gambar berukuran kecil (biasanya berukuran 16×16 pixel), anda bisa membuatnya di Photoshop atau mencarinya di internet. File gambar ini boleh dalam format .ico, .gif, .jpg, atau .png.

Setelah itu, letakkan gambar tersebut di dalam folder belajar_html, dan ubah namanya menjadi favicon.ico, atau favicon.jpg (tergantung format gambar). Nama gambar ini juga tidak harus “favicon”, tetapi nama ini sudah menjadi standar tidak resmi dalam pembuatan web.

Langkah terakhir, silahkan buka halaman index.html, dan tambahkan tag berikut pada bagian <head>:

<link rel="icon" href="favicon.ico" type="image/x-icon">

Dalam contoh diatas, saya menggunakan format gambar ico. Untuk atribut type=”image/xicon” adalah MIME type dari file .ico, atribut ini boleh ditulis, boleh juga tidak (web browser akan menentukan sendiri MIME type file gambar tersebut). Jika anda menggunakan gambar .jpg maupun .png, penulisannya adalah sebagai berikut:

<link rel=”icon” href=”favicon.jpg” type=”image/jpeg”>
<link rel=”icon” href=”favicon.png” type=”image/png”>

Dengan menambahkan kode favicon, file index.html bisa direvisi menjadi:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<title>Membuat Favicon</title>
</head>
<body>
<h1>Belajar HTML</h1>
<p>Mohon <strong>jangan diganggu</strong>,
lagi serius belajar <em>HTML</em></p>
</body>
</html>

Silahkan buka di web browser, akan tampil gambar kecil sebagai identitas halaman (favicon).

Belajar HTML - Link Element

 

About admin

Check Also

Sejarah dan Perkembangan Bahasa HTML

Belajar HTML – Title Element

Tag <title> mungkin menjadi tag paling penting di bagian <head>. Tag ini berfungsi untuk menampilkan …

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *