Form dan Input HTML

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

Menggunakan Tag <Font> HTML

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

Menggunakan Font Size

Contoh ini mendemonstrasikan bagaimana mengubah ukuran font.

Font <Tag> Sebaiknya Jangan Digunakan

Tag <font> disisihkan pada versi HTML terakir (HTML 4 dan XHTML). W3C telah membuang tag <font> dari rekomendasinya. Pada versi HTML mendatang, style sheet (CSS) akan digunakan untuk mendefinisikan properti layout dan display elemen HTML. Berikut ini contoh style sheet (CSS). TH {background-color : Aqua; font: italic fantasy;} H1{color : Gray;} BODY{background-color : Silver;}

Menggunakan Font Face

Contoh ini mendemostrasikan bagaimana mengubah face (betuk) font.

Menggunakan Font Color

Contoh ini mendemostrasikan bagaimana mengubah warna font.

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 faktor penampilan seperti font dan lainlain. Untuk itu , jika kumpulan style tersebut dikelola secara terpisah maka manajemen pages menjadi lebih mudah dan efisien. Pada prakteknya, penggunaan CSS ini didukung oleh Explorer dan Navigator, dua browser terpopuler pada internet.

Aturan Penggunaan CSS

Secara umum disusun oleh tiga bagian yaitu, selector (elemen yang akan didefiniskan), properti (atribut yang kan diubah) dan nilai sebagaimana berikut: Selector {property: value} Antara property dan nilai dipisahkan dengan titik dua (colon) seperti contoh di bawah ini: Body {color: black} Jika nilai berupa beberapa kata, digunakan tanda petik ganda P {font-family: sans serif} Jika lebih dari satu properti, pisahkan dengan titik-koma (semi colon) P {text-align: center; color: red} Jika ingin lebih mudah dibaca sebagaimana berikut: P { text-align: center; color: red; color: black; font-family: arial } Jika selector dikelompokkan H1, H2, H3, H4, H5, H6 { color: green; } Jika selector dikelompokkan P. Kanan {text-align: right} P. Kiri {text-align: center} Jika selector dikelompokkan

<P class=kanan>This Paraghraph will be right aligned</p> <P class=kiri>This Paraghraph will be center aligned</p> Jika 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 Paraghraph will be right aligned</p> <H3 id=kanan>This Headder will be right aligned</p>

Style Sheet External

Berikut ini contoh menggunakan style sheet yang didefinisikan secara eksternal, di mana ex1.css digunakan oleh Coba_cssex1.html. Ingat dalam penddefinisian external tidak diperlukan tag html. Dan extension filenya harus disimpan dalam .css.

Listing ex1.css

Berikut ini contoh menggunakan style sheet yang didefinisikan secara external, di mana ex2.css digunakan oleh Coba_cssex2.html.

Listing ex2.css

Style Sheet Internal

Berikut ini contoh menggunakan 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.

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

Style Sheet Inline

Suatu style inline hanya bias digunakan pada lokasi yang sangat spesifik, sebenarnya penggunaan dengan cara yang seperi ini walaupun bias dilakukan tetapi tidak dianjurkan. Hal ini disebabkan dokumen menjadi leih besar karena style didefinisikan saru per satu sebagaimana berikut ini.

Multy Style Sheet

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

Listing ex3.css

Perhatikan bahwa hasil di bawah ini menggunakan align dan size dari definisi tetapi menggunakan warna dari definisi external.

Font Attributes: Attribute

size=number size=+number size=-number face=face-name color=color-value color=color-name

Example
size=2 size=+1 size=-1 face=Calibri color=#eeff00 Color=red

Purpose
Mendefinisikan ukuran huruf Menambahkan ukuran huruf Menurunkan ukuran huruf Mendefinisikan jenis huruf Mendefinisikan warna huruf Mendefinisikan waena huruf

Background Properties: Properties

Background

Values
Background-color Background-attachment Background-image Background-position Background-repeat Scroll Fixed Color-rgb

Background-attachment Background-color

Color-hex Color-name Transparent Background-image Background-position url None Top left Top center Top right Center left Center center Center right Bottom left Bottom center Bottom right x-% y-% x-pos y-pos Repeat Repeat-x Repeat-y No-repeat

Background-repeat

Text Properties: Properties

Color Letter-spacing Text-align

Values
Background-color Normal Lenght Left Right Center Justuify None Underline Overline Line-throught Blink

Text-decoration

Text-indent Text-transform

Lenght % None Capitalize Uppercase Lowercase Normal

White-space

Word-spacing

Pre Nowrap Normal Left