Tutorial Membuat Font Pada HTML dan CSS Terlengkap

Posted on

 Dalam HTML kita mengenal fungsi Font,Fungsi dari font digunakan untuk mengatur warna,jenis,dan ukuran huruf. Tag <font> dalam HTML sudah disingkirkan, kemungkinan akan dihilangkan pada versi HTML mendatang. Walaupun banyak orang yang menggunakannya, Anda harus menghindarinya, gunakan style sebagai gantinya.

html-css

Menggunakan Tag <Font> HTML

Dengan kode seperti berikut, Anda dapat menspesifikasikan ukuran dan jenis dari output browsernya:

<p>font size=”2″ face=”Verdana” >
This is a paragraph.
</f ontx/p>
<p>font size=”3″ face=”Times” >
This is another paragraph.
</p>

Lihat hasil contoh gambar menggunakan tag font HTML dibawah ini:

1

Lihat Source Code

<!–coba_font.html–>
<html>
<body>
<p><font size=”2″ face=”Verdana”>
Ini paragraf.
</font></p>
<p><font size=”5″ face=”Times”> Ini paragraf yang lain.
</font>
</p>
</body>
</html>

Menggunakan Font Size

Contoh ini mendemonstrasikan bagaimana mengubah ukuran font?

Lihat Source Code

Lihat hasil contoh gambar menggunakan Font size dibawah ini:

2

<!– coba_fontsize.html–>
<html>
<body>
<font    size=l>    Font    Size    l</font><br>
<font    size=2>    Font    Size    2</font><br>
<font    size=3>    Font    Size    3</font><br>
<font    size=4>    Font    Size    4</font><br>
<font    size=5>    Font    Size    5</font><br>
<font    size=6>    Font    Size    6</font><br>
<font    size=7>    Font    Size    7</font><br>
</body>
</html>

Font <Tag> Sebaiknya Jangan Digunakan

Tag <font> disisihkan pada versi HTML terakhir (HTML 4 dan XHTML). W3C telah membuang tag <font> dari rekomendasinya. Pada versi HTML mendatang, style sheet (CSS) akan digunakan untuk mendefinisikan properti layout dan display elemen HTML. Berikut ini contoh style sheet.
TH {background-color : Aqua;font : italic fantasy;} HI {color : Gray;}
BODY {background-color : Silver;}

Menggunakan Font Face

Contoh ini mendemonstrasikan bagaimana mengubah face (bentuk) font. Lihat hasil contoh gambar menggunakan font face:

3

Lihat Source Code

<!–coba_fontface.html–>
<html>
<body>
<p><font face = “Verdana”>
This is a paragraph.
</font></p>
<p><font face=”Times”>
This is another paragraph.
</font></p>
<p><font face=”Comic Sans MS”>
This is another paragraph.
</font></p>
<p><font face= “Microsoft sans serif “>
This is another paragraph.
</font></p>
<p><font face=”Licida Dingbom”>
Note that if the font is misspelled, or if the font is not installed on your computer, it will not display correctly.
</font></p>
</body>
</html>

Menggunakan Font Color

Contoh ini mendemonstrasikan bagaimana mengubah warna font. Lihat hasil contoh gambar menggunakan Font color dibawah ini:

4

Lihat Source Code

<!–coba_fontcolor.html–>
<html>
<body>
<p><font size=”2″ color=”#ff0000″>
This is a paragraph.
</font></p>
<p><font size=”5″ color=”red”>
This is another paragraph.
</font></p>
</body>
</html>

CSS merupakan singkatan dari cascade style sheet, merupakan features baru dari HTML 4.0. Hal ini diperlukan setelah melihat perkembangan HTML menjadi kurang praktis karena web pages terlalu banyak dibebani hal-hal yang berkaitan dengan faktor tampilan seperti font dan lain-lain.
Untuk itu jika kumpulan style tersebut dikelola secara terpisah maka manajemen pages menjadi lebih mudah dan efisien. Pada prakteknya penggunaan CSS ini didukung oleh Explorer dan Navigator, dua browser terpopuler pada internet.

Lanjutan membaca ke halaman berikut nya..