Apa fungsi dari link rel stylesheet?

HTML link Tag - belajar html link. Element link mendefinisikan sebagai hubungan antara dokumen dengan sumber daya ekternal.

Apa fungsi dari link rel stylesheet?

Element <link> biasanya digunakan untuk memanggil css ekternal, tapi disamping itu elemen <link> bisa juga digunakan sebagai deglarasi suatu informasi tambahan suatu halaman, misal dengan sematan attibute "hreflang", dan lain sebagainya.

Element <link> pada peletakannya wajib di letakkan diantara rentang tag

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body style="padding:30px;">

 <div class="alert alert-info">
   <strong>Info :</strong> Lorem ipsum...
 </div>

 <div class="alert alert-danger">
   <strong>Peringatan :</strong> Lorem ipsum...
 </div>

 <div class="alert alert-success">
   <strong>Terimakasih :</strong> Lorem ipsum...
 </div>

</body>
</html>
3...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body style="padding:30px;">

 <div class="alert alert-info">
   <strong>Info :</strong> Lorem ipsum...
 </div>

 <div class="alert alert-danger">
   <strong>Peringatan :</strong> Lorem ipsum...
 </div>

 <div class="alert alert-success">
   <strong>Terimakasih :</strong> Lorem ipsum...
 </div>

</body>
</html>
4, hal ini di maksudkan agar element <link> tersebut menjadi acuan/landasan pada saat element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body style="padding:30px;">

 <div class="alert alert-info">
   <strong>Info :</strong> Lorem ipsum...
 </div>

 <div class="alert alert-danger">
   <strong>Peringatan :</strong> Lorem ipsum...
 </div>

 <div class="alert alert-success">
   <strong>Terimakasih :</strong> Lorem ipsum...
 </div>

</body>
</html>
6 di baca oleh browser.

Element <link> dapat ditulis lebih dari satu kali dalam penulisannya, semua tergantung kebutuhan dan keperluan halaman.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body style="padding:30px;">

 <div class="alert alert-info">
   <strong>Info :</strong> Lorem ipsum...
 </div>

 <div class="alert alert-danger">
   <strong>Peringatan :</strong> Lorem ipsum...
 </div>

 <div class="alert alert-success">
   <strong>Terimakasih :</strong> Lorem ipsum...
 </div>

</body>
</html>
Uji coba

<link rel="icon" href="/favicon.ico"  type="image/x-icon"/>
<link rel="stylesheet" href="/style.css" type="text/css"/>
<link rel="image_src" href="/tutorial.png"/>
0

Menentukkan bagaimana element <link> tersebut menangani permintaan cross origin.

Nilai atau value attribute ini adalah

<link rel="icon" href="/favicon.ico"  type="image/x-icon"/>
<link rel="stylesheet" href="/style.css" type="text/css"/>
<link rel="image_src" href="/tutorial.png"/>
2,
<link rel="icon" href="/favicon.ico"  type="image/x-icon"/>
<link rel="stylesheet" href="/style.css" type="text/css"/>
<link rel="image_src" href="/tutorial.png"/>
3

<link rel="icon" href="/favicon.ico"  type="image/x-icon"/>
<link rel="stylesheet" href="/style.css" type="text/css"/>
<link rel="image_src" href="/tutorial.png"/>
4

Menentukkan lokasi data yang tersemat berupa

<link rel="icon" href="/favicon.ico"  type="image/x-icon"/>
<link rel="stylesheet" href="/style.css" type="text/css"/>
<link rel="image_src" href="/tutorial.png"/>
5 atau link.

Contoh :

<link rel="icon" href="/favicon.ico"  type="image/x-icon"/>
<link rel="stylesheet" href="/style.css" type="text/css"/>
<link rel="image_src" href="/tutorial.png"/>

Nilai atau value attribute ini adalah

<link rel="icon" href="/favicon.ico"  type="image/x-icon"/>
<link rel="stylesheet" href="/style.css" type="text/css"/>
<link rel="image_src" href="/tutorial.png"/>
7

<link rel="icon" href="/favicon.ico"  type="image/x-icon"/>
<link rel="stylesheet" href="/style.css" type="text/css"/>
<link rel="image_src" href="/tutorial.png"/>
8

Menentukkan jenis bahasa pada halaman

Contoh :

<link href='//triksonic.blogspot.com/2017/03/html-canvas-tag.html' hreflang='x-default' rel='alternate'/>

Nilai atau value attribute ini adalah Kode Bahasa

<link rel="icon" href="/favicon.ico"  type="image/x-icon"/>
<link rel="stylesheet" href="/style.css" type="text/css"/>
<link rel="image_src" href="/tutorial.png"/>
9

