Udah lama gak posting dikarenakan kesibukan pekerjaan sehari-hari. Pagi ini mencoba posting lagi tentang HTML Fundamental, semoga gak bosen dan bisa bermanfaat :D. Oh ya, sebelum membaca lebih lanjut silahkan membaca Tutorial tentang HTML seri sebelumnya, HTML Fundamental I, HTML Fundamental II, HTML Fundamental III dan ini posting saya yang paling terakhir yakni HTML Fundamental IV.
Kita langsung mulai aja sekarang. Tutorial ini saya teruskan dari posting saya kemaren tentang mengatur kutipan dan menyeragamkan alamat, dan membahas tentang penggunaan font.
Menentukan Font
Posisi font pada website bisa dikatakan penting dikarenakan penggunaan pada artikel agar terlihat lebih jelas dan menarik, anda tidak mau kan pra pengunjung website anda kesulitan membaca artikel anda dikarenakan penempatan font anda salah.
<font face = "Arial">ABCD</font>
Pada implementasi penggunaan atribut face diatas menggunakan tulisan ABCD ditampilkan dengan menggunakan font Arial.
Sekarang saya akan membuat implementasi langsung menggunakan atribut face.<html>dan ini adalah gambar hasil dari coding diatas.
<head>
<title>Jenis Font</title>
</head>
<body>
Normal : 012345ABCDEF<br>
<font face = "Arial">Arial : 012345ABCDEF</font><br>
<font face = "Georgia">Georgia : 012345ABCDEF</font><br>
<font face = "Courier">Courier : 012345ABCDEF</font><br>
<font face = "Helvetica">Helvetica : 012345ABCDEF</font><br>
</body>
</html>
Ukuran Font
Setelah penentuan font selesai maka selanjutnya tinggal menentukan ukuran font yang akan digunakan pada website anda. Menentukan ukuran font menggunakan atribut <size>. berikut ini contoh penggunaan atribut <size>
<font size = "1">Size 1 : 012345ABCDEF</font>
coding diatas berarti menggunakan ukuran font sebesar 1. Perlu diketahui, ukuran font normal adalah 3. Tambahan juga penggunaan atribut size juga dapat memakai tanda + atau - didepan angka pada atribut size.
<font size = "+1">Size +1 : 012345ABCDEF</font>
menampilkan teks dengan ukuran font lebih besar sebesar 1 daripada ukuran normal. Contoh untuk memperlihatkan efek pengaturan ukuran font dengan berbagai nilai dan cara dapat dilihat pada coding dibawah ini.
<html>dibawah ini adalah gambar hasil dari coding diatas
<head>
<title>Ukuran Font</title>
</head>
<body>
Normal : 012345ABCDEF<br>
<font face = "1">Size 1 : 012345ABCDEF</font><br>
<font face = "2">Size 2 : 012345ABCDEF</font><br>
<font face = "3">Size 3 : 012345ABCDEF</font><br>
<font face = "4">Size 4 : 012345ABCDEF</font><br>
<font face = "5">Size 5 : 012345ABCDEF</font><br>
<font face = "6">Size 6 : 012345ABCDEF</font><br>
<font face = "7">Size 7 : 012345ABCDEF</font><br>
<font face = "+1">Size +1 : 012345ABCDEF</font><br>
<font face = "+2">Size +2 : 012345ABCDEF</font><br>
<font face = "-1">Size -1 : 012345ABCDEF</font><br>
</body>
</html>
Warna Font
Dan setelah menentukan ukuran font sekarang menentukan warna dari font yang telah dibuat agar font pada artikel anda menjadi lebih menarik dan dapat digunakan untuk membedakan antara teks biasa dengan teks berbentuk link. Atribut yang berhubungan dengan tag <font> untuk menentukan warna adalah <color>, sedangkan untuk mewarnai latar belakang teks menggunakan atribut <bgcolor> dengan melalui tag <body>. Catatan tambahan tag <body> juga memiliki atribut bernama <text> yang dapat digunakan untuk mengatur warna teks pada keseluruhan tubuh dokumen.
Nilai yang diberikan pada atribut <color>, <bgcolor> dan <text> tersebut dapat berupa :
a. nama warna atau
b. nilai RGB (Red-Green-Blue) yang dinyatakan "#RRGGBB".
Nama-nama warna pada atribut <color>, <bgcolor> dan <text> dapat dilihat pada tabel dibawah ini.
| Nama Warna | RGB | Nama Warna | RGB |
| Aqua | 00FFFF | Navy | 000080 |
| Black | 000000 | Olive | 808000 |
| Blue | 0000FF | Purple | 800080 |
| Fuchsia | FF00FF | Red | FF0000 |
| Gray | 808080 | Silver | C0C0C0 |
| Green | 008000 | Teal | 008080 |
| Lime | 00FF00 | Yellow | FFFF00 |
| Maroon | 800000 | White | FFFFFF |
Pada format "#RRGGBB" masing-masing RR, GG, dan BB berupa dua buah digit heksadesimal (berupa angka 0 sampai 9 atau huruf A sampai F). RR menyatakan komponen warna merah, GG menyatakan komponen warna hijau, sedangkan BB menyatakan komponen warna biru. Nilai 00 menyatakan bahwa komponen bersangkutan tidak ada. Sebagai contoh, #0000FF menyatakan warna biru. contoh :
<html>dan gambar dibawah ini adalah implementasi dari coding diatas tentang warna teks :
<head>
<title>Warna - Bagian 1</title>
</head>
<body>
Normal<br>
<font color = "aqua">Aqua</font><br>
<font color = "black">Black</font><br>
<font color = "blue">Blue</font><br>
<font color = "fuchsia">Fuchsia</font><br>
<font color = "gray">Gray</font><br>
<font color = "green">Green</font><br>
<font color = "lime">Lime</font><br>
<font color = "maroon">Maroon</font><br>
<font color = "navy">Navy</font><br>
<font color = "olive">Olive</font><br>
<font color = "purple">Purple</font><br>
<font color = "red">Red</font><br>
<font color = "silver">Silver</font><br>
<font color = "teal">Teal</font><br>
<font color = "yellow">Yellow</font><br>
</body>
</html>
Contoh coding dibawah ini menunjukkan penggunaan atribut <bgcolor> dan <text> pada tag <body>.
<html>dan gambar dibawah ini adalah implementasi dari coding tentang <bgcolor> dan <text>
<head>
<title>Warna - Bagian 2</title>
</head>
<body bgcolor = "black" text = "gray">
Normal<br>
<font color = "aqua">Warna Aqua</font><br>
<font color = "black">Warna Black</font><br>
<font color = "blue">Warna Blue</font><br>
<font color = "fuchsia">Warna Fuchsia</font><br>
<font color = "gray">Warna Gray</font><br>
<font color = "green">Warna Green</font><br>
<font color = "lime">Warna Lime</font><br>
<font color = "maroon">Warna Maroon</font><br>
<font color = "navy">Warna Navy</font><br>
<font color = "olive">Warna Olive</font><br>
<font color = "purple">Warna Purple</font><br>
<font color = "red">Warna Red</font><br>
<font color = "silver">Warna Silver</font><br>
<font color = "teal">Warna Teal</font><br>
<font color = "yellow">Warna Yellow</font><br>
</body>
</html>
Hasilnya berupa tampilan dengan latar belakang berwarna hitam <bgcolor = "black"> dan <text = "gray> yang tidak diatur melalui tag <font> akan berwarna abu-abu.
Sekian dulu tutorial HTML Fundamental V ini, kita akan berjumpa pada tutorial selanjutnya. Silahkan isi komentar tentang kritik dan saran anda pada blog ini.
Selamat Mencoba dan Happy Coding
Best Regards
0 comments:
Post a Comment