PERTEMUAN KE-8 DOCTYPE DAN BOX MODEL

(1)

PERTEMUAN KE-8

DOCTYPE DAN BOX MODEL

DOCTYPE

Saat membuat sebuah dokuman HTML atau XHTML, sangat dianjurkan atau bahkan

diwajibkan untuk menambahkan deklarasi

doctype

. Deklarasi

doctype

harus disimpan

atau diletakkan sebelum tag <html>. Namun, perlu dipahami bahwa

doctype

bukan

sebuah tag HTML, akan tetapi merupakan sebuah instruksi atau memberikan informasi

kepada browser mengenai versi HTML yang digunakan dalam dokumen tersebut.

Berikut adalah contoh deklarasi

doctype

:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Titel dari dokumen</title>

</head>

<body>

Isi Dokumen

</body>

</html>

Contoh di atas merupakan modifikasi dari contoh yang terdapat pada alamat website

berikut ini:

http://www.w3schools.com/tags/tag_DOCTYPE.asp

):

Deklarasi

doctype

merujuk kepada

Document Type Definition (DTD)

. DTD mencakup

aturan untuk bahasa

markup

, seperti HTML, sehingga browser dapat menerjemahkan isi

dokumen tersebut dengan benar.

Penulisan deklarasi

doctype

harus sama persis baik tiap katanya, maupun besar-kecil

huruf yang digunakan untuk mendapatkan efek yang diinginkan. Hal tersebut tentu saja

cukup menyulitkan. Untuk mempermudah hal tersebut, berikut adalah daftar

doctype

(2)

HTML 4. 01

St rict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Tr ansit ional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0

St rict

(

quick r ef erence

)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Tr ansit ional

Transitional//EN"

(3)

Frameset

Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

-

DTD

:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML Basic 1. 1

(

qui ck refer ence

):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"

"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

HTML 5

<!DOCTYPE HTML>

Sumber

doctype

di atas bisa dilihat di

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Tabel berikut ini adalah daftar seluruh tag HTML dan hubungannya dengan beberapa

doctype

yang bisa digunakan sebagai panduan saat membuat dokumen HTML. (Sumber:

http://www.w3schools.com/tags/ref_html_dtd.asp

)

H TML 4 .0 1 / X H TML 1 .0 Ta g

Tra nsit iona l St r ict Fr a m ese t

X H TML 1 .1

< a> Yes Yes Yes Yes

< abbr> Yes Yes Yes Yes

< acrony m > Yes Yes Yes Yes

< address> Yes Yes Yes Yes

< applet > Yes No Yes No

< area / > Yes Yes Yes No

(4)

< base / > Yes Yes Yes Yes

< basefont / > Yes No Yes No

< bdo> Yes Yes Yes No

< big> Yes Yes Yes Yes

< blockquot e> Yes Yes Yes Yes

< body > Yes Yes Yes Yes

< br / > Yes Yes Yes Yes

< butt on> Yes Yes Yes Yes

< capt ion> Yes Yes Yes Yes

< center> Yes No Yes No

< cit e> Yes Yes Yes Yes

< code> Yes Yes Yes Yes

< col / > Yes Yes Yes No

< colgroup> Yes Yes Yes No

< dd> Yes Yes Yes Yes

< del> Yes Yes Yes No

< dfn> Yes Yes Yes Yes

< dir> Yes No Yes No

< div> Yes Yes Yes Yes

< dl> Yes Yes Yes Yes

< dt > Yes Yes Yes Yes

< em > Yes Yes Yes Yes

< fieldset> Yes Yes Yes Yes

< font > Yes No Yes No

< form > Yes Yes Yes Yes

< fram e / > No No Yes No

< fram eset > No No Yes No

< h1> t o < h6> Yes Yes Yes Yes

< head> Yes Yes Yes Yes

< hr / > Yes Yes Yes Yes

< ht m l> Yes Yes Yes Yes

< i> Yes Yes Yes Yes

< ifram e> Yes No Yes No

< im g / > Yes Yes Yes Yes

< input / > Yes Yes Yes Yes

< ins> Yes Yes Yes No

< isindex > Yes No Yes No

< kbd> Yes Yes Yes Yes

