Dawala = Andreyan: Belajar HTML Bag. 3 ( Text & Font Formatting )

Keindahan dan daya tarik sebuah judul, tulisan ataupun kombinasi dari keduanya tidak hanya berasal dari isi dari konten tersebut, keindahan kombinasi warna, ukuran, jenis font dan paragraf formatting juga sangat berpengaruh. Pada bagian ini kita akan belajar melakukan formatting pada font dan text / paragraf. Disini kita akan mengunakan sample kode dan hasilnya beserta penjelasan kode-kode tesebut, agar lebih mudah dan cepat anda pahami.
Font Formatting
Untuk melakukan font formatting kita menggunakan tag font, dengan atribut sbb:
•
color
Digunakan untuk merubah warna font.
Contoh : Font Warna Biru 
•
size
Digunakan untuk merubah ukuran font.
Contoh : Font Ukuran 10 
•
face
Digunakan untuk merubah jenis font.
Contoh : Font Verdana 
Penggunaan ketiga atrribut diatas dapat digabung menjadi 1 tag sbb :
 Font Formatting 
Selain formatting dengan tag standard font, ada beberapa tag formating lain sbb :
•
bold → Memberikan effect tebal.
•
italic → Memberikan effect miring.
•
underline → Memberikan effect garis bawah.
•
strike → Memberikan effect strike / coretan
•
big → Memberikan effect huruf besar
•
small → Memberikan effect huruf kecil.
•
code → Memberikan effect kode
•
script → Memberikan effect script
•
strong → Memberikan effect strong
•
sup → Memberikan effect superscript
•
sub → Memberikan effect subscript
Untuk lebih jelasnya silahkan anda gunakan tag-tag tersebut dalam file html dan jalankan pada browser. Cobalah code dibawah ini untuk melihat hasilnya :
Code :
<html>
<head>
<title> kebangsaan Tutorial </title>
</head>
<body>
 Font warna biru 
 Font ukuran 10 
 Font huruf verdana 
 Font Formatting gabungan 
 Font tebal 
 Font miring 
 Font garis bawah 
<s> Font strike </s> 
<big> Font big </big> 
 Font small 
<code> Font code </code> 
<script> Font script </script> 
 Font strong </script> 
 Font superscript 
 Font subscript 
</body>
</html>

Hasil :

Pada contoh kode diatas saya beri tambahan tag break → yang berfungsi untuk berganti baris.
Paragraph Formatting
Untuk paragraf formatting tag-tag yang disediakan sebanyak tag-tag yang digunakan untuk font formatting.
Untuk menandai sebuah text sebagai paragraph, kita harus memberikan tag untuk text tersebut. Contohnya sbb:
 Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. 
Tag sendiri memiliki atribut align yang nilainya dapat diberikan sbb:
•
left → Untuk membuat paragraf rata kiri.
•
right → Untuk membuat paragraf rata kanan.
•
justify → Untuk membuat paragraf rata kanan-kiri.
•
center → Untuk membuat paragraf rata tengah.

Code :
<html>
<head>
<title> Kebangsaan Tutorial </title>
</head>
<body>
 Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. 
 Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. 
 Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. 
 Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. 
 Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. 
</body>
</html>
Hasil :

semoga bermanfaat

yang lainnya:

Belajar HTML Bag.1 ( Mengenal HTML ), Belajar HTML Bag. 2 ( Basic HTML ),
Belajar HTML Bag. 3 ( Text & Font Formatting ), Belajar HTML Bag. 4 ( Lists )

Rabu, 27 Juli 2011

Belajar HTML Bag. 3 ( Text & Font Formatting )

Tidak ada komentar:

Posting Komentar