Setelah insomnia semalam telah posting Belajar Format Penulisan Dalam Tag HTML, sekarang pada kesempatan siang ini saya ingin menulis tentang pembahasan FONT dan STYLE pada format HTML.
semoga bermanfaat buat saya sendiri dan buat pembaca sekalian, aamiin...
- FONT HTML
Dalam penulisan HTML yang khusus nya sudah menggunakan HTML4 dan HTML 5 penggunaan Tag Font sudah tidak terpakai lagi atau sudah ditinggalkan.
Para penyedia software untuk HTML juga sudah merekomendasikan untuk meninggalkan penggunaan format font. Akan tetapi dalam penggunaan HTML4, CSS (Style Sheet) harus digunakan untuk menentukan tata letak dan sifat tampilan elemen HTML.
sebagai contoh1 :
Ini paragraf yang yang menggunakan font Arial, size 4 dan menggukanan warna merah.
Ini paragraf yang yang menggunakan font Verdana,
size 5 dan menggukanan warna Biru.
Untuk menampilkan format tulisan seperti pada contoh diatas, maka penulisan format Tag HTML nya sebagai berikut :
<html>
<body>
<p><font size="4" face="arial" color="red">
Ini paragraf yang yang menggunakan font Arial, size 4 dan menggukanan warna merah.
</font></p>
<p><font size="5" face="verdana" color="blue">
Ini paragraf yang yang menggunakan font Verdana, size 5 dan menggukanan warna Biru.</font></p>
<p>The font element is deprecated in HTML 4. Use CSS instead!</p>
</body>
</html>
contoh2 :
Ini adalah sebuah paragraf dengan beberapa teks di dalamnya.
Untuk menampilkan format tulisan seperti pada contoh diatas, maka penulisan format Tag HTML nya sebagai berikut :
<html><body>
<p style="font-family:verdana:arial;font-size:110%;color:green">
Ini adalah sebuah paragraf dengan beberapa teks di dalamnya.</p>
</body>
</html>
- Style HTML dengan Cascading Style Sheet (CSS)
CSS diperkenalkan seiring dengan keluarnya HTML4 , yang digunakan untuk menyediakan cara yang lebih mudah dan cara yang lebih baik untuk tampilan / gaya HTML.
Berikut cara menambahkan CSS dalam HTML :
1. Menyisip kan file CSS pada bagian <body> dalam format HTML nya
2. Menggunakan Attribut Style kedalam elemen HTML
3. Menggunakan HTML Attribut Style
Sebagai Contoh :
Look! Styles and colors
This text is in Verdana and red
This text is in Times and green
This text is 30 pixels high
Look! Styles and colors
This text is in Verdana and red
This text is in Times and green
This text is 30 pixels high
Untuk menampilkan format tulisan format CSS seperti pada contoh diatas, maka penulisan format Tag HTML nya sebagai berikut :
<body style="background-color:PowderBlue;">
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana;color:red;">
This text is in Verdana and red</p>
<p style="font-family:times;color:green;">
This text is in Times and green</p>
<p style="font-size:30px;">This text is 30 pixels high</p>
<p style="font-family:verdana;color:red;">
This text is in Verdana and red</p>
<p style="font-family:times;color:green;">
This text is in Times and green</p>
<p style="font-size:30px;">This text is 30 pixels high</p>
</body>
</html>
</html>
Berikut contoh penggunaan CSS untuk background yang berwarna :
<html><body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
Contoh Style HTML untuk Font, warna dan Ukuran teks :
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
Contoh Style HTML untuk menentukan keselarasan teks horizontal (Text Aligment) :
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Facebook
0 comments:
Post a Comment