< label> Yes Yes Yes Yes

(5)

< li> Yes Yes Yes Yes

< link / > Yes Yes Yes Yes

< m ap> Yes Yes Yes No

< m enu> Yes No Yes No

< m et a / > Yes Yes Yes Yes

< nofram es> Yes No Yes No

< noscript> Yes Yes Yes Yes

< obj ect> Yes Yes Yes Yes

< ol> Yes Yes Yes Yes

< opt group> Yes Yes Yes Yes

< opt ion> Yes Yes Yes Yes

< p> Yes Yes Yes Yes

< param / > Yes Yes Yes Yes

< pre> Yes Yes Yes Yes

< q> Yes Yes Yes Yes

< s> Yes No Yes No

< sam p> Yes Yes Yes Yes

< script > Yes Yes Yes Yes

< select> Yes Yes Yes Yes

< sm all> Yes Yes Yes Yes

< span> Yes Yes Yes Yes

< st rike> Yes No Yes No

< st rong> Yes Yes Yes Yes

< sty le> Yes Yes Yes Yes

< sub> Yes Yes Yes Yes

< sup> Yes Yes Yes Yes

< t able> Yes Yes Yes Yes

< t body> Yes Yes Yes No

< t d> Yes Yes Yes Yes

< t ex tarea> Yes Yes Yes Yes

< t foot > Yes Yes Yes No

< t h> Yes Yes Yes Yes

< t head> Yes Yes Yes No

< t it le> Yes Yes Yes Yes

< t r> Yes Yes Yes Yes

< t t > Yes Yes Yes Yes

< u> Yes No Yes No

< ul> Yes Yes Yes Yes

(6)

Box Model

Dalam HTML, pada dasarnya seluruh elemen dipandang sebagai sebuah kotak (box),

yang memiliki unsur-unsur sebagai berikut:

•

Width

•

Height

•

Border

•

Margin

•

Padding

Gambar berikut merupakan ilustrasi dari sebuah box model dalam HTML:

Sumber Gambar: http://xhtml.com/C12742E4-3FD2-4084-9E7F-833805A4157C/box-model.gif

(7)

Gambar berikut ini merupakan ilustrasi dari perbedaan box-model versi W3C dan

Internet Explorer:

Sumber Gambar:

http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/W3C_and_Internet_Explorer_box_models.sv g/299px-W3C_and_Internet_Explorer_box_models.svg.png

(8)

Explorer. Meskipun jika dibandingkan lagi, versi Internet Explorer merupakan versi yang

lebih tepat digunakan daripada versi W3C.

Di bawah ini merupakan beberapa Style CSS yang berhubungan dengan Box Model:

1.

Border Style (Sumber:

http://www.w3schools.com/css/css_border.asp

)

Pr ope rt y Desk r ipsi V a lu es CSS

border Mengatur sem ua property border dalam sat u dek larais

border- w idt h border-sty le border-color

1

border-bot tom Mengatur seluruh propert y border-bot t om dalam sat u deklarasi

border-bot tom -w idt h border-bot tom -sty le border-bot tom -color

1

border-bot tom -color Mengatur warna dari border-bot tom border-color 2

border-bot tom -sty le Mengatur style dari border- bott om border-sty le 2

border-bot tom -w idt h Mengatur lebar dari border- bot t om border- w idt h 1

border-color Mengatur warna dari seluruh border color_nam e hex_ num ber rgb_num ber t ransparent inherit

1

border- left Mengatur seluruh propert y border- left dalam sat u deklarasi

border- left - widt h border- left - sty le border- left - color

1

border- left - color Mengatur warna dari border- left border-color 2

border- left - sty le Mengatur style dari border- left border-sty le 2

border- left - width Mengatur lebar dari border- left border- w idt h 1

border- right Mengatur seluruh propert y border- right dalam sat u deklarasi

border- right - w idt h border- right - style border- right - color

1

border- right - color Mengatur warna dari border- right border-color 2

border- right - st yle Mengatur style dari border- right border-sty le 2

border- right - w idt h Mengatur lebar dari border- right border- w idt h 1

border-sty le Mengatur style dari seluruh border none hidden dot t ed dashed solid double groove ridge inset out set inherit 1

