BAHASA HTML - UDiNus Repository modul4teori HTML

(1)

P r o g r a m S t u d i S i s t e m I n f o r m a s i

F a k u l t a s I l m u K o m p u t e r

U n i v e r s i t a s D i a n N u s w a n t o r o

S e m a r a n g

N o p e m b e r 2 0 1 3

L. Era wa n

Ba ha n a ja r ini b e risi p e nje la sa n te nta ng sa la h sa tu b a ha sa sta nd a r we b ya itu HTML. Ba ha sa HTML d ig una ka n untuk me mb ua t struktur ko nte n d a ri se b ua h ha la ma n we b . Pe nje la sa n me lip uti struktur d o kume n HTML, e le me n d a n a trib utnya sa m p a i d e ng a n b e rb a g a i

p e nje la sa n ta m b a ha n ya ng d ip e rluka n se p e rti HTML e ntitie s, d a n se t ka ra kte r.

BAHASA HTML

L.

Erawan

(2)

L. Era wa n, M.Ko m 2

D

AFTAR

I

SI

HTML ... 6

(Hyp e rTe xt Ma rkup La ng ua g e ) ... 6

Ele me n HTML ... 7

Do kum e n HTML a d a la h Ha la m a n We b ... 7

Bro wse r We b ... 7

Struktur Do kum e n HTML ... 7

Ele me n HTML ... 9

Ele me n HTML Be rsa ra ng ... 9

Tip s ... 9

Ta g Pe nutup ... 9

Ele me n Ko so ng a ta u Ta g Tung g a l ... 10

G una ka n Lo we rc a se Untuk Me nulis Ta g HTML ... 10

Atrib ut-a trib ut HTML ... 11

He a d ing ... 12

Line s HTML ... 12

Ko m e nta r HTML ... 12

Me na mp ilka n Ko d e Sum b e r (Source Code) ... 13

Pa ra g ra p HTML... 14

Line Bre a k HTML ... 14

Tip s Te nta ng Sp a si d a n Pind a h Ba ris ... 15

Ta g -ta g Fo rm a tting HTML ... 16

Ta g Fo rm a tting ... 16

Ta g “ Ke lua ra n Ko m pute r” ... 16

Ta g De finisi d a n Kutip a n ... 17

Ed ito r HTML ... 18

Links HTML ... 20

Hyp e rlink (Link) HTML ... 20

Atrib ut Target ... 20

Atrib ut Name ... 21

Tip s ... 21

(3)

Atur Ting g i d a n le b a r G a m b a r d e ng a n Height d a n Width ... 22

Ta b le HTML ... 24

Atrib ut Bo rd e r ... 24

He a d e r Ta b e l ... 24

Ta g <c o l> ... 25

Atrib ut O p sio na l ... 26

List HTML ... 27

Uno rd e re d List ... 27

O rd e re d List ... 27

De finitio n List ... 28

Ele me n Blo c k HTML ... 29

Ele me n <DIV> ... 29

Ele me n <sp a n> ... 29

La yo ut HTML ... 30

La yo ut We b site ... 30

La yo ut De ng a n Ele me n <d iv> ... 30

La yo ut Me ng g una ka n Ele me n Ta b le ... 31

Fo rm HTML ... 33

Ele me n Inp ut ... 33

Te xt Fie ld ... 33

Pa sswo rd Fie ld ... 34

Ra d io Butto n ... 34

C he c kb o x ... 34

Se le c t List ... 35

Te xta re a ... 36

Sub m it Butto n... 36

Ifra m e HTML ... 38

Atrib ut Ifra me ... 38

Ifra m e Se b a g a i Ta rg e t Sua tu Link ... 38

C o lo r HTML ... 40

C o lo r Va lue s ... 40

16 Juta Wa rna Be rb e d a ... 40

Sha d e s o f G ra y ... 41

(4)

C o lo r Na me s ... 43

Multime d ia ... 48

Bro wse r Sup p o rt ... 48

Fo rm a t Multime d ia ... 48

Fo rm a t Vid e o ... 48

Fo rm a t So und ... 49

Pe ng g una a n Be rb a g a i Fo rm a t ... 50

Ele me n O b je c t HTML ... 51

HTML He lp e rs (Plug -Ins) ... 51

Me ma inka n File Wa ve Aud io Me ng g una ka n Q uic kTim e ... 51

Me ma inka n File Vid e o MP4 Me ng g una ka n Quic kTim e ... 51

Me ma inka n File Vid e o SWF Me ng g una ka n Fla sh... 51

Me ma inka n File Mo vie WMV Me ng g una ka n Wind o ws Me d ia Pla ye r ... 52

Aud io HTML... 53

Be rb a g a i Ma sa la h d a n So lusi ... 53

Me ng g una ka n Plug in ... 53

Pe ng g una a n Ele me n <e mb e d > ... 53

Pe ng g una a n Ele me n <o b je c t> ... 54

Pe ng g una a n Ele me n <a ud io > HTML 5 ... 54

So lusi Te rb a ik ... 54

C a ra Te rm ud a h Untuk Me na m b a hka n Aud io Ke We b site ... 55

Ya ho o Me d ia Pla ye r... 55

Me ng g una ka n Sua tu Hyp e rlink ... 56

Inline So und ... 56

Vid e o HTML... 57

Pe rm a sa la ha n d a n So lusi... 57

Me ng g una ka n Ta g <e m b e d >... 57

Me ng g una ka n Ta g <o b je c t> ... 57

Me ng g una ka n Ta g <vid e o > ... 58

So lusi Te rb a ik ... 58

So lusi Yo uTub e ... 59

C a ta ta n Te nta ng Vid e o Inline ... 59

Ele me n He a d HTML ... 60

(5)

Ele me n b a se ... 60

Ele me n Link ... 61

Ele me n style ... 61

Ele me n me ta ... 61

Ke ywo rd s Untuk Se a rc h Eng ine ... 61

<!DO C TYPE> HTML ... 63

Ve rsi HTML ... 63

HTML 5 ... 63

HTML 4.01 ... 64

XHTML 1.0 ... 64

Se t Ka ra kte r HTML ... 65

Se t Ka ra kte r ISO ... 65

Ko nso rsium Unic o d e ... 66

HTML Entitie s ... 68

Ka ra kte r Sp a si (No n-b re a king Sp a c e ) ... 68

URL (Unifo rm Re so urc e Lo c a to r) HTML ... 74

Unifo rm Re so urc e Lo c a to r ... 74

URL Enc o d ing ... 75

URL Enc o d ing Func tio ns ... 75

(6)

HTML

(H

YPER

T

EXT

M

ARKUP

L

ANGUAGE

)

Te ntu And a te la h se ring me liha t d a n me ng unjung i sua tu situs we b . Situs we b te rd iri d a ri ha la m a n-ha la m a n we b ya ng sa ling b e rhub ung a n. Ha la m a n-ha la ma n te rse b ut me na mp ilka n sua tu info rm a si ya ng d a p a t te rd iri d a ri te ks, g a m b a r, a nim a si, d a n vid e o . Ha la ma n-ha la ma n we b te rse b ut d ib ua t m e ng g una ka n sa la h sa tu b a ha sa we b ya ng p a ling te rke na l, ya itu HTML.

HTML sing ka ta n d a ri HyperText Markup Language me rup a ka n b a ha sa ya ng

d ig una ka n untuk me mb ua t ha la ma n we b . Ba ha sa HTML b e risi se kum p ula n sim b o l-sim b o l ya ng d ise b ut d e ng a n ta g . Ta g ini b e rfung si untuk m e ng a tur d a n me ne ntuka n b a g a im a na sua tu o b je k we b d ita m p ilka n d a la m sua tu ha la m a n we b . O b je k d isini d a p a t b e rup a te ks, g a m b a r, fo to , a ud io , a nim a si, d a n vid e o . Ta g ini d ise b ut ta g HTML ya ng b e rke te ntua n:

• Ta g HTML a d a la h na m a ta g (keyword) ya ng d ia p it d e ng a n simb o l kurung

siku, c o nto h <html>

• No rm a lnya ta g HTML b e rp a sa ng a n se p e rti <h1> d a n </ h1> • Ta g p e rta m a d ise b ut ta g a wa l d a n ta g ke d ua d ise b ut ta g a khir

• Ta g a khir d itulis se p e rti ta g a wa l d e ng a n pe na m b a ha n sim b o l g a ris miring (blackslash) d id e p a nnya .

• Ta g a wa l d a n a khir se ring jug a d ise b ut ta g p e mb uka d a n p e nutup Be rikut c o nto h b a ha sa HTML d a la m p e ng g una a nnya :

<!DOCTYPE html> <html>

<body>

<h1>My First Heading</h1> <p>My first paragraph.</p> </body>

</html>

Pe nje la sa n d o kume n HTML d ia ta s:

(7)

L. Era wa n, M.Ko m 7 • Ta g <html> d a n </ html> me nya ta ka n b a hwa te ks d id a la mnya a d a la h ko d e

-ko d e HTML

• Te ks d ia nta ra ta g <b o d y> d a n </ b o d y> me nya ta ka n ko nte n ha la ma n ya ng ta m p a k d i b ro wse r.

