Download - MODULDesWeb2012 Vok
-
7/25/2019 MODULDesWeb2012 Vok
1/571
-
7/25/2019 MODULDesWeb2012 Vok
2/571
MODUL
[2012]
DESAIN WEB
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
4/571
DAFTAR ISI
o#er1
Da4tar 3si 2
Topi 1 XHTML
Topi 2 Dream)ea#er :
Topi !! :;
Topi
-
7/25/2019 MODULDesWeb2012 Vok
5/571
-
7/25/2019 MODULDesWeb2012 Vok
6/571
2
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
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
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
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
-
7/25/2019 MODULDesWeb2012 Vok
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-
-
7/25/2019 MODULDesWeb2012 Vok
10/571
* /nda membuat strutur utama, selan%utn'a dapat dilan%utan e pembuatan
blo *eader Blo *eader terleta di antara tag
-
7/25/2019 MODULDesWeb2012 Vok
11/571
epla$ed /dobe OoLi#ein t*e
-
7/25/2019 MODULDesWeb2012 Vok
154/571
A(o&e
reati#e !uite series
-
7/25/2019 MODULDesWeb2012 Vok
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-
-
7/25/2019 MODULDesWeb2012 Vok
185/571
-
7/25/2019 MODULDesWeb2012 Vok
186/571
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
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*-
-
7/25/2019 MODULDesWeb2012 Vok
188/571
-
7/25/2019 MODULDesWeb2012 Vok
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. . .
-
7/25/2019 MODULDesWeb2012 Vok
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-
-
7/25/2019 MODULDesWeb2012 Vok
191/571
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
192/571
-
7/25/2019 MODULDesWeb2012 Vok
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
@:
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
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-
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
196/571
-
7/25/2019 MODULDesWeb2012 Vok
197/571
-
7/25/2019 MODULDesWeb2012 Vok
198/571
@>
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
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-
-
7/25/2019 MODULDesWeb2012 Vok
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.
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
202/571
#rm& 6a%talN
-
7/25/2019 MODULDesWeb2012 Vok
203/571
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
204/571
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
206/571
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
208/571
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
209/571
-
7/25/2019 MODULDesWeb2012 Vok
210/571
'+th&190%*7 mar(&0 0 1:%* 90%*7 %a++(&1:%*7
#r+r&1%* #l+ la6@7 t*t-al(&6tr7
-
7/25/2019 MODULDesWeb2012 Vok
211/571
>
2
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
212/571
Mar( ar a+++ t# th +5 t# %4h th t*t a'a2 >r#m th +5.
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
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 #
-
7/25/2019 MODULDesWeb2012 Vok
216/571
>t S >l#at&l>t7 '+th&1;0%*7 mar(&07 %a++(&1m7
-
7/25/2019 MODULDesWeb2012 Vok
218/571
+5.6#tt S mar(-l>t&10%*7 #r+r-l>t&1%* #l+ (ra27 %a++(&1m7
-
7/25/2019 MODULDesWeb2012 Vok
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@
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
221/571
>
@
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
222/571
6lar&l>t7
-
7/25/2019 MODULDesWeb2012 Vok
223/571
1agaimanakah tampilan di atas2 "impan dengan nama fle 3
-
7/25/2019 MODULDesWeb2012 Vok
224/571
>>
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
225/571
T(3K
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
253/571
Pakt!ku%
Mendesain Website Bertipe Blog (ort4olio
-
7/25/2019 MODULDesWeb2012 Vok
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
??
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
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,
-
7/25/2019 MODULDesWeb2012 Vok
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,
-
7/25/2019 MODULDesWeb2012 Vok
257/571
?;
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
258/571
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
260/571
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
262/571
-
7/25/2019 MODULDesWeb2012 Vok
263/571
;1
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
264/571
-
7/25/2019 MODULDesWeb2012 Vok
265/571
Langa* 2
Kita mulai dengan membuat ba$ground terlebi* dulu dengan menggunaan
e$tangle Tool
-
7/25/2019 MODULDesWeb2012 Vok
266/571
;2
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
267/571
Ounaan )arna $olat Aaga pu$at untu ba$ground Blog.olio ini !etela*
itu tamba*an testur dengan menggunaan e4e Nlter 6oise
-
7/25/2019 MODULDesWeb2012 Vok
268/571
!upa'a e4e noisen'a tida terlalu berlebi*an, gunaan masimum 2 sa%a
Dalam $onto* ini menggunaan 12
-
7/25/2019 MODULDesWeb2012 Vok
269/571
;
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
271/571
-
7/25/2019 MODULDesWeb2012 Vok
272/571
;
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
284/571
;?
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
285/571
Hasiln'a aan terli*at seperti di ba)a* ini,
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
287/571
;;
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
288/571
Buat esan seperti pita dengan menggunaan bentu segitiga 'ang di atur
se$ara berderet
-
7/25/2019 MODULDesWeb2012 Vok
289/571
-
7/25/2019 MODULDesWeb2012 Vok
290/571
100
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
291/571
-
7/25/2019 MODULDesWeb2012 Vok
292/571
Hasil sementara bentu pita terli*at seperti gambar di ba)a* ini,
-
7/25/2019 MODULDesWeb2012 Vok
293/571
101
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
294/571
Langa* ?
!elan%utn'a ita aan menamba*an beberapa e4e la'er st'les pada pita
tersebut agar tida terlalu ^datar_
-
7/25/2019 MODULDesWeb2012 Vok
295/571
-
7/25/2019 MODULDesWeb2012 Vok
296/571
102
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
297/571
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
299/571
3nila* *asil e4e pada pita setela* semua e4e la'er st'les di gunaan
10
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
300/571
-
7/25/2019 MODULDesWeb2012 Vok
301/571
PRAKTIKUM 6
-
7/25/2019 MODULDesWeb2012 Vok
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==
?==
@==
-
7/25/2019 MODULDesWeb2012 Vok
478/571
A==
1;
Modul Desain Web 77 (rogram Diploma 333 T3 .M3(/ 56! 77 le* - 4endi8a%i9mipaunsa$id
-
7/25/2019 MODULDesWeb2012 Vok
479/571
-enerated
ontent
Propert"
$es%ription
&alues
'(
)
-
7/25/2019 MODULDesWeb2012 Vok
480/571
N
W*C
content
-enerates content in a
string
5
6
9
document" 1sed with the
url
-
7/25/2019 MODULDesWeb2012 Vok
481/571
:efore and :after pseudo7
counter(name)
elements
counter(name list-
-
7/25/2019 MODULDesWeb2012 Vok
482/571
style-type)
counters(name string)
counters(name string
-
7/25/2019 MODULDesWeb2012 Vok
483/571
list-style-type)
attr(B)
-
7/25/2019 MODULDesWeb2012 Vok
484/571
open7
-
7/25/2019 MODULDesWeb2012 Vok
485/571
no7open7
-
7/25/2019 MODULDesWeb2012 Vok
486/571
ets how much the counter
none
9
increments on each
identifier number
occurrence of a selector
-
7/25/2019 MODULDesWeb2012 Vok
487/571
counter7reset
,ets the (alue the counter is
none
9
set to on each occurrence of
identifier number
-
7/25/2019 MODULDesWeb2012 Vok
488/571
a selector
-
7/25/2019 MODULDesWeb2012 Vok
489/571
marks
string string
Cist
and
Marker
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
491/571
for a list in one declaration
list-style-image
list7style7image
ets an image as the list7
none
4
5
6
5
-
7/25/2019 MODULDesWeb2012 Vok
492/571
item marker
url
list7style7position
ets where the list7item
inside
4
5
6
5
marker is placed in the list
-
7/25/2019 MODULDesWeb2012 Vok
493/571
outside
list7style7type
,ets the type of the list7item
none
4
5
4
5
-
7/25/2019 MODULDesWeb2012 Vok
494/571
marker
disc
-
7/25/2019 MODULDesWeb2012 Vok
495/571
circle
s
-
7/25/2019 MODULDesWeb2012 Vok
496/571
decimal
decimal7leading7ero
lower7roman
-
7/25/2019 MODULDesWeb2012 Vok
497/571
upper7roman
lower7alpha
-
7/25/2019 MODULDesWeb2012 Vok
498/571
upper7alpha
lower7greek
-
7/25/2019 MODULDesWeb2012 Vok
499/571
lower7latin
upper7latin
-
7/25/2019 MODULDesWeb2012 Vok
500/571
herew
armenian
-
7/25/2019 MODULDesWeb2012 Vok
501/571
georgian
c!k7ideographic
hiragana
-
7/25/2019 MODULDesWeb2012 Vok
502/571
katakana
hiragana7iroha
-
7/25/2019 MODULDesWeb2012 Vok
503/571
katakana7iroha
marker7offset
auto
5
?
9
-
7/25/2019 MODULDesWeb2012 Vok
504/571
length
-
7/25/2019 MODULDesWeb2012 Vok
505/571
1
-
7/25/2019 MODULDesWeb2012 Vok
506/571
Margin
Propert"
$es%ription
&alues
'(
)
N
W*C
margin
+ shorthand property for
margin-top
4
5
4
5
setting the margin
margin-right
properties in one declaration margin-bottom
-
7/25/2019 MODULDesWeb2012 Vok
507/571
margin-left
margin7ottom
ets the ottom margin of
auto
4
5
4
5
an element
-
7/25/2019 MODULDesWeb2012 Vok
508/571
length
%
margin7left
-
7/25/2019 MODULDesWeb2012 Vok
509/571
ets the left margin of an
auto
;
5
4
5
element
length
-
7/25/2019 MODULDesWeb2012 Vok
510/571
%
margin7right
ets the right margin of an
auto
;
5
4
-
7/25/2019 MODULDesWeb2012 Vok
511/571
5
element
length
%
-
7/25/2019 MODULDesWeb2012 Vok
512/571
margin7top
ets the top margin of an
auto
;
5
4
5
element
length
-
7/25/2019 MODULDesWeb2012 Vok
513/571
%
&utlines
-
7/25/2019 MODULDesWeb2012 Vok
514/571
-
7/25/2019 MODULDesWeb2012 Vok
515/571
Propert"
$es%ription
&alues
'(
)
N
W*C
outline
+ shorthand property for
outline-color
7
5">
7
9
-
7/25/2019 MODULDesWeb2012 Vok
516/571
setting all the outline
outline-style
properties in one declaration
outline-width
-
7/25/2019 MODULDesWeb2012 Vok
517/571
outline7color
ets the color of the outline
color
7
5">
7
9
around an element
inert
-
7/25/2019 MODULDesWeb2012 Vok
518/571
outline7style
ets the style of the outline
none
7
5">
7
9
around an element
dotted
-
7/25/2019 MODULDesWeb2012 Vok
519/571
dashed
-
7/25/2019 MODULDesWeb2012 Vok
520/571
solid
doule
-
7/25/2019 MODULDesWeb2012 Vok
521/571
grooe
ridge
-
7/25/2019 MODULDesWeb2012 Vok
522/571
inset
outset
-
7/25/2019 MODULDesWeb2012 Vok
523/571
outline7width
ets the width of the outline
thin
7
5">
7
9
around an element
medium
-
7/25/2019 MODULDesWeb2012 Vok
524/571
thick
length
-
7/25/2019 MODULDesWeb2012 Vok
525/571
Padding
-
7/25/2019 MODULDesWeb2012 Vok
526/571
Propert"
$es%ription
&alues
'(
)
N
W*C
-
7/25/2019 MODULDesWeb2012 Vok
527/571
padding
+ shorthand property for
padding-top
4
5
4
5
-
7/25/2019 MODULDesWeb2012 Vok
528/571
setting all of the padding
padding-right
properties in one declaration
padding-bottom
-
7/25/2019 MODULDesWeb2012 Vok
529/571
padding-left
padding7ottom
ets the ottom padding of
length
4
-
7/25/2019 MODULDesWeb2012 Vok
530/571
5
4
5
an element
%
padding7left
ets the left padding of an
-
7/25/2019 MODULDesWeb2012 Vok
531/571
length
4
5
4
5
element
%
padding7right
-
7/25/2019 MODULDesWeb2012 Vok
532/571
ets the right padding of an
length
4
5
4
5
element
%
-
7/25/2019 MODULDesWeb2012 Vok
533/571
padding7top
ets the top padding of an
length
4
5
4
5
element
%
-
7/25/2019 MODULDesWeb2012 Vok
534/571
Positioning
-
7/25/2019 MODULDesWeb2012 Vok
535/571
Propert"
$es%ription
&alues
'(
)
N
W*C
ottom
ets how far the ottom
auto
>
-
7/25/2019 MODULDesWeb2012 Vok
536/571
5
6
9
1
-
7/25/2019 MODULDesWeb2012 Vok
537/571
edge of an element is
%
aoe/elow the ottom
length
edge of the parent element
clip
-
7/25/2019 MODULDesWeb2012 Vok
538/571
ets the shape of an
shape
4
5
6
9
element" *he element is
auto
clipped into this shape, and
displayed
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
540/571
the parent element
oerflow
ets what happens if the
isile
4
5
6
9
content of an element
hidden
-
7/25/2019 MODULDesWeb2012 Vok
541/571
oerflow its area
scroll
auto
position
Places an element in a
static
4
5
4
9
-
7/25/2019 MODULDesWeb2012 Vok
542/571
static, relatie, asolute or
relatie
fi8ed position
asolute
fi8ed
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
545/571
element
ertical7align
ets the ertical alignment
aseline
4
5
4
5
of an element
su
-
7/25/2019 MODULDesWeb2012 Vok
546/571
super
top
te8t7top
-
7/25/2019 MODULDesWeb2012 Vok
547/571
middle
ottom
te8t7ottom
-
7/25/2019 MODULDesWeb2012 Vok
548/571
length
%
7inde8
ets the stack order of an
auto
4
5
6
9
-
7/25/2019 MODULDesWeb2012 Vok
549/571
element
number
*ale
Propert"
$es%ription
-
7/25/2019 MODULDesWeb2012 Vok
550/571
&alues
'(
)
N
W*C
order7collapse
ets whether the tale
collapse
>
5
?
9
orders are collapsed into a
separate
-
7/25/2019 MODULDesWeb2012 Vok
551/571
single order or detached as
in standard #*MC
-
7/25/2019 MODULDesWeb2012 Vok
552/571
order7spacing
ets the distance that
length length
>M
5
6
9
separates cell orders (only
for the Dseparated ordersD
-
7/25/2019 MODULDesWeb2012 Vok
553/571
model)
caption7side
ets the position of the
top
>M
5
6
9
tale caption
ottom
-
7/25/2019 MODULDesWeb2012 Vok
554/571
left
right
empty7cells
ets whether or not to show
show
>M
5
6
9
-
7/25/2019 MODULDesWeb2012 Vok
555/571
empty cells in a tale (only
hide
for the Dseparated ordersD
model)
-
7/25/2019 MODULDesWeb2012 Vok
556/571
tale7layout
ets the algorithm used to
auto
>
5
6
9
display the tale cells, rows,
fi8ed
-
7/25/2019 MODULDesWeb2012 Vok
557/571
1
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
559/571
rtl
line7height
ets the distance etween
normal
4
5
4
5
lines
number
length
-
7/25/2019 MODULDesWeb2012 Vok
560/571
%
letter7spacing
Increase or decrease the
normal
4
5
6
5
space etween characters
length
te8t7align
+ligns the te8t in an
-
7/25/2019 MODULDesWeb2012 Vok
561/571
left
4
5
4
5
element
right
center
-
7/25/2019 MODULDesWeb2012 Vok
562/571
!ustify
te8t7decoration
+dds decoration to te8t
none
4
5
4
5
underline
-
7/25/2019 MODULDesWeb2012 Vok
563/571
oerline
line7through
link
te8t7indent
Indents the first line of te8t
length
4
-
7/25/2019 MODULDesWeb2012 Vok
564/571
5
4
5
in an element
%
te8t7shadow
none
color
-
7/25/2019 MODULDesWeb2012 Vok
565/571
length
te8t7transform
ontrols the letters in an
none
4
5
4
5
element
capitalie
uppercase
-
7/25/2019 MODULDesWeb2012 Vok
566/571
lowercase
unicode7idi
normal
>
9
emed
-
7/25/2019 MODULDesWeb2012 Vok
567/571
idi7oerride
white7space
ets how white space inside
normal
>
5
4
5
an element is handled
pre
nowrap
-
7/25/2019 MODULDesWeb2012 Vok
568/571
word7spacing
Increase or decrease the
normal
6
5
6
5
space etween words
length
-
7/25/2019 MODULDesWeb2012 Vok
569/571
1
-
7/25/2019 MODULDesWeb2012 Vok
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
-
7/25/2019 MODULDesWeb2012 Vok
571/571