BAHASA HTML - UDiNus Repository modul4teori HTML
BAHASA HTML
Digitally signed
by L. Erawan
L.
DN: cn=L.
Erawan
Erawan Date: 2014.09.26
08:45:56 +07'00'
Program Studi Sistem
Informasi
Fakultas Ilmu
Komputer
Universitas Dian
Nuswantoro
Semarang
Nopember 2013
L. Era w a 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 m e m b ua t struktur
ko nte n d a ri se b ua h ha la m a n we b . Pe nje la sa n
m e lip uti struktur d o kum e n HTML, e le m e 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.
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
D AFTAR ISI
HTML..................................................................................................................................... 6
(Hyp e rTe xt Ma rkup La ng ua g e ) ...................................................................................... 6
Ele m e 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 m e n HTML....................................................................................................................... 9
Ele m e n HTML Be rsa ra ng .................................................................................................. 9
Tip s .................................................................................................................................... 9
Ta g Pe nutup ................................................................................................................. 9
Ele m e 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 m p 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 p ute 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
Im a g e HTML....................................................................................................................... 22
L. Era wa n, M.Ko m
2
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
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 ....................................................................................................................... 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 m e n Blo c k HTML........................................................................................................... 29
Ele m e n ................................................................................................................ 29
Ele m e n .............................................................................................................. 29
La yo ut HTML...................................................................................................................... 30
La yo ut We b site .............................................................................................................. 30
La yo ut De ng a n Ele m e n ...................................................................................... 30
La yo ut Me ng g una ka n Ele m e n Ta b le .......................................................................... 31
Fo rm HTML ......................................................................................................................... 33
Ele m e 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 m e ................................................................................................................. 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
We b Sa fe C o lo rs? .......................................................................................................... 42
L. Era wa n, M.Ko m
3
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
C o lo r Na m e s .................................................................................................................. 43
Multim e d ia ........................................................................................................................ 48
Bro wse r Sup p o rt ............................................................................................................. 48
Fo rm a t Multim e 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 m e n O b je c t HTML........................................................................................................ 51
HTML He lp e rs (Plug -Ins) .................................................................................................. 51
Me m a inka n File Wa ve Aud io Me ng g una ka n Q uic kTim e ....................................... 51
Me m a inka n File Vid e o MP4 Me ng g una ka n Q uic kTim e .......................................... 51
Me m a inka n File Vid e o SWF Me ng g una ka n Fla sh.................................................... 51
Me m a 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 m e n .................................................................................. 53
Pe ng g una a n Ele m e n .................................................................................... 54
Pe ng g una a n Ele m e n 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 ...................................................................................... 57
Me ng g una ka n Ta g ....................................................................................... 57
Me ng g una ka n Ta g ......................................................................................... 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 m e n He a d HTML........................................................................................................... 60
Ele m e n title ..................................................................................................................... 60
L. Era wa n, M.Ko m
4
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
Ele m e n b a se .................................................................................................................. 60
Ele m e n Link .................................................................................................................... 61
Ele m e n style ................................................................................................................... 61
Ele m e n m e ta ................................................................................................................. 61
Ke ywo rd s Untuk Se a rc h Eng ine .................................................................................... 61
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
Re fe re nsi URL Enc o d ing ................................................................................................. 75
L. Era wa n, M.Ko m
5
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
HTML
(HYPERTEXT MARKUP LANGUAGE)
Te ntu And a te la h se ring m e liha t d a n m e 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 m a n te rse b ut
m e na m p 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 m a n-ha la m a 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 m e rup a ka n b a ha sa ya ng
d ig una ka n untuk m e m b ua t ha la m a n we b . Ba ha sa HTML b e risi se kum p ula n sim b o lsim 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 m e 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 sim b o l kurung
siku, c o nto h
No rm a lnya ta g HTML b e rp a sa ng a n se p e rti d a n
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 p e na m b a ha n sim b o l g a ris m iring
( 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 m b 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 :
My First Heading
My first paragraph.
Pe nje la sa n d o kum e n HTML d ia ta s:
•
Ba ris p e rta m a , DO C TYPE, m e ne ta p ka n je nis d o kum e n. Do kum e n HTML te rd iri
d a ri b e b e ra p a je nis, m a ka p e rlu d ite ntuka n je nis d o kum e n ya ng d ig una ka n.
L. Era wa n, M.Ko m
6
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
•
•
•
•
Ta g d a n m e nya ta ka n b a hwa te ks d id a la m nya a d a la h ko d e ko d e HTML
Te ks d ia nta ra ta g d a n m e nya ta ka n ko nte n ha la m a n ya ng
ta m p a k d i b ro wse r.
Te ks d ia nta ra ta g d a n 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 d a n d ita m p ilka n se b a g a i se b ua h p a ra g ra p ya ng
m e m p unya i sp a si le b ih le b a r d a ri se b ua h b a ris.
ELEMEN HTML
Ta g HTML d a n e le m e n HTML se ring d ig una ka n untuk m e nya ta ka n ha l ya ng sa m a .
Te ta p i d isini te rd a p a t p e rb e d a a n m e nd a sa r d ia nta ra ke d ua nya , ya itu e le m e n HTML
a d a la h se m ua 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 m e n HTML a d a la h:
konten
C o nto h sua tu e le m e n HTML:
Ini adalah sebuah paragrap
DO KUMEN HTML ADALAH HALAMAN WEB
Do kum e n HTML sa m a d e ng a n ha la m a n we b . Se b ua h d o kum e n HTML m e nya ta ka n
se b ua h ha la m a n we b . Se hing g a sua tu d o kum e 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).
BRO WSER WEB
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 m b a c a d o kum e n-d o kum e n HTML d a n m e na m p ilka nnya se b a g a i
ha la m a n-ha la m a n we b . Bro wse r we b ini tid a k m e na m p ilka n ta g -ta g HTML te ta p i
m e 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.
STRUKTUR DO KUMEN HTML
Pe nulisa n sua tu d o kum e n HTML m e ng ikuti struktur te rte ntu ya ng sud a h b a ku, ya itu:
Ini sebuah heading
L. Era wa n, M.Ko m
7
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
Ini sebuah paragrap
Struktur d ia ta s te rd iri d a ri se b ua h e le m e n HTML, se b ua h e le m e n BODY d a n
ko nte nnya ya ng d isini b e risi e le m e n H1 d a n P. Da la m se b ua h d o kum e n HTML ha nya
a d a sa tu e le m e n HTML d a n sa tu e le m e n BO DY.
L. Era wa n, M.Ko m
8
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
ELEMEN HTML
Ele m e n-e le m e n HTML d ituliska n d a la m sua tu d o kum e n HTML. Ele m e 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 m e 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 m e 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 m e n tid a k m e m iliki ko nte n a lia s e le m e n ko so ng . Ele m e n ini tid a k
m e m iliki 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 m e n ko so ng d itutup p a d a ta g a wa lnya . Ka re na tid a k m e m iliki 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
m e na m b a hka n sim b o l blackslash se te la h na m a ta g , c o nto h .
Se b a g ia n b e sa r e le m e n HTML m e m iliki a trib ut.
ELEMEN HTML BERSARANG
Se b a g ia n b e sa r e le m e n HTML d a p a t d isa ra ng ka n a ta u m e m iliki e le m e n HTML la in
d id a la m nya . Se b e na rnya , d o kum e n HTML b e risi e le m e n-e le m e 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 kum e n HTML:
Ini adalah teks yang diatur untuk tampil sebagai paragrap
Do kum e n HTML d ia ta s te rd iri d a ri e le m e n-e le m e n HTML ya ng sa ling b e rsa ra ng .
Ele m e n p a ra g ra p te rle ta k d id a la m e le m e n BO DY. Ele m e n BO DY se nd iri b e ra d a
d id a la m e le m e n HTML. Ja d i, e le m e n HTML b e risi e le m e n BO DY ya ng b e risi e le m e n
p a ra g ra p .
Ele m e n HTML
e le m e n BO DY
e le m e n p a ra g ra p
TIPS
TAG PENUTUP
Bila kita lup a m e nutup sua tu e le m e n HTML m ung kin se b a g ia n b e sa r b ro wse r m a sih
a ka n m e na m p ilka n d e ng a n b a ik, se p e rti e le m e n p a ra g ra p d ib a wa h ini:
L. Era wa n, M.Ko m
9
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
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 m e 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 m e n HTML ya ng a ka n m e m b 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 .
ELEMEN KOSONG ATAU TAG TUNGGAL
Ele m e n HTML ya ng ko so ng a ta u tid a k m e m p unya i p a sa ng a n se p e rti ta g
se b a iknya d itutup d e ng a n m e na m b a hka n backslash d i b e la ka ng na m a ta g se p e rti
b e rikut .
GUNAKAN LOWERCASE UNTUK MENULIS TAG HTML
Ta g -ta g HTML b e rsifa t case-insensitive ya ng b e ra rti sa m a d e ng a n . 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) m e re ko m e nd a sika n ha l ini p a d a HTML 4. Da la m XHTML
p e nulisa n ta g -ta g HTML jug a m e m e rluka n p e ng g una a n huruf ke c il d a la m
p e nulisa nnya .
L. Era wa n, M.Ko m
10
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
ATRIBUT-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 m e n HTML.
Pe nulisa n a trib ut ini p a d a ta g a w a l sua tu e le m e n HTML. Atrib ut d itulis b e rsa m a
nila inya m e ng g una ka n sim b 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 m a up un tung g a l. C o nto h:
Ini sebuah link
Ele m e 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 m e ne ta p ka n
a la m a t link. Pisa hka n sa tu sp a si a nta ra na m a 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 m e 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)
m e 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
m e 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 m e n HTML:
Atribut
c la ss
id
style
title
NIlai
na m a ke la s
na m a id
d e finisi style
te ks to o ltip
L. Era wa n, M.Ko m
Penjelasan
m e ne ntuka n na m a ke la s untuk sua tu e le m e n
m e ne ntuka n id unik untuk sua tu e le m e n
m e ne ntuka n style inline sua tu e le m e n
m e m b ua t info rm a si ta m b a ha n te nta ng e le me n
ya ng a ka n ta m p il d a la m b e ntuk to o ltip s
11
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
HEADING
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
m e ng ind e ks struktur d a n ko nte n ha la m a n we b m e ng g una ka n he a d ing . Ja ng a n
m e ng g una ka n he a d ing untuk ke p e rlua n m e m b ua t huruf b e sa r a ta u te b a l.
He a d ing d ib ua t m e ng g una ka n ta g sa m p a i d e ng a n . Se m a kin b e sa r
a ng ka d ib e la ka ng huruf h se m a kin ke c il ukura n he a d ing . He a d ing jug a a ka n
m e m b 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 d a p a t d ig una ka n se b a g a i jud ul
uta m a , ke m ud ia n untuk sub he a d ing , untuk sub sub he a d ing , d a n
se te rusnya . C o nto h he a d ing :
Ini heading terbesar
Ini heading terbesar setelah h1
Ini heading terbesar ketiga
LINES HTML
Untuk m e m b ua t g a ris ho riso nta l HTML m e nye d ia ka n ta g . Ta g ini d a p a t
d ig una ka n m isa lnya untuk m e m isa hka n ko nte n. C o nto h:
Elemen garis ini berupa tag tunggal tanpa pasangan
Penulisan tag diakhiri dengan backslash dibelakang nama tag
Elemen garis ini cukup bermanfaat untuk memperjelas konten
KO 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 m b 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 m e 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 m nya . 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:
Pe rha tika n b a hw a se te la h ta nd a kurung siku a wa l d iikuti d e ng a n ta nd a se ru
se d a ng ka n kurung siku a khir tid a k.
L. Era wa n, M.Ko m
12
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
M ENAMPILKAN KO DE SUMBER ( SOURCE CODE)
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 m b ua t ta m p ila n ha la m a n se p e rti itu? Tid a k
p e rlu kua tir, And a d a p a t m e 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
se je nisnya te rg a ntung b ro wse r ya ng d ig una ka n. Tind a ka n ini a ka n m e m b uka
se b ua h je nd e la ya ng b e risi ko d e HTML ha la ma n te rse b ut.
L. Era wa n, M.Ko m
13
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
PARAGRAP 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 m e m b ua t tulisa n
m e nja d i te rstruktur, je la s, se rta m ud a h d ip a ha m i isinya . De m ikia 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 m e 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 m e nja d i je la s d a p a t d ip a ha m i
d e ng a n m ud a h. C o nto h p e ng g una a n e le m e n ini:
Paragrap yang baik biasanya mengandung satu pokok pikiran saja
sehingga mudah dipahami
Pokok pikiran paragrap sebaiknya juga diletakkan diawal paragrap
sehingga pembaca web dapat terbantu membaca isi paragrap dengan
cepat
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 m e 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 m e nye b a b ka n fo rm a t
p a ra g ra p m e m iliki 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 hw a 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 m e 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 m e ning g a lka n ta g
p e nutup .
LINE BREAK HTML
Line b re a k ya ng d im a ksud a d a la h e le m e n ko so ng ya itu ta g . Ele m e 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 m ula 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 lum nya ). Ka re na e le m e n ini m e 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 m e na m b a hka n backslash se te la h na m a ta g .
C o nto h:
Ini sebuah paragrap.
Baris ini memiliki jarak baris lebih lebar dengan paragrap diatas tetapi tidak
dengan baris berikutnya.
Baris ini memiliki jarak baris tidak selebar sebelumnya karena
menggunakan line break untuk berpindah baris.
L. Era wa n, M.Ko m
14
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
TIPS TENTANG SPASI DAN PINDAH BARIS
Da la m m e ne rje m a hka n sua tu d o kum e n HTML, b ro wse r ha nya a ka n m e 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 m b 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 m e ne ka n e nte r untuk b e rp ind a h b a ris p a d a sa a t m e nulis
sua tu na ska h d a la m d o kum e n HTML. Pe rp ind a ha n b a ris d e ng a n m e 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 m p 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 m e njum p a i ta g a ta u e le m e 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.
L. Era wa n, M.Ko m
15
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
TAG - TAG FO RMATTING HTML
HTML m e ng g una ka n ta g d a n untuk me m fo rm a t te ks m e nja d i b e rhuruf m iring
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.
TAG FO RMATTING
Ke lo m p o k ta g d ib a wa h ini um um d ig una ka n.
Tag
Penjelasan
m e m b ua t huruf te b a l
m e m b ua t huruf b e sa r
m e m b ua t te ks ya ng d ite ka nka n se c a ra ita lic
m e m b ua t huruf m iring
m e m b ua t huruf ke c il
m e m b ua t p e ne ka na n te ks d e ng a n p e ne b a la n huruf
m e m b ua t sub sc rip t te ks
m e m b ua t sup e rsc rip t te ks
m e m b ua t sisip a n te ks
m e m b ua t p e ng ha p usa n te ks
TAG “ KELUARAN KO MPUTER”
Ke lo m p o k ta g d ib a wa h ini m e nye d ia ka n fo rm a t untuk m e 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 m e 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 m p ute r, inp ut d a ri
ke yb o a rd , ko d e -ko d e ko m p 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 m e ng g una ka n ke lo m p o k ta g ini.
Tag
L. Era wa n, M.Ko m
Penjelasan
fo rm a t te ks ko d e -ko d e ko m p ute r
fo rm a t te ks inp uta n ke yb o a rd
fo rm a t c o nto h ko d e ko m p ute r
fo rm a t ta m p ila n te ks m e sin ke tik
fo rm a t ta m p ila n va ria b e l
fo rm a t te ks p re fo rm a tte d
16
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
TAG DEFINISI DAN KUTIPAN
Tag
L. Era wa n, M.Ko m
Penjelasan
fo rm a t sing ka ta n
fo rm a t a kro nim
fo rm a t info rm a si ko nta k p e m ilik d o kum e n
m e ne ntuka n a ra h a lira n te ks
fo rm a t kutip a n p a nja ng
fo rm a t kutip a n p e nd e k
fo rm a t kutip a n
fo rm a t d e finisi istila h
17
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
EDITOR HTML
File HTML b e rje nis file te xt. Ini b e ra rti untuk m e m b ua t file HTML (a ta u d o kum e n HTML)
d a p a t m e 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 jum la hnya b a nya k. Be b e ra p a so ftw a 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 m e m p e la ja ri b a ha sa HTML ini le b ih b a ik m e 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 m e 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 m a nusia a lia s b uka n ko d e -ko d e m e sin se p e rti file e xe a ta u c o m .
Untuk m e m b ua t d o kum e 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
2. Tulis ko d e HTML And a p a d a la ya r no te p a d
L. Era wa n, M.Ko m
18
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
3. Sim p a n file d e ng a n m e nu Save as p a d a m e nu File. Ke tika m e nyim p a n file , And a
d a p a t m e 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 m ud 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 m e nu
File - Open p a d a b ro wse r. Ata u b isa jug a d e ng a n m e la kuka n klik d ua ka li p a d a
na m a file HTML ya ng a ka n d ib uka . Se ha rusnya ha silnya se p e rti d ib a wa h ini:
L. Era wa n, M.Ko m
19
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
LINKS 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 m a n we b d i
Inte rne t. Link d ig una ka n untuk m e lo m p 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 m e ng hub ung ka n ha la m a n we b sa tu sa m a la in.
HYPERLINK (LINK) HTML
Link jug a d ise b ut hyp e rlink, a d a la h sua tu ka ta , ke lo m p 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 m p 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
m e 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 .
Pe ng g una a n ta g a nc ho r untuk m e m b ua t link te rd a p a t 2 c a ra :
1. Untuk m e m b ua t link ke d o kum e n HTML ya ng la in d e ng a n m e ng g una ka n
a trib ut href.
2. Untuk m e m b ua t bookmark d a la m d o kum e n HTML d e ng a n m e ng g una ka n
a trib ut name.
Sinta k d a ri link HTML:
Teks link
a trib ut href m e ne ntuka n tujua n d a ri link, c o nto h:
Organisasi dunia W3
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 m a ka use r a ka n d ib a wa m e nuju ha la m a n ho m e p a g e situs
W3.
A TRIBUT TARGET
Atrib ut ini d ig una ka n untuk m e ne ntuka n a ka n d ib uka d im a na ha la m a 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:
Organisasi dunia W3
L. Era wa n, M.Ko m
20
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
A TRIBUT NAME
Atrib ut ini d a p a t d ig una ka n untuk m e ne ntuka n na m a se b ua h a nc ho r. Atrib ut ya ng
d ig una ka n untuk m e m b ua t b o o km a rk d id a la m sua tu d o kum e n HTML. Bo o km a rk
d isini b e ra rti sua tu p e na nd a ya ng m e 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 m e 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 kum e n HTML (link.html), d ib a g ia n te rte ntu d o kum e 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:
Bab 8: Hyperlink
Da la m d o kum e n ya ng sa m a b ua tla h se b ua h link m e nuju ke b o o km a rk
te rse b ut:
Menuju bab 8
Ata u And a b isa m e m b ua t link d a ri d o kum e n la in m e nuju ke b o o km a rk
te rse b ut:
TIPS
•
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 m e 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 m b ua t 2 re q ue st ke se rve r.
Pe rta m a , se rve r a ka n m e na m b a hka n b a c ksla sh d ia khir a la m a t. Ke d ua , se rve r
m e m b 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 m ikia n a ka n m e na m b 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
•
Pe m b e ria n na m a a nc ho r se ring d ig una ka n untuk m e m b ua t d a fta r isi b a g i
sua tu d o kum e n HTML ya ng b e sa r. Se tia p b a b d a la m d o kum e n d ina m a i
d e ng a n a nc ho r (d ib o o km a rk), d a n link m e nuju ke se tia p b a b d ile ta kka n
d ib a g ia n a ta s d o kum e n.
L. Era wa n, M.Ko m
21
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
IMAGE HTML
Da la m HTML, g a m b a r d id e finisika n m e ng g una ka n ta g 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 m p unya i p a sa ng a n ta g . Untuk
m e na m p ilka n g a m b a r p a d a ha la m a 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 m e ne ntuka n te ks ya ng a ka n m e 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 m b a r d ita m p ilka n b isa
d ise b a b ka n o le h la m b a tnya ko ne ksi inte rne t, error p a d a a trib ut src, a ta u jika use r
m e ng g una ka n screen reader.
Untuk m e na m p ilka n g a m b 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 kum e n HTML ya ng m e na m p ilka nnya , m a ka nila i a trib ut src se b a g a i
b e rikut:
Bila g a m b 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 kum e n HTML ya ng
m e na m p ilka nnya , m a ka a la m a t path ha rus d itulis p ula , m isa lnya :
Ele m e n im a g e d ia ta s m e na m p ilka n g a m b a r ya ng te rle ta k d i se rve r ya ng sa m a
d e ng a n d o kum e 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:
alt=”gambar
Ala t a b so lut m e rup a ka n a la m a t le ng ka p b e se rta je nis p ro to ko lnya (http ).
A TUR TING G I DAN LEBAR G AMBAR DENG AN HEIGHT DAN WIDTH
Atrib ut height d a n width d ig una ka n untuk m e ng a tur ting g i d a n le b a r g a m b a r.
Sa tua n nila i a trib ut a d a la h p ikse l. C o nto h:
L. Era wa n, M.Ko m
alt=”gambar
kreasi
digital”
width=”230”
22
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
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 m e 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 m b a r sa a t ha la m a n d im ua 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
m e 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 m ula i d im ua t (te ks a ka n d im ua t te rle b ih d a hulu ke ha la m a n se b e lum
g a m b a r).
Da la m m e ng g una ka n g a m b a r p a d a sua tu ha la m a n we b se b a iknya tid a k
b e rle b iha n se b a b p e m ua ta n g a m b a r m e m b utuhka n wa ktu. Se m a kin b a nya k
g a m b a r ya ng d ig una ka n a ka n se m a kin la m a p ro se s p e m ua ta n ha la m a n ke
b ro wse r.
L. Era wa n, M.Ko m
23
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
TABLE HTML
Ta b e l d ib ua t d e ng a n m e ng g una ka n ta g . 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 m e ng g una ka n ta g , 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 , sing ka ta n
d a ri table data ya ng m e na m p 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 d a p a t b e risi text, link, image, list, form, table la innya , d a n
la in-la in.
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
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 2, c e ll 1
ro w 1, c e ll 2
ro w 2, c e ll 2
A TRIBUT BO RDER
Jika tid a k d ite ntuka n m a ka ta b e l a ka n d ita m p ilka n d e ng a n ta np a b o rd e r. Untuk
m e na m p ilka n b o rd e r ta b e l m e ng g una ka n a trib ut b o rd e r:
row 1, cell 1
row 1, cell 2
HEADER TABEL
Ta b e l se ring ka li m e m iliki he a d e r. He a d e r ta b e l a d a la h b a ris p e rta m a ta b e l ya ng
b e rfung si se b a g a i jud ul-jud ul ko lo m . He a d e r ta b e l d a p a t d ib ua t d e ng a n
L. Era wa n, M.Ko m
24
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
m e ng g una ka n ta g . Bro wse r-b ro wse r ya ng sud a h te rke na l m e na m p ilka n te ks
d id a la m e le m e n d e ng a n te b a l d a n d ite ng a hka n.
Header 1
Header 2
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
Ta m p ila n d i b ro wse r d a ri ko d e HTML d ia ta s:
Header 1
ro w 1, c e ll 1
ro w 2, c e ll 1
Header 2
ro w 1, c e ll 2
ro w 2, c e ll 2
TAG
Ta g ini b e rfung si untuk m e 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 m e 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 m e n a ta u e le m e n
. Liha t c o nto h:
ISBN
Title
Price
3476896
My first HTML
$53
L. Era wa n, M.Ko m
25
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
5869207
My first CSS
$49
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 :
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 m e n
c ha r
character
Pe ra ta a n ko nte n d a ri sua tu e le m e n
m e 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 jum la 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 m e n
va lig n
to p
m id 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 m e n
wid th
%
pixels
relative_length
Me ne ntuka n le b a r d a ri se b ua h e le m e n
L. Era wa n, M.Ko m
26
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
LIST HTML
Da la m HTML, sua tu list a d a la h ta m p ila n d a ri se ke lo m p 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:
UNO RDERED LIST
List je nis ini d ib ua t m e ng g una ka n ta g , sing ka ta n d a ri unordered list. Ma sing m a sing ite m d a ri d a fta r d ib ua t m e ng g una ka n ta g :
Kopi
Susu
Teh
Pa d a b ro wse r a ka n d ita m p ilka n se m a 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 LIST
Dib ua t m e ng g una ka n ta g , sing ka ta n d a ri ordered list . Ma sing -m a sing ite m d a ri
d a fta r d ib ua t m e ng g una ka n ta g :
Kopi
Susu
Es Jus
Pa d a b ro wse r ta m p a k se p e rti ini:
1. Ko p i
2. Susu
3. Es Jus
L. Era wa n, M.Ko m
27
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
DEFINITIO N LIST
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 m b ua t list ini d ig una ka n ta g . Ta g ini sa tu ra ng ka ia n d e ng a n ta g ,
sing ka ta n d a ri data title, d a n , sing ka ta n d a ri data description.
Coffee
- black hot drink
Milk
- white cold drink
Ta m p ila n d a ri ko d e d ia ta s:
Coffee
- black hot drink
Milk
- white cold drink
Did a la m ite m d a ri sua tu list d a p a t d iisi d e ng a n te ks, im a g e , link, list ya ng la in, d a n
o b ye k we b la innya .
L. Era wa n, M.Ko m
28
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
ELEMEN BLOCK HTML
Ele m e n-e le m e n d id a la m HTML d ika te g o rika n se b a g a i e le m e n block level d a n
e le m e n inline. Ele m e n-e le m e 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 m nya :
, , ,
se d a ng ka n ya ng te rg o lo ng e le m e 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:
, , ,
ELEMEN
Ele m e n te rg o lo ng se b a g a i e le m e n block level. Ele m e 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 m e ng e lo m p o kka n e le m e n HTML la innya .
Na m a e le m e n ini tid a k m e m p unya i a rti khusus, se la in b a hwa e le m e n a d a la h
se b ua h e le m e 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 m e n.
Sa a t d ig una ka n b e rsa m a C SS, e le m e 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 um um la innya d a ri e le m e n ini a d a la h untuk m e ng a tur layout d a ri
se b ua h d o kum e n HTML, m e ng g a ntika n c a ra
la m a
p e ng a tura n la yo ut
m e 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 m e 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 m e n . Me ng a p a ? Ka re na fung si
se b e na rnya d a ri e le m e n ta b e l a d a la h untuk m e na m p ilka n d a ta d a la m b e ntuk
tabular.
ELEMEN
Digitally signed
by L. Erawan
L.
DN: cn=L.
Erawan
Erawan Date: 2014.09.26
08:45:56 +07'00'
Program Studi Sistem
Informasi
Fakultas Ilmu
Komputer
Universitas Dian
Nuswantoro
Semarang
Nopember 2013
L. Era w a 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 m e m b ua t struktur
ko nte n d a ri se b ua h ha la m a n we b . Pe nje la sa n
m e lip uti struktur d o kum e n HTML, e le m e 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.
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
D AFTAR ISI
HTML..................................................................................................................................... 6
(Hyp e rTe xt Ma rkup La ng ua g e ) ...................................................................................... 6
Ele m e 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 m e n HTML....................................................................................................................... 9
Ele m e n HTML Be rsa ra ng .................................................................................................. 9
Tip s .................................................................................................................................... 9
Ta g Pe nutup ................................................................................................................. 9
Ele m e 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 m p 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 p ute 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
Im a g e HTML....................................................................................................................... 22
L. Era wa n, M.Ko m
2
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
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 ....................................................................................................................... 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 m e n Blo c k HTML........................................................................................................... 29
Ele m e n ................................................................................................................ 29
Ele m e n .............................................................................................................. 29
La yo ut HTML...................................................................................................................... 30
La yo ut We b site .............................................................................................................. 30
La yo ut De ng a n Ele m e n ...................................................................................... 30
La yo ut Me ng g una ka n Ele m e n Ta b le .......................................................................... 31
Fo rm HTML ......................................................................................................................... 33
Ele m e 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 m e ................................................................................................................. 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
We b Sa fe C o lo rs? .......................................................................................................... 42
L. Era wa n, M.Ko m
3
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
C o lo r Na m e s .................................................................................................................. 43
Multim e d ia ........................................................................................................................ 48
Bro wse r Sup p o rt ............................................................................................................. 48
Fo rm a t Multim e 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 m e n O b je c t HTML........................................................................................................ 51
HTML He lp e rs (Plug -Ins) .................................................................................................. 51
Me m a inka n File Wa ve Aud io Me ng g una ka n Q uic kTim e ....................................... 51
Me m a inka n File Vid e o MP4 Me ng g una ka n Q uic kTim e .......................................... 51
Me m a inka n File Vid e o SWF Me ng g una ka n Fla sh.................................................... 51
Me m a 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 m e n .................................................................................. 53
Pe ng g una a n Ele m e n .................................................................................... 54
Pe ng g una a n Ele m e n 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 ...................................................................................... 57
Me ng g una ka n Ta g ....................................................................................... 57
Me ng g una ka n Ta g ......................................................................................... 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 m e n He a d HTML........................................................................................................... 60
Ele m e n title ..................................................................................................................... 60
L. Era wa n, M.Ko m
4
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
Ele m e n b a se .................................................................................................................. 60
Ele m e n Link .................................................................................................................... 61
Ele m e n style ................................................................................................................... 61
Ele m e n m e ta ................................................................................................................. 61
Ke ywo rd s Untuk Se a rc h Eng ine .................................................................................... 61
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
Re fe re nsi URL Enc o d ing ................................................................................................. 75
L. Era wa n, M.Ko m
5
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
HTML
(HYPERTEXT MARKUP LANGUAGE)
Te ntu And a te la h se ring m e liha t d a n m e 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 m a n te rse b ut
m e na m p 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 m a n-ha la m a 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 m e rup a ka n b a ha sa ya ng
d ig una ka n untuk m e m b ua t ha la m a n we b . Ba ha sa HTML b e risi se kum p ula n sim b o lsim 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 m e 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 sim b o l kurung
siku, c o nto h
No rm a lnya ta g HTML b e rp a sa ng a n se p e rti d a n
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 p e na m b a ha n sim b o l g a ris m iring
( 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 m b 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 :
My First Heading
My first paragraph.
Pe nje la sa n d o kum e n HTML d ia ta s:
•
Ba ris p e rta m a , DO C TYPE, m e ne ta p ka n je nis d o kum e n. Do kum e n HTML te rd iri
d a ri b e b e ra p a je nis, m a ka p e rlu d ite ntuka n je nis d o kum e n ya ng d ig una ka n.
L. Era wa n, M.Ko m
6
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
•
•
•
•
Ta g d a n m e nya ta ka n b a hwa te ks d id a la m nya a d a la h ko d e ko d e HTML
Te ks d ia nta ra ta g d a n m e nya ta ka n ko nte n ha la m a n ya ng
ta m p a k d i b ro wse r.
Te ks d ia nta ra ta g d a n 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 d a n d ita m p ilka n se b a g a i se b ua h p a ra g ra p ya ng
m e m p unya i sp a si le b ih le b a r d a ri se b ua h b a ris.
ELEMEN HTML
Ta g HTML d a n e le m e n HTML se ring d ig una ka n untuk m e nya ta ka n ha l ya ng sa m a .
Te ta p i d isini te rd a p a t p e rb e d a a n m e nd a sa r d ia nta ra ke d ua nya , ya itu e le m e n HTML
a d a la h se m ua 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 m e n HTML a d a la h:
konten
C o nto h sua tu e le m e n HTML:
Ini adalah sebuah paragrap
DO KUMEN HTML ADALAH HALAMAN WEB
Do kum e n HTML sa m a d e ng a n ha la m a n we b . Se b ua h d o kum e n HTML m e nya ta ka n
se b ua h ha la m a n we b . Se hing g a sua tu d o kum e 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).
BRO WSER WEB
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 m b a c a d o kum e n-d o kum e n HTML d a n m e na m p ilka nnya se b a g a i
ha la m a n-ha la m a n we b . Bro wse r we b ini tid a k m e na m p ilka n ta g -ta g HTML te ta p i
m e 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.
STRUKTUR DO KUMEN HTML
Pe nulisa n sua tu d o kum e n HTML m e ng ikuti struktur te rte ntu ya ng sud a h b a ku, ya itu:
Ini sebuah heading
L. Era wa n, M.Ko m
7
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
Ini sebuah paragrap
Struktur d ia ta s te rd iri d a ri se b ua h e le m e n HTML, se b ua h e le m e n BODY d a n
ko nte nnya ya ng d isini b e risi e le m e n H1 d a n P. Da la m se b ua h d o kum e n HTML ha nya
a d a sa tu e le m e n HTML d a n sa tu e le m e n BO DY.
L. Era wa n, M.Ko m
8
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
ELEMEN HTML
Ele m e n-e le m e n HTML d ituliska n d a la m sua tu d o kum e n HTML. Ele m e 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 m e 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 m e 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 m e n tid a k m e m iliki ko nte n a lia s e le m e n ko so ng . Ele m e n ini tid a k
m e m iliki 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 m e n ko so ng d itutup p a d a ta g a wa lnya . Ka re na tid a k m e m iliki 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
m e na m b a hka n sim b o l blackslash se te la h na m a ta g , c o nto h .
Se b a g ia n b e sa r e le m e n HTML m e m iliki a trib ut.
ELEMEN HTML BERSARANG
Se b a g ia n b e sa r e le m e n HTML d a p a t d isa ra ng ka n a ta u m e m iliki e le m e n HTML la in
d id a la m nya . Se b e na rnya , d o kum e n HTML b e risi e le m e n-e le m e 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 kum e n HTML:
Ini adalah teks yang diatur untuk tampil sebagai paragrap
Do kum e n HTML d ia ta s te rd iri d a ri e le m e n-e le m e n HTML ya ng sa ling b e rsa ra ng .
Ele m e n p a ra g ra p te rle ta k d id a la m e le m e n BO DY. Ele m e n BO DY se nd iri b e ra d a
d id a la m e le m e n HTML. Ja d i, e le m e n HTML b e risi e le m e n BO DY ya ng b e risi e le m e n
p a ra g ra p .
Ele m e n HTML
e le m e n BO DY
e le m e n p a ra g ra p
TIPS
TAG PENUTUP
Bila kita lup a m e nutup sua tu e le m e n HTML m ung kin se b a g ia n b e sa r b ro wse r m a sih
a ka n m e na m p ilka n d e ng a n b a ik, se p e rti e le m e n p a ra g ra p d ib a wa h ini:
L. Era wa n, M.Ko m
9
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
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 m e 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 m e n HTML ya ng a ka n m e m b 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 .
ELEMEN KOSONG ATAU TAG TUNGGAL
Ele m e n HTML ya ng ko so ng a ta u tid a k m e m p unya i p a sa ng a n se p e rti ta g
se b a iknya d itutup d e ng a n m e na m b a hka n backslash d i b e la ka ng na m a ta g se p e rti
b e rikut .
GUNAKAN LOWERCASE UNTUK MENULIS TAG HTML
Ta g -ta g HTML b e rsifa t case-insensitive ya ng b e ra rti sa m a d e ng a n . 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) m e re ko m e nd a sika n ha l ini p a d a HTML 4. Da la m XHTML
p e nulisa n ta g -ta g HTML jug a m e m e rluka n p e ng g una a n huruf ke c il d a la m
p e nulisa nnya .
L. Era wa n, M.Ko m
10
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
ATRIBUT-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 m e n HTML.
Pe nulisa n a trib ut ini p a d a ta g a w a l sua tu e le m e n HTML. Atrib ut d itulis b e rsa m a
nila inya m e ng g una ka n sim b 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 m a up un tung g a l. C o nto h:
Ini sebuah link
Ele m e 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 m e ne ta p ka n
a la m a t link. Pisa hka n sa tu sp a si a nta ra na m a 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 m e 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)
m e 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
m e 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 m e n HTML:
Atribut
c la ss
id
style
title
NIlai
na m a ke la s
na m a id
d e finisi style
te ks to o ltip
L. Era wa n, M.Ko m
Penjelasan
m e ne ntuka n na m a ke la s untuk sua tu e le m e n
m e ne ntuka n id unik untuk sua tu e le m e n
m e ne ntuka n style inline sua tu e le m e n
m e m b ua t info rm a si ta m b a ha n te nta ng e le me n
ya ng a ka n ta m p il d a la m b e ntuk to o ltip s
11
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
HEADING
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
m e ng ind e ks struktur d a n ko nte n ha la m a n we b m e ng g una ka n he a d ing . Ja ng a n
m e ng g una ka n he a d ing untuk ke p e rlua n m e m b ua t huruf b e sa r a ta u te b a l.
He a d ing d ib ua t m e ng g una ka n ta g sa m p a i d e ng a n . Se m a kin b e sa r
a ng ka d ib e la ka ng huruf h se m a kin ke c il ukura n he a d ing . He a d ing jug a a ka n
m e m b 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 d a p a t d ig una ka n se b a g a i jud ul
uta m a , ke m ud ia n untuk sub he a d ing , untuk sub sub he a d ing , d a n
se te rusnya . C o nto h he a d ing :
Ini heading terbesar
Ini heading terbesar setelah h1
Ini heading terbesar ketiga
LINES HTML
Untuk m e m b ua t g a ris ho riso nta l HTML m e nye d ia ka n ta g . Ta g ini d a p a t
d ig una ka n m isa lnya untuk m e m isa hka n ko nte n. C o nto h:
Elemen garis ini berupa tag tunggal tanpa pasangan
Penulisan tag diakhiri dengan backslash dibelakang nama tag
Elemen garis ini cukup bermanfaat untuk memperjelas konten
KO 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 m b 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 m e 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 m nya . 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:
Pe rha tika n b a hw a se te la h ta nd a kurung siku a wa l d iikuti d e ng a n ta nd a se ru
se d a ng ka n kurung siku a khir tid a k.
L. Era wa n, M.Ko m
12
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
M ENAMPILKAN KO DE SUMBER ( SOURCE CODE)
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 m b ua t ta m p ila n ha la m a n se p e rti itu? Tid a k
p e rlu kua tir, And a d a p a t m e 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
se je nisnya te rg a ntung b ro wse r ya ng d ig una ka n. Tind a ka n ini a ka n m e m b uka
se b ua h je nd e la ya ng b e risi ko d e HTML ha la ma n te rse b ut.
L. Era wa n, M.Ko m
13
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
PARAGRAP 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 m e m b ua t tulisa n
m e nja d i te rstruktur, je la s, se rta m ud a h d ip a ha m i isinya . De m ikia 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 m e 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 m e nja d i je la s d a p a t d ip a ha m i
d e ng a n m ud a h. C o nto h p e ng g una a n e le m e n ini:
Paragrap yang baik biasanya mengandung satu pokok pikiran saja
sehingga mudah dipahami
Pokok pikiran paragrap sebaiknya juga diletakkan diawal paragrap
sehingga pembaca web dapat terbantu membaca isi paragrap dengan
cepat
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 m e 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 m e nye b a b ka n fo rm a t
p a ra g ra p m e m iliki 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 hw a 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 m e 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 m e ning g a lka n ta g
p e nutup .
LINE BREAK HTML
Line b re a k ya ng d im a ksud a d a la h e le m e n ko so ng ya itu ta g . Ele m e 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 m ula 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 lum nya ). Ka re na e le m e n ini m e 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 m e na m b a hka n backslash se te la h na m a ta g .
C o nto h:
Ini sebuah paragrap.
Baris ini memiliki jarak baris lebih lebar dengan paragrap diatas tetapi tidak
dengan baris berikutnya.
Baris ini memiliki jarak baris tidak selebar sebelumnya karena
menggunakan line break untuk berpindah baris.
L. Era wa n, M.Ko m
14
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
TIPS TENTANG SPASI DAN PINDAH BARIS
Da la m m e ne rje m a hka n sua tu d o kum e n HTML, b ro wse r ha nya a ka n m e 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 m b 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 m e ne ka n e nte r untuk b e rp ind a h b a ris p a d a sa a t m e nulis
sua tu na ska h d a la m d o kum e n HTML. Pe rp ind a ha n b a ris d e ng a n m e 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 m p 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 m e njum p a i ta g a ta u e le m e 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.
L. Era wa n, M.Ko m
15
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
TAG - TAG FO RMATTING HTML
HTML m e ng g una ka n ta g d a n untuk me m fo rm a t te ks m e nja d i b e rhuruf m iring
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.
TAG FO RMATTING
Ke lo m p o k ta g d ib a wa h ini um um d ig una ka n.
Tag
Penjelasan
m e m b ua t huruf te b a l
m e m b ua t huruf b e sa r
m e m b ua t te ks ya ng d ite ka nka n se c a ra ita lic
m e m b ua t huruf m iring
m e m b ua t huruf ke c il
m e m b ua t p e ne ka na n te ks d e ng a n p e ne b a la n huruf
m e m b ua t sub sc rip t te ks
m e m b ua t sup e rsc rip t te ks
m e m b ua t sisip a n te ks
m e m b ua t p e ng ha p usa n te ks
TAG “ KELUARAN KO MPUTER”
Ke lo m p o k ta g d ib a wa h ini m e nye d ia ka n fo rm a t untuk m e 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 m e 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 m p ute r, inp ut d a ri
ke yb o a rd , ko d e -ko d e ko m p 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 m e ng g una ka n ke lo m p o k ta g ini.
Tag
L. Era wa n, M.Ko m
Penjelasan
fo rm a t te ks ko d e -ko d e ko m p ute r
fo rm a t te ks inp uta n ke yb o a rd
fo rm a t c o nto h ko d e ko m p ute r
fo rm a t ta m p ila n te ks m e sin ke tik
fo rm a t ta m p ila n va ria b e l
fo rm a t te ks p re fo rm a tte d
16
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
TAG DEFINISI DAN KUTIPAN
Tag
L. Era wa n, M.Ko m
Penjelasan
fo rm a t sing ka ta n
fo rm a t a kro nim
fo rm a t info rm a si ko nta k p e m ilik d o kum e n
m e ne ntuka n a ra h a lira n te ks
fo rm a t kutip a n p a nja ng
fo rm a t kutip a n p e nd e k
fo rm a t kutip a n
fo rm a t d e finisi istila h
17
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
EDITOR HTML
File HTML b e rje nis file te xt. Ini b e ra rti untuk m e m b ua t file HTML (a ta u d o kum e n HTML)
d a p a t m e 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 jum la hnya b a nya k. Be b e ra p a so ftw a 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 m e m p e la ja ri b a ha sa HTML ini le b ih b a ik m e 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 m e 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 m a nusia a lia s b uka n ko d e -ko d e m e sin se p e rti file e xe a ta u c o m .
Untuk m e m b ua t d o kum e 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
2. Tulis ko d e HTML And a p a d a la ya r no te p a d
L. Era wa n, M.Ko m
18
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
3. Sim p a n file d e ng a n m e nu Save as p a d a m e nu File. Ke tika m e nyim p a n file , And a
d a p a t m e 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 m ud 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 m e nu
File - Open p a d a b ro wse r. Ata u b isa jug a d e ng a n m e la kuka n klik d ua ka li p a d a
na m a file HTML ya ng a ka n d ib uka . Se ha rusnya ha silnya se p e rti d ib a wa h ini:
L. Era wa n, M.Ko m
19
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
LINKS 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 m a n we b d i
Inte rne t. Link d ig una ka n untuk m e lo m p 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 m e ng hub ung ka n ha la m a n we b sa tu sa m a la in.
HYPERLINK (LINK) HTML
Link jug a d ise b ut hyp e rlink, a d a la h sua tu ka ta , ke lo m p 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 m p 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
m e 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 .
Pe ng g una a n ta g a nc ho r untuk m e m b ua t link te rd a p a t 2 c a ra :
1. Untuk m e m b ua t link ke d o kum e n HTML ya ng la in d e ng a n m e ng g una ka n
a trib ut href.
2. Untuk m e m b ua t bookmark d a la m d o kum e n HTML d e ng a n m e ng g una ka n
a trib ut name.
Sinta k d a ri link HTML:
Teks link
a trib ut href m e ne ntuka n tujua n d a ri link, c o nto h:
Organisasi dunia W3
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 m a ka use r a ka n d ib a wa m e nuju ha la m a n ho m e p a g e situs
W3.
A TRIBUT TARGET
Atrib ut ini d ig una ka n untuk m e ne ntuka n a ka n d ib uka d im a na ha la m a 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:
Organisasi dunia W3
L. Era wa n, M.Ko m
20
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
A TRIBUT NAME
Atrib ut ini d a p a t d ig una ka n untuk m e ne ntuka n na m a se b ua h a nc ho r. Atrib ut ya ng
d ig una ka n untuk m e m b ua t b o o km a rk d id a la m sua tu d o kum e n HTML. Bo o km a rk
d isini b e ra rti sua tu p e na nd a ya ng m e 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 m e 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 kum e n HTML (link.html), d ib a g ia n te rte ntu d o kum e 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:
Bab 8: Hyperlink
Da la m d o kum e n ya ng sa m a b ua tla h se b ua h link m e nuju ke b o o km a rk
te rse b ut:
Menuju bab 8
Ata u And a b isa m e m b ua t link d a ri d o kum e n la in m e nuju ke b o o km a rk
te rse b ut:
TIPS
•
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 m e 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 m b ua t 2 re q ue st ke se rve r.
Pe rta m a , se rve r a ka n m e na m b a hka n b a c ksla sh d ia khir a la m a t. Ke d ua , se rve r
m e m b 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 m ikia n a ka n m e na m b 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
•
Pe m b e ria n na m a a nc ho r se ring d ig una ka n untuk m e m b ua t d a fta r isi b a g i
sua tu d o kum e n HTML ya ng b e sa r. Se tia p b a b d a la m d o kum e n d ina m a i
d e ng a n a nc ho r (d ib o o km a rk), d a n link m e nuju ke se tia p b a b d ile ta kka n
d ib a g ia n a ta s d o kum e n.
L. Era wa n, M.Ko m
21
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
IMAGE HTML
Da la m HTML, g a m b a r d id e finisika n m e ng g una ka n ta g 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 m p unya i p a sa ng a n ta g . Untuk
m e na m p ilka n g a m b a r p a d a ha la m a 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 m e ne ntuka n te ks ya ng a ka n m e 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 m b a r d ita m p ilka n b isa
d ise b a b ka n o le h la m b a tnya ko ne ksi inte rne t, error p a d a a trib ut src, a ta u jika use r
m e ng g una ka n screen reader.
Untuk m e na m p ilka n g a m b 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 kum e n HTML ya ng m e na m p ilka nnya , m a ka nila i a trib ut src se b a g a i
b e rikut:
Bila g a m b 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 kum e n HTML ya ng
m e na m p ilka nnya , m a ka a la m a t path ha rus d itulis p ula , m isa lnya :
Ele m e n im a g e d ia ta s m e na m p ilka n g a m b a r ya ng te rle ta k d i se rve r ya ng sa m a
d e ng a n d o kum e 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:
alt=”gambar
Ala t a b so lut m e rup a ka n a la m a t le ng ka p b e se rta je nis p ro to ko lnya (http ).
A TUR TING G I DAN LEBAR G AMBAR DENG AN HEIGHT DAN WIDTH
Atrib ut height d a n width d ig una ka n untuk m e ng a tur ting g i d a n le b a r g a m b a r.
Sa tua n nila i a trib ut a d a la h p ikse l. C o nto h:
L. Era wa n, M.Ko m
alt=”gambar
kreasi
digital”
width=”230”
22
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
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 m e 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 m b a r sa a t ha la m a n d im ua 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
m e 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 m ula i d im ua t (te ks a ka n d im ua t te rle b ih d a hulu ke ha la m a n se b e lum
g a m b a r).
Da la m m e ng g una ka n g a m b a r p a d a sua tu ha la m a n we b se b a iknya tid a k
b e rle b iha n se b a b p e m ua ta n g a m b a r m e m b utuhka n wa ktu. Se m a kin b a nya k
g a m b a r ya ng d ig una ka n a ka n se m a kin la m a p ro se s p e m ua ta n ha la m a n ke
b ro wse r.
L. Era wa n, M.Ko m
23
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
TABLE HTML
Ta b e l d ib ua t d e ng a n m e ng g una ka n ta g . 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 m e ng g una ka n ta g , 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 , sing ka ta n
d a ri table data ya ng m e na m p 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 d a p a t b e risi text, link, image, list, form, table la innya , d a n
la in-la in.
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
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 2, c e ll 1
ro w 1, c e ll 2
ro w 2, c e ll 2
A TRIBUT BO RDER
Jika tid a k d ite ntuka n m a ka ta b e l a ka n d ita m p ilka n d e ng a n ta np a b o rd e r. Untuk
m e na m p ilka n b o rd e r ta b e l m e ng g una ka n a trib ut b o rd e r:
row 1, cell 1
row 1, cell 2
HEADER TABEL
Ta b e l se ring ka li m e m iliki he a d e r. He a d e r ta b e l a d a la h b a ris p e rta m a ta b e l ya ng
b e rfung si se b a g a i jud ul-jud ul ko lo m . He a d e r ta b e l d a p a t d ib ua t d e ng a n
L. Era wa n, M.Ko m
24
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
m e ng g una ka n ta g . Bro wse r-b ro wse r ya ng sud a h te rke na l m e na m p ilka n te ks
d id a la m e le m e n d e ng a n te b a l d a n d ite ng a hka n.
Header 1
Header 2
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
Ta m p ila n d i b ro wse r d a ri ko d e HTML d ia ta s:
Header 1
ro w 1, c e ll 1
ro w 2, c e ll 1
Header 2
ro w 1, c e ll 2
ro w 2, c e ll 2
TAG
Ta g ini b e rfung si untuk m e 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 m e 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 m e n a ta u e le m e n
. Liha t c o nto h:
ISBN
Title
Price
3476896
My first HTML
$53
L. Era wa n, M.Ko m
25
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
5869207
My first CSS
$49
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 :
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 m e n
c ha r
character
Pe ra ta a n ko nte n d a ri sua tu e le m e n
m e 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 jum la 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 m e n
va lig n
to p
m id 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 m e n
wid th
%
pixels
relative_length
Me ne ntuka n le b a r d a ri se b ua h e le m e n
L. Era wa n, M.Ko m
26
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
LIST HTML
Da la m HTML, sua tu list a d a la h ta m p ila n d a ri se ke lo m p 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:
UNO RDERED LIST
List je nis ini d ib ua t m e ng g una ka n ta g , sing ka ta n d a ri unordered list. Ma sing m a sing ite m d a ri d a fta r d ib ua t m e ng g una ka n ta g :
Kopi
Susu
Teh
Pa d a b ro wse r a ka n d ita m p ilka n se m a 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 LIST
Dib ua t m e ng g una ka n ta g , sing ka ta n d a ri ordered list . Ma sing -m a sing ite m d a ri
d a fta r d ib ua t m e ng g una ka n ta g :
Kopi
Susu
Es Jus
Pa d a b ro wse r ta m p a k se p e rti ini:
1. Ko p i
2. Susu
3. Es Jus
L. Era wa n, M.Ko m
27
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
DEFINITIO N LIST
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 m b ua t list ini d ig una ka n ta g . Ta g ini sa tu ra ng ka ia n d e ng a n ta g ,
sing ka ta n d a ri data title, d a n , sing ka ta n d a ri data description.
Coffee
- black hot drink
Milk
- white cold drink
Ta m p ila n d a ri ko d e d ia ta s:
Coffee
- black hot drink
Milk
- white cold drink
Did a la m ite m d a ri sua tu list d a p a t d iisi d e ng a n te ks, im a g e , link, list ya ng la in, d a n
o b ye k we b la innya .
L. Era wa n, M.Ko m
28
Dikta t Pe m ro g ra m a n We b / ve rsi 1.0
ELEMEN BLOCK HTML
Ele m e n-e le m e n d id a la m HTML d ika te g o rika n se b a g a i e le m e n block level d a n
e le m e n inline. Ele m e n-e le m e 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 m nya :
, , ,
se d a ng ka n ya ng te rg o lo ng e le m e 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:
, , ,
ELEMEN
Ele m e n te rg o lo ng se b a g a i e le m e n block level. Ele m e 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 m e ng e lo m p o kka n e le m e n HTML la innya .
Na m a e le m e n ini tid a k m e m p unya i a rti khusus, se la in b a hwa e le m e n a d a la h
se b ua h e le m e 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 m e n.
Sa a t d ig una ka n b e rsa m a C SS, e le m e 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 um um la innya d a ri e le m e n ini a d a la h untuk m e ng a tur layout d a ri
se b ua h d o kum e n HTML, m e ng g a ntika n c a ra
la m a
p e ng a tura n la yo ut
m e 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 m e 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 m e n . Me ng a p a ? Ka re na fung si
se b e na rnya d a ri e le m e n ta b e l a d a la h untuk m e na m p ilka n d a ta d a la m b e ntuk
tabular.
ELEMEN