• Te ks d ia nta ra ta g <h1> d a n </ h1> d ita m p ilka n se b a g a i se b ua h he a d ing , ya itu b e rhuruf b e sa r, te b a l, d a n b e rja ra k sp a si le b ih le b a r d a ri se b ua h b a ris b ia sa .

• Te ks d ia nta ra ta g <p > d a n </ p > d ita m p ilka n se b a g a i se b ua h p a ra g ra p ya ng me mp unya i sp a si le b ih le b a r d a ri se b ua h b a ris.

E

LEMEN

HTML

Ta g HTML d a n e le me n HTML se ring d ig una ka n untuk me nya ta ka n ha l ya ng sa ma . Te ta p i d isini te rd a p a t p e rb e d a a n me nd a sa r d ia nta ra ke d ua nya , ya itu e le me n HTML a d a la h se mua ya ng b e ra d a d ia nta ra ta g a wa l d a n a khir te rm a suk ta g -ta g itu se nd iri. Ja d i e le me n HTML a d a la h:

<tagawal>konten</tagakhir>

C o nto h sua tu e le me n HTML:

<p>Ini adalah sebuah paragrap</p>

D

O KUMEN

HTML

ADALAH

H

ALAMAN

W

EB

Do kum e n HTML sa m a d e ng a n ha la ma n we b . Se b ua h d o kume n HTML me nya ta ka n se b ua h ha la m a n we b . Se hing g a sua tu d o kume n HTML jug a d ise b ut ha la m a n we b . Do kum e n HTML ini b e risi ta g -ta g HTML d a n te ks b ia sa (plain text).

B

RO WSER

W

EB

Ke g una a n d a ri b ro wse r we b (Firefox, Chrome, Internet Explorer, Opera) ini a d a la h

untuk m e mb a c a d o kume n-d o kume n HTML d a n me na mp ilka nnya se b a g a i ha la m a n-ha la ma n we b . Bro wse r we b ini tid a k me na m p ilka n ta g -ta g HTML te ta p i me ng g una ka n ta g -ta g te rse b ut untuk d ite rje m a hka n m e nja d i ko nte n sua tu ha la m a n.

S

TRUKTUR

D

O KUMEN

HTML

Pe nulisa n sua tu d o kume n HTML m e ng ikuti struktur te rte ntu ya ng sud a h b a ku, ya itu: <html>

<body>

(8)

L. Era wa n, M.Ko m 8 <p>Ini sebuah paragrap</p>

</body> </html>

Struktur d ia ta s te rd iri d a ri se b ua h e le me n HTML, se b ua h e le me n BODY d a n

ko nte nnya ya ng d isini b e risi e le me n H1 d a n P. Da la m se b ua h d o kume n HTML ha nya

(9)

E

LEMEN

HTML

Ele me n-e le me n HTML d ituliska n d a la m sua tu d o kume n HTML. Ele me n HTML a d a la h ta g a wa l d a n ta g a khir se rta ko nte n d ia nta ra nya . Sinta ks e le me n HTML:

• Dia wa li d e ng a n ta g a wa l a ta u p e m b uka • Dia khiri d e ng a n ta g a khir a ta p e nutup

• Ko nte n e le me n a d a la h se g a la se sua tu d ia nta ra ta g a wa l d a n a khir.

• Be b e ra p a e le me n tid a k me miliki ko nte n a lia s e le me n ko so ng . Ele me n ini tid a k me miliki p a sa ng a n a ta u ha nya te rd iri d a ri ta g a wa l sa ja

• Ele me n ko so ng d itutup p a d a ta g a wa lnya . Ka re na tid a k me miliki p a sa ng a n a ta u ta g a khir m a ka p e nutup a n ta g d ila kuka n p a d a ta g a wa l d e ng a n me na mb a hka n sim b o l blackslash se te la h na ma ta g , c o nto h <b r / >.

• Se b a g ia n b e sa r e le me n HTML me m iliki a trib ut.

E

LEMEN

HTML

B

ERSARANG

Se b a g ia n b e sa r e le me n HTML d a p a t d isa ra ng ka n a ta u m e miliki e le me n HTML la in d id a la mnya . Se b e na rnya , d o kume n HTML b e risi e le me n-e le me n HTML ya ng b e rsa ra ng a n sa tu sa m a la in. Ag a r le b ih je la s b e rikut se b ua h c o nto h d o kume n HTML:

<body>

<p>Ini adalah teks yang diatur untuk tampil sebagai paragrap</p> </body>

</html>

Do kum e n HTML d ia ta s te rd iri d a ri e le me n-e le me n HTML ya ng sa ling b e rsa ra ng . Ele me n p a ra g ra p te rle ta k d id a la m e le me n BO DY. Ele me n BO DY se nd iri b e ra d a d id a la m e le me n HTML. Ja d i, e le me n HTML b e risi e le me n BO DY ya ng b e risi e le me n p a ra g ra p .

Ele me n HTML e le me n BO DY e le me n p a ra g ra p

T

IPS

T

AG

P

ENUTUP

(10)

<p>Ini adalah sebuah elemen paragrap yang tidak ditutup

Te ta p i ja ng a n p e rna h m e la kuka n ha l ini d a n ja ng a n p e rna h me nya nd a rka n p ro se s p e m b ua ta n situs And a d e ng a n m e nto le rir ha l ini. Me ng a p a ? Ka re na b a nya k e le me n HTML ya ng a ka n m e mb e rika n ha sil ya ng tid a k d iha ra p ka n d a n a ta u ke sa la ha n jika kita m e lup a ka n ta g p e nutup .

E

LEMEN

K

OSONG ATAU

T

AG

T

UNGGAL

Ele me n HTML ya ng ko so ng a ta u tid a k m e mp unya i p a sa ng a n se p e rti ta g <b r> se b a iknya d itutup d e ng a n m e na mb a hka n backslash d i b e la ka ng na m a ta g se p e rti

b e rikut <b r / >.

G

UNAKAN

L

OWERCASE

U

NTUK

M

ENULIS

T

AG

HTML

Ta g -ta g HTML b e rsifa t case-insensitive ya ng b e ra rti <p > sa m a d e ng a n <P>. Te ta p i

se b a iknya m e nulis ta g -ta g HTML m e ng g una ka n huruf ke c il (lowercase) se b a b World Wide Consortium (W3C) me re ko me nd a sika n ha l ini p a d a HTML 4. Da la m XHTML

(11)

A

TRIBUT

-

ATRIBUT

HTML

Atrib ut-a trib ut HTML m e nye d ia ka n info rm a si ta m b a ha n te nta ng e le me n HTML. Pe nulisa n a trib ut ini p a d a ta g a wa l sua tu e le me n HTML. Atrib ut d itulis b e rsa m a nila inya me ng g una ka n simb o l sa m a d e ng a n se rta nila i a trib ut ha rus d ia p it d e ng a n ta nd a p e tik, b a ik d o b e l ma up un tung g a l. C o nto h:

<a href=”http://wordpress.com”>Ini sebuah link</a>

Ele me n a nc ho r d ia ta s m e ng g una ka n a trib utnya href ya ng b e rfung si me ne ta p ka n

a la m a t link. Pisa hka n sa tu sp a si a nta ra na ma ta g d e ng a n a trib utnya . Jug a a nta r a trib ut-a trib ut jika m e ng g una ka n le b ih d a ri sa tu a trib ut p a d a se b ua h e le me n HTML. Atrib ut-a trib ut d a n nila inya i se b a iknya jug a d itulis d a la m huruf ke c il (lowercase)

me skip un b a ha sa HTML b e rsifa t case-insensitive. Be rikut ini b e b e ra p a a trib ut ya ng

me rup a ka n sta nd a r a trib ut p a d a se b a g ia n b e sa r e le me n HTML:

Atribut NIlai Penjelasan

c la ss na m a ke la s me ne ntuka n na m a ke la s untuk sua tu e le me n

id na m a id me ne ntuka n id unik untuk sua tu e le me n

style d e finisi style me ne ntuka n style inline sua tu e le me n

(12)

H

EADING

He a d ing sa ng a t p e nting d a la m ha la m a n we b . Se a rc h e ng ine se p e rti g o o g le me ng ind e ks struktur d a n ko nte n ha la m a n we b me ng g una ka n he a d ing . Ja ng a n me ng g una ka n he a d ing untuk ke p e rlua n me mb ua t huruf b e sa r a ta u te b a l.

He a d ing d ib ua t me ng g una ka n ta g <h1> sa m p a i d e ng a n <h6>. Se ma kin b e sa r a ng ka d ib e la ka ng huruf h se ma kin ke c il ukura n he a d ing . He a d ing jug a a ka n me mb ua t ja ra k sp a si ya ng le b ih le b a r d a rip a d a b a ris b ia sa .

G una ka n he a d ing se c a ra b e ruruta n. He a d ing <h1> d a p a t d ig una ka n se b a g a i jud ul uta m a , ke mud ia n <h2> untuk sub he a d ing , <h3> untuk sub sub he a d ing , d a n se te rusnya . C o nto h he a d ing :

<h1>Ini heading terbesar<h1>

<h2>Ini heading terbesar setelah h1</h2> <h3>Ini heading terbesar ketiga</h3>

L

INES

HTML

Untuk m e mb ua t g a ris ho riso nta l HTML me nye d ia ka n ta g <hr / >. Ta g ini d a p a t d ig una ka n m isa lnya untuk me misa hka n ko nte n. C o nto h:

<p>Elemen garis ini berupa tag tunggal tanpa pasangan</p> <hr />

<p>Penulisan tag diakhiri dengan backslash dibelakang nama tag</p> <hr />

<p>Elemen garis ini cukup bermanfaat untuk memperjelas konten</p>

K

O MENTAR

HTML

Ta g ko m e nta r d ig una ka n o le h p a ra we b m a ste r untuk m e mb e ri c a ta ta n te rha d a p ko d e HTML se hing g a d a p a t me m b a ntu ing a ta n we b m a ste r te rha d a p ko d e HTML d id a la mnya . Se la in itu jug a d a p a t m e m b a ntu p e m a ha m a n te rha d a p a lur ko d e HTML.

Ta g ko m e nta r ini b e rb e ntuk se p e rti c o nto h b e rikut:

(13)

M

ENAMPILKAN

K

O DE

S

UMBER

(

S

OURCE

C

ODE

)

Ke tika And a m e liha t sua tu ha la m a n we b d i Inte rne t, p e rna hka h And a p e na sa ra n b a g a im a na ko d e HTMLnya untuk m e mb ua t ta m p ila n ha la ma n se p e rti itu? Tid a k p e rlu kua tir, And a d a p a t me liha t ko d e sumb e rnya d e ng a n c a ra klik ka na n p a d a ha la m a n we b te rse b ut la lu p ilih “View Source” a ta u “View Page Source”, a ta u

(14)

P

ARAGRAP

HTML

Da la m sua tu na ska h tulisa n b ia sa d ig una ka n p a ra g ra p untuk me mb ua t tulisa n me nja d i te rstruktur, je la s, se rta m ud a h d ip a ha m i isinya . De mikia n jug a d e ng a n ko nte n ha la m a n we b ya ng b e risi tulisa n p a nja ng p e rlu d ib a g i me nja d i p a ra g ra p -p a ra g ra -p se hing g a -p o ko k--p o ko k -p ikira n tulisa n me nja d i je la s d a -p a t d i-p a ha m i d e ng a n mud a h. C o nto h p e ng g una a n e le me n ini:

<p>Paragrap yang baik biasanya mengandung satu pokok pikiran saja sehingga mudah dipahami</p>

<p>Pokok pikiran paragrap sebaiknya juga diletakkan diawal paragrap sehingga pembaca web dapat terbantu membaca isi paragrap dengan cepat</p>

Ke tika sua tu p a ra g ra p d ita m p ilka n, b ro wse r a ka n se c a ra o to m a tis me na m b a hka n sa tu b a ris ko so ng se b e lum d a n se te la h p a ra g ra p . Ha l ini ya ng me nye b a b ka n fo rm a t p a ra g ra p me miliki ja ra k sp a si ya ng le b ih le b a r d e ng a n te ks d ia ta s d a n d ib a wa hnya . Pe rlu d ic a ta t d isini, b a hwa ta np a ta g p e nutup b ro wse r te ta p d a p a t m e na m p ilka n sua tu p a ra g ra p . Te ta p i ha l ini se b a iknya d ihind a ri ka re na me lup a ka n ta g p e nutup d a p a t m e ng ha silka n ta m p ila n ya ng tid a k d iha ra p ka n a ta u b a hka n ke sa la ha n. Se la in itu, ve rsi HTML b e rikutnya tid a k a ka n me ng ijinka n kita untuk me ning g a lka n ta g p e nutup .

L

INE

B

REAK

HTML

Line b re a k ya ng d im a ksud a d a la h e le me n ko so ng ya itu ta g <b r / >. Ele me n ini d a p a t d ig una ka n jika kita ing in b e rp ind a h b a ris ta np a m e mula i sua tu p a ra g ra p b a ru (m a ksud nya jika kita tid a k ing in ja ra k b a ris ya ng le b a r d e ng a n b a ris te ks se b e lumnya ). Ka re na e le me n ini me rup a ka n ta g tung g a l p e rha tika n c a ra p e nulisa nnya ya ng sta nd a r, ya itu me na m b a hka n backslash se te la h na m a ta g .

C o nto h:

<p>Ini sebuah paragrap.</p>

Baris ini memiliki jarak baris lebih lebar dengan paragrap diatas tetapi tidak dengan baris berikutnya.<br />

(15)

T

IPS

T

ENTANG

S

PASI DAN

P

INDAH

B

ARIS

Da la m me ne rje ma hka n sua tu d o kume n HTML, b ro wse r ha nya a ka n me ng a kui sa tu sp a si sa ja untuk ja ra k a nta r ka ta . Artinya , And a tid a k d a p a t m e mb e ri ja ra k sp a si le b ih d a ri sa tu a nta r a ka ta ka re na a ka n d ia b a ika n o le h b ro wse r.

De m ikia n jug a jika And a me ne ka n e nte r untuk b e rp ind a h b a ris p a d a sa a t me nulis sua tu na ska h d a la m d o kume n HTML. Pe rp ind a ha n b a ris d e ng a n me ne ka n e nte r ini jug a a ka n d ia b a ika n d a n te ta p a ka n d ita mp ilka n o le h b ro wse r se b a g a i sa tu b a ris. Bro wse r ha nya a ka n b e rp ind a h b a ris jika me njump a i ta g <b r / > a ta u e le me n p a ra g ra p p a d a sa a t m e ne rje m a hka n sua tu d o kum e n HTML.

(16)

T

AG

-

TAG

F

O RMATTING

HTML

HTML m e ng g una ka n ta g <i> d a n <b > untuk me m fo rma t te ks me nja d i b e rhuruf miring a ta u te b a l. Ta g -ta g ini d ise b ut ta g fo rm a tting . Be rikut b e b e ra p a ta g fo rm a tting ya ng a d a d i HTML.

T

AG

F

O RMATTING

Ke lo mp o k ta g d ib a wa h ini um um d ig una ka n.

Tag Penjelasan

<b > me mb ua t huruf te b a l

<b ig > me mb ua t huruf b e sa r

<e m> me mb ua t te ks ya ng d ite ka nka n se c a ra ita lic

<i> me mb ua t huruf miring

<sm a ll> me mb ua t huruf ke c il

<stro ng > me mb ua t p e ne ka na n te ks d e ng a n p e ne b a la n huruf <sub > me mb ua t sub sc rip t te ks

<sup > me mb ua t sup e rsc rip t te ks

<ins> me mb ua t sisip a n te ks

<d e l> me mb ua t p e ng ha p usa n te ks

T

AG

“ K

ELUARAN

K

O MPUTER

”

Ke lo mp o k ta g d ib a wa h ini me nye d ia ka n fo rm a t untuk me na m p ilka n te ks ya ng b e rhub ung a n d e ng a n p ro se s p e ng o la ha n ko m p ute r. Misa lnya , And a me m p unya i se b ua h na ska h a ta u a rtike l te nta ng “ C a ra Ke rja Ko m p ute r”. Te ntu d id a la m na ska h a ka n a d a te ks ya ng m e nje la ska n te nta ng ha sil ke lua ra n ko mp ute r, inp ut d a ri ke yb o a rd , ko d e -ko d e ko mp ute r, d a n se b a g a inya . Na h, b a g ia n te ks ini d a p a t d ifo rm a t ta m p ila nnya me ng g una ka n ke lo mpo k ta g ini.

Tag Penjelasan

<c o d e > fo rm a t te ks ko d e -ko d e ko mp ute r <kb d > fo rm a t te ks inp uta n ke yb o a rd <sa m p > fo rm a t c o nto h ko d e ko m pute r <tt> fo rm a t ta m p ila n te ks me sin ke tik <va r> fo rm a t ta m p ila n va ria b e l

(17)

T

AG

D

EFINISI DAN

K

UTIPAN

Tag Penjelasan

<a b b r> fo rm a t sing ka ta n <a c ro nym> fo rm a t a kro nim

<a d d re ss> fo rm a t info rm a si ko nta k p e m ilik d o kume n <b d o > me ne ntuka n a ra h a lira n te ks

<b lo c kq uo te > fo rm a t kutip a n p a nja ng <q > fo rm a t kutip a n p e nd e k <c ite > fo rm a t kutip a n

(18)

E

DITOR

HTML

File HTML b e rje nis file te xt. Ini b e ra rti untuk me mb ua t file HTML (a ta u d o kum e n HTML) d a p a t me ng g una ka n b e rb a g a i je nis so ftwa re te ks e d ito r ya ng d a p a t m e ng ha silka n file te ks. Da n so ftwa re je nis ini jumla hnya b a nya k. Be b e ra p a so ftwa re e d ito r HTML p ro fe sio na l ya ng d a p a t d ig una ka n a nta ra la in:

• Ad o b e Dre a m we a ve r • Mic ro so ft Exp re ssio n We b • C o ffe C up HTML Ed ito r

Na m un d isa ra nka n untuk me mp e la ja ri b a ha sa HTML ini le b ih b a ik me ng g una ka n te ks e d ito r se d e rha na se p e rti No te p a d (Wind o ws) a ta u Te xtEd it (Ma c ). Pa ka r we b p e rc a ya b a hwa b e la ja r HTML a ka n le b ih b a ik jika me ng g una ka n te ks e d ito r se d e rha na .

Pe rlu d ike ta hui, b a hwa sua tu file ya ng b e rje nis te xt isinya b e rup a ka ra kte r ya ng d a p a t d ib a c a o le h ma nusia a lia s b uka n ko d e -ko d e me sin se p e rti file e xe a ta u c o m. Untuk m e mb ua t d o kume n HTML m e ng g una ka n No te p a d la ng ka h-la ng ka hnya se b a g a i b e rikut:

1. Buka No te p a d

C a ra nya b e rva ria si te rg a ntung je nis wind o ws ya ng d ig una ka n. Untuk Wind o ws 7:

All Programs - Accessories - Notepad

(19)

L. Era wa n, M.Ko m 19 3. Sim p a n file d e ng a n me nu Save as p a d a me nu File. Ke tika m e nyimp a n file , And a

d a p a t me ng g una ka n a khira n html a ta u htm. Ke d ua a khira n ini d a p a t d ig una ka n

b e rg a ntia n tid a k a d a p e rb e d a a n sa m a se ka li. Sim p a n file p a d a se b ua h fo ld e r ya ng mud a h d iing a t.

4. Ja la nka n file d e ng a n b ro wse r. Buka b ro wse r And a d a n b uka file d e ng a n me nu

File - Open p a d a b ro wse r. Ata u b isa jug a d e ng a n me la kuka n klik d ua ka li p a d a

(20)

L

INKS

HTML

Link a d a la h sa la h sa tu c iri khusus we b . Link d a p a t d ijum p a i d i se tia p ha la ma n we b d i Inte rne t. Link d ig una ka n untuk me lo mp a t d a ri sa tu ha la m a n ke ha la m a n we b ya ng la in. Link me ng hub ung ka n ha la ma n we b sa tu sa m a la in.

H

YPERLINK

(L

INK

)

HTML

Link jug a d ise b ut hyp e rlink, a d a la h sua tu ka ta , ke lo mp o k ka ta , a ta u g a m b a r ya ng d a p a t d iklik untuk m e lo mp a t ke ha la m a n we b ya ng la in a ta u b a g ia n te rte ntu d a ri sua tu ha la m a n we b . C iri se b ua h link a d a la h ke tika kurso r b e ra d a d ia ta s a ta u me linta si sua tu link, g a m b a r kurso r a ka n b e rub a h m e nja d i little hand. Sua tu link

d ib ua t d e ng a n ta g anchor a ta u <a >.

Pe ng g una a n ta g a nc ho r untuk me mb ua t link te rd a p a t 2 c a ra :

1. Untuk m e mb ua t link ke d o kume n HTML ya ng la in d e ng a n me ng g una ka n a trib ut href.

2. Untuk m e mb ua t bookmark d a la m d o kume n HTML d e ng a n me ng g una ka n

a trib ut name.

Sinta k d a ri link HTML:

a trib ut href me ne ntuka n tujua n d a ri link, c o nto h:

<a href=”http://www.w3.org”>Organisasi dunia W3</a>

Jika d ija la nka n a ka n ta m p a k p a d a b ro wse r se p e rti ini: O rg a nisa si d unia W3

Jika link te rse b ut d iklik ma ka use r a ka n d ib a wa m e nuju ha la ma n ho me p a g e situs W3.

A

TRIBUT

T

ARGET

Atrib ut ini d ig una ka n untuk m e ne ntuka n a ka n d ib uka d ima na ha la ma n we b tujua n link. C o nto h d ib a wa h ini a ka n m e m b uka d o kum e n HTML tujua n ke je nd e la b ro wse r ya ng b a ru:

(21)

A

TRIBUT

N

AME

Atrib ut ini d a p a t d ig una ka n untuk me ne ntuka n na m a se b ua h a nc ho r. Atrib ut ya ng d ig una ka n untuk me m b ua t b o o kma rk d id a la m sua tu d o kume n HTML. Bo o km a rk d isini b e ra rti sua tu p e na nd a ya ng me na nd a i b a g ia n te rte ntu d a ri se b ua h d o kum e n HTML se hing g a d a p a t me nja d i tujua n se b ua h link. C o nto h p e ng g una a n a trib ut ini se b a g a i b e rikut:

Pa d a se b ua h d o kume n HTML (link.html), d ib a g ia n te rte ntu d o kume n te rse b ut, And a ta m b a hka n ko d e p e m b ua ta n b o o km a rk ini:

<a name=”hyperlink”>Bab 8: Hyperlink</a>

Da la m d o kume n ya ng sa m a b ua tla h se b ua h link me nuju ke b o o km a rk te rse b ut:

<a href=”#hyperlink”>Menuju bab 8</a>

Ata u And a b isa m e mb ua t link d a ri d o kume n la in me nuju ke b o o km a rk te rse b ut:

T

IPS

• Ta m b a hka n se la lu a khira n b a c ksla sh d i se tia p a la m a t me nuju sua tu fo ld e r. C o nto h:

href=”http://www.w3schools.com/html”

URL d ia ta s (ta np a a khira n b a c ksla sh) a ka n m e mb ua t 2 re q ue st ke se rve r. Pe rta m a , se rve r a ka n me na m b a hka n b a c ksla sh d ia khir a la ma t. Ke d ua , se rve r me mb ua t re q ue st b a ru se p e rti ini:

href=”http://www.w3schools.com/html/”

De ng a n d e mikia n a ka n me na mb a h wa ktu p ro se s re q ue st link ya ng te ntunya tid a k kita ha ra p ka n

(22)

I

MAGE

HTML

Da la m HTML, g a m b a r d id e finisika n me ng g una ka n ta g <img > sing ka ta n d a ri image.

Ta g ini te rm a suk ta g ko so ng a lia s tid a k m e mp unya i p a sa ng a n ta g . Untuk me na mp ilka n g a mb a r p a d a ha la ma n p e rlu a trib ut src, sing ka ta n d a ri source. Nila i

d a ri a trib ut ini a d a la h URL d a ri file g a m b a r ya ng ing in d ita m p ilka n. Sinta ks ta g se p e rti ini:

a trib ut alt d isini b e rfung si untuk me ne ntuka n te ks ya ng a ka n me ng g a ntika n b ila

g a m b a r te rnya ta tid a k b isa d ita m p ilka n. G a g a lnya g a mb a r d ita m p ilka n b isa d ise b a b ka n o le h la mb a tnya ko ne ksi inte rne t, error p a d a a trib ut src, a ta u jika use r

me ng g una ka n screen reader.

Untuk m e na m p ilka n g a mb a r d e ng a n na m a g ra fis.jp g ya ng d isim p a n d i fo ld e r ya ng sa m a d e ng a n d o kume n HTML ya ng me na m pilka nnya , m a ka nila i a trib ut src se b a g a i b e rikut:

Bila g a mb a r te rle ta k d ilo ka si ya ng b e rb e d a d e ng a n d o kume n HTML ya ng me na mp ilka nnya , m a ka a la ma t path ha rus d itulis p ula , misa lnya :

Ele me n ima g e d ia ta s me na m p ilka n g a mb a r ya ng te rle ta k d i se rve r ya ng sa ma d e ng a n d o kume n HTML te ta p i d i fo ld e r ya ng b e rb e d a . Jika g a m b a r te rle ta k d i se rve r ya ng b e rb e d a , m a ka nila i a trib ut src b e rup a a la m a t URL a b so lut:

Ala t a b so lut me rup a ka n a la ma t le ng ka p b e se rta je nis p ro to ko lnya (http ).

A

TUR

T

ING G I DAN LEBAR

G

AMBAR DENG AN

H

EIGHT DAN

W

IDTH

Atrib ut height d a n width d ig una ka n untuk me ng a tur ting g i d a n le b a r g a mb a r.

Sa tua n nila i a trib ut a d a la h p ikse l. C o nto h:

(23)

L. Era wa n, M.Ko m 23 Me ne ntuka n ting g i d a n le b a r g a m b a r le b ih b a ik d ila kuka n ke tika me na m p ilka n se b ua h g a m b a r d i ha la m a n we b . Jika a trib ut ini d ise t, b ro wse r a ka n m e nyia p ka n sp a c e ya ng d ib utuhka n o le h g a mb a r sa a t ha la ma n d imua t. Te ta p i jika tid a k d ite ntuka n, b ro wse r tid a k a ka n ta hu ukura n g a m b a r se hing g a tid a k a ka n me nyia p ka n sp a c e untuk g a m b a r. Akib a tnya , ta ta le ta k ha la m a n a ka n b e rub a h ke tika g a m b a r mula i d imua t (te ks a ka n d imua t te rle b ih d a hulu ke ha la ma n se b e lum g a m b a r).

(24)

T

ABLE

HTML

Ta b e l d ib ua t d e ng a n me ng g una ka n ta g <ta b le >. Ta b e l d ib a g i m e nja d i b a ris-b a ris ta b e l ya ng d ib ua t me ng g una ka n ta g <tr>, sing ka ta n d a ri table row. Se tia p b a ris

d ib a g i m e nja d i se l-se l d a ta ya ng d ib ua t d e ng a n m e ng g una ka n ta g <td >, sing ka ta n d a ri table data ya ng me na mp ung isi se l d a ta . Isi d a ri se l d a ta ini ya ng a ka n ta m p a k

d ila ya r b ro wse r. Ta g <td > d a p a t b e risi text, link, image, list, form, table la innya , d a n

la in-la in.

<tr>

</table>

Ta m p ila n d ila ya r b ro wse r d a ri c o nto h d ia ta s:

ro w 1, c e ll 1 ro w 1, c e ll 2 ro w 2, c e ll 1 ro w 2, c e ll 2

A

TRIBUT

B

O RDER

Jika tid a k d ite ntuka n m a ka ta b e l a ka n d ita mp ilka n d e ng a n ta np a b o rd e r. Untuk me na mp ilka n b o rd e r ta b e l me ng g una ka n a trib ut b o rd e r:

</table>

H

EADER

T

ABEL

(25)

L. Era wa n, M.Ko m 25 me ng g una ka n ta g <th>. Bro wse r-b ro wse r ya ng sud a h te rke na l me na m p ilka n te ks d id a la m e le me n <th> d e ng a n te b a l d a n d ite ng a hka n.

<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr>

<tr>

</table>

Ta m p ila n d i b ro wse r d a ri ko d e HTML d ia ta s:

Header 1 Header 2

ro w 1, c e ll 1 ro w 1, c e ll 2 ro w 2, c e ll 1 ro w 2, c e ll 2

T

AG

<

C O L

>

Ta g ini b e rfung si untuk me ne ntuka n nila i a trib ut p a d a sa tu a ta u b e b e ra p a ko lo m d id a la m se b ua h ta b e l. Ta g ini b e rm a nfa a t untuk m e ne ra p ka n style ke se luruh se l p a d a sua tu ko lo m d a rip a d a ha rus me ne ntuka n sa tu p e rsa tu d i se tia p se l p a d a sua tu ko lo m. Ta g ini ha nya d a p a t d ig una ka n d id a la m e le me n <html> a ta u e le me n <c o lg ro up >. Liha t c o nto h:

</colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td>

(26)

L. Era wa n, M.Ko m 26 <td>5869207</td>

<td>My first CSS</td> <td>$49</td>

</tr> </table>

Ta m p ila n p a d a b ro wse r:

A

TRIBUT

O

PSIO NAL

Atrib ut-a trib ut o p sio na l ya ng d a p a t d ig una ka n p a d a ta g <c o l>:

Attribute Value Description

a lig n le ft rig ht c e nte r justify c ha r

Me ne ntuka n p e ra ta a n ko nte n d a ri sua tu e le me n <c o l>

c ha r character Pe ra ta a n ko nte n d a ri sua tu e le me n <c o l>

me ng g una ka n sua tu ka ra kte r se b a g a i a c ua n p e ra ta a n.

c ha ro ff number Me ne ntuka n jumla h ka ra kte r d a ri ko nte n ya ng a ka n

d ira ta ka n d ihitung d a ri ka ra kte r ya ng d ite ntuka n o le h a trib ut char

sp a n number Me ne ntuka n jumla h ko lo m ya ng te rp e ng a ruh o le h

se b ua h e le me n <c o l>

va lig n to p mid d le b o tto m b a se line

Me ne ntuka n p e ra ta a n ve rtika l d a ri ko nte n se b ua h e le me n <c o l>

wid th % pixels

relative_length

(27)

L

IST

HTML

Da la m HTML, sua tu list a d a la h ta m p ila n d a ri se ke lo mp o k te ks ya ng d isusun se p e rti se b ua h d a fta r (list=d a fta r). List a d a 2 je nis:

U

NO RDERED

L

IST

List je nis ini d ib ua t m e ng g una ka n ta g <ul>, sing ka ta n d a ri unordered list. Ma sing

-ma sing ite m d a ri d a fta r d ib ua t m e ng g una ka n ta g <li>: <ul>

Pa d a b ro wse r a ka n d ita m p ilka n se ma c a m ini:

• Ko p i • Susu • Te h

Se tia p ite m d a ri d a fta r d ita nd a i d e ng a n bullet ya ng b ia sa nya b e rup a ling ka ra n

hita m ke c il.

O

RDERED

L

IST

Dib ua t m e ng g una ka n ta g <o l>, sing ka ta n d a ri ordered list. Ma sing -ma sing ite m d a ri

d a fta r d ib ua t me ng g una ka n ta g <li>: <ol>

Pa d a b ro wse r ta m p a k se p e rti ini: 1. Ko p i

(28)

D

EFINITIO N

L

IST

Pa d a list je nis ini, se tia p ite m nya d ita m p ilka n d e ng a n d e skrip si d ise tia p ite m nya . Untuk m e mb ua t list ini d ig una ka n ta g <d l>. Ta g ini sa tu ra ng ka ia n d e ng a n ta g <d t>, sing ka ta n d a ri data title, d a n <d d >, sing ka ta n d a ri data description.

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd> <dt>Milk</dt>

<dd>- white cold drink</dd> </dl>

Ta m p ila n d a ri ko d e d ia ta s:

Coffee

- black hot drink Milk

- white cold drink

(29)

E

LEMEN

B

LOCK

HTML

Ele me n-e le me n d id a la m HTML d ika te g o rika n se b a g a i e le me n block level d a n

e le me n inline. Ele me n-e le me n block le ve l p a d a b ro wse r a ka n d ita m p ilka n d e ng a n

d ia wa li d a n d ia khiri d e ng a n b a ris b a ru. Te rm a suk d id a la mnya : <h1>, <p >, <ta b le >, <ul>

se d a ng ka n ya ng te rg o lo ng e le me n inline d ita m p ilka n ta np a d ia wa li b a ris b a ru,

c o nto h:

E

LEMEN

<DIV>

Ele me n <d iv> te rg o lo ng se b a g a i e le me n block level. Ele me n ini d a p a t d ig una ka n

se b a g a i ko nta ine r (p e na m p ung ) untuk me ng e lo mp o kka n e le me n HTML la innya . Na m a e le me n ini tid a k me m punya i a rti khusus, se la in b a hwa e le me n a d a la h se b ua h e le me n block level ya ng b e ra rti a ka n d ita m p ilka n o le h b ro wse r d e ng a n

b a ris b a ru d ia wa l d a n a khir e le me n.

Sa a t d ig una ka n b e rsa m a C SS, e le me n ini d a p a t d ig una ka n untuk m e ng a tur style ta m p ila n d a ri sa tu b lo k b e sa r d a ri ko nte n.

Pe ng g una a n umum la innya d a ri e le me n ini a d a la h untuk me ng a tur layout d a ri

se b ua h d o kume n HTML, m e ng g a ntika n c a ra la m a p e ng a tura n la yo ut me ng g una ka n ta b e l. Pe ng g una a n ta b e l untuk p e ng a tura n la yo ut me rup a ka n c a ra ya ng tid a k b e na r d a ri p e ne ra p a n e le me n <ta b le >. Me ng a p a ? Ka re na fung si se b e na rnya d a ri e le me n ta b e l a d a la h untuk me na m p ilka n d a ta d a la m b e ntuk

tabular.

E

LEMEN

<

SPAN

>

(30)

L

AYOUT

HTML

La yo ut ha la ma n we b sa ng a t p e nting untuk m e mb ua t ta m p ila n we b site me nja d i b a ik. Ole h ka re na itu, la yo ut ha la ma n we b se b a iknya d ira nc a ng se c a ra ha ti-ha ti.

L

AYO UT

W

EBSITE

Se b a g ia n b e sa r we b site me na mp ilka n ko nte nnya d a la m b e ntuk multiple c o lumns

(b e b e ra p a ko lo m), se p e rti ta m p ila n ko nte n ma ja la h a ta u sura t ka b a r. Ko lo m-ko lo m ini d ib ua t d e ng a n e le me n <d iv> a ta u <ta b le >. C SS d ig una ka n untuk m e ng a tur p o sisi b a g ia n-b a g ia n ha la m a n, a ta u untuk me mb ua t la ta r b e la ka ng (background)

ha la m a n, a ta u m e ng a tur ta m p ila n wa rna ha la m a n-ha la m a n we b .

Pe rlu d ig a risb a wa hi, m e skip un e le me n ta b le d a p a t d ig una ka n untuk m e mb ua t la yo ut ya ng b a g us, te ta p i itu b uka n c a ra ya ng b e na r ka re na fung si e le me n ta b le se b e na rnya a d a la h untuk me na m p ilka n d a ta ta b ula r b uka n a la t p e ng a tura n la yo ut!

L

AYO UT

D

ENG AN

E

LEMEN

<

DIV

>

Ele me n d iv me rup a ka n e le me n block level ya ng d ig una ka n untuk

me ng e lo m p o kka n e le me n-e le me n HTML. Ele me n ini se ring d ig una ka n untuk p e ng a tura n la yo ut we b site . C o nto h b e rikut p e ng a tura n la yo ut d e ng a n me ng g una ka n 5 e le me n d iv:

<body>

<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> <div id="menu" style="backgroundcolor:#

FFD700;height:200px;width:100px;float:left;"> <b>Menu</b><br />

HTML<br /> CSS<br />

JavaScript</div>

<div id="content" style="backgroundcolor:# EEEEEE;height:200px;width:400px;float:left;"> Content goes here</div>

(31)

L. Era wa n, M.Ko m 31 center;">

</body> </html>

Ha sil la yo ut d ia ta s d i b ro wse r:

L

AYO UT

M

ENG G UNAKAN

E

LEMEN

T

ABLE

