2. html tingkat dasar

7/25/2019 2. HTML Tingkat Dasar

1/37

HTMLHTML

BY : WIDIARTI R.M,S.T,M.KomBY : WIDIARTI R.M,S.T,M.Kom


2/37

HTMLHTML

( HIPERTEXT MARCKURP LANGUAGE( HIPERTEXT MARCKURP LANGUAGE

)) HTML ( Hipe!e"! M#$%&p L#'e )HTML ( Hipe!e"! M#$%&p L#'e )

me&p#%#' %oe pei'!#* +#' memii%ime&p#%#' %oe pei'!#* +#' memii%i

!# - !# !e!e'!& +#' i#'%#i #!#&!# - !# !e!e'!& +#' i#'%#i #!#&i&&' /e##%#' 0&'i'+# e*i'#i&&' /e##%#' 0&'i'+# e*i'#

me'*#i#%#' i'0om#i.me'*#i#%#' i'0om#i.

I'0om#i +#' i/! i##m em/##'I'0om#i +#' i/! i##m em/##'

1e/ !eii #i o/2e$% - o/2e$% #!# +#'1e/ !eii #i o/2e$% - o/2e$% #!# +#'

i#/&'%#' ##m %oe - %oe HTML.i#/&'%#' ##m %oe - %oe HTML.


3/37

3.3. S!#'#! Pe'&i#' HTMLS!#'#! Pe'&i#' HTML

4 *!m 54 *!m 5 me'+#!#%#' 0om#! #!#me'+#!#%#' 0om#! #!#

4 *e# 54 *e# 5 /#i#' %ep## #!#& #1# #i/#i#' %ep## #!#& #1# #i

pe'&i#'pe'&i#'

4 !i!e 54 !i!e 5 *##m#' &!#m#*##m#' &!#m#

4 6!i!e 54 6!i!e 5 me'+#!#%#' 2&& #' pemi#*#'me'+#!#%#' 2&& #' pemi#*#' i*##m#'i*##m#'

1e/1e/

4 6*e# 54 6*e# 5 me'+#!#%#' pe'&!&p /#i#' %ep##me'+#!#%#' pe'&!&p /#i#' %ep## #!#!#&

#!#.#!#.4 /o+ 54 /o+ 5 ii i'0om#i +#' #%#' i#2i%#'.ii i'0om#i +#' #%#' i#2i%#'.

4 6/o+ 54 6/o+ 5 pe'&!&p $ip! /o+pe'&!&p $ip! /o+

4 6*!m 54 6*!m 5 pe'&!&p $ip #!#& po#m *!mpe'&!&p $ip #!#& po#m *!m


4/37

Co'!o* Po#m :Co'!o* Po#m :

4*!m54*!m5

4*e#54*e#5

4!i!e5 L#!i*#' Pe!#m#%& 46!i!e54!i!e5 L#!i*#' Pe!#m#%& 46!i!e5

46*e#546*e#5

4/o+54/o+5 Heo Wo 7........Heo Wo 7........

46/o+546/o+546*!m546*!m5

Ke!i%%#' p## No!ep#Ke!i%%#' p## No!ep# Simp#' e'#' '#m# e/##i $o'!o* : #!i*#'.*!mSimp#' e'#' '#m# e/##i $o'!o* : #!i*#'.*!m

8##'%#' p## /o1e i'!e'e!.8##'%#' p## /o1e i'!e'e!.


5/37

H#i !#mpi#' !ei*#! p## #m/#H#i !#mpi#' !ei*#! p## #m/#

i /#1#* i'i :i /#1#* i'i :


6/37

9. He#i'9. He#i'

He#i' ###* : e%&mp' %#!# +#'He#i' ###* : e%&mp' %#!# +#'

me'2#i 2&& #!#& &/ 2&& ##m !&me'2#i 2&& #!#& &/ 2&& ##m !&

o%&me' HTML.o%&me' HTML. He#i' /e/e# e'#' !# 4 !i!e 5He#i' /e/e# e'#' !# 4 !i!e 5

+#' !i#% /i# m&'$& ##m *##m#'+#' !i#% /i# m&'$& ##m *##m#'

1e/.1e/.

HTML me'+ei#%#' e'#m !i'%#!#'HTML me'+ei#%#' e'#m !i'%#!#'

*e#i'. He#i' ee 3 /i##'+# &'!&%*e#i'. He#i' ee 3 /i##'+# &'!&%

2&& &!#m#.2&& &!#m#.


7/37

Co'!o* po#m :Co'!o* po#m :

4 *!m 54 *!m 5

4 *e# 54 *e# 54 !i!e 5 He#i' 4 6!i!e 54 !i!e 5 He#i' 4 6!i!e 5

4 *e# 54 *e# 5

4 /o+ 54 /o+ 5

4 H3 5 He#i' Lee 3 4 6H3 54 H3 5 He#i' Lee 3 4 6H3 54 H9 5 He#i' Lee 9 4 6H9 54 H9 5 He#i' Lee 9 4 6H9 5

4 H; 5 He#i' Lee ; 4 6H; 54 H; 5 He#i' Lee ; 4 6H; 5

4 H< 5 He#i' Lee < 4 6H< 54 H< 5 He#i' Lee < 4 6H< 5

4 H= 5 He#i' Lee = 4 6H= 54 H= 5 He#i' Lee = 4 6H= 54 H> 5 He#i' Lee > 4 6H> 54 H> 5 He#i' Lee > 4 6H> 5

4 6/o+ 54 6/o+ 5

4 6*!m 54 6*!m 5


8/37

;. P###0;. P###0

U'!&% mem/! p###0 i&'#%#' !# 4 P 5 .U'!&% mem/! p###0 i&'#%#' !# 4 P 5 .

Se!e#* !# 4 P 5 A'# /i# me'&i ii p###0Se!e#* !# 4 P 5 A'# /i# me'&i ii p###0#' #' p###0 !ee/&! *#& i#%*ii e'#'#' #' p###0 !ee/&! *#& i#%*ii e'#'

!# pe'&!&p 4 6P 5.!# pe'&!&p 4 6P 5.

A'# /i# me'#!& poii p###0 e'#'A'# /i# me'#!& poii p###0 e'#'

me'&'#%#' #!i/&! ALIGN. A!i/&! ALIGNme'&'#%#' #!i/&! ALIGN. A!i/&! ALIGN

ii%&!i e'#' poii +#' ii'i'%#'. Le0! &'!&%ii%&!i e'#' poii +#' ii'i'%#'. Le0! &'!&%me#!#%#' p###0 i %ii, $e'!e &'!&%me#!#%#' p###0 i %ii, $e'!e &'!&%me#!#%#' p###0 i poii !e'#* *oi?o'!#me#!#%#' p###0 i poii !e'#* *oi?o'!#

#' i*! &'!&% me#!#%#' p###0 i %#'#'.#' i*! &'!&% me#!#%#' p###0 i %#'#'.


9/37

Co'!o* po#m :Co'!o* po#m :

4*!m54*!m54*e#54*e#5

4!i!e5P###0 46!i!e54!i!e5P###0 46!i!e5

46*e#546*e#54/o+54/o+5


10/37

4P ALIGN @ i*!54P ALIGN @ i*!5

Be/e#p# !#*& +#' #&, eo#'Be/e#p# !#*& +#' #&, eo#'

*#!#1#' me'i'# &'i# e#'%#'*#!#1#' me'i'# &'i# e#'%#'

i# !i#%i# !i#% memii%i #*i 1#i. Kep##memii%i #*i 1#i. Kep##

pe'#$##'+#, i# me'i'#%#' pe'#$##'+#, i# me'i'#%#'

/* ! +#'/* ! +#' iee. Y#'iee. Y#'e/* /eii pemi'!##' ##e/* /eii pemi'!##' ##

2e'#?#*'+# i%&/&%#' p## 2#m2e'#?#*'+# i%&/&%#' p## 2#m

emp#!emp#!

i'i *#i. S! %e /e&mi'i *#i. S! %e /e&m

i%e!#*&i ii'+# %#e'# i#mp&'+#i%e!#*&i ii'+# %#e'# i#mp&'+#

!e!&i pe#' ##!e!&i pe#' ## i/&%# eii/&%# ei

pem#%#m#' 2e'#?#*.pem#%#m#' 2e'#?#*.


11/37

4P ALIGN @$e'!e54P ALIGN @$e'!e5

Sei e'#' 1#i#!, 2e'#?#* i!&Sei e'#' 1#i#!, 2e'#?#* i!&i%e/&mi%#' p## p&%& emp#! i'ii%e/&mi%#' p## p&%& emp#! i'i

*#i. K#e'#*#i. K#e'# !i#% #?im'+# 1#%!&!i#% #?im'+# 1#%!&

pem#%#m#' p## 2#m !ee/&!, +#'pem#%#m#' p## 2#m !ee/&!, +#'

i%&! me'#'!# 2e'#?#*'+#i%&! me'#'!# 2e'#?#*'+# *#'+#*#'+#

emp#! o#' %#1#''+# +#' p#i'emp#! o#' %#1#''+# +#' p#i'

e!i#.e!i#.


12/37

4P ALIGN @e0!54P ALIGN @e0!5

Sei pem#%#m#', ! 1#i#! +#' %eSei pem#%#m#', ! 1#i#! +#' %ei/&%#. Be!#p# !e%e2&!'+# pe'#$##i/&%#. Be!#p# !e%e2&!'+# pe'#$##

%e!i%# mem/#$# ii'+#, i##* 1#i#! /#*1#%e!i%# mem/#$# ii'+#, i##* 1#i#! /#*1#e&&* *#!# 1#i#' ( +#' /e'i#ie&&* *#!# 1#i#' ( +#' /e'i#i e/i*e/i*

#i . po&') i/#i #!# %ep## o#'#i . po&') i/#i #!# %ep## o#'o#' +#' me'#'!#%#'o#' +#' me'#'!#%#' 2e'#?#*'+# %e2e'#?#*'+# %e

pem#%#m#'. De'#' emi%i#', +#' /e*#%pem#%#m#'. De'#' emi%i#', +#' /e*#%mempeoe* *#!# +#' /#'+#% i!& *#'+#mempeoe* *#!# +#' /#'+#% i!& *#'+#emp#! o#', e/##i im/##' /#i %ee!i##'emp#! o#', e/##i im/##' /#i %ee!i##'

mee%#. S&m/e H&mo, %i#* #' pep#!#*.mee%#. S&m/e H&mo, %i#* #' pep#!#*.

46P546P546/o+546/o+5

46*!m546*!m5


13/37


14/37


4*!m54*!m5

4*e#54*e#5

4!i!e5BLFCKUFTE 46!i!e54!i!e5BLFCKUFTE 46!i!e5

46*e#546*e#5

4/o+54*;5 Se!& +#' !i#% pe&4/o+54*;5 Se!& +#' !i#% pe&

i$o/# 46*;5i$o/# 46*;5

4/o$%&o!e54/o$%&o!e5

Se!& +#' %ei*#!#'Se!& +#' %ei*#!#' me'#+i%#' !#pime'#+i%#' !#pi

e/e'#'+#e/e'#'+#


15/37

e/i* /#'+#% me'#m/#* m###*e/i* /#'+#% me'#m/#* m###*

p##p## em#2# ###* '#%o/#, e%,em#2# ###* '#%o/#, e%,

#%o*o#%o*o #' meo%o%. 8#'#'#' meo%o%. 8#'#'e%#i%#ie%#i%#i me'$o/# 2i%# !i#% i'i'me'$o/# 2i%# !i#% i'i'

mem/!mem/! m###* /#&.m###* /#&.

46/o$%&o!e546/o$%&o!e546/o+546/o+5

46*!m546*!m5


16/37

=. Pe0om#!!e Te"!=. Pe0om#!!e Te"!

Pe0om#!!e !e"! (PRE) i&'#%#'Pe0om#!!e !e"! (PRE) i&'#%#'

&'!&% me'#mpi%#' !e% #m&'!&% me'#mpi%#' !e% #m##epe!iepe!i

+#' #'# %e!i%%#' ##m o%&me'+#' #'# %e!i%%#' ##m o%&me'HTML. Bo1e #%#' me'#mpi%#' !e%HTML. Bo1e #%#' me'#mpi%#' !e%

!ee/&! ##m 0o'! mo'op#$e, +#i!&!ee/&! ##m 0o'! mo'op#$e, +#i!&

epe!i !ei*#! ##m !e% +#'epe!i !ei*#! ##m !e% +#'

i!#mpi%#' oe* #pi%#i /e/#i%#'i!#mpi%#' oe* #pi%#i /e/#i%#'

!e% ( mi#'+# !e'e! ).!e% ( mi#'+# !e'e! ).


17/37


4*!m54*!m54*e#54*e#5

4!i!e5 Pe0om#!!e Te% 46!i!e54!i!e5 Pe0om#!!e Te% 46!i!e5

46*e#546*e#54/o+54/o+5

4pe54pe5


18/37

111.#$.i!/.#$.i111.#$.i!/.#$.i

T&i#' i#!# me'&'#%#' p#iT&i#' i#!# me'&'#%#' p#i

#' i'i ###* /#i /#' i'i ###* /#i /#&

#0!# i!& me'#i% i i!/#0!# i!& me'#i% i i!/

R#io%#mp&.ee.i!/.#$.iR#io%#mp&.ee.i!/.#$.i

111.#$.i!/.#$.i111.#$.i!/.#$.i46pe546pe5

46/o+546/o+5

46*!m546*!m5
http://www.arc.itb.ac.id/http://www.arc.itb.ac.id/http://www.arc.itb.ac.id/http://www.arc.itb.ac.id/http://www.arc.itb.ac.id/http://www.arc.itb.ac.id/


19/37

>. BR>. BR

T# i'e /e#% ( BR ) i&'#%#' &'!&%T# i'e /e#% ( BR ) i&'#%#' &'!&%

me'&i !e% p## /#i /ei%&!'+#.me'&i !e% p## /#i /ei%&!'+#.

T# 4 BR 5 mem/! /#i !#'p#T# 4 BR 5 mem/! /#i !#'p#

mem/ei /#i %oo'.mem/ei /#i %oo'.


20/37


4*!m54*!m5

4*e#54*e#5

4!i!e5 Li'e Be#% 46!i!e54!i!e5 Li'e Be#% 46!i!e546*e#546*e#5

4/o+54/o+5


21/37

4P5 B#'+#% $## +#' #p#!4P5 B#'+#% $## +#' #p#!

i&'#%#' &'!&% me#%&%#' i'!##ii&'#%#' &'!&% me#%&%#' i'!##i

eeBSD. N#m&' ## !i# $## +#'eeBSD. N#m&' ## !i# $## +#'p#i' ei' i#%&%#', +#i!& :p#i' ei' i#%&%#', +#i!& :

4BR5 I'!##i me#&i TP4BR5 I'!##i me#&i TP

4BR5 I'!##i me#&i CDRFM4BR5 I'!##i me#&i CDRFM4BR5 I'!##i me#&i p#!ii4BR5 I'!##i me#&i p#!ii

DFS 46P5DFS 46P5

46/o+546/o+5

46*!m546*!m5


22/37

. o'!. o'!

U'!&% me'#!& *&&0 o%&me'U'!&% me'#!& *&&0 o%&me'

HTML i&'#%#' !# 4FNT5.HTML i&'#%#' !# 4FNT5.

T# 4FNT5 memii%i /e/e#p#T# 4FNT5 memii%i /e/e#p#

#!i/&! &'!&% me'#!& &%'#!i/&! &'!&% me'#!& &%'

*&&0 , 2e'i *&&0 +#' i&'#%#'*&&0 , 2e'i *&&0 +#' i&'#%#'#' 1#'# *&&0.#' 1#'# *&&0.


23/37

.3. U%' o'!.3. U%' o'!

A!i/&! i?e i&'#%#' &'!&%A!i/&! i?e i&'#%#' &'!&%

me'#!& &%' 0o'!.me'#!& &%' 0o'!.

Ni#i 0o'! imi e'#' 'i#i 3Ni#i 0o'! imi e'#' 'i#i 3

&'!&% &%' *&&0 !e%e$i #' 'i#i&'!&% &%' *&&0 !e%e$i #' 'i#i

&'!&% &%' p#i' /e#. &'!&% &%' p#i' /e#.


24/37


4*!m54*!m5

4*e#54*e#5

4!i!e5 U%' o'! 46!i!e54!i!e5 U%' o'! 46!i!e5

46*e#546*e#5

4/o+54/o+5

4FNT SIJE @35 U%' o'! 3 46FNT54FNT SIJE @35 U%' o'! 3 46FNT5

4FNT SIJE @95 U%' o'! 9 46FNT54FNT SIJE @95 U%' o'! 9 46FNT5


25/37

4FNT SIJE @;5 U%' o'! ; 46FNT54FNT SIJE @;5 U%' o'! ; 46FNT5

4FNT SIJE @ 46FNT54FNT SIJE @>5 U%' o'! > 46FNT54FNT SIJE @5 U%' o'! 46FNT54FNT SIJE @5 U%' o'! 46FNT5

46/o+546/o+5

46*!m546*!m5


26/37

.9. 8e'i o'!.9. 8e'i o'!

A!i/&! ACE i&'#%#' &'!&%A!i/&! ACE i&'#%#' &'!&%

me'#!& 2e'i *&&0 +#'me'#!& 2e'i *&&0 +#'

ii'i'%#'. A!i/&! ACE *#& iiiii'i'%#'. A!i/&! ACE *#& iiie'#' !i' 2e'i 0o'! epe!i Ai#,e'#' !i' 2e'i 0o'! epe!i Ai#,

Time Ne1 Rom#', e#'#, #'Time Ne1 Rom#', e#'#, #'

e/##i'+#.e/##i'+#.


27/37


4*!m54*!m5

4*e#54*e#5

4!i!e5 U%' o'! 46!i!e54!i!e5 U%' o'! 46!i!e5

46*e#546*e#5

4/o+54/o+5

4FNT SIJE @=54FNT SIJE @=5

4FNT ACE @ Ai#5 Ai#, $o'!o* AC Mi#' 4P54FNT ACE @ Ai#5 Ai#, $o'!o* AC Mi#' 4P5

4FNT ACE @ e#'#5 e#'#, $o'!o* Pee/#+#4FNT ACE @ e#'#5 e#'#, $o'!o* Pee/#+# 4P54P5

4FNT ACE @ T#*om#5 T#*om#, $o'!o* I'o'ei#4FNT ACE @ T#*om#5 T#*om#, $o'!o* I'o'ei# 4P54P5

46/o+546/o+5

46*!m546*!m5


28/37

.;. W#'# o'!.;. W#'# o'!

A!i/&! $oo i&'#%#' &'!&%A!i/&! $oo i&'#%#' &'!&%

me'#!& 1#'# 0o'! +#'me'#!& 1#'# 0o'! +#'

ii'i'%#'.ii'i'%#'.


29/37

U'!&% mem/ei 'i#i p## #!i/&!U'!&% mem/ei 'i#i p## #!i/&!

$oo ## $## +#i!& :$oo ## $## +#i!& :

3.3. C## pe!#m# e'#' me'+e/&!%#'C## pe!#m# e'#' me'+e/&!%#'

'#m# 1#'# epe!i e, ee', #''#m# 1#'# epe!i e, ee', #'/&e./&e.

9.9. Se#'%#' $## %e ###* e'#'Se#'%#' $## %e ###* e'#'

me'&'#%#' 'i#i RGB ( Re Gee'me'&'#%#' 'i#i RGB ( Re Gee'

B&e ) #i !& 1#'#, mi#'+#B&e ) #i !& 1#'#, mi#'+# &'!&% e, &'!&% ee' &'!&% e, &'!&% ee'#' &'!&% /&e.#' &'!&% /&e.


30/37


4*!m54*!m54*e#54*e#5

4!i!e5 W#'# o'! 46!i!e54!i!e5 W#'# o'! 46!i!e5

46*e#546*e#5

4/o+54/o+5

4FNT SIJE @=54FNT SIJE @=5

4FNT CFLFR@ e5 PSM M#%##4P54FNT CFLFR@ e5 PSM M#%##4P5

4FNT CFLFR @ 5 PSM M#%## %#' 4P54FNT CFLFR @ 5 PSM M#%## %#' 4P5

4FNT CFLFR @ 5 I'i /#& Pee/#+#4P54FNT CFLFR @ 5 I'i /#& Pee/#+#4P5

46/o+546/o+5

46*!m546*!m5


31/37

. Li'%. Li'%

Pei'!#* #'$*o (A) i&'#%#' &'!&%Pei'!#* #'$*o (A) i&'#%#' &'!&%

mem/! !& i'%. U'!&% mem/! i'%mem/! !& i'%. U'!&% mem/! i'%

%e o%&me' HTML #i' i&'#%#' pei'!#*%e o%&me' HTML #i' i&'#%#' pei'!#*4A HRE @ '#m#Oo%&me'5 Te% p##4A HRE @ '#m#Oo%&me'5 Te% p##

/o1e 46A5/o1e 46A5

A'# 2 /i# mem/! i'% ##mA'# 2 /i# mem/! i'% ##m

e/* o%&me' HTML. U'!&% i!& pe&e/* o%&me' HTML. U'!&% i!& pe&iei#%#' '#m# #'$*o o%#i !&2' #iiei#%#' '#m# #'$*o o%#i !&2' #i

i'% !ee/&!. N#m# #'$*o i/! e'#'i'% !ee/&!. N#m# #'$*o i/! e'#'


32/37

me'#m/#*%#' #!i/&! NAME p##me'#m/#*%#' #!i/&! NAME p##

!# 4A5 Mi#'+# 4A NAME @!# 4A5 Mi#'+# 4A NAME @

#//i#!i5 46A5. C## me#%&%#'#//i#!i5 46A5. C## me#%&%#'

i'% %e/#i#' !ee/&! ###* 4Ai'% %e/#i#' !ee/&! ###* 4A

HRE @'#m#O#'$*o5!e% p##HRE @'#m#O#'$*o5!e% p##

/o1e 46A5/o1e 46A5



33/37


4*!m54*!m54*e#54*e#5

4!i!e5 Li'% 46!i!e54!i!e5 Li'% 46!i!e5

46*e#546*e#54/o+54/o+5

4# '#me@e'%#p5 Pem#i'pem#i'4# '#me@e'%#p5 Pem#i'pem#i'

AC Mi#' me'&&! #/2# 46#5AC Mi#' me'&&! #/2# 46#54/o$%&o!e54/o$%&o!e5

4p5 A//i#!i, 4# *e04p5 A//i#!i, 4# *e0

@$o'!o*3.*!m5i'0o e'%#p 46#5@$o'!o*3.*!m5i'0o e'%#p 46#5


34/37

4p5A+##4p5A+##

4p5Am/oi'i4p5Am/oi'i

4p5A/e!i'i4p5A/e!i'i

4p5Bo/#'4p5Bo/#'

4p54p54# *e0@$o'!o*3.*!m5 %#o m#& !#*&4# *e0@$o'!o*3.*!m5 %#o m#& !#*&

#i %i% ii'i 46#5#i %i% ii'i 46#5

46/o$%&o!e546/o$%&o!e5


35/37

4p54# '#me@#//i#!i5A//i#!i46#54p54# '#me@#//i#!i5A//i#!i46#5

4/o$%&o!e54/o$%&o!e5

4p5Kipe %e!i# !im'# i!#i# &''e Up E&o4p5Kipe %e!i# !im'# i!#i# &''e Up E&o99

4/5Kipe &!#m# U93 2# Pi## Eop# U934/5Kipe &!#m# U93 2# Pi## Eop# U93

4/5Kipe &!#m# AC Mi#' 2# Sei - A 34/5Kipe &!#m# AC Mi#' 2# Sei - A 3

3346/o$%&o!e546/o$%&o!e5

4p54# *e0@i'%.*!m5%em/#i %e#!#46#54p54# *e0@i'%.*!m5%em/#i %e#!#46#5

46/o+546/o+546*!m546*!m5



36/37


4*!m54*!m5

4*e#54*e#54!i!e5Li'% T&2' 46!i!e54!i!e5Li'% T&2' 46!i!e5

46*e#546*e#5

4/o+54/o+5

4p #i'@$e'!e5 M##0, *#'+# ei%i!4/54p #i'@$e'!e5 M##0, *#'+# ei%i!4/5

4/5C*#mo!4/5C*#mo!

4/5Di#4/5Di#

4/5S*e$*e'%o4/5S*e$*e'%o

4/54# *e0@i'%.*!m5%em/#i46#54/54# *e0@i'%.*!m5%em/#i46#5

46/o+546/o+5

46*!m546*!m5


37/37

TERIMA

KASIH !..

...

2. html tingkat dasar

Documents