wong banaran: Font HTML dan CSS

Pemrogaman WEB dengan HTML, Font HTML dan CSS, Menggunakan Tag <font> HTML, Menggunakan Font Size, Font <tag> Sebaiknya Jangan Digunakan, Menggunakan Font Face, Menggunakan Font Color, Aturan Penggunaan CSS, Style Sheet External, Style Sheet Internal, Style Sheet Inline, Multy Style Sheet, Font Attributes, Background Properties, Text Properties

Tag <font> dalam HTML sudah disingkirkan, kemungkinan akan dihilangkan pada versi HTML mendatang. Walaupun banyak orang yang menggunakannya, anda harus menghindarinya, gunakan style sebagai penggantinya.

Menggunakan Tag <font> HTML

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

This is paragraph.

</font></p>

This is another paragraph.

</font></p>

<!—coba_font.htmlà

<html>

<body>

<p><font size=”2” face=”verdana”>

This is paragraph.

</font></p>

<p><font size=”3” face=”Times”>

This is paragraph.

</font></p>

</body>

</html>

Menggunakan Font Size

Contoh ini mendemonstrasikan bagaimana mengubah ukuran font.

<!—coba_fontsize.htmlà

<html>

<body>

<font size=”1”>Font Size 1</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 property layout dan display elemen HTML. Berikut ini contoh style sheet.

TH {background-color : aqua;font : italic fantasy;}

H1 {color : gray}

Body {background-color : silver}

Menggunakan Font Face

Contoh ini mendemonstrasikan bagaimana mengubah face (bentuk) face.

<!—coba_fonrface.htmlà

<html>

<body>

<p><font face=”verdana”>

This is paragraph.

</font></p>

<p><font face=”time”>

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 yopur computer, it will not display correctly.

</font></p>

</body>

</html>

Menggunakan Font Color

Contoh ini mendemonstrasikan bagaimana mengubah warna font.

<!—coba_fontcolor.htmlà

<html>

<body>

<p><font size=”2” color=”#ff0000”>

This is 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 factor tampilan seperti font dan lain-lain.

Untuk itu jika kumpulan style tersebut dikelola secara terpisah maka manajemen pages manjadi lebih mudah dan efisien. Pada prakteknya penggunaan CSS ini didukung oleh Explorer dan Navigator, dua browser terpopuler di internet.

Aturan Penggunaan CSS

Secara umum disusun oleh tiga bagian yaitu, selector (elemen yang kan didefinisikan), property (atribut yang akan diubah) dan nilai sebagaimana berikut

Selector {property : value}

Antara property dan nilai disahkan dengan titik-dua (colon) seperti contoh di bawah ini

Body {color : black}

Jika nilai berupa beberapa kata, gunakan tanda petik ganda

P {font-family: “sans serif”}

Jika lebih dari satu property pisahkan dengan titik-koma (semi colon)

P {text-align : center; color: red}

Jika ingin lebih mudah dibaca sebagaiman berikut

{

Text-align: center;

Color: black;

Font-family: arial

}

Jika selector dikelompokan

H1, H2, H3, H4, H5, H6

{

Color: green

}

Jika menggunakan atribut class (dalam definisi CSS).

P.kanan {text-align: right}

P.tengahi {text-align: center}

Berikut ini sintaks yang ditulis dalam dokumen HTML menggunakan definisi diatas.

<P class=”kanan”> This is paragraph will be right aligned </p>

<P class=”center”> This is paragraph will be center aligned </p>

Jiak menggunakan ID atribut

#Kanan {text-align: right}

Berikut ini sintaks yang ditulis dalam dokumen HTML menggunakan definisi ID atribut di atas.

<p id=”kanan”>This is paragraph will be right aligned </p>

<H3 id=”kanan”>This header will be right aligned too</H3>

Style Sheet External

Berikut ini contoh menggunakan style sheet yang didefinisikan secara external, dimana ex1.css digunakan oleh coba_cssex1.html. dan extension filenya harus disimpan dalam “*.CSS”.

Berikut fikle “ex1.css”

Body {background-color: yellow}

H1 {font-size: 36pt}

H2 {color:blue}

