Halo sobat Artikel Multimedia, pada kesempatan ini kita akan membahas bagaimana cara membuat judul halaman yang akan tampil di tab browser dan juga menambahkan favicon yaitu ikon yang akan tampil di bagian kiri judul halaman. Berikut ini gambar dari judul halaman dan favicon.
Untuk membuat judul halaman sobat
bisa menggunakan tag <title>…</title>, tag ini sendiri terletak
pada bagian tag <head>…</head>. Jika sobat ingin tahu leibh banyak tentang
tag html silakan baca postingan sebelumnya tentang Pengenalan Dasar Tag HTML. Berikut
kode html-nya:
<!-- Bagian Judul -->
<title>Artikel Multimedia</title>
</head>
Selanjutnya untuk membuat favicon
sobat bisa langsung menambahkan link gambar yang akan digunakan atau bisa juga dengan
cara berikut yaitu menambahkan gambar ke dalam folder project sobat tepatnya
dalam folder public\images.
<!-- Bagian Favicon -->
<link rel="icon" href="images/artikel-multimedia.png" type="image/png ">
<!-- Bagian Judul -->
<title>Artikel Multimedia</title>
</head>
Sedikit penjelasan sobat mengenai
tag <link> untuk menambahkan favicon, yang mana di dalamnya terdapat tiga
atribut berikut.
1. Atribut rel (relationship)
Atribut ini menjelaskan hubungan antara dokumen html dengan sumber daya eksternal yang diacu. Untuk favicon sendiri yang digunakan adalah rel="icon" atau rel="shortcut icon" (untuk versi lama), ini menandakan file tersebut difungsikan sebagai ikon situs.
2. Atribut href (hyperlink
reference)
Atribut ini menentukan
lokasi/path file favicon atau bisa juga disebut sebagai alamat tempat browser
mengambil ikon yang akan digunakan. Ada dua cara:
- Pertama, relative path contohnya: href="favicon.ico"
- Kedua, absolute path contohnya: href="https://example.com/favicon.ico"
3. Atribut type
Atribut ini memberitahu browser
jenis/format file ikon apa yang akan digunakan.
Untuk favicon biasanya:
- type="image/x-icon" → untuk format .ico
- type="image/png" → untuk format .png
- type="image/svg+xml" → untuk format .svg
Pada umumnya sobat, bagian ini terkadang
bisa diabaikan karena browser sendiri sudah bisa menebak jenis file dari
ekstensi yang kita masukkan, hanya saja dengan menambahkan type membuatnya
lebih jelas dan sesuai standar.
Sekian penjelasan tentang cara membuat judul halaman html dan cara menambahkan favicon, jika sobat tertarik dengan artikel seputar multimedia silakan kunjungi postingan kami lainnya di blog ini. Terima kasih …
0 Komentar
Terima kasih telah mengunjungi website ini semoga bermanfaat untuk anda