Pe ng a tura n la yo ut d e ng a n c a ra ini me rup a ka n c a ra ya ng p a ling se d e rha na . Me skip un d e mikia n, c a ra ini tid a k d isa ra nka n ka re na tid a k se sua i d e ng a n fung si e le me n ta b le se b e na rnya .

C o nto h la yo ut d ib a wa h ini me ng g una ka n ta b e l 3 b a ris 2 ko lo m ya ng b a ris p e rta m a d a n te ra khirnya ko lo m -ko lo mnya d ig a b ung ka n me ng g una ka n a trib ut colspan.

<body>

<td colspan="2" style="background-color:#FFA500;"> <h1>Main Title of Web Page</h1>

</td> </tr>

(32)

L. Era wa n, M.Ko m 32 CSS<br />

JavaScript </td>

Content goes here</td> </tr>

<tr>

</tr> </table> </body> </html>

(33)

F

ORM

HTML

Fo rm d ig una ka n untuk m e ng irim ka n d a ta ke se rve r. Se b ua h fo rm d a p a t b e risi e le me n-e le me n inp ut se p e rti: te xt fie ld , c he c kb o x, ra d io -b utto n, sub m it b utto n, se le c t list, te xta re a , fie ld se t, le g e nd , d a n e le me n la b e l.

Untuk m e mb ua t e le me n fo rm HTML d ip e rluka n ta g <fo rm >: <form>

elemen-elemen input </form>

E

LEMEN

I

NPUT

Ele me n fo rm ya ng p a ling p e nting a d a la h e le me n inp ut. Ele me n ini d ig una ka n untuk me mp e ro le h info rma si use r. Ele me n inp ut ini te rd iri d a ri b e b e ra p a je nis, ya ng d ite ntuka n o le h a trib ut typ e . Ele me n inp ut d a p a t b e rup a te xt fie ld , c he c kb o x, ra d io b utto n, p a sswo rd , sub m it b utto n, se le c t list, d a n te xta re a .

T

EXT

F

IELD

Dib ua t d e ng a n ko d e :

Ele me n inp ut je nis ini b e rup a b id a ng inp ut sa tu b a ris ya ng d a p a t d iisi d e ng a n te ks o le h use r. Atrib ut type d ig una ka n untuk me ne ntuka n je nis e le me n inp ut ya ng a ka n

d ib ua t. C o nto h: <form>

First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" />

</form>

Pa d a b ro wse r a ka n d ita m p ilka n se b a g a i b e rikut: First name:

Last name:

(34)

P

ASSWORD

F

IELD

C o nto h: <form>

Password: <input type=”” name=”pwd” /> </form>

Pa d a b ro wse r a ka n ta m p a k: Password:

Ka ra kte r ya ng d im a sukka n ke d a la m e le me n je nis a ka n d ita m p ilka n se b a g a i se b ua h sim b o l a ste rik a ta u ling ka ra n hita m ke c il.

R

ADIO

B

UTTON

C o nto h: <form>

<input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female </form>

Ta m p a k d i b ro wse r: Male

Female

Ele me n ra d io n b utto n ini m e m p e rsila hka n use r untuk ha nya m e milih sa la h sa tu d a ri p iliha n ya ng d ise d ia ka n.

C

HECKBOX

Je nis ini use r d ib o le hka n untuk m e milih ZERO a ta u MO RE p iliha n ya ng te rse d ia . Artinya , p iliha n d a p a t d ip ilih le b ih d a ri sa tu a ta u tid a k d ip ilih sa ma se ka li.

C o nto h: <form>

(35)

L. Era wa n, M.Ko m 35 </form>

Ha silnya p a d a b ro wse r: I have a bike I have a car

S

ELECT

L

IST

Pe m b ua ta n e le me n ini se d ikit b e rb e d a . Ko d e ya ng d ib utuhka n: <select >

<option value=””>Label <option value=””>Label dst...

</select>

Ta g ya ng d ig una ka n a d a la h ta g <se le c t>, se d a ng ka n untuk me m b e ntuk p iliha nnya me ng g una ka n ta g <o p tio n> d e ng a n a trib ut value untuk me ne ntuka n nila i d a ta d a ri

p iliha n. C o nto h: <form>

<option value=”Semarang”>Semarang <option value=”Jakarta”>Jakarta </select>

</form>

Ha sil d i b ro wse r:

Piliha n a ka n d ita m p ilka n ke b a wa h jika to m b o l d e ng a n simb o l p a na h b a wa h d iklik. Sa la h sa tu a trib ut p e nting je nis inp ut ini a d a la h untuk m e ne ntuka n p iliha n d e fa ult. Atrib ut te rse b ut a d a la h selected ya ng d itulis p a d a sa la h sa tu p iliha n ya ng a ka n

d ija d ika n p iliha n d e fa ult. C o nto h: <form>

<option value=”Semarang”>Semarang

<option value=”Jakarta” selected=”selected”>Jakarta </select>

</form>

(36)

T

EXTAREA

Ele me n inp ut ini d ig una ka n untuk me mb ua t inp uta n ya ng d a p a t d iisi d e ng a n te ks ya ng le b ih d a ri sa tu b a ris. Dib ua t d e ng a n ko d e :

C o nto h: <form>

Description: <br />

Atrib ut rows untuk me ng a tur jumla h b a ris ya ng d ita m p ilka n p a d a ko ta k te xta re a .

Ko d e d ia ta s b e ra rti jumla h b a ris ya ng a ka n d ita m p ilka n a d a la h 5. Jika te ks ya ng d iisika n ke d a la m ko ta k te xta re a le b ih d a ri 5 b a ris, ma ka b a ris ke e na m d a n se la njutnya tid a k a ka n ta m p a k d a n ko ta k te xta re a a ka n m e na m p ilka n b a ta ng sc ro ll ve rtika l. Se d a ng ka n a trib ut cols untuk me ne ntuka n le b a r ko ta k te xta re a d e ng a n

sa tua n ka ra kte r. Jika jumla h ka ra kte r ya ng d ima sukka n p a d a sua tu b a ris le b ih b e sa r d a ri nila i a trib ut cols m a ka ka ra kte r se la njutnya a ka n d ic e ta k p a d a b a ris b e rikutnya .

Di b ro wse r a ka n ta m p a k:

S

UBMIT

B

UTTON

To m b o l sub m it d ig una ka n untuk me ng irim d a ta fo rm ke se rve r. Da ta d ikirim ke se b ua h file ya ng d ite ntuka n p a d a a trib ut action fo rm. File ini b ia sa nya b e risi ko d e

untuk m e ng e rja ka n se sua tu te rha d a p d a ta fo rm ya ng d ite rim a . C o nto h: <form name="input" action="html_form_action.php" method="post"> Username: <input type="text" name="user" />

(37)

L. Era wa n, M.Ko m 37 Ha sil p a d a b ro wse r:

Username:

Jika use r me ma sukka n te ks ke ko ta k m a suka n d ia ta s, d a n klik to mb o l “ Sub m it”, b ro wse r a ka n m e ng irim inp uta n use r te rse b ut ke se b ua h ha la ma n ya ng b e rna ma

html_form_action.php.

(38)

I

FRAME

HTML

Ele me n ifra m e d ig una ka n untuk me na mp ilka n ha la m a n we b d id a la m ha la ma n we b la innya . Fo rma t e le me n ini a ka n me mb e ntuk se je nis b ing ka i d id a la m sua tu ha la ma n we b . Sinta ks e le me n:

Atrib ut src b e rfung si untuk me ne ntuka n lo ka si ha la m a n we b ya ng a ka n d ita m p ilka n

se b a g a i ha la ma n d a la m.

A

TRIBUT

I

FRAME

Be b e ra p a a trib ut ifra m e ya ng p e nting a nta ra la in: • Height dan Width

Bing ka i ya ng d ib e ntuk o le h e le me n ifra m e d a p a t d ia tur ukura n ting g i d a n le b a rnya d e ng a n a trib ut ini. Se c a ra d e fa ult nila i a trib ut ini b e rsa tua n p ikse l. Te ta p i And a d a p a t jug a m e ng g una ka n sa tua n p e rse n, m isa lnya “75%”. C o nto h p e ng g una a n a trib ut ini:

C o nto h d ia ta s a ka n ha la m a n we b demo_iframe.html d id a la m sua tu b ing ka i

ifra me d e ng a n ukura n le b a r 200 p ikse l d a n ting g i 350 p ikse l p a d a sua tu ha la m a n we b .

• Frameborder

Atrib ut ini untuk m e ne ntuka n d ita m p ilka n a ta u tid a k b o rd e r (g a ris b a ta s se ke liling b ing ka i) ifra m e . Untuk tid a k m e na mp ilka n b o rd e r, nila i a trib ut ini d ise t 0.

I

FRAME

S

EBAG AI

T

ARG ET

S

UATU

L

INK

(39)

L. Era wa n, M.Ko m 39 <iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p>

<a href="http://www.w3.org" target="iframe_a">Situs Organisasi W3</a> </p>

Pa d a c o nto h d ia ta s, jika link “Situs Organisasi W3” d iklik m a ka situs o rg a nisa si

p e ng e lo la we b d unia d e ng a n a la ma t www.w3.org a ka n ta m p il p a d a b ing ka i

(40)

C

OLOR

HTML

Wa rna d i ha la ma n we b d ita m p ilka n se b a g a i ko m b ina si d a ri wa rna re d , g re e n, d a n b lue .

