Apa Html Yang Benar Untuk Merujuk Ke Style Sheet Eksternal

3 min read Jun 28, 2024
Apa Html Yang Benar Untuk Merujuk Ke Style Sheet Eksternal

Apa HTML yang Benar untuk Merujuk ke Style Sheet Eksternal?

Membuat style sheet eksternal untuk mengatur tampilan website Anda merupakan praktik terbaik dalam pengembangan web. Namun, bagaimana cara menghubungkan style sheet tersebut ke file HTML Anda? Berikut adalah HTML yang benar untuk merujuk ke style sheet eksternal:




  Judul Website
   


  


Penjelasan:

  • <!DOCTYPE html>: Deklarasi tipe dokumen, menyatakan bahwa dokumen ini adalah HTML5.
  • <html>: Elemen pembuka dan penutup untuk seluruh dokumen HTML.
  • <head>: Elemen pembuka dan penutup untuk bagian kepala dokumen, berisi metadata seperti judul dan referensi style sheet.
  • <title>: Elemen judul, berisi judul website yang akan ditampilkan di tab browser.
  • <link rel="stylesheet" href="style.css">: Tag ini berfungsi untuk menghubungkan style sheet eksternal ke file HTML.
    • rel="stylesheet": Atribut ini menyatakan bahwa file yang direferensikan adalah style sheet.
    • href="style.css": Atribut ini menentukan lokasi file style sheet. Ganti "style.css" dengan nama file style sheet Anda.
  • <body>: Elemen pembuka dan penutup untuk bagian badan dokumen, berisi konten website yang ditampilkan di browser.

Catatan:

  • Lokasi Style Sheet: Pastikan nama file dan lokasi style sheet benar. Jika file berada di folder yang sama dengan file HTML, Anda dapat menggunakan nama file saja seperti "style.css". Jika berada di folder lain, Anda harus menentukan path lengkapnya (misalnya, "css/style.css").
  • Urutan Tag: Sebaiknya letakkan tag <link> di dalam <head>, sebelum tag <body>.
  • Multiple Style Sheets: Anda dapat merujuk ke lebih dari satu style sheet dengan menambahkan tag <link> lainnya.

Kesimpulan:

Menggunakan style sheet eksternal dapat meningkatkan organisasi dan pemeliharaan kode HTML Anda. Dengan menggunakan tag <link> yang benar, Anda dapat menghubungkan style sheet ke file HTML Anda dan mengontrol tampilan website Anda dengan lebih mudah.

Latest Posts


Featured Posts