Menentukkan tipe media pada suatu halaman

Contoh :

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

Nilai atau value attribute ini adalah

<link href='//triksonic.blogspot.com/2017/03/html-canvas-tag.html' hreflang='x-default' rel='alternate'/>
0

<link href='//triksonic.blogspot.com/2017/03/html-canvas-tag.html' hreflang='x-default' rel='alternate'/>
1

Wajib disebutkan, menentukan keterkaitan atau fungsi value yang ada pada element <link> terhadap halaman yang sedang dibuka.

Nilai atau value attribute ini adalah sebagai berikut :

  1. <link href='//triksonic.blogspot.com/2017/03/html-canvas-tag.html' hreflang='x-default' rel='alternate'/>
    3
  2. <link href='//triksonic.blogspot.com/2017/03/html-canvas-tag.html' hreflang='x-default' rel='alternate'/>
    4
  3. <link href='//triksonic.blogspot.com/2017/03/html-canvas-tag.html' hreflang='x-default' rel='alternate'/>
    5
  4. <link href='//triksonic.blogspot.com/2017/03/html-canvas-tag.html' hreflang='x-default' rel='alternate'/>
    6
  5. <link href='//triksonic.blogspot.com/2017/03/html-canvas-tag.html' hreflang='x-default' rel='alternate'/>
    7
  6. <link href='//triksonic.blogspot.com/2017/03/html-canvas-tag.html' hreflang='x-default' rel='alternate'/>
    8
  7. <link href='//triksonic.blogspot.com/2017/03/html-canvas-tag.html' hreflang='x-default' rel='alternate'/>
    9
  8. <link rel="stylesheet" href="style.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="print.css" type="text/css" media="print"/>
    <link rel="stylesheet" href="tampilan.css" type="text/css" media="screen"/>
    0
  9. <link rel="stylesheet" href="style.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="print.css" type="text/css" media="print"/>
    <link rel="stylesheet" href="tampilan.css" type="text/css" media="screen"/>
    1
  10. <link rel="stylesheet" href="style.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="print.css" type="text/css" media="print"/>
    <link rel="stylesheet" href="tampilan.css" type="text/css" media="screen"/>
    2
  11. <link rel="stylesheet" href="style.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="print.css" type="text/css" media="print"/>
    <link rel="stylesheet" href="tampilan.css" type="text/css" media="screen"/>
    3
  12. <link rel="stylesheet" href="style.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="print.css" type="text/css" media="print"/>
    <link rel="stylesheet" href="tampilan.css" type="text/css" media="screen"/>
    4
  13. <link rel="stylesheet" href="style.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="print.css" type="text/css" media="print"/>
    <link rel="stylesheet" href="tampilan.css" type="text/css" media="screen"/>
    5
  14. <link rel="stylesheet" href="style.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="print.css" type="text/css" media="print"/>
    <link rel="stylesheet" href="tampilan.css" type="text/css" media="screen"/>
    6
  15. <link rel="stylesheet" href="style.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="print.css" type="text/css" media="print"/>
    <link rel="stylesheet" href="tampilan.css" type="text/css" media="screen"/>
    7

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

Menentukkan ukuran gambar/icon, hanya untuk sematan attribute

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

Contoh :

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

Nilai atau value attribute ini adalah tinggi x lebar

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

Menentukkan media tipe pada element link.

Contoh :

<link rel="stylesheet" href="style.css" type="text/css"/>
<link rel="icon" href="/favicon.ico"  type="image/x-icon"/>
<link href='/feeds/posts/default' rel='alternate' type='application/atom+xml'/>

Nilai atau value attribute ini adalah media_type

Global Attributes:

Element <link> mencakup Global Attributes HTML.

Event Attributes:

Element <link> mencakup Event Attributes HTML.

Browser Support :

ChromeYaSafariYaFirefoxYaOperaYaIEYaEdgeYa

Android WebviewYaChrome AndroidYaEdge MobileYaFirefox Android4Opera AndroidYaiOs SafariYaSamsung InternetYa

Atribut rel mendefinisikan hubungan link tersebut dengan HTML. rel="stylesheet" berarti hubungan target CSS dengan file HTML adalah sebagai dokumen pemberi style. .

Tag digunakan untuk menghubungkan file HTML dengan file CSS yang mana menggunakan atribut rel dan type adalah?

gunakan tag <link> untuk menghubungkan html dengan css.

Apa itu CSS dan HTML?

CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.
Deskripsi. Penjelasan HTML link tag <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.