HTML - Rujukan Fon
Hai, para pengembang web yang sedang belajar! Hari ini, kita akan melihat dunia yang menarik dari fon HTML. Seperti guru komputer tetangga yang ramah, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Ingat, sama seperti memilih pakaian yang tepat untuk kesempatan khusus, memilih fon yang sempurna bisa membuat halaman web Anda terlihat bagus!
Sintaks
mari kita mulai dari dasar. Dalam HTML, kita menggunakan tag <font> untuk menentukan wajah fon, ukuran, dan warna teks. Namun, penting untuk dicatat bahwa tag ini sudah usang 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 terlihat seperti ini:
<font face="font_family" size="size" color="color">Teks disini</font>Tag Fon HTML
Sekarang, mari kitauraikan atribut tag <font>:
-
face: Ini menentukan keluarga fon. -
size: Ini mengatur ukuran fon. Itu bisa berada di antara 1 (terkecil) sampai 7 (terbesar). -
color: Ini menentukan warna teks.
Berikut adalah contoh:
<font face="Arial" size="5" color="blue">Selamat datang di website saya!</font>Ini akan menampilkan "Selamat datang di website saya!" dalam fon Arial, ukuran 5, dan warna biru.
Fon Aman Web
Fon aman web adalah fon yang umum tersedia di berbagai sistem operasi. Menggunakan ini memastikan bahwa teks Anda tampak seperti yang diinginkan untuk sebagian besar pengguna. Berikut adalah tabel dari beberapa fon aman web populer:
| Nama Fon | 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 Fon HTML
Ayo menerapkan pengetahuan kita dengan contoh yang menyenangkan:
<html>
<head>
<title>Fruits Favorite Saya</title>
</head>
<body>
<h1><font face="Arial" color="red">Fruits Favorite Saya</font></h1>
<p><font face="Verdana" size="4" color="green">Apel enak!</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 fon, ukuran, dan warna yang berbeda. Ini menunjukkan bagaimana Anda dapat menggunakan fon untuk menciptakan hierarki visual dan penekanan dalam halaman web Anda.
Fon untuk Sistem Microsoft
Sistem Microsoft datang dengan berbagai fon yang terinstal. Berikut adalah beberapa yang populer:
- Arial
- Calibri
- Cambria
- Georgia
- Tahoma
- Times New Roman
Fon untuk Sistem Macintosh
Sistem Macintosh juga memiliki set fon bawaan mereka sendiri:
- Helvetica
- Arial
- Times New Roman
- Courier
- Verdana
- Georgia
Fon untuk Sistem Unix
Sistem Unix, termasuk distribusi Linux, biasanya termasuk fon-fon ini:
- DejaVu Sans
- Liberation Sans
- FreeSans
- Nimbus Sans L
Sekarang, saya tahu apa yang Anda pikirkan: "Tapi guru, Anda mengatakan bahwa tag <font> usang. Apa yang harus kita gunakan sebagai gantinya?" Pertanyaan bagus! Dalam pengembangan web modern, kita menggunakan CSS (Cascading Style Sheets) untuk gayakan teks. Berikut adalah contoh singkat:
<html>
<head>
<title>Styling Fon 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>Fruits Favorite Saya</h1>
<p class="green-text">Apel enak!</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 saja, bukan tag <font> yang usang.
Ingat, memilih fon yang tepat adalah seperti memilih rempah yang sempurna untuk masakan Anda - itu bisa membuat halaman web Anda tampak menarik! Tetapi selalu pertimbangkan keterbacaan dahulu. Fon yang keren mungkin terlihat bagus, tetapi jika pengguna Anda tidak bisa membacanya, itu tidak melakukan pekerjaannya.
Ketika kita selesai, saya ingin berkongsi cerita pendek. Ketika saya pertama kali memulai pengembangan web, saya sangat gembira tentang fon sehingga saya menggunakan fon yang berbeda untuk setiap paragraf di halaman saya. Itu terlihat seperti surat yang dicuri! Belajar dari kesalahan saya - konsistensi adalah kunci.
Tetap berlatih, tetap curi-curi, dan selamat coding!
Credits: Image by storyset