Meskipun blogspot atau wordpress sudah menyediakan format dan ukuran font secara instant, tetapi jenis dan warnanya terbatas. jika kita ingin berkreasi maka kita perlu memahami bagaimana tag-tag untuk format font tersebut.
Tag HTML untuk font adalah <font>…</font>, dengan tag ini kita bisa membuat format sendiri, seperti :
- jenis font (face)
- warna font (color), dan
- ukuran font(size)
Membuat jenis font
Format font menggunakan tag <font>...</font>
Kalau ingin menggunakan jenis font tertentu maka tag dalam tag font ditambahkan face="nama font". Contoh jika kita akan menggunakan jenis font Verdana, maka tag dibuat <font face="Verdana">...</font>. Jadi dalam tag font pembuka diisi face="Verdana" , kemudian setelah teks dibuat tag penutup.
Untuk membuktikan cobalah buat script berikut pada Notepad, dan simpan dengan nama FormatFont.html
<html>
<head>
<title>Format Font</title>
</head>
<body>
<font face="Cooper Black">Judulnya menggunakan format font Cooper Black</font>
<br>
<font face="Verdana">Konten dengan menggunakan Verdana</font>
</body>
</html>
Setelah itu silakan dibuka , maka akan tampil pada halaman browser sebagai berikut
Mengatur Warna Font
Mengatur Warna Font
Secara default blogspot menyiapkan format untuk warna font, tetapi tentu saja jenisnya terbatas. Untuk jenis warna lain anda harus melakukannya dalam bahasa html.
Untuk warna dalam tag font kita sisipkan attribut color, bisa menggunakan nama warna ( tentu saja dalam bahasa inggris) atau menggunakan kode warna. Penulisan kode warna di awali dengan tanda pagar
Untuk kode ini di internet banyak sekali, tetapi jika ingin warna khusus anda juga bisa menggunakan aplikasi editor photo seperti photosop.
Contoh tag warna font :
<font color="yellow">
<font color="#8A2BE2">
Untuk memahami dengan benar cobalah edit script yang dibuat sebelumnya, ditambahkan dengan tag warna sehingga menjadi :
<html>
<head>
<title>Format Font</title>
</head>
<body>
<font face="Cooper Black" color="#006400">Judulnya menggunakan format font Cooper Black</font>
<br>
<font face="Verdana" color="red">Konten dengan menggunakan Verdana</font>
</body>
</html>
Tampilannya akan menjadi
Untuk mengetahui kode warna html anda bisa lihat pada link berikut http://ngeblogayo.blogspot.com/p/see-more-at-httpwww.html
Baca juga : ColorPic Version 4.1 Aplikasi Warna HTML Gratis
Mengatur Ukuran Font
Untuk mengatur ukuran fon ditambahkan atribut size. Sehingga tag-nya menjadi <font size="ukuran dari font (1-7)">. Contoh <font size="5">
Sekarang kita coba tambahkan format font pada script di atas menjadi
<html>
<head>
<title>Format Font</title>
</head>
<body>
<font face="Cooper Black" color="#006400" size="5">Judulnya menggunakan format font Cooper Black</font>
<br>
<font face="Verdana" color="red" size="3">Konten dengan menggunakan Verdana</font>
</body>
</html>
Hasilnya adalah
Sesuai dengan recomendasi dari World Web Consortium (W3C), Untuk HTML 4.0 keatas, tag <font> tidak dipergunakan lagi, sebagai gantinya dibuat tag <style> atau disebut dengan Cassading Style Sheets (CSS). Dengan CSS penggunaanya akan lebih kompleks dan lebih luas lagi karena dapat dikombinasikan dengan tag elemen-elemen lainnya di dalam dokumen HTML.
Untuk membuat jenis font (face):
<h1 style="font-family:verdana">Judul Menggunakan font verdana</h1>
<p style="font-family:tahoma">Konten menggunakan font tahoma</p>
Untuk membuat ukuran (size):
<h1 style="font-size:150%">Judul dengan ukuran 150%</h1>
<p style="font-size:80%">Konten dengan ukuran 80%</p>
Untuk membuat warna font (color):
<h1 style="color:blue">Judul dengan warna Biru</h1>
<p style="color:red">Konten dengan warna merah</p>
Contoh komplit untuk membuat jenis font (face),size dan color:
<h1 style="font-family:verdana">Judul Menggunakan font verdana</h1>
<p style="font-family:tahoma">Konten menggunakan font tahoma</p>
Untuk membuat ukuran (size):
<h1 style="font-size:150%">Judul dengan ukuran 150%</h1>
<p style="font-size:80%">Konten dengan ukuran 80%</p>
Untuk membuat warna font (color):
<h1 style="color:blue">Judul dengan warna Biru</h1>
<p style="color:red">Konten dengan warna merah</p>
Contoh komplit untuk membuat jenis font (face),size dan color:
<html>Silahkan dicoba ,dan lihat hasilnya sendiri
<head>
<title>Format Font</title>
</head>
<body>
<p style="font-family:Cooper Black; color:#4CDFB3; font-size:150%">Judulnya menggunakan format font Cooper Black</p><br>
<p style="font-family:verdana; color:blue; font-size:120%">Konten dengan menggunakan Verdana</p>
</body>
</html>
<html>
<head></head>
<body>
0 comments:
Post a Comment