Tag link
Tag link menghubungkan file CSS ke halaman
HTML. Selain itu, link juga menghubungkan
beberapa file lainnya, misalnya favicon.
(Favicon adalah ikon kecil situs yang
terlihat pada tab browser. Ikon ini juga bisa
dilihat di beberapa mesin pencari saat mencari
di sebelah situs, misalnya di Yandex).
Tag ini memiliki banyak atribut dan atribut-atribut tersebut dapat menerima berbagai nilai, namun dalam kehidupan nyata hampir tidak ada yang menggunakannya semua. Yang paling populer adalah menghubungkan CSS dan menambahkan favicon.
Cara menghubungkan CSS:
<link rel="stylesheet" href="style.css">
Cara menghubungkan favicon:
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
Tag link tidak memerlukan tag penutup.
Atribut
| Atribut | Keterangan |
|---|---|
href |
Jalur ke file yang akan dihubungkan. |
media |
Jenis perangkat yang file-nya harus dihubungkan. Maksudnya - Anda dapat menghubungkan file CSS hanya untuk layar besar (nilai screen)
atau hanya untuk layar kecil: untuk ponsel atau tablet (nilai handheld).
Nilai yang mungkin: all, braille, handheld, print, screen, speech, projection, tty, tv.
Lihat detailnya di bawah.
|
rel |
Jenis file yang dihubungkan.
Nilai yang mungkin: stylesheet | alternate.
Nilai stylesheet menunjukkan bahwa file CSS yang dihubungkan,
nilai alternate digunakan, misalnya, untuk menunjukkan tautan
ke file dalam format XML untuk mendeskripsikan feed berita, pengumuman artikel.
|
charset |
Pengkodean file yang dihubungkan.
Saat ini standarnya adalah utf-8.
|
type |
Tipe data file yang dihubungkan. |
Nilai Atribut media
Di HTML5, kueri media dapat ditentukan sebagai nilainya.
| Nilai | Keterangan |
|---|---|
all |
Semua perangkat. |
screen |
Layar monitor. |
handheld |
Telepon, smartphone, perangkat dengan layar kecil. |
braille |
Perangkat berbasis sistem Braille, ditujukan untuk tunanetra. |
speech |
Sintesis suara, serta program untuk membacakan teks dengan lantang. Browser ucapan juga termasuk di sini. |
print |
Pencetak. |
projection |
Proyektor. |
tty |
Teletype, terminal, perangkat portabel dengan kemampuan layar terbatas. Untuk mereka, piksel tidak boleh digunakan sebagai unit pengukuran. |
tv |
Televisi yang dapat membuka halaman web (itu juga terjadi). |
Nilai default: all.
Contoh
Mari kita lihat bagaimana tampilan struktur halaman HTML paling sederhana, yang kita tambahkan koneksi file CSS dan favicon:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css" media="screen">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
