Hari ini saya akan mengingat kembali pelajaran yang pernah saya jelajahi di dunia web programing, walaupun hanya sekedar hobi yang saya anggap angin lalu tapi cukup mengasikan mencari sesuatu yang baru waktu itu, atau lebih tepatnya penasaran bagaimana orang bisa menampilkan huruf yang beragam yang tampil di jendela browser, saat itu saya memakai Mozilla, sekarang sudah beralih ke Chrome.
Disini saya coba membuat konten di blog saya yang baru ini tetang tag font HTML yang dilengkapi dengan contoh contohnya, yang walaupun sekarang banyak sekali ahli-ahli di bidang ini, tapi tidak ada salahnya saya isi blog ini dengan materi tentang tag font ini untuk mengisi kekosongan hari ini dari membuat konten.
Perlu di ketahui waktu itu, ketika saya pertama belajar HTML referensi yang banyak saya pakai bersumber dari w3schools, jadi intuk memperdalam tentang dasar-dasar tentang HTML saya sarankan untuk mengunjungi website tersebut, saya kira cukup satu website tersebut untuk level dasar maupun medium. Tapi lebih bagus anda sudah memahami bahasa Inggris karena pengantarnya bahasa Inggris.
Cukup sudah basa-basinya, langsung aja kita mulai.
1. Font Size
Tag ini untuk mengatur besar kecilnya ukuran huruf yang akan ditampilkan. Selain font size juga sebenarnya ada tag lain yang berfungsi untuk mengatur ukuran huruf atau teks yang akan ditampilkan di browser yaitu tag <h> yang telah saya jelaskan di postingan yang lalu.
Contoh penggunaan font size :
<!DOCTYPE html>
<html>
<body>
<font size = 1> Huruf menggunakan tag font size 1</font><br>
<font size = 2> Huruf menggunakan tag font size 2</font><br>
<font size = 3> Huruf menggunakan tag font size 3</font><br>
<font size = 4> Huruf menggunakan tag font size 4</font><br>
<font size = 5> Huruf menggunakan tag font size 5</font><br>
<font size = 6> Huruf menggunakan tag font size 6</font><br>
<font size = 7> Huruf menggunakan tag font size 7</font>
</body>
</html>
Hasilnya :
Huruf menggunakan tag font size 2
Huruf menggunakan tag font size 3
Huruf menggunakan tag font size 4
Huruf menggunakan tag font size 5
Huruf menggunakan tag font size 6
Huruf menggunakan tag font size 7
2. Font Face.
Nah kalau yang ini merupakan tag HTML untuk mengatur atau memilih jenis huruf. Coba kita lihat contoh berikut dan hasilnya:<!DOCTYPE html>
<html>
<body>
<font face="Agency FB" >Jenis huruf Agency FB </font><br>
<font face="Calibri" >Jenis huruf Calibri </font><br>
<font face="Comic Sans MS" >Jenis huruf Comic Sans MS </font><br>
<font face="Consolas" >Jenis huruf Consolas </font><br>
<font face="Courier" >Jenis huruf Courier </font><br>
<font face="Cursive" >Jenis huruf Cursive </font><br>
<font face="Decorative" >Jenis huruf Decorative </font><br>
<font face="Fantasy" >Jenis huruf Fantasy </font><br>
<font face="Impact" >Jenis huruf Impact </font><br>
<font face="Minion" >Jenis huruf Minion </font><br>
<font face="Modern" >Jenis huruf Modern </font><br>
<font face="Monospace" >Jenis huruf Monospace </font><br>
<font face="Open Sans" >Jenis huruf Open Sans </font><br>
<font face="Palatino" >Jenis huruf Palatino </font><br>
<font face="Perpetua" >Jenis huruf Perpetua </font><br>
<font face="Roman" >Jenis huruf Roman </font><br>
<font face="Sans-serif" >Jenis huruf Sans-serif </font><br>
<font face="Times New Roman" >Jenis huruf Times New Roman </font><br>
<font face="Tw Cen MT" >Jenis huruf Tw Cen MT </font><br>
<font face="Verdana" >Jenis huruf Verdana </font><br>
</body>
</html>
Hasilnya:
Jenis huruf Calibri
Jenis huruf Comic Sans MS
Jenis huruf Consolas
Jenis huruf Courier
Jenis huruf Cursive
Jenis huruf Decorative
Jenis huruf Fantasy
Jenis huruf Impact
Jenis huruf Minion
Jenis huruf Modern
Jenis huruf Monospace
Jenis huruf Open Sans
Jenis huruf Palatino
Jenis huruf Perpetua
Jenis huruf Roman
Jenis huruf Sans-serif
Jenis huruf Times New Roman
Jenis huruf Tw Cen MT
Jenis huruf Verdana
3. Font Color HTML
Penulisan tag-nya seperti dibawah ini:
< font color="warna/kode warna"> Teks yang akan di tampilkan</font>
Attribute "color" di tag font ini berfungsi memberi efek warna terhadap teks yang hendak di tampilkan selam masih berada di dalam tag <font> </font>.
Sekarang saatnya kita membuat contohnya:
Coba kita save script dibawah dan buka dengan browser.
<!DOCTYPE html>
<html>
<body>
<font color="red">Teks ini berwarna merah</font><br>
<font color="green">Teks ini berwarna hijau</font><br>
<font color="yellow">Teks ini berwarna kuning</font><br>
<font color="grey">Teks ini berwarna abu-abu</font><br>
<font color="magenta">Teks ini berwarna magenta</font><br>
</body>
</html>
Dan hasilnya sebagai berikut:
Teks ini berwarna merah
Teks ini berwarna hijau
Teks ini berwarna kuning
Teks ini berwarna abu-abu
Teks ini berwarna magenta
4. Font cetak tebal, cetak miring dan bergaris bawah.
Pelajaran selanjutnya adalah membuat efek cetak miring, tebal dan bergaris bawah pada teks.Penulisan attribute ini sebagai berikut:
a. Cetak tebal
<b> Ini bercetak tebal</b>
b. Cetak miring
<i> Ini bercetak tebal</i>
c. Teks bergaris bawah
<u> Ini bercetak tebal</u>
Contohnya sebagai berikut:
<!DOCTYPE html>
<html>
<body>
<b> Ini bercetak tebal</b><br>
<i> Ini bercetak tebal</i><br>
<u> Ini bercetak tebal</u><br>
</body>
</html>
Hasilnya sebagai berikut:
Inibercetak tebal
Inibercetak tebal<u> Ini bercetak tebal</u>
Contohnya sebagai berikut:
<!DOCTYPE html>
<html>
<body>
<b> Ini bercetak tebal</b><br>
<i> Ini bercetak tebal</i><br>
<u> Ini bercetak tebal</u><br>
</body>
</html>
Hasilnya sebagai berikut:
Inibercetak tebal
Inibercetak tebal
5. Mencoret teks <s>
Markup mencoret teks digunakan untuk menandakan bahwa teks yang dicoret tidak berlaku lagi atau dalam istilahnya no longer correct.
Contoh :
<s> Teks ini tidak berlaku lagi</s>
Hasilnya :
Tidak ada komentar:
Posting Komentar