moduldesweb2012 vok

7/25/2019 MODULDesWeb2012 Vok

1/571


2/571

MODUL

[2012]

DESAIN WEB


3/571

[Modul Desain Web Berisi Kompetensi Tentang XHTML, !!,

"a#as$ript, %&uer', (engenalan Dream)ea#er, (*otos*op +

(ro%e$t (engembangan Web ]

le* - .endi /%i (urnomo, !!i

[D Teni

3n4ormatia

.M3(/

56!]

1

Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id


4/571

DAFTAR ISI

o#er1

Da4tar 3si 2

Topi 1 XHTML

Topi 2 Dream)ea#er :

Topi !! :;

Topi


5/571


6/571

2



7/571

TOPIK 1

HTML

Tujuan:

Ma*asis)a mengeta*ui dasar HTML

Pokok Bahasan:

!trutur dasar C*tml, mendelarsian en$oding, title, *eading, paragra4, baris osong,

men'isipan omentar, label element, mem4ormat tes, singatan dan aronim,

men'isipan images, lin, membuat list, membuat tabel, dan membuat 4orm

Mate!:

HTML AH'perteCt Marup Language 'aitu ba*asa marup 'ang digunaan sebagai

dasar membangun onten *alaman )eb !eperti *aln'a ba*asa 'ang digunaan

manusia, HTML %uga mengalami perembangan !etela* emun$ulan HTML #ersi 0

nos*adeE /rtin'a dalam HTML untu nama atribut 'ang sama dengan nilain'a

dapat ditulis dalam satu nama sa%a 6amun dalam XHTML, semua atribut dan nilai

*arus din'ataan se$ara esplisit, misal *r )idt*IJ>0J nos*adeIJnos*adeJE


Meli*at perbedaan=perbedaan di atas, maa XHTML sangat disaranan bagi

desainer )eb 'ang menginginan onsistensi dalam strutur onten *alaman)ebn'a !elain itu, XHTML lebi* ompatible untu diintegrasian dengan !!

Aas$ade !t'le !*eet dibandingan dengan HTML

D$ Pakt!ku% :