C

O LO R

V

ALUES

Wa rna d a la m HTML d id e finisika n m e ng g una ka n se b ua h no ta si he ksa d e sim a l (HEX) ya ng b e risi ko m b ina si nila i wa rna me ra h, hija u, d a n b iru (RG B). Nila i te re nd a h untuk se tia p ko m p o ne n nila i wa rna a d a la h 0 (d a la m he ksa d ila mb a ng ka n 00) d a n nila i te rting g i a d a la h 255 (d a la m he ksa d ila mb a ng ka n FF).

Nila i he ksa d e sima l wa rna ini te rd iri a ta s 3 p a sa ng a n d a ri 2 d ig it b ila ng a n ya ng d ia wa li d e ng a n la mb a ng # .

16

J

UTA

W

ARNA

B

ERBEDA

Ko m b ina si d a ri wa rna re d , g re e n, b lue ya ng b e rnila i 0-255, me mb e rika n 16 juta wa rna ya ng b e rb e d a (256 x 256 x 256).

(41)

S

HADES O F

G

RAY

(42)

W

EB

S

AFE

C

O LO RS

?

We b sa fe c o lo rs d isini b e ra rti wa rna -wa rnq a ya ng a m a n d ig una ka n p a d a we b . Be b e ra p a ta hun ya ng la lu ke tika ko m p ute r ha nya d a p a t m e nd ukung 256 wa rna ya ng b e rb e d a , se b ua h d a fta r we b sa fe c o lo rs te rd iri d a ri 216 wa rna d isa ra nka n, se d a ng ka n 40 wa rna d ic a d a ng ka n.

(43)

C

O LO R

N

AMES

147 na ma wa rna te la h d id e finisika n d a la m HTML d a n CSS color spesification. Te rd iri

d a ri 16 na ma wa rna d a sa r d ita m b a h 130 na m a wa rna ta m b a ha n. Ke -16 na ma wa rna d a sa r te rse b ut a d a la h:

a q ua , b la c k, b lue , fuc hsia , g ra y, g re e n, lime , ma ro o n, na vy, o live , p urple , re d , silve r, te a l, white , d a n ye llo w.

(44)

(45)

(46)

(47)

(48)

M

ULTIMEDIA

Multime d ia d a la m we b me lip uti so und , m usic , vid e o , d a n a nim a tio n. Se b a g ia n b e sa r b ro wse r mo d e rn me nd ukung b a nya k fo rm a t multime d ia .

Multime d ia ha d ir d a la m b e rb a g a i fo rm a t b e rb e d a . Multime d ia b e rup a se g a la se sua tu ya ng d a p a t d id e ng a r a ta u d iliha t se p e rti te xt, p ic ture s, music , so und , vid e o s, re c o rd s, films, a nim a tio ns, d a n m a sih b a nya k la g i.

B

RO WSER

S

UPPO RT

Se mula b ro wse r ha nya me nd ukung te ks b a hka n te ks d e ng a n je nis fo nt tung g a l d a n sa tu wa rna . Pe rke mb a ng a n b ro wse r b e rikutnya , b ro wse r me nd ukung c o lo r, fo nt, d a n style te ks, d a n d ukung a n te rha d a p p ic ture s.

Dukung a te rha d a p so und s, a nim a tio ns, d a n vid e o s d ila kuka n d e ng a n c a ra ya ng b e rb e d a o le h b ro wse r ya ng b e rb e d a . Be b e ra p a e le me n d a p a t d ite ra p ka n se c a ra inline , b e b e ra p a ya ng la in me mb utuhka n se b ua h p ro g ra m b a ntu ta m b a ha n (se b ua h p lug in).

F

O RMAT

M

ULTIMEDIA

Ele me n multime d ia se p e rti so und d a n vid e o d isim p a n d a la m file -file me d ia . C a ra p a ling umum d ila kuka n untuk me nc a ri ta hu tip e m e d ia a d a la h me liha t e kste nsio n file nya . Ke tika b ro wse r me liha t e kste nsio n .htm a ta u .html, ma ka d ia a ka n me ng a ng g a p b a hwa file te rse b ut a d a la h se b ua h ha la ma n we b . Fo rma t p ic ture me miliki e kste nsio n se p e rti .g if d a n .jp g .

Ele me n multime d ia jug a m e mp unya i fo rm a t file me re ka se nd iri d e ng a n e kste nsio n ya ng b e rb e d a -b e d a se p e rti .swf, .wmv, .mp 3, d a n .mp4.

F

O RMAT

V

IDEO

Fo rm a t m p4 a d a la h fo rma t te rb a ru untuk vid e o inte rne t. Did ukung o le h Yo uTub e , Fla sh pla ye r, d a n HTML 5.

Format File Penjelasan

AVI .a vi Fo rm a t AVI (Aud io Vid e o Inte rle a ve )

(49)

L. Era wa n, M.Ko m 49 Inte rne t.

WMV .wmv Wind o ws Me d ia Fo rma t ya ng d ike m b a ng ka n o le h Mic ro so ft. Fo rma t ini se b ua h fo rma t ya ng umum d i Inte rne t, te ta p i tid a k b isa d ija la nka n p a d a ko m p ute r no n Wind o ws ta np a ko m po ne n ta m b a ha n ya ng d iinsta ll. Be b e ra p a WMV te ra khir tid a k b isa d ija la nka n sa m a se ka li p a d a ko mp ute r no n Wind o ws ka re na pla ye r tid a k te rse d ia .

MPEG .m p g

.m p e g

Fo rm a t MPEG (Mo ving Pic ture s Exp e rt Gro up ) p a ling p o p ule r d i Inte rne t. Fo rm a t ini linta s pla tfo rm d a n d id ukung o le h se mua we b b ro wse r p o p ule r. Q uic kTim e .m o v Dike m b a ng ka n o le h Ap ple . Fo rma t umum d i

Inte rne t, te ta p i tid a k d a p a t d ija la nka n p a d a ko m p ute r Wind o ws ta np a insta la si ko mpo ne n ta m b a ha n.

Re a lVid e o .rm .ra m

Dike m b a ng ka n o le h Re a l Me d ia . Fo rma t ini me nd ukung vid e o stre a m ing (o nline vid e o , TV Inte rne t) d e ng a n b a nd wid th ya ng re nd a h. Ka re na me mp rio rita ska n b a nd wid th ya ng re nd a h, kua lita s se ring b e rkura ng .

Fla sh .swf

.flv

Fo rm a t Fla sh (Sho c kwa ve ) d ike mb a ng ka n o le h Ma c ro me d ia . Me mb utuhka n ko mpo ne n ta m b a ha n untuk d ima inka n. Te ta p i ko m p o ne n ini sud a h d ta m b a hka n se c a ra d e fa ult p a d a b ro wse r se p e rti Fire fo x d a n IE.

Mp e g -4 .m p4 Mp e g -4 d e ng a n ko m p re si vid e o H.264 me rup a ka n fo rm a t b a ru d i Inte rne t. Yo utub e me re ko me nd a sika n fo rm a t ini. Yo utub e me ne rim a b a nya k fo rm a t, d a n m e ng ko nve rsi se mua nya ke fo rm a t .flv a ta u .m p4 untuk p e nye b a ra nnya . Se m a kin b a nya k p ub lishe r vid e o o nline ya ng b e rp ind a h ke m p4 se b a g a i fo rm a t b e rb a g i d i Inte rne t untuk Fla sh Pla ye r d a n HTML5

F

O RMAT

S

O UND

Format File Penjelasan

MIDI .m id

.m id i

MIDI (Music a l Instrume nt Dig ita l Inte rfa c e ) a d a la h fo rm a t a la t musik e le ktro nik se p e rti synthe size rs d a n PC So und C a rd s. File MIDI tid a k b e risi sua ra te ta p i b e risi instruksi-intruksi m usik d ig ita l ya ng d a p a t d im a inka n se c a ra e le ktro nik, m isa lnya o le h PC So und C a rd .

Ka re na ha nya b e risi instruksi-instruksi m a ka ukura n file MIDI sa ng a t ke c il. MIDI d id ukung o le h b a nya k siste m so ftwa re d e ng a n b e ra g a m pla tfo rm. Se m ua b ro wse r p o p ule r jug a me nd ukung fo rm a t ini.

Re a lAud io .rm .ra m

(50)

L. Era wa n, M.Ko m 50 re nd a h, kua lita snya me nja d i kura ng .

Wa ve .wa v Fo rm a t wa ve (wa ve fo rm ) d ike mb a ng ka n o le h IBM d a n Mic ro so ft. Did ukung o le h se mua ko mp ute r ya ng me nja la nka n Wind o ws d a n se mua b ro wse r p o p ule r, ke c ua li G o o g le C hro me .

WMA .wm a Fo rm a t WMA (Wind o ws Me d ia Aud io ) se b a nd ing kua lita snya d e ng a n fo rma t mp3 d a n ko mpa tib e l d e ng a n se b a g ia n b e sa r pla ye r ke c ua li iPo d . File WMA d a p a t d ikirim ka n se b a g a i a lira n d a ta ko ntinyu ya ng me mb ua tnya me nja d i p ra ktis untuk d ig una ka n d a la m Ra d io Inte rne t a ta u musik o nline .

MP3 .m p3

