Size, Color dan Face (Ukuran, Warna dan Jenis Huruf)
Judul tersebut menggambarkan 3 hal yang bisa anda lakukan terhadap teks anda. Sesuai janji saya, kita akan mulai menggunakan atribut pada tag <font> ini.
Atribut adalah tambahan keterangan pada tag, dan formatnya adalah sebagai berikut :
tag... atribut=”nilai atribut”, atribut2=”nilai atribut 2”, ...
Nah, kita akan mulai dengan atribut face yang sangat berguna untuk menyesuaikan jenis huruf dengan keinginan kita. Sesuai dengan format atribut yang baru saja kita bahas, maka penambahan atribut face ini akan menjadi seperti ini :
Atribut adalah tambahan keterangan pada tag, dan formatnya adalah sebagai berikut :
tag... atribut=”nilai atribut”, atribut2=”nilai atribut 2”, ...
Nah, kita akan mulai dengan atribut face yang sangat berguna untuk menyesuaikan jenis huruf dengan keinginan kita. Sesuai dengan format atribut yang baru saja kita bahas, maka penambahan atribut face ini akan menjadi seperti ini :
<font face="Arial">Selamat datang di Homepage Saya</font>
Jangan lupa untuk mengapit nilai atribut dengan tanda kutip ganda setelah tanda sama dengan. Perhatikan juga bahwa anda tidak perlu menuliskan atribut tersebut pada tag penutup.
Tentu saja anda bisa menambahkan atribut lain dalam sebuah tag, dan dalam contoh berikutnya kita akan melakukannya untuk mengubah ukuran huruf. Hal yang penting untuk anda ketahui, bahwa ukuran huruf dalam HTML berbeda dari ukuran huruf yang biasa anda gunakan di MS-WORD atau aplikasi lainnya. Umumnya, ukuran huruf menggunakan satuan point (pt).
Nah, anda bisa menggunakan tabel berikut ini untuk memperkirakan besar huruf yang anda inginkan. Namun demikian, pada prakteknya anda akan melakukan trial & error pada ukuran huruf ini untuk melihat komposisi yang tepat untuk dokumen anda.
Tentu saja anda bisa menambahkan atribut lain dalam sebuah tag, dan dalam contoh berikutnya kita akan melakukannya untuk mengubah ukuran huruf. Hal yang penting untuk anda ketahui, bahwa ukuran huruf dalam HTML berbeda dari ukuran huruf yang biasa anda gunakan di MS-WORD atau aplikasi lainnya. Umumnya, ukuran huruf menggunakan satuan point (pt).
Nah, anda bisa menggunakan tabel berikut ini untuk memperkirakan besar huruf yang anda inginkan. Namun demikian, pada prakteknya anda akan melakukan trial & error pada ukuran huruf ini untuk melihat komposisi yang tepat untuk dokumen anda.
| Ukuran Huruf HTML | Ukuran Huruf Standar |
| 1 | 8 pt |
| 2 | 10 pt |
| 3 | 12 pt |
| 4 | 14pt |
| 5 | 18 pt |
| 6 | 24 pt |
| 7 | 36 pt |
Setelah menyesuaikan jenis huruf menjadi Arial tadi, anda juga bisa membuat sebuah judul besar bagi dokumen anda dengan mengubah baris tag font menjadi seperti ini (bedakan judul dokumen dengan judul halaman, judul halaman mengacu pada penggunaan tag <title> sedangkan judul dokumen letaknya di dalam dokumen utama) :
<font face="Arial" size="7">Selamat datang di Homepage Saya</font>
Seperti yang anda lihat, begitu anda mengetahui kegunaan sebuah tag, maka akan sangat mudah bagi anda untuk menambahkan hal menarik lainnya pada tag tersebut.
Kita akan mencoba menggunakan atribut penting terakhir dari tag <font> ini yang akan memperindah huruf yang anda tuliskan yaitu yaitu permainan warna.
Perhatikan, bahwa anda harus menggunakan penulisan warna dalam bahasa Inggris Amerika. Atribut color (warna) ini berbeda dari atribut lainnya. Anda bisa menggunakan 2 cara untuk menuliskan nilai atribut color ini yaitu menggunakan kata-kata (nama warna standar dalam bahasa inggris) dan menggunakan kode Hexadesimal. Saya akan jelaskan lebih lanjut.
Penggunaan kata-kata memiliki keterbatasan dalam jumlah warna yang bisa anda tuliskan. Misalnya anda tidak mungkin menuliskan warna “agak kuning sedikit” untuk menampilkan warna huruf kuning muda. Untuk bisa menuliskan dalam semua gradasi warna kuning dan warna lainnya, anda harus menuliskannya dalam hexadesimal.
Kita akan lihat contoh penulisan menggunakan kedua cara tersebut. Untuk menampilkan judul halaman tadi dalam warna merah, kita bisa melakukannya dengan cara berikut :
<font face="Arial" size="7" color="red">Selamat datang di Homepage Saya</font>
atau
<font face="Arial" size="7" color="#FF0000"> Selamat datang di Homepage Saya </font>
Perhatikan bahwa kode Hexadesimal dituliskan dalam format #000000 (tanda # diikuti oleh 6 angka Hexadesimal). Masing-masing angka Hexadesimal tersebut adalah angka 1-9, A, B, C, D, E dan F.
Dua angka pertama adalah jumlah warna merah, 2 angka berikutnya warna hijau, dan 2 warna terakhir menunjukkan jumlah warna biru yang akan dicampur untuk menghasilkan warna tertentu.
00 merupakan angka minimum dan FF merupakan angka maksimum. Jika anda perhatikan, untuk menuliskan warna merah saja, kita menggunakan kode Hex #FF0000. Untuk menampilkan warna hijau kita menggunakan kata GREEN atau kode Hex #00FF00. Anda tentu sudah bisa menebak bagaimana cara menuliskan warna biru dalam kode Hex bukan ? Ya…. #0000FF.
Latihan Praktek :
<html>
<head>
<title>Homepage Pribadi Saya</title>
</head>
<body>
<font face="Arial" size="7" color="red"> Selamat datang di Homepage Saya </font>
</body>
</html>
<head>
<title>Homepage Pribadi Saya</title>
</head>
<body>
<font face="Arial" size="7" color="red"> Selamat datang di Homepage Saya </font>
</body>
</html>
Penjelasan :
Tag <font> memiliki 3 atribut utama yaitu face untuk menentukan jenis huruf, size untuk mengubah ukuran huruf dan color untuk mengubah warna huruf.
Sebagai latihan, silahkan buat judul dokumen anda berada di tengah halaman sehingga menjadi seperti ini :
Selamat datang di Homepage Saya
Petunjuk :
Ingatlah penggunaan tag <center> di pelajaran terdahulu.
Materi Belajar Bikin Website selengkapnya
KLIK Banner di bawah ini