(ela%ari emudian er%aan tugas 'ang diberian

"a)aban disertaan dalam *alaman HTML pada tugas

Stuktu Dasa #HTML

!tr

utur

das

ar

dar

i

*al

am

an

'a

ng

dib

an

gu

n

de


9/571

ngan XHTML pada prinsipn'a sama dengan HTML 'aitu terdiri dari bagian

*eader dan bod' !ebelum /nda memulai membuat *alaman XHTML /nda,

sebain 'a pada bagian paling atas *alaman ditamba*an eterangan

DTF(G sbb-


10/571

* /nda membuat strutur utama, selan%utn'a dapat dilan%utan e pembuatan

blo *eader Blo *eader terleta di antara tag


11/571

epla$ed /dobe OoLi#ein t*e


154/571

A(o&e

reati#e !uite series


155/571

19$9

!#t-N& 11%*7 6#l#r& 0000007

>#t->aml2& #r(aA "Tm $' )#ma"A TmA r>7

% S

>#t-N& 19%*7 6#l#r& 0000007 >#t->aml2& 5r+aa7

!earang tulis ode HTML ini dan simpan dengan nama 0csseksternal4.html-


185/571


186/571



187/571

7'ass Se'e*to

Dengan menggunaan $lass sele$tor, ita bisa mendeNnisian stle'ang berbeda

untu tipe elemen HTML 'ang sama

!ebagai $onto* ita mempun'ai dua tipe paragra4- satu paragrap* rapat iri, dan satu

paragrap* posisi ditenga*=tenga* doumen (enulisan !!=n'a-

%.r(ht St*t-al(& r(ht %.6tr St*t-al(& 6tr

(enerapan $lass=$lass di atas e dalam doumen HTML=n'a adala*-


188/571


189/571

Kode !!-

l>t

S

>l#at&l>t7

'+th&907 a6@(r#4+-6#l#r& r+

r(ht

S

>l#at&l>t7

'+th&07 a6@(r#4+-6#l#r& r+

Penerapannya dalam HTML:

t,

V. . .


190/571

/atatan+ 6angan memulai nama -7 dengan menggunakan angka, karena

tidak akan dikenal di Mo8illa9:ireo;$

onto* penerapan $lass sele$tor dan 3D sele$tor-


191/571



192/571


193/571

.6#tt

S

>l#at&l>t7 mar(-t#%&0%*7 mar(-r(ht&10%*7 mar(-#tt#m&:%*7mar(-l>t&90%*7

"ia margin=top I margin=rig*t I margin=bottom I margin=rig*t I10pC, penulisan

bisa disingat men%adi margin sa%a -

.ma

S

>l#at&l>t7

mar(&10%*

7SS Pa((!n+

!! padding mendeNnisian ruang Aspa$e antara sisi Aborder elemen dan isi

A$ontent elemen 6ilai negati4 tida diperbole*an /tas, anan, ba)a* dan iri

dapat di atur se$ara terpisa* dengan memisa*an propertisn'a

.%a( S %a++(-t#%&10%*7

@:



194/571

%a++(-r(ht&90%*7 %a++(-#tt#m&:%*7 %a++(-l>t&90%*7

Jika padding-top = padding -right = padding -bottom = padding -right =20px, penulisan bisa disingkat:

.+ S %a++(&90%*

7SS Bo(e

!! border digunaan untu memberian stledan )arna se$ara *usus dari

elemen border Di dalam HTML ita biasa menggunaan table untu membuat

border seitar tes, aan tetapi dengan !! border ita dapat membuat border

dengan e4e 'ang menari dan dapat diapliasian pada elemen apa sa%a

onto* di ba)a* bagaimana mengapliasian margin, padding, dan border-

Kode HTML-


195/571

/ ta%a #r+r /

LI S

6#l#r& la6@7 / 'ara t@ htam /

a6@(r#4+& (ra27 / C#ttA %a++( +'ara a4-a4/ mar(& 19%*

19%* 19%* 19%*7

%a++(& 19%* 0%* 19%* 19%*7 / %a++( @aa 0%* / lt-t2l& #

/ ta%a #r+r /

LI.'th#r+r S #r+r-t2l& +ah+7

#r+r-'+th& m+4m7 / #r+r 4t4@ m4a / #r+r-6#l#r& la6@7


196/571


197/571


198/571

@>



199/571

TU4AS PERTEMUAN :

.ormatla* U lengap 'ang /nda buat emarin dengan model $ss esternal

Tugas dalam Nle Pip dengan nama Nle 63M8Tgs(ertemuan:8!!, pengumpulan

le)at elearning

Men+h!+h'!+ht Teks

5ntu meng=*ig*lig*t sebua* tes dilauan dengan menguba* ba$ground dari

tes tersebut !ebagai $onto*, dibuat sebua* sele$tor, misalan $lassI_*ig*lig*t_

'ang aan diapliasian ter*adap sebua* tes

Kode HTML-


200/571

(a2a h+4%A r@# h%rt 4(a rh44(a +(a a(

%++@a #ra(. 4ah %lta trar4 mm4@t@a ah'a

l4l4a 1A 9 ma4%4 3 %42a r@# lh r+ah +a+( #la

M 4t4@ m(alam h%rt.


201/571

>#t-N& 1m7

mar(& 1.:m 9m 0 1.:m7 %a++(& 07

#r+r-t#%& 0.:m #l+ 7 #r+r-#tt#m& 0.:m #l+ 7

l#6@4#t .#4r6 S t*t-al(& r(ht7 >#t-t2l& #rmal7 mar(-r(ht&

9m7


202/571

#rm& 6a%talN


203/571



204/571


205/571

a5 % S +%la2& #7 a5 4l S

lt-t2l& #7 mar(& 07 %a++(& 07 a5 4l l S mar(& 07

#r+r-t#%& 1%* #l+ ===7 a5 4l l a S

+%la2& l#6@7

%a++(& 3%* 3%* 3%* 0.:m7 #r+r& 1%* #l+ EEE7 #r+r-'+th& 0

:%* 1%* :%*7 a6@(r#4+-6#l#r& 7 6#l#r& >>>7 t*t-+6#rat#&

#7 '+th& 1007

html,#+2 a5 4l l a S '+th& a4t#7

a5 4l l a&h#5r S #r+r& 1%* #l+ 7

#r+r-'+th& 0 :%* 1%* :%*7 a6@(r#4+-6#l#r& ;;;7 6#l#r& >>>7


206/571


207/571

a5 4l l S lt-t2l& #7 mar(& 07

+%la2& l7 a5 4l l a S %a++(& 3%*

0.:m7 mar(-l>t& 3%*7

#r+r& 1%* #l+ =7 #r+r-#tt#m& #7

a6@(r#4+& DDE7 t*t-+6#rat#& #7 a5

4l l a&l@ S 6#l#r& =7

a5 4l l a&5t+ S 6#l#r& ;;7

a5 4l l a&l@&h#5rA a5 4l l

a&5t+&h#5r S 6#l#r& 0007

a6@(r#4+& E7 #r+r-6#l#r& 997 a5 4l

l a64rrt S a6@(r#4+& 'ht7

#r+r-#tt#m& 1%* #l+ 'ht7

>

1


208/571



209/571


210/571

'+th&190%*7 mar(&0 0 1:%* 90%*7 %a++(&1:%*7

#r+r&1%* #l+ la6@7 t*t-al(&6tr7


211/571

>

2



212/571

Mar( ar a+++ t# th +5 t# %4h th t*t a'a2 >r#m th +5.


213/571

2 Re'at!2e Merupaan model peletaan elemen se$ara relati#e ter*adap elemensebelumn'a Dapat diberian attribute tamba*an top dan le4t, untu mengatur

%ara elemen dari elemen sebelumn'a onto*-

'+th& 3:0%*7 h(ht& 100%*7 #r+r& 1%* +ah+ la6@7 a6@(r#4+-

6#l#r& 'ht7 %a++(& .:m7

position: relative; t#%&:0%*7 l>t&:0%*7

Hasil 'ang tampa di bro)ser-

>Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id


214/571

A&so'ute$ Merupaan model peletaan elemen se$ara absolute di dalam sebua*

,indo,sDapat diberian atribut tamba*an top, rig*t, bottom, dan le4t ter*adap

elemen untu mengatur posisin'a dengan pasti onto*-

'+th& 3:0%*7 h(ht& 100%*7 #r+r& 1%* +ah+ la6@7 a6@(r#4+-6#l#r&

'ht7 %a++(& .:m7

position: absolute; t#%&:0%*7 l>t&:0%*7


215/571

Hasil 'ang tampa di bro)ser-

Fixed, Model peletakkan ini hampir sama dengan model peletakkan relative, hanya

saja pada saat di windowsdi scrollke ataske ba!ah posisi "ixed tidak berubah #


216/571

>t S >l#at&l>t7 '+th&1;0%*7 mar(&07 %a++(&1m7


218/571

+5.6#tt S mar(-l>t&10%*7 #r+r-l>t&1%* #l+ (ra27 %a++(&1m7


219/571

@a+a( raa mal4 @ara %r4t a+ r( r42. Ta% (a

rlh a +@l4ar@a +ar %r4t mlal4 ra%a

latha.

r(ra@


220/571

#rml#at& l>t7 '+th& 1:0%*7 %a++(&

07 mar(& :%* 0 07 t*t-al(& r(ht7

>#rm %4tA >#rm t*taraA >#rm l6t

S '+th&a4t#7

mar(&:%* 0 0 10%*7 #r+r&1%* +ah+ CCC7

a6@(r#4+-6#l#r&EEE7

>#rm %4t&h#5rA >#rm t*tara&h#5rA >#rm

l6t&h#5rS #r+r&1%* #l+ 7

a6@(r#4+-6#l#r&7

%4t.4tt#4mt S

a6@(r#4+&BBB 4rl(84tt#.(>F #tt#m r%at-*7>#t-'(htl+7

#r+r&1%* #l+ 7 64r#r&%#tr7

%4t.4tt#4mt&h#5r S

a6@(r#4+&BBB 4rl(84tt#8h#5.(>F r%at-*7

>#rm

r S


221/571

>

@



222/571

6lar&l>t7


223/571

1agaimanakah tampilan di atas2 "impan dengan nama fle 3


224/571

>>



225/571

T(3K



253/571

Pakt!ku%

Mendesain Website Bertipe Blog (ort4olio


254/571

!etiap desainer tentu *arus mempun'ai port4olio 6amun selain mempun'ai

port4olio, ita %uga *arus mempun'ai tempat untu memamerann'a Dan

untu saat ini %alan 'ang paling e4eti4 adala* mempun'ai blog 'ang sealigus

ber4ungsi sebagai port4olio

Kenapa Blog=(ort4olio ABlog.olio R

/lasan 'ang bisa dianggap penting 'aitu,

Te%-at %en*uahkan !(e -e%!k!an$ Dengan $ara ini ita bisa lebi*

memposisian personal brand ita dan tida *an'a berperan *an'a sebagai

desainer graNs sa%a

Me%-e'!hatkan has!' ka)a$ 3ni sala* satu s'arat 'ang sangat dasar, lien

aan menggunaan %asa desain ita berdasaran apa 'ang tela* merea li*at

dari port4olio ita sebelumn'a

Men(a-atkan koneks! &au$ Website tipe Blog.olio adala* $ara 'ang tepat

arena biasan'a mempun'ai sistem omentar agar ita bisa berinterasi

dengan pengun%ung

Template Oratis Tida /an uup

3nila* 'ang men%adi permasala*an Kalau ita mau tampil uni maa ita *arus

menguba* template 'ang ada, bisa dari )arna, la'out, tipograN dan lainn'a Tetapi

sebain'a ita mendesain )ebsite Blog.olio ita dari nol Dengan begitu ita aan

memegang ontrol penu* atas semua elemen desainn'a !uda* siapR mari mulai

??



255/571

!emua Bera)al dari !itemap

!etiap )ebsite, se=simple apapun tetap membutu*an sitemap 3ni di

perluan untu mengeta*ui *alaman 'ang ita perluan dan tida itaperluan Biasan'a Ntur=Ntur )ebsite Aseperti latest $omment, popular posts,

dll %uga aan dipiiran disini !ebagai $onto*, membuat sitemap Blog.olio

seperti di ba)a* ini,


256/571

(eran$angan Wire4rameLa'out

Ta*ap selan%utn'a adala* )ire4rame Wire4rame bisa di bilang

setsagambaran asar dari )ebsite 'ang aan ita desain Biasan'a sa'a

*an'a menggunaan ertas dan bolpen untu menggambar $epat leta=

leta elemen )ebsite !etela* ita dapat setsa asarn'a, selan%utn'a ita

men$oba di (*otos*op Wire4rame 'ang sa'a ran$ang terli*at seperti di

ba)a* ini,


257/571

?;



258/571


259/571

Dengan membuat )ire4rame, maa pemiiran ita aan di 4ousan epada

4ungsi terlebi* dulu Lupaan se%ena ga'a #isual, arena di ta*ap inila* ita

bisa memiiran elemen mana 'ang paling penting, dimana ita aan

meletaan elemen itu dan bagaimana mempresentasian onten

Mulai Mendesain

, ita suda* meren$anaan semuan'a !earangla* saatn'a bergulat dengan

p*otos*op Kita bisa mulai memiiran elemen 'ang benar=benar #isual Mulai

dari )arna, 4ont, Nnis*ing, ga'a desain dan lainn'a

Dalam *al ini ita aan menggunaan ;@0 Orid !'stem !edangan 4ont Bebas

6eue aan men%adi pili*an 'ang tepat untu Logo dan Headline Adisertaan

dalam

Langa* 1

Bua template ;@0 Orid 12 olom 'ang suda* di undu* tadi di (*otos*op

;0


260/571



261/571

5ntu men'esuaian dengan resolusi monitor ma'oritas saat ini A)ides$reen

maa sebain'a ita %uga mendesain dalam bentu )ides$reen


262/571


263/571

;1



264/571


265/571

Langa* 2

Kita mulai dengan membuat ba$ground terlebi* dulu dengan menggunaan

e$tangle Tool


266/571

;2



267/571

Ounaan )arna $olat Aaga pu$at untu ba$ground Blog.olio ini !etela*

itu tamba*an testur dengan menggunaan e4e Nlter 6oise


268/571

!upa'a e4e noisen'a tida terlalu berlebi*an, gunaan masimum 2 sa%a

Dalam $onto* ini menggunaan 12


269/571

;



270/571

Langa*

Ounaan 4ont Bebas 6eue untu logo .ont ini sangat $o$o untu *eadline dan

memberian esan bold 'ang elegan /tur posisin'a se*ingga berada di tenga*=tenga* doumen Ounaan guide A trl S supa'a pas dengan grid 'ang ita

gunaan


271/571


272/571

;



282/571

Langa* @

!upa'a tida terlalu polos, maa ita aan memberian sediit e4e grunge

pada garis tersebut (ili* sala* satu la'er garis, lalu tean i$on masing 'angada di ba)a* )indo) la'er


283/571

!etela* itu pili* splatter brus* Aada di de4ault brus* dan mulaila*

^meng*apus_ garis tersebut Maa aan ter$ipta e4e ^rusa_ atau ^grunge_

tanpa meruba* bentu asli la'er garis tersebut


284/571

;?



285/571

Hasiln'a aan terli*at seperti di ba)a* ini,


286/571

Langa* >

!upa'a lebi* %elas user sedang berada di *alaman tertentu, ita aan

membuat status *alaman 'ang ati4 pada na#igasi utama Ounaane$tangle Tool lagi, dan posisian di ba)a* Home


287/571

;;



288/571

Buat esan seperti pita dengan menggunaan bentu segitiga 'ang di atur

se$ara berderet


289/571


290/571

100



291/571


292/571

Hasil sementara bentu pita terli*at seperti gambar di ba)a* ini,


293/571

101



294/571

Langa* ?

!elan%utn'a ita aan menamba*an beberapa e4e la'er st'les pada pita

tersebut agar tida terlalu ^datar_


295/571


296/571

102



297/571


298/571

K*usus untu e4e (attern #erla', sa'a suda* mempun'ai bentu pattern

seperti gambar di ba)a* ini Kamu %uga bisa beresperimen dengan pattern 'ang

lain


299/571

3nila* *asil e4e pada pita setela* semua e4e la'er st'les di gunaan

10



300/571


301/571

PRAKTIKUM 6


302/571

(ada bagian e 2 ini ita aan men'elesaian elemen dari Blog.olio tersebut,

'aitu

^posting terbaru_ , ^s*el4 port4olio_ dan ^4ooter_

10==

6==

?==

@==


478/571

A==

1;



479/571

-enerated

ontent

Propert"

$es%ription

&alues

'(

)


480/571

N

W*C

content

-enerates content in a

string

5

6

9

document" 1sed with the

url


481/571

:efore and :after pseudo7

counter(name)

elements

counter(name list-


482/571

style-type)

counters(name string)

counters(name string


483/571

list-style-type)

attr(B)


484/571

open7


485/571

no7open7


486/571

ets how much the counter

none

9

increments on each

identifier number

occurrence of a selector


487/571

counter7reset

,ets the (alue the counter is

none

9

set to on each occurrence of

identifier number


488/571

a selector


489/571

marks

string string

Cist

and

Marker


490/571

Propert"

$es%ription

&alues

'(

)

N

W*C

list7style

+ shorthand property for

list-style-type

4

5

6

5

setting all of the properties

list-style-position


491/571

for a list in one declaration

list-style-image

list7style7image

ets an image as the list7

none

4

5

6

5


492/571

item marker

url

list7style7position

ets where the list7item

inside

4

5

6

5

marker is placed in the list


493/571

outside

list7style7type

,ets the type of the list7item

none

4

5

4

5


494/571

marker

disc


495/571

circle

s


496/571

decimal

decimal7leading7ero

lower7roman


497/571

upper7roman

lower7alpha


498/571

upper7alpha

lower7greek


499/571

lower7latin

upper7latin


500/571

herew

armenian


501/571

georgian

c!k7ideographic

hiragana


502/571

katakana

hiragana7iroha


503/571

katakana7iroha

marker7offset

auto

5

?

9


504/571

length


505/571

1


506/571

Margin

Propert"

$es%ription

&alues

'(

)

N

W*C

margin


margin-top

4

5

4

5

setting the margin

margin-right

properties in one declaration margin-bottom


507/571

margin-left

margin7ottom

ets the ottom margin of

auto

4

5

4

5

an element


508/571

length

%

margin7left


509/571

ets the left margin of an

auto

;

5

4

5

element

length


510/571

%

margin7right

ets the right margin of an

auto

;

5

4


511/571

5

element

length

%


512/571

margin7top

ets the top margin of an

auto

;

5

4

5

element

length


513/571

%

&utlines


514/571


515/571

Propert"

$es%ription

&alues

'(

)

N

W*C

outline


outline-color

7

5">

7

9


516/571

setting all the outline

outline-style

properties in one declaration

outline-width


517/571

outline7color

ets the color of the outline

color

7

5">

7

9

around an element

inert


518/571

outline7style

ets the style of the outline

none

7

5">

7

9

around an element

dotted


519/571

dashed


520/571

solid

doule


521/571

grooe

ridge


522/571

inset

outset


523/571

outline7width

ets the width of the outline

thin

7

5">

7

9

around an element

medium


524/571

thick

length


525/571

Padding


526/571

Propert"

$es%ription

&alues

'(

)

N

W*C


527/571

padding


padding-top

4

5

4

5


528/571

setting all of the padding

padding-right

properties in one declaration

padding-bottom


529/571

padding-left

padding7ottom

ets the ottom padding of

length

4


530/571

5

4

5

an element

%

padding7left

ets the left padding of an


531/571

length

4

5

4

5

element

%

padding7right


532/571

ets the right padding of an

length

4

5

4

5

element

%


533/571

padding7top

ets the top padding of an

length

4

5

4

5

element

%


534/571

Positioning


535/571

Propert"

$es%ription

&alues

'(

)

N

W*C

ottom

ets how far the ottom

auto

>


536/571

5

6

9

1


537/571

edge of an element is

%

aoe/elow the ottom

length

edge of the parent element

clip


538/571

ets the shape of an

shape

4

5

6

9

element" *he element is

auto

clipped into this shape, and

displayed


539/571

left

ets how far the left edge of

auto

4

5

4

9

an element is to the

%

right/left of the left edge of

length


540/571

the parent element

oerflow

ets what happens if the

isile

4

5

6

9

content of an element

hidden


541/571

oerflow its area

scroll

auto

position

Places an element in a

static

4

5

4

9


542/571

static, relatie, asolute or

relatie

fi8ed position

asolute

fi8ed


543/571

right

ets how far the right edge

auto

>

5

6

9

of an element is to the

%

left/right of the right edge of

length

the parent element


544/571

top

ets how far the top edge of

auto

4

5

4

9

an element is aoe/elow

%

the top edge of the parent

length


545/571

element

ertical7align

ets the ertical alignment

aseline

4

5

4

5

of an element

su


546/571

super

top

te8t7top


547/571

middle

ottom

te8t7ottom


548/571

length

%

7inde8

ets the stack order of an

auto

4

5

6

9


549/571

element

number

*ale

Propert"

$es%ription


550/571

&alues

'(

)

N

W*C

order7collapse

ets whether the tale

collapse

>

5

?

9

orders are collapsed into a

separate


551/571

single order or detached as

in standard #*MC


552/571

order7spacing

ets the distance that

length length

>M

5

6

9

separates cell orders (only

for the Dseparated ordersD


553/571

model)

caption7side

ets the position of the

top

>M

5

6

9

tale caption

ottom


554/571

left

right

empty7cells

ets whether or not to show

show

>M

5

6

9


555/571

empty cells in a tale (only

hide

for the Dseparated ordersD

model)


556/571

tale7layout

ets the algorithm used to

auto

>

5

6

9

display the tale cells, rows,

fi8ed


557/571

1


558/571

and columns

*e8t

Propert"

$es%ription

&alues

'(

)

N

W*C

color

ets the color of a te8t

color

;

5

4

5

direction

ets the te8t direction

ltr

6

5

6

9


559/571

rtl

line7height

ets the distance etween

normal

4

5

4

5

lines

number

length


560/571

%

letter7spacing

Increase or decrease the

normal

4

5

6

5

space etween characters

length

te8t7align

+ligns the te8t in an


561/571

left

4

5

4

5

element

right

center


562/571

!ustify

te8t7decoration

+dds decoration to te8t

none

4

5

4

5

underline


563/571

oerline

line7through

link

te8t7indent

Indents the first line of te8t

length

4


564/571

5

4

5

in an element

%

te8t7shadow

none

color


565/571

length

te8t7transform

ontrols the letters in an

none

4

5

4

5

element

capitalie

uppercase


566/571

lowercase

unicode7idi

normal

>

9

emed


567/571

idi7oerride

white7space

ets how white space inside

normal

>

5

4

5

an element is handled

pre

nowrap


568/571

word7spacing

Increase or decrease the

normal

6

5

6

5

space etween words

length


569/571

1


570/571

REFERENSI

Haim, Luman, 2010, (ikin 4ebsite Super 5eren *engan -H- 6 17uer, Loomedia,

Fog'aarta *ttp-%urusgraNs$omtutorialmendesain=)ebsite=bertipe=blog=port4olio=bagian=1+2 *ttp-id)iipediaorg)ii/dobe8Dream)ea#er

*ttp-id)iipediaorg)ii/dobe8(*otos*op


571/571

moduldesweb2012 vok

Documents