.m p g a

File mp 3 se sung g uhnya a d a la h b a g ia n sua ra d a ri file MPEG. Fo rm a t MPEG a slinya d ike m b a ng ka n untuk vid e o o le h Moving Pictures Expert Group.

Mp 3 me rup a ka n sa la h sa tu fo rm a t sua ra p a ling p o p ule r untuk musik. Siste m e nc o d ing nya me ng ko mb ina sika n good compression (small files)

d e ng a n kua lita s ting g i. Diha ra p ka n siste m so ftwa re ma sa d e p a n m a sih me nd ukung nya .

P

ENG G UNAAN

B

ERBAG AI

F

O RMAT

WAVE a d a la h fo rm a t sua ra ta k te rko m p re si (uncompressed)ya ng p a ling p o p ule r d i

Inte rne t, d id ukung o le h se mua b ro wse r p o p ule r. C o c o k d ig una ka n untuk me nya jika n sua ra musik a ta u p e rc a ka p a n ke p a d a p e ng unjung p a d a se b ua h we b site .

(51)

E

LEMEN

O

BJECT

HTML

Ke g una a n d a ri e le me n ini untuk me nd ukung HTML Helper (HTML Plug in).

HTML

H

ELPERS

(P

LUG

-I

NS

)

Sua tu helper application a d a la h se b ua h p ro g ra m ya ng d a p a t d ija la nka n o le h

b ro wse r d e ng a n tujua n untuk “me mb a ntu”. Helper applications jug a d ise b ut Plug-Ins.

He lp e r a p plic a tio ns d a p a t d ig una ka n untuk me ma inka n a ud io d a n vid e o se rta ma sih b a nya k la g i. He lp e r a p plic a tio ns d ija la nka n m e ng g una ka n ta g <o b je c t>. Sa la h sa tu ke untung a n me ng g una ka n he lp e r a p plic a tio ns untuk me ma inka n a ud io d a n vid e o a d a la h b a hwa use r d a p a t me ng a tur se nd iri se ting pla ye r se p e rti me ma inka n d a n me ng he ntika n vid e o , me ng a tur vo lume sua ra , d a n se b a g a inya . Be rikut b e b e ra p a c o nto h ko d e HTML d a la m me ma inka n sua tu file a ud io a ta u vid e o .

M

EMAINKAN

F

ILE

W

AVE

A

UDIO

M

ENGGUNAKAN

Q

UICK

T

IME

classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="liar.wav" />

M

EMAINKAN

F

ILE

V

IDEO

MP4

M

ENGGUNAKAN

Q

UICK

T

IME

classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="movie.mp4" />

M

EMAINKAN

F

ILE

V

IDEO

SWF

M

ENGGUNAKAN

F

LASH

classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/

pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"> <param name="SRC" value="bookmark.swf">

(52)

M

EMAINKAN

F

ILE

M

OVIE

WMV

M

ENGGUNAKAN

W

INDOWS

M

EDIA

P

LAYER

type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"

classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> <param name="url" value="3d.wmv">

pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed> </object>

(53)

A

UDIO

HTML

B

ERBAG AI

M

ASALAH DAN

S

O LUSI

File so und a ta u sua ra d a p a t d im a inka n d i HTML d e ng a n b e rb a g a i m e to d e a ta u c a ra . Na mun me ma inka n sua ra d i HTML tid a kla h mud a h. Pe rlu me ng e ta hui b e rb a g a i trik untuk d a p a t me m a inka n file sua ra ya ng d a p a t b e rja la n d ise mua b ro wse r d a n se mua ha rd wa re (PC , Ma c , iPa d , iPho ne ).

M

ENG G UNAKAN

P

LUG IN

Plug in b ro wse r a d a la h se b ua h p ro g ra m ke c il ya ng me m pe rlua s fung si sta nd a r b ro wse r. Plug in d a p a t d ip a ka i untuk b e rb a g a i m a c a m ke g una a n: me m a inka n musik, me na mp ilka n p e ta , m e ng o ntro l inp ut, d a n m a sih b a nya k la g i.

Plug in d a p a t d ita m b a hka n ke ha la ma n HTML me ng g una ka n ta g <o b je c t> a ta u <e m b e d >. Ta g -ta g ini m e nd e finisika n sua tu ko nta ine r untuk b e rb a g a i sum b e r d a ya (no rm a lnya sum b e r d a ya no n HTML) ya ng a ka n d ita m p ilka n o le h b ro wse r a ta u plug in e kste rna l, te rg a ntung je nisnya .

P

ENG G UNAAN

E

LEMEN

<

EMBED

>

Ele me n ini m e nd e finisika n se b ua h ko nta ine r untuk sum b e r d a ya (no n HTML) e kste rna l. Ele me n ini a d a la h sa la h sa tu e le me n d a ri HTML 5, inva lid d i HTML 4, te ta p i d a p a t b e ke rja d i se mua b ro wse r. Po to ng a n ko d e d ib a wa h ini a ka n m e na mp ilka n file MP3 ya ng a d a p a d a se b ua h ha la ma n we b :

Pe rm a sa la ha n ya ng me ng ha m b a t:

• Ta g <e m b e d > inva lid d i HTML 4. Ha la ma n And a tid a k a ka n d iva lid a si se b a g a i HTML 4.

• Bro wse r ya ng b e rb e d a me nd ukung fo rm a t a ud io ya ng b e rb e d a

• Jika b ro wse r tid a k me nd ukung fo rm a t file te rse b ut, file a ud io tid a k a ka n b isa d im a inka n ta np a se b ua h plug in.

• Jika p lug in tid a k d iinsta ll d i ko mp ute r use r, file a ud io tid a k a ka n d im a inka n. • Jika d iko nve rsi ke fo rm a t la in, file a ud io te rse b ut m a sih te ta p tid a k d a p a t

d im a inka n d i se mua b ro wse r.

(54)

P

ENG G UNAAN

E

LEMEN

<

O BJEC T

>

Ele me n ini jug a d a p a t d ig una ka n untuk me ma inka n file a ud io . C o nto h p e ng g una a n:

Pe rm a sa la ha n ya ng mung kin tim b ul:

• Bro wse r ya ng b e rb e d a me nd ukung fo rm a t a ud io ya ng b e rb e d a

• Jika b ro wse r tid a k me nd ukung fo rm a t file te rse b ut, file a ud io tid a k a ka n b isa d im a inka n ta np a se b ua h plug in.

• Jika p lug in tid a k d iinsta ll d i ko mp ute r use r, file a ud io tid a k a ka n d im a inka n. • Jika d iko nve rsi ke fo rm a t la in, file a ud io te rse b ut m a sih te ta p tid a k d a p a t

d im a inka n d i se mua b ro wse r.

P

ENG G UNAAN

E

LEMEN

<

AUDIO

>

HTML

5

Ele me n ini me rup a ka n e le me n HTML 5 d a n inva lid d i HTML 4, te ta p i d a p a t b e ke rja d i se mua b ro wse r. C o nto h p e ng g una a n:

<source src=”horse.mp3” type=”audio/mp3” /> <source src=”horse.ogg” type=”audio/ogg” /> Browser Anda tidak mendukug format audio ini </audio>

C o nto h d ia ta s a d a la h me ng g una ka n file mp 3 ya ng d a p a t b e rja la n d i b ro wse r IE, C hro m e , d a n Sa fa ri. Ag a r d a p a t b e rja la n jug a d i b ro wse r Fire fo x d a n O p e ra , se b ua h file b e rtip e o g g d ita m b a hka n. Jika ko d e ini g a g a l a ka n m e na m p ilka n p e sa n ke sa la ha n ya ng sud a h d id e finisika n.

Pe rm a sa la ha n:

• Ta g <a ud io > inva lid d i HTML 4. Ha la ma n we b And a tid a k a ka n d iva lid a si se b a g a i HTML 4.

• File a ud io ha rus d iko nve rsi ke b e rb a g a i m a c a m fo rma t. • Ele me n <a ud io > tid a k b e ke rja d i b ro wse r la ma .

S

O LUSI

T

ERBAIK

So lusi p a ling b a ik a d a la h se p e rti c o nto h ko d e d ib a wa h ini: <audio controls=”controls” height=”100” width=”100”> <source src=”horse.mp3” type=”audio/mp3” />

(55)

L. Era wa n, M.Ko m 55 </audio>

C o nto h d ia ta s m e ng g una ka n 2 fo rma t b e rb e d a . Ele me n <a ud io > HTML 5 b e rup a ya untuk m e ma inka n a ud io se b a g a i m p3 a ta u o g g . Jika ini g a g a l, ma ka e le me n <e m b e d > a ka n d ic o b a d ig una ka n.

Pe rm a sa la ha n:

• File a ud io ya ng d ig una ka n ha rus d iko nve rsi ke b e b e ra p a je nis fo rm a t • Ele me n <a ud io > tid a k d iva lid a si se b a g a i e le me n HTML 4 d a n XHTML • Ele me n <e m b e d > tid a k d iva lid a si se b a g a i e le me n HTML 4 d a n XHTML • Ele me n <e m b e d > tid a k b isa me na m p ilka n p e sa n ke sa la ha n.

C

ARA

T

ERMUDAH

U

NTUK

M

ENAMBAHKAN

A

UDIO

K

E

W

EBSITE

C a ra te rm ud a