Contoh penggunaannya kita praktikan sebagai berikut :
1. Mengatur Ukuran Font
Ketikkan kode berikut pada Notepad++:
<html>Simpan dengan nama font.html pada folder C:\AppServ\www\coba seperti gambar:
<head>
<title>Mengatur Font</title>
</head>
<body>
<font size="1">Mengatur Font size 1</font><br>
<font size="2">Mengatur Font size 2</font><br>
<font size="3">Mengatur Font size 3</font><br>
<font size="4">Mengatur Font size 4</font><br>
<font size="5">Mengatur Font size 5</font><br>
<font size="6">Mengatur Font size 6</font><br>
<font size="7">Mengatur Font size 7</font><br>
</body>
</html>
Notepad++ jangan ditutup dulu karena masih akan dipakai untuk percobaan yang lain.
Selanjutnya buka webbrowser (saya pakai mozilla firefox) panggil halaman yang kita buat tadi di localhost/coba/font.html hasilnya:
Webbrowser jangan ditutup karena masih dipakai untuk latihan selanjutnya.
2. Mengatur Warna Font
Kembali ke Notepad++ hapus kode yang untuk mengatur ukuran font pada latihan 1 diatas. Selanjutnya ketikkan kode dibawah ini:
<html>Simpan ulang kode yang sudah diketikkan. Kembali buka webbrowser dan reload halaman localhost/coba/font.html maka hasilnya akan berubah seperti ini:
<head>
<title>Mengatur Font</title>
</head>
<body>
<font color="red">Mengatur Font dengan warna merah</font><br>
<font color="yellow">Mengatur Font dengan warna kuning</font><br>
<font color="green">Mengatur Font dengan warna hijau</font><br>
<font color="blue">Mengatur Font dengan warna biru</font>
</body>
</html>
3. Mengatur Jenis Font
Kembali ke Notepad++ hapus kode yang untuk mengatur warna font pada latihan 2 diatas. Selanjutnya ketikkan kode dibawah ini:
<html>Simpan ulang kode yang sudah diketikkan. Kembali buka webbrowser dan reload halaman localhost/coba/font.html maka hasilnya akan berubah seperti ini:
<head>
<title>Mengatur Font</title>
</head>
<body>
<font face="arial">Font dengan jenis arial</font><br>
<font face="arial narrow">Font dengan jenis arial narrow</font><br>
<font face="comic sans ms">Font dengan jenis comic sans ms</font><br>
<font face="monotype corsiva">Font dengan jenis monotype corsiva</font><br>
<font face="tahoma">Font dengan jenis tahoma</font>
</body>
</html>
4. Menggunakan perpaduan 3 attribut tag font
Kembali ke Notepad++ hapus kode yang untuk mengatur jenis font pada latihan 3 diatas. Selanjutnya ketikkan kode dibawah ini:
<html>
<head>
<title>Mengatur Font</title>
</head>
<body>
<font size="3" color="red" face="arial">Latihan Mengatur Font dengan HTML</font><br>
<font size="5" color="yellow" face="arial narrow">Latihan Mengatur Font dengan HTML</font><br>
<font size="7" color="green" face="comic sans ms">Latihan Mengatur Font dengan HTML</font><br>
<font size="6" color="blue" face="monotype corsiva">Latihan Mengatur Font dengan HTML</font><br>
<font size="4" color="brown" face="tahoma">Latihan Mengatur Font dengan HTML</font>
</body>
</html>
Simpan ulang kode yang sudah diketikkan. Kembali buka webbrowser dan reload halaman localhost/coba/font.html maka hasilnya akan berubah seperti ini:
<font color="red">Contoh Warna</font>atau
<font color="#FF0000">Contoh Warna</font>Untuk mengetahui nama warna dan kode HTMLnya bisa dilihat pada postingan berikut.
Tidak ada komentar:
Posting Komentar