P {margin-left: 50px

Berikut contoh file coba_cssex1.html

<!—coba_cssex1.htmlà

<html>

<head>

<link rel=”stylesheet” type=”text/css” href=”ex1.css”>

</head>

<body>

<h1>this header is 36pt </h1>

<h2>This Header is blue</h2>

<p>This paragraph has a left margin of 50 pixels</p>

</body>

</html>

Berikut ini contoh menggunakan style sheet yang didefinisikan secara external, dimana ex2.css digunakan oleh coba_cssex2.html.

Berikut ini file ex2.css

Body {background-color: tan}

H1 {color: maroon; font-size: 20pt}

HR {color: navy}

P {font-size:11pt; margin-left: 15px}

A : Link {color: green}

A : Visited {color: yellow}

A : Active {color: blue}

A : Hover {color: black}

Berikut contoh file coba_cssex2.html

<!—coba_cssex2.htmlà

<html>

<head>

<link rel=”stylesheet” type=”text/css” href=”ex2.css”>

</head>

<body>

<h1>this header 1</h1>

<h2>this header is blue</h2>

<p>This paragraph has a left margin of 15 pixels and font size 11pt</p>

<p><a href=”http://wongbanaran.blogspot.com” target=”_blank”> This is a Link</a></p>

</body>

</html>

Style Sheet Internal

Berikut ini contoh menggunkan style sheet yang didefinisikan secara internal. Hal ini biasanya dilakukan karena web page tertentu bersifat sangat unik sehingga membutuhkan definisi terpisah dibandingkan dengan web page lainnya.

<!—coba_cssin1à

<html>

<head>

<style type=”text/css”>

Body {background-image: url(“../picture/backgrnd.gif”)}

HR {color: sienna}

P {font-size:11pt; margin-left:15pt}

</style>

</head>

<body>

<p>This paragrtaf has a left margin of 15 pixels and font size 11 pt</p>

<hr>

</body>

</html>

Jika browser versi lama tidak mendukung style, akan lebih aman jika kita menggunakan tag komentar untuk menutupi bagian yang tidak dikenal sebagaimana berikut

<!—coba_cssin2.htmlà

<html>

<head>

<style type=”text/css”>

<!—

Body {background-image: url(“../picture/backgrnd.gif”)}

HR {color: sienna}

P {font-size:11pt; margin-left:15pt}

</style>

</head>

<body>

<p>This paragrtaf has a left margin of 15 pixels and font size 11 pt</p>

<hr>

</body>

</html>

Style Sheet Inline

Suatu style inline hanya bisa digunakan pada lokasi yang sangat spesifik, sebenarnya penggunaan dengan cara seperti ini walaupun bisa dilakukan tetapi tidak dianjurkan. Hal ini disebabkan dokumen menjadi lebih besar karena style didefinisikan satu persatu sabagaimana berikut ini.

<1—coba_cssinline1.htmlà

<html>

<head>

</head>

<body>

This paragraph has inline style</p>

</body>

</html>

Multy Style Sheet

Jika digunakan lebih dari satu definisi dari style sheet maka nilai yang tidak didefinisikan akan disinherit (diturunkan) dari style sheet yang lebih general. Misalnya dibawah ini kita mempunyai definisi ex3.css

Berikut ex3.css

{

Color:red;

Text-align:left;

Font-size: 8pt

}

Berikut coba_cssmulty.html

<!—coba_cssmulty.htmlà

<html>

<head>

{

Text-align: right;

Font-size: 20pt

}

</style>

</head>

<body>

<h3>This header inherit font color from ex3.css</h3>

</body>

</html>

Font Attributes

Attribute	Example	Purpose
Size=”number” Size=”+number” Size=”-number” Face=”facename” Color=”color-value” Color=”color-name”	Size=”2” Size=”+2” Size=”-2” Face=”times” Color=”#eeff00” Color=”red”	Defines the font size Increases the font size Decreases the font size Defines the font-name Defines the font color Defines the font color

Background Properties

Properties	Values	NN	IE	W3
Background Background-attachment Background-color Background-image Background-position Background-repeat	Background-color Background-attachment Background-image Background-position Background-repeat Scroll Fixed Color-rgb Color-hex Color-name Transparent url None Top left Top center Top right Center left Ceneter center Center right Bottom left Bottom center Bottom right x-% y-% x-pos y-pos Repeat Repeat-x Repeat-y No-repeat	4.0 6.0 4.0 6.0 6.0	4.0 4.0 4.0 4.0 4.0	CSS1 CSS1 CSS1 CSS1 CSS1

Text Properties

Properties	Value	NN	IE	W3C
Color Letter-spacing Text-align Text-decoration Text-indent Text-transform White-space Word-sapcing	Color Normal Length Left Right Center Justify None Underline Overline Line-through Blink Length % None Capitalize Uppercase Lowercase Normal Pre Nowrap Normal Length	4.0 6.0 4.0 4.0 4.0 4.0 4.0 6.0	4.0 4.0 4.0 4.0 4.0 4.0 5.5	CSS1 CSS1 CSS1 CSS1 CSS1 CSS1 CSS1 CSS1