HTML - Referensi Fonts
Halo, para pengembang web yang sedang belajar! Hari ini, kita akan masuk ke dalam dunia yang menakjubkan dari font HTML. Sebagaai guru komputer yang ramah di lingkungan Anda, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Ingat, sama seperti memilih pakaian yang tepat untuk kesempatan khusus, memilih font yang sempurna dapat membuat halaman web Anda terlihat sangat indah!
Sintaks
Ayo mulai dari dasar. Dalam HTML, kita menggunakan tag <font> untuk menentukan wajah font, ukuran, dan warna teks. Namun, penting untuk dicatat bahwa tag ini sudah ditinggalkan dalam HTML5, yang berarti itu tidak lagi direkomendasikan untuk digunakan. Tetapi jangan khawatir! Kita akan belajar tentang itu untuk konteks sejarah dan kemudian menjelajahi alternatif modern.
Sintaks dasar tampak seperti ini:
<font face="font_family" size="size" color="color">Teks disini</font>Tag Font HTML
Sekarang, mari kitauraikan atribut tag <font>:
-
face: Ini menentukan keluarga font. -
size: Ini mengatur ukuran font. Itu bisa berada di antara 1 (terkecil) sampai 7 (terbesar). -
color: Ini menentukan warna teks.
Ini adalah contoh:
<font face="Arial" size="5" color="blue">Selamat datang di website saya!</font>Ini akan menampilkan "Selamat datang di website saya!" dalam font Arial, ukuran 5, dan warna biru.
Fonts yang Aman untuk Web
Fonts yang aman untuk web adalah fonts yang umum tersedia di berbagai sistem operasi. Menggunakan ini menjamin bahwa teks Anda tampak seperti yang diinginkan untuk sebagian besar pengguna. Ini adalah tabel dari beberapa fonts aman untuk web:
| Nama Font | Contoh |
|---|---|
| Arial | The quick brown fox jumps over the lazy dog |
| Verdana | The quick brown fox jumps over the lazy dog |
| Helvetica | The quick brown fox jumps over the lazy dog |
| Times New Roman | The quick brown fox jumps over the lazy dog |
| Courier | The quick brown fox jumps over the lazy dog |
Contoh Fonts HTML
Ayo menerapkan pengetahuan kita ke dalam contoh yang menarik:
<html>
<head>
<title>Fruitsku Kesukaan</title>
</head>
<body>
<h1><font face="Arial" color="red">Fruitsku Kesukaan</font></h1>
<p><font face="Verdana" size="4" color="green">Apel enak sekali!</font></p>
<p><font face="Courier" size="3" color="orange">Jeruk segar!</font></p>
<p><font face="Times New Roman" size="5" color="purple">Anggur manis!</font></p>
</body>
</html>Dalam contoh ini, kita membuat halaman tentang buah kesukaan. Setiap buah diberikan deskripsi menggunakan font, ukuran, dan warna yang berbeda. Ini menunjukkan bagaimana Anda dapat menggunakan fonts untuk membuat hierarki visual dan penekanan di halaman web Anda.
Fonts untuk Sistem Microsoft
Sistem Microsoft datang dengan berbagai fonts yang terpasang. Berikut adalah beberapa yang populer:
- Arial
- Calibri
- Cambria
- Georgia
- Tahoma
- Times New Roman
Fonts untuk Sistem Macintosh
Sistem Macintosh juga memiliki set fonts default mereka sendiri:
- Helvetica
- Arial
- Times New Roman
- Courier
- Verdana
- Georgia
Fonts untuk Sistem Unix
Sistem Unix, termasuk distribusi Linux, sering memasukkan fonts ini:
- DejaVu Sans
- Liberation Sans
- FreeSans
- Nimbus Sans L
Sekarang, saya tahu apa yang Anda pikirkan: "Tapi, guru, Anda mengatakan bahwa tag <font> sudah ditinggalkan. apa yang harus kita gunakan sebagai gantinya?" Pertanyaan yang bagus! Dalam pengembangan web modern, kita menggunakan CSS (Cascading Style Sheets) untuk gayakan teks kita. Ini adalah contoh cepat:
<html>
<head>
<title>Styling Font Modern</title>
<style>
h1 {
font-family: Arial, sans-serif;
color: red;
}
.green-text {
font-family: Verdana, sans-serif;
font-size: 18px;
color: green;
}
.orange-text {
font-family: 'Courier New', monospace;
font-size: 16px;
color: orange;
}
.purple-text {
font-family: 'Times New Roman', serif;
font-size: 20px;
color: purple;
}
</style>
</head>
<body>
<h1>Fruitsku Kesukaan</h1>
<p class="green-text">Apel enak sekali!</p>
<p class="orange-text">Jeruk segar!</p>
<p class="purple-text">Anggur manis!</p>
</body>
</html>Ini mencapai hasil yang sama seperti contoh sebelumnya, tetapi menggunakan teknik CSS modern instead of tag <font> yang ditinggalkan.
Ingat, memilih font yang tepat adalah seperti memilih rempah yang sempurna untuk masakan Anda - itu dapat membuat halaman web Anda tampak menarik! Tetapi selalu pertimbangkan keterbacaan terlebih dahulu. Font yang keren mungkin terlihat bagus, tetapi jika pengguna Anda tidak bisa membacanya, itu tidak melakukan tugasnya.
Sekarang, saya ingin berbagi cerita singkat. Ketika saya pertama kali memulai pengembangan web, saya sangat gembira tentang fonts sehingga saya menggunakan font yang berbeda untuk setiap paragraf di halaman saya. Itu terlihat seperti surat rampok! Belajar dari kesalahan saya - konsistensi adalah kunci.
Terus latih, tetap curi-curi, dan selamat berkoding!
Credits: Image by storyset