border- t op Mengatur seluruh propert y border-t op dalam sat u deklarasi

border- t op-w idt h border- t op-sty le border- t op-color

1

border- t op-color Mengatur warna dari border- t op border-color 2

border- t op-sty le Mengatur style dari border- t op border-sty le 2

(9)

border- w idt h Mengatur lebar dari seluruh border t hin m edium t hick lengt h inherit

1

Berikut ini merupakan contoh beberapa border-style yang dapat digunakan:

dot t ed: Defines a dott ed border

dashed: Defines a dashed border

solid: Defines a solid border

double: Defines tw o borders. The width of t he t w o borders are t he sam e as the border-w idt h value

groove: Defines a 3D grooved border. The effect depends on t he border-color value

ridge: Defines a 3D ridged border. The effect depends on the border-color v alue

inset : Defines a 3D inset border. The effect depends on the border- color v alue

out set : Defines a 3D out set border. The effect depends on t he border- color value

Contoh Penggunaan:

img { border-width:2px;

border-style:dotted;

border-color:rgb(100,100,100);

(10)

2.

Style Outline (Sumber:

http://www.w3schools.com/css/css_outline.asp

)

Pr ope rt y D e sk ripsi V alues CSS

out line Mengat ur propert y Out line dalam sat u deklarasi out line- color out line- style out line- w idt h inherit

2

out line-color Mengat ur warna dari out line color_ nam e hex_ num ber rgb_num ber invert inherit

2

out line-sty le Mengat ur sty le dari out line none dot t ed dashed solid double groove ridge inset out set inherit

2

out line- w idt h Mengat ur lebar dari out line t hin m edium t hick lengt h inherit

2

Contoh Penggunaan:

p { outline-color:#DD0088;

outline-style:dashed;

outline-width:5px;

(11)

3.

Style Margin (Sumber:

http://www.w3schools.com/css/css_margin.asp

)

Margin berguna untuk ‘mengosongkan’ area di luar border. Dalam hal

positioning

,

margin

berfungsi untuk mengatur jarak elemen tersebut dari elemen lainnya. Jika

elemen tersebut berada di dalam elemen lainnya atau menjadi

child

dari elemen

lainnya, maka

margin

berfungsi untuk mengatur jarak elemen tersebut dari

border

bagian dalam elemen yang menjadi

parent

-nya.

Pr ope rt y D e script ion V a lu es CSS

m argin Mengat ur propert y m argin dalam sat u dek larasi

m argin- t op m argin- right m argin- bot t om m argin- left

1

m argin- bott om Mengat ur m argin baw ah dari sebuah elem en aut o lengt h %

1

m argin- left Mengat ur m argin k iri dari sebuah elem en aut o lengt h %

1

m argin- right Mengat ur m argin kanan dari sebuah elem en aut o lengt h %

1

m argin- t op Mengat ur m argin at as dari sebuah elem en aut o lengt h %

1

Contoh Penggunaan:

h1 {

margin-top:5px;

margin-right:5px;

margin-bottom:5px;

margin-left:10px;

}

Atau jika dituliskan dengan menggunakan satu deklarasi, style di atas dapat dituliskan seperti di bawah ini:

(12)

4.

Style Padding (Sumber:

http://www.w3schools.com/css/css_padding.asp

)

Padding mengatur jarak antara

element content

(isi elemen) dengan

element border

.

Pr ope rt y D e script ion V a lu es CSS

padding Mengat ur seluruh propert y padding dalam sat u dek larasi

padding- top padding- right padding-bot t om padding- left

1

padding-bot t om Mengat ur padding bawah dari sebuah elem en lengt h %

1

padding- left Mengat ur padding kiri dari sebuah elem en lengt h %

1

padding- right Mengat ur padding kanan dari sebuah elem en lengt h %

1

padding- top Mengat ur padding at as dari sebuah elem en lengt h %

1

Contoh Penggunaan:

h2 {

padding-top:5px;

padding-right:5px;

padding-bottom:5px;

padding-left:10px;

}

Atau jika dituliskan dengan menggunakan satu deklarasi, style di atas dapat dituliskan seperti di bawah ini: