cara membuat desain webhh

7/23/2019 Cara Membuat Desain Webhh

http://slidepdf.com/reader/full/cara-membuat-desain-webhh 1/38

cara membuat desain web

Sunday, February 17, 2013

Membuat Desain Website Berbasis HTML Dengan !te"ad##

$engena%an Tag $ada HTML

Da%am HTML tag meru"a&an c!de se&a%igus "erinta' dimana &ita da"at

mengatur tam"i%an yang &ita ingin&an( Tag "ada HTML se%a%u diawa%i dengan

)*+ dan ditutu" dengan )*+ dimana * ada%a' "erinta' dari a"a yang &ita

ingin&an(

- Da.tar Tag $ada HTML

/L/M/ DS

enis D!&umen )HTML+)HTML+ terda"at "ada awa% dan a&'ir

dari 4%e HTML5

udu% )T6TL/+)T6TL/+ 'arus se%a%u terda"at "ada

mu&adima'5

Mu&adima'

Header5

)H/D+)H/D+ &eterangan umum, se"erti

udu% dsb(5

Batang Tubu' )B8D9+)B8D9+ isi dari 'a%aman HTML5

http://riyant17.blogspot.co.id/2013/02/membuat-desain-website-berbasis-html.html

http://riyant17.blogspot.co.id/2013/02/membuat-desain-website-berbasis-html.html



F8MT TM$6L

Huru. Teba% )B+)B+ B!%d5

Huru. Miring )6+)6+ 6ta%ic5

:aris Bawa' );+);+ ;nder%ine < arang

diguna&an5

ata Tenga' )=/T/+)=/T/+ =enter < ber%a&u untu&

te&s mau"un gambar5

Huru. >edi" )BL6>+)BL6>+ B%in&ing < tag ter%ucu

sam"ai &ini5

;&uran Huru. )F8T S6?/@A+)F8T+ F!nt Sie < b!%e' diisi

dari 1 sam"ai 75

Warna Huru. )F8T =8L8@CEEEEE

EC+)F8T+

$i%i' enis

Huru.

)F8T

F=/@CC+)F8T+

$/M6SH

$aragra. )$+)$+ tag "enutu"

sering&a%i ta&

di"er%u&an5

%ign Te*t )$ L6:@L/FTG=/T/G

6:HT+)$+

$nda' Baris )B+ "inda' &e baris

beri&ut5

:aris Datar )H+ H!ri!nta% u%e5

$enataan Leta&

:aris

)H L6:@L/FTG6:HTG

=/T/+

Teba% :aris )H S6?/@A+ da%am satuan "i*e%5

Lebar :aris )H W6DTH@A+ da%am satuan "i*e%5

Lebar :aris

$ersentasi

)H W6DTH@CC+ da%am "ersentasi

ter'ada" %ebar



'a%aman5

LT B/L>: D W

Latar Be%a&ang

:ambar

)B8D9

B=>:8;D@C;LC+

Ti%ed Bac&gr!und5

Warna Latar

Be%a&ang

)B8D9 B:=8L8@CEE

EEEEC

Bac&gr!und =!%!r <

urutanI

mera''iaubiru5

Warna Huru. Te&s )B8D9 T/JT@CEEEEE

EC+

TB/L

ancangan

Tabe%

)TBL/+)TBL/+

:aris Batas

Tabe%

)TBL/ B8D/@A

+)TBL/+

Lebar Tabe% )TBL/ W6DTH@A+ da%am satuan "i*e%5

Lebar Tabe%$ersentasi

)TBL/ W6DTH@CC+ da%am satuan "ersenter'ada" %ebar

'a%aman5

Baris da%am

Tabe%

)T+)T+

$enataan Leta&

Baris

)T L6:@L/FTG6:HTG

=/T/GM6DDL/GB8TT8M

KL6:@T8$GB8TT8MG

M6DDL/+

Se% da%am Tabe% )TD+)TD+ 'arus ada da%am

setia" baris tabe%5

$enataan Leta&

Se%

)TD L6:@L/FTG6:HTG

=/T/GM6DDL/GB8TT8M

KL6:@T8$GB8TT8MG

M6DDL/+

>e"a%a Tabe% )TH+)TH+ Tab%e Header <

se"erti data dengan

B!%d dan =enter5



$enataan Leta&

>e"a%a Tabe%

)TH L6:@L/FTG6:HTG

=/T/GM6DDL/GB8TT8M

KL6:@T8$GB8TT8MG

M6DDL/+

Warna >e"a%a Tabe%

)TH B:=8L8@CEEEEEEC+

( Dasar dasar HTML

1( Membuat udu% tab da%am 'a%aman web, bu&a n!te"ad## ter%ebi' da'u%u,

&emudian &eti&an c!de dibawa' iniI

)'tm%+

)'ead+

)tit%e+ My First HTML $r!ect )tit%e+

)'ead+

)b!dy B:=8L8@:reen T/JT@ed+

W/L=8M/ T8 M9 W/BS6T/

)b!dy+

)b!dy bgc!%!r@00N00+

)'tm%+

Lang&a' se%anutnya sim"an da%am .!rmat HTML dan bu&a 4%e dengan 4re.!*atau seenisnya, ma&a 'asi%nya a&an se"erti "ada gambar 1 beri&utI



:ambar 1( udu% Tab Ha%aman

2( Mengatur "aragra. te*s, bu&a n!te"ad## &emudin &eti&an c!de dibawa'

iniI

)'tm%+

)'ead+

)tit%e+ Tag $, Br dan Hr )tit%e+

)'ead+

)b!dy+

)"+6ni ada%a' "aragra. "ertama, yang berisi 3 baris( Baris satu, dua dan tiga(

)br+)br+)"+

)"+6ni ada%a' "aragra. &erdua, yang berisi garis '!ri!nta%)"+

)'r+ 6ni ada%a' garis '!ri!nta%(

)b!dy+


)'tm%+

Lang&a' se%anutnya sim"an da%am .!rmat HTML dan bu&a 4%e dengan 4re.!*

atau seenisnya, ma&a 'asi%nya a&an se"erti "ada gambar 2 beri&utI

:ambar 2( Mengatur $aragra.

3( Mengatur u&uran 'uru., bu&a n!te"ad##, &emudian &eti&an c!de dibawa'iniI



)'tm%+

)'ead+

)tit%e+ Tag Heading )tit%e+

)'ead+

)b!dy+

)'1+ Heading 1 )'1+

)'2+ Heading 2 )'2+

)'3+ Heading 3 )'3+

)'O+ Heading O )'O+

)'P+ Heading P )'P+

)'Q+ Heading Q )'Q+

)b!dy+


)'tm%+



:ambar 3( ;&uran Huru.

O( Mengatur .!rmat te*s, Bu&a n!te"ad##, &emudian &eti&an c!de dibawa'

iniI



)'tm%+

)'ead+

)tit%e+.!rmat tu%isan)tite%e+

)'ead+

)b!dy+

te&s n!rma% )br+

)sma%%+ te&s sma%% )sma%%+)br+

)big+ te&s big)big+)br+

)b+ te&s teba% )b+)br+

)i+ te&s miring )i+)br+

)u+ te&s bergaris bawa' )u+)br+

=!nt!' su"erscri"t I * )su"+2)su"+)br+

=!nt!' subscri"t I H)sub+2)sub+8)br+

)stri&e+ 6ni te&s terc!ret )stri&e+)br+

).!nt sie @ P .ace @ Rerdana+

mengguna&an tag .!nt

).!nt+

)b!dy+

)b!dy B:=8L8 @C00FF00C+

)'tm%+


atau seenisnya, ma&a 'asi%nya a&an se"erti "ada gambar O beri&utI



:ambar O( F!rmat tu%isan

P( Membuat .r!m &!mentar, bu&a n!te"ad##, &emudian &eti&an c!de

dibawa' iniI

)'tm%+

)'ead+

)tit%e+ Fr!m &!mentar )tit%e+

)'ead+

)b!dy+

)tab%e+

)tr+

)tdc!%s"an@C3C+nbs")td+)tr+)tr+

)td c!%s"an@C3C+)'3+Si%a'&an Ber&!mentar I )'3+)td+

)tr+

)tr+

)td+ama)td+

)td+I)td+

)td+)in"ut ty"e@te*t name@CnamaC+)td+

)tr+

)tr+

)td+/mai%)td+



)td+I)td+

)td+)in"ut ty"e@te*t name@Cemai%C+)td+

)tr+

)tr+

)td Ra%ign@t!"+>!mentar)td+

)td Ra%ign@t!"+I)td+

)td+)te*tarea name@C&!mentarC r!ws@Q widt'@200+)te*tarea+)td+

)tr+

)tr+

)td c!%s"an@C3C+)in"ut ty"e@submit name@CsubmitC

Ra%ue@submit+)td+

)tr+

)tab%e+

)b!dy+

)b!dy B:=8L8 @C00FF00C+

)'tm%+


atau seenisnya, ma&a 'asi%nya a&an se"erti "ada gambar P beri&utI

:ambar P( Fr!m &!mentar

Q( Mengatur &!%!m, bu&a n!te"ad## &emudian &eti&an c!de dibawa' iniI



)'tm%+

)'ead+

)tit%e+warna<warna)tit%e+

)'ead+

)b!dy+

)tab%e widt'@C300C b!rder@C1C+

)tr+

)td c!%s"an@C3C a%ign@CcenterC+warna<warna )td+

)tr+

)tr+

)td bgc!%!r@C00FF00C+Hiau)td+

)td bgc!%!r@CFFFF00C+>uning)td+

)td bgc!%!r@CFF0000C+Mera' )td+

)tr+

)tr+

)td bgc!%!r@CUUUUUUC+bu<abu)td+

)td bgc!%!r@C0000FFC+Biru)td+

)td bgc!%!r@CFFUU00C+8range)td+

)tr+

)tr+

)td bgc!%!r@CQQ3300C+=!&e%at)td+

)td bgc!%!r@C33UU==C+Biru muda)td+

)td bgc!%!r@CFF00FFC+Mera' muda)td+

)tr+

)tab%e+

)b!dy+

)b!dy B:=8L8 @C00FF00C+



)'tm%+


atau seenisnya, ma&a 'asi%nya a&an se"erti "ada gambar Q beri&utI

:ambar Q( Tabe%

B( Hy"er%in&

1( Membuat 'y"er%in& &e'a%aman web %ain, bu&a n!te"ad##, &emudian

&eti&an atau c!"y saa c!de dibawa' iniI

)'tm%+

)'ead+

)tit%e+ udu% tab )tit%e+

)'ead+

)b!dy+

6ni 'y"er%in& &e w!rd"ress

)a 're.@C'tt"Iwww(w!rd"ress(c!mC tit%e@CMasuw!rd"ressC+ W!rd"ress

)a+

)br+>%i& dan masu& &e ya'!!)a 're.@C'tt"Iwww(ya'!!(c!mC tit%e@CMasu&

ya'!!C+ 9a'!! )a+

)br+Masu& &e .aceb!!& anda

)a 're.@C'tt"I'tt"Iwww(.aceb!!&(c!mC tit%e@CMasu& &e .aceb!!&C+

Faceb!!& )a+

)b!dy+



)b!dy B:=8L8 @C00FF00C+

)'tm%+



:ambar 7 %in& 'a%aman web %ain

2( Membuat 'y"er%in& antar bagian da%am web, bu&a n!te"ad##, &emudian

&eti&an atau c!"y saa c!de dibawa' iniI

)'tm%+

)'ead+

)tit%e+ udu% tab )tit%e+

)'ead+

)b!dy+

)a're.@C4%eI=I;sers=8M$VD!cumentsHTML(1desain20web'!me('tm%Ctit%e@C&e uma'C+)img

src@C4%eI=I;sers=8M$VD!cumentsHTML(1gambar:ra"'ic1("gC

b!rder@C0C widt'@C0C 'eig't@C30C+)a+

)a're.@C4%eI=I;sers=8M$VD!cumentsHTML(1desain20web"r!4%('tm%C

tit%e@C$r!4%&uC+)img

src@C4%eI=I;sers=8M$VD!cumentsHTML(1gambar"r!4%("gC b!rder@C0C

widt'@C100C 'eig't@C30C+)a+

)a're.@C4%eI=I;sers=8M$VD!cumentsHTML(1'tm%Xc!%!rs('tm%C

tit%e@C>!de Warna $ada HTMLC+)img



src@C4%eI=I;sers=8M$VD!cumentsHTML(1gambar>!de20Warna("gC

b!rder@C0C widt'@C1P0C 'eig't@C30C+)a+

)a 're.@C4%eI=I;sers=8M$VD!cumentsHTML(1&um"u%an20"uisi('tm%C

tit%e@C&um"u%an >ata<&ata MutiaraC+)img

src@C4%eI=I;sers=8M$VD!cumentsHTML(1gambar&ata20&ata("gCb!rder@C0C widt'@C100C 'eig't@C30C+)a+

)b!dy+

)b!dy B:=8L8 @C00FF00C+

)'tm%+


atau seenisnya, ma&a 'asi%nya a&an se"erti "ada gambar beri&utI

:ambar ( Lin& ntar Bagian Da%am Web

=( Membuat Website Seder'ana

1( Membuat 'a%aman %!gin "ada website, bu&a n!te"ad##, &emudin &eti&an

atau c!"y saa c!de dibawa' iniI

)'tm%+

)'ead+

)tit%e+%!gin web)tit%e+)%in& re%@Yic!nY 're.@YgambarB("ngY+

)'ead+

)b!dy+

)" a%ign@CcenterC+ ).!nt sie@CQC c!%!r@CFFQQ00C +



Si%a'&an mengisi data yang ada di bawa' untu& masu& &e website

saya I5).!nt+

)"+

)tab%e a%ign@CcenterC+

)td+).!rm met'!d@C"!stC acti!n@C'!me('tm%C+)%abe%+).!nt

c!%!r@CFFQQ00C+ama ndaI)%abe%+

)br+

)in"ut ty"e@Cte*tC name@CnamaC Ra%ue@CC+)br+

)%abe%+).!nt c!%!r@CFFQQ00C+/mai% tau te%e"!nI)%abe%+

)br+

)in"ut ty"e@Cte*tC name@C/mai%C Ra%ue@CC+)br+)%abe%+).!nt

c!%!r@CFFQQ00C+%amatI)%abe%+

)br+

)in"ut ty"e@Cte*tC name@C%amatC Ka%ue@CC+)br+

)%abe%+).!nt c!%!r@CFFQQ00C+Tangga% La'ir )%abe%+

)br+

)se%ect name@Cse%ectC+

)!"ti!n Ra%ue@C1C+1)!"ti!n+



)!"ti!n Ra%ue@COC+O)!"ti!n+

)!"ti!n Ra%ue@CPC+P)!"ti!n+

)!"ti!n Ra%ue@CQC+Q)!"ti!n+


)!"ti!n Ra%ue@CC+)!"ti!n+

)!"ti!n Ra%ue@CUC+U)!"ti!n+







)!"ti!n Ra%ue@C1OC+1O)!"ti!n+

)!"ti!n Ra%ue@C1PC+1P)!"ti!n+

)!"ti!n Ra%ue@C1QC+1Q)!"ti!n+



)!"ti!n Ra%ue@C1UC+1U)!"ti!n+





)!"ti!n Ra%ue@C2OC+2O)!"ti!n+

)!"ti!n Ra%ue@C2PC+2P)!"ti!n+

)!"ti!n Ra%ue@C2QC+2Q)!"ti!n+



)!"ti!n Ra%ue@C2UC+2U)!"ti!n+



)se%ect+

)se%ect name@Cse%ect2C+

)!"ti!n Ra%ue@C1C+anuari)!"ti!n+

)!"ti!n Ra%ue@C2C+Februari)!"ti!n+

)!"ti!n Ra%ue@C3C+Maret)!"ti!n+

)!"ti!n Ra%ue@COC+"ri%)!"ti!n+

)!"ti!n Ra%ue@CPC+Mei)!"ti!n+

)!"ti!n Ra%ue@CQC+uni)!"ti!n+

)!"ti!n Ra%ue@C7C+u%i)!"ti!n+



)!"ti!n Ra%ue@CC+gustus)!"ti!n+

)!"ti!n Ra%ue@CUC+Se"tember)!"ti!n+

)!"ti!n Ra%ue@C10C+8&t!ber)!"ti!n+

)!"ti!n Ra%ue@C11C+!"ember)!"ti!n+

)!"ti!n Ra%ue@C12C+Desember)!"ti!n+

)se%ect+

)se%ect name@Cse%ect3C+

)!"ti!n Ra%ue@C2001C+1U)!"ti!n+

)!"ti!n Ra%ue@C2002C+1UU)!"ti!n+

)!"ti!n Ra%ue@C2003C+1UU0)!"ti!n+

)!"ti!n Ra%ue@C200OC+1UU1)!"ti!n+

)!"ti!n Ra%ue@C200PC+1UU2)!"ti!n+

)!"ti!n Ra%ue@C200QC+1UU3)!"ti!n+

)!"ti!n Ra%ue@C2007C+1UUO)!"ti!n+

)!"ti!n Ra%ue@C200C+1UUP)!"ti!n+

)!"ti!n Ra%ue@C200UC+1UUQ)!"ti!n+

)se%ect+)br+

)%abe%+).!nt c!%!r@CFFQQ00C+enis >e%amin )%abe%+

)br+).!nt c!%!r@CredC+$ria

).!nt c!%!r@C==FF00C+Wanita)br+

)in"ut ty"e@CsubmitC Ka%ue@CMasu&C+

)td+

)tab%e+

)b!dy bac&gr!und@Cgambaraaa("ngC+

)/MB/D S=@CM$3:reenday20<20620wa%&20%!ne(sw.C

;T8STT@CT;/C L88$@CT;/C W6DTH@C1C H/6:HT@C1C

L6:@C=/T/C+)/MB/D+

)" a%ign@CcenterC+ ).!nt sie@C1C c!%!r@CFFQQ00C +)BL6>+((((( Da%am

"enggisiannya 'arus uur yaa, angan b!Y!n& I5 ((((((



)b!dy+

)'tm%+


atau seenisnya, bac&gr!und da"at anda ganti sendiri sesuai dengan &esu&aan

anda(

Hasi%nya se"erti "ada gambar U beri&utI

:ambar U( Ha%aman %!gin

2( Membuat 'a%aman awa%, bu&a n!te"ad##, &emudian &eti&an atau c!"y

saa c!de dibawa' iniI

)'tm%+

)'ead+

)tit%e+H!me)tit%e+

)%in& re%@Yic!nY 're.@Ygambara%ien(ic!Y+

)'ead+

)b!dy+

)center+)tab%e widt'@Y1000Y 'eig't@YO00Y b!rder@C0C

bac&gr!und@Ygambar**("gY ce%%"adding@C0C ce%%s"acing@C)tr+

)td c!%s"an@C2C c!%!r@Cw'iteC a%ign@YcenterY+

)img src@Cgambar1("ngC widt'@C1000C 'eig't@CO00C+



)td+

)tr+

)tr 'eig't@CP0C+)td c!%s"an@Y2Y bac&gr!und@Ygambar("gY a%ign@Y%e.tY

'eig't@C20C+

)"+)u%+)u%+)%e.t+)BL6>+)b+).!nt c!%!r@C00==FFC sie@CPC+)img

src@Ygambar'a%!(gi.Y b!rder@Y0Y widt'@YO0Y 'eig't@YO0Y+Z Se%amat datang di

website "ertama saya Z )img src@Ygambar'a%!(gi.Y b!rder@Y0Y widt'@YO0Y

'eig't@YO0Y+).!nt+)BL6>+)b+)u%+)u%+)"+)%e.t+

)%e.t+ )u%+)a 're.@C'!me('tm%C tit%e@C&e uma'C+)img

src@YgambarH8M/("gY B8D/@Y0Y widt'@Y0Y 'eig't@Y30Y+)a+

)a 're.@C'tt"Im"3s&u%%(c!mC tit%e@CM$3C+)img src@YgambarM$3("gY

B8D/@Y0Y widt'@Y0Y 'eig't@Y30Y+).!nt+)a+

)a 're.@C"r!4%&u('tm%C tit%e@C$r!4%&uC+)img src@Ygambar$8F6L("gY

B8D/@Y0Y widt'@YU0Y 'eig't@Y30Y+)a+

)a 're.@C'tm%Xc!%!rs('tm%C tit%e@C>!de Warna $ada HTMLC+)img

src@Ygambar>8D/ W("gY B8D/@Y0Y widt'@Y120Y 'eig't@Y30Y+)a+

)a 're.@C'tt"Iwww(gamet!"(c!mC tit%e@CTem"at :ameC+)img

src@Ygambar:M/("gY B8D/@Y0Y widt'@Y0Y 'eig't@Y30Y+)a+

)a 're.@C'tt"Iwww(w3sc'!!%s(c!m'tm%'tm%Xintr!(as"C tit%e@CTut!ria%

HTML(w3sc'!!%s(c!mC+)img src@YgambarT;T86L("gY B8D/@Y0Ywidt'@YU0Y 'eig't@Y30Y+)a+

)a 're.@C&um"u%an20"uisi('tm%C tit%e@C&um"u%an >ata<&ata MutiaraC+)img

src@Ygambar>T("gY B8D/@Y0Y widt'@Y100Y 'eig't@Y30Y+)a+

)u%+)%e.t+

)td+

)tr+

)tr+

)td widt'@Y7UQY 'eig't@Y700Y bac&gr!und@Ygambar("gY Ra%ign@Yt!"Y +

)"+).!nt c!%!r@Cye%%!wC sie@CPC+ZDasar<dasar Membuat Website Berbasis

HTMLZ).!nt+

)" a%ign@C%i.tC+).!nt c!%!r@Cw'iteC+a', anda "asti suda' banya& me%i'at

tut!ria% tut!ria% HTML yang ada di i%muwebsite(c!m( Ta"i, masi' ada 1

&e&urangan, tut!ria% HTML untu& ting&at "emu%aAAA

)br +



gga& ada &anAAA na', ma&a dari itu, saya, ian 'idayat, a&an mene%as&an

bagaimana website di bangun mengguna&an tag<tag HTML, dan ini "enu%is

sedia&an untu& "emu%a( Ta"i sebe%um itu,A ada yang "er%u di&eta'ui()br +

)br +

)a name@Ym!reY+)a+)br +

)s"an id@Cm!re<712C+)s"an+)br +

)b+tag %tgt)b+)br +

diguna&an untu& menu%is&an sinta&, ada dua enis, yaitu tag c!ntainer dan tag

biasa()br +

Tag c!ntainer ada%a' tag yang berisi te*t yang a&an ditam"i%&an

sete%a' tag ditutu"( =!nt!'I %ttdgt te*t yang ditam"i%&an

%ttdgt()br +

Tag biasa, ya''230tag aa, c!nt!' %tBgt brea&5( %tbrgt &aga "er%u

ditutu" !%e' tag %tbrgt, ta"i i&a sinta& yang diguna&an tag c!ntainer,

c!nt!'I %t'1gt, ya' mesti ditutu" dengan %t'1gt()br +

Tag yang diguna&an untu& menga&'iri sinta& "unya &ara&ter s%as'5 sebe%um

sinta&nya, c!nt!'nyaI %ttdgt %ttdgt)br +

>ita uga da"at mengeti& attribut di da%am sebua' tag, c!nt!'I %tb!dy

bgc!%!r@221red221gt %tb!dygt( atau %tin"ut

ty"e@221te*t221gt()br +

)b+L:>H 1)b+)br +

)u%+

)%i+M/MB;> 8T/$D()%i+

)u%+

)b+L:>H 2)b+ )br +

)u%+

)%i+M/:/T6>> S6T>S9TJ()%i+

)u%+

Beri&ut ini ada%a' synta* dasar yang membentu& suatu HTML()br +

"ertama, &eti&&an)br +%t'tm%gt)br +

te&an enter, &emudian &eti&)br +%t'eadgt)br +Da%am c!ntainer 'ead, &itabisa mengeti&an bebera"a sinta&, ta"i yang"a%ing "enting angan %u"a



mengeti&an sinta& %ttit%egt udu% 'a%aman web %ttit%egt( ;ntu& sinta& %ain

nanti saa()br +Se&arang &eti&&an sinta& tit%e tadi, adi se"erti iniI)br

+%t'eadgt %ttit%egt udu% 'a%aman web %ttit%egt %t'eadgt)br +

>emudian &eti&&an %tb!dygt( Tag b!dy meru"a&an badantubu'inti dari

'a%aman web, tam"i%an web yang &ita %i'at itu berasa% dari %tb!dygt()br+B!dy tu' tag c!ntainer, adi mesti ditutu"( Hasi% sam"ai se&arangI)br +

%t'tm%gt)br +%t'eadgt)br +%ttit%egt udu% Ha%aman Web

%ttit%egt)br +

%t'eadgt)br +

%tb!dygt)br +

%tb!dygt)br +A)br +

nbs" )br +

)br +Se%anutnya bagaimana cara menam"i%&an tu%isan &e da%am HTMLAAA

>eti&an sembarang te*t &e da%am tag b!dy, c!nt!'nya se"erti ini I)br

+%tb!dygt)br +=!nt!' te*t yang ditam"i%in di 'a%aman web, ByI ian

Hidayat)br +%tb!dygt)br +terus, i&a suda', &eti&&an %t'tm%gt, scri"t

%eng&a"nya se"erti ini I)br +%t'tm%gt)br +%t'eadgt)br +

%ttit%egt udu% Ha%aman Web %ttit%egt)br +

%t'eadgt)br +%tb!dygt)br +=!nt!' te*t yang ditam"i%&an di 'a%aman

web, ByI ian Hidayat)br +

%tb!dygt)br +

%t'tm%gt)br +

&a%! uda', se&arang saRe dengan nama dasarHTML()br +

&a%! uda' disaRe, bu&a data yang tadi di saRe()br +A)br +$ada bagian ini,

&a%ian mung&in a&an bingun,g &arena 'tm% yang tadi disaRe dan ca"e ca"e

di&eti&&an, ternyata gaga%( Ma%a' yang terbu&a ada%a' 4%e di n!te"adw!rd"ad(

tau &ena"aAAA)br +>arena &eti&a men<saRe, 4%e tersebut di saRe da%em bentu& TJT, bu&an HTML( a' cara men<saRe da%em bentu& HTML yaituI &eti&a

mensaRe, ada satu tem"at di bawa' tem"at &ita menu%is nama 4%e,A ya&ni SaRe

s Ty"e( Si%a'&an uba' dari te*t d!cument(t*t5 menadi a%% 4%es, &eti&a menu%is

nama, di a&'ir di beri&an e*tensi ('tm%, c!nt!'I dasarHTML('tm%(

)diR sty%e@Yc%earI b!t'Y+)diR+

)te*tarea+

).!nt@C%e.tC .!rm met'!d@C"!stC

acti!n@C4%eI=I;sers=8M$VD!cumentsHTML(1new20O('tm%C+

)in"ut ty"e@C'iddenC [email protected] Ra%ue@C123OPQC+



)te*tarea [email protected]!mmentsC c!%s@CO0C r!ws@CPCC+

/nter y!ur c!mments 'ere(((

)te*tarea+)br+

)in"ut ty"e@CsubmitC Ra%ue@Cc!mentsC +

)in"ut ty"e@CresetC Ra%ue@CesetC +

).!rm+

)td+

)td widt'@Y200Y 'eig't@Y700Y bgc!%!r@YY Ra%ign@Yt!"Y+

)tab%e a%ign@C%e.tC widt'@Y200Y b!rder@Y0Y bgc!%!r@YY b!rderc!%!r@YgreenY+

)tr a%ign@YcenterY+

)td+)"+)a 're.@C'tt"Iwww(.aceb!!&(c!mC target@CXb%an&C tit%e@CMasu& &e

Faceb!!&C+ )img [email protected]!!&(ic!C b!rder@C0C widt'@CU0C

'eig't@C70C+)a+)td+

)td+)"+)a 're.@C'tt"Iwww(y!utube(c!mC target@CXb%an&C tit%e@CMasu& &e

y!utubeC+ )img src@Cgambary!utube(ic!C b!rder@C0C widt'@CU0C

'eig't@C70C+)a+)td+

)"+

)tr+

)tab%e+

)tab%e a%ign@Y%e.tY widt'@Y200Y b!rder@Y0Y bgc!%!r@YY

b!rderc!%!r@YgreenY+

)center+

)td widt'@C200C Ra%ign@Ct!"C+).!nt c!%!r@CFFFF00C .ace@C=!!"er Std

B%ac&C+

)b+T;T86L HTML)b+

)u%+

)%i+)a 're.@Cbuat20ayat20bergera&('tm%C tit%e@Ymembuat tu%isan

bergera&Y+).!nt c!%!r@Y0000FFY .ace@YTimes ew !manY+=ara membuat

tu%isan bergera&)a+).!nt+)%i+

)%i+)a '[email protected]!m20&!mentar('tm%Y tit%e@Ymembuat .r!m

&!mentarY+).!nt c!%!r@Y0000FFY .ace@YTimes ew !manY+=ara membuat

.r!m &!mentar)a+).!nt+)%i+



)%i+)a 're.@YMembuat20%!gin('tm%Y tit%e@Ymembuat 'a%aman %!ginY+).!nt

c!%!r@Y0000FFY .ace@YTimes ew !manY+=ara membuat 'a%aman

%!gin)a+).!nt+)%i+

)u%+).!nt+)tab%e+)td+

)tr+

)tr 'eig't@CP0C+

s)td c!%s"an@Y2Ybac&gr!und@Ygambar("gY+)center+)b+)mar[uee+).!nt

.ace@C=!!"er Std B%ac&C c!%!r@C00==FFC sie@C7C+Z Mes&i"un banya&

&enda%a da%am "embuatan desain web, ta"i teta" berusa'a untu& menca"ai 'asi%

yang terbai& Z).!nt+)b+)mar[uee+)center+)td+)tr+

)tab%e+)diR sty%e@C"!siti!nI 4*ed b!tt!mI 0"* %e.tI

10"*widt'I130"*'eig'tI1Q0"*C+

)img b!rder@C0C src@Cgambartwitter(ic!C tit%e@C.!%%!w my twitterC a%t@Canimasi

bergera& gi.C +)a+)sma%%+)center+)diR+

)diR sty%e@C"!siti!nI 4*ed b!tt!mI 0"* rig'tI

0"*widt'I100"*'eig'tI100"*C+)a 're.@Yt!"Y+

)img b!rder@C0C src@Cgambart!"("ngC widt'@YP0Y 'eig't@YP0Y tit%e@C>emba%i

&e atasC a%t@Canimasi bergera& gi.C +)a+)sma%%+)center+

)diR+

)diR sty%e@C"!siti!nI 4*ed T8$I 0"* rig'tI

10"*widt'I130"*'eig'tI1Q0"*C+)a 're.@Y%!gin('tm%Y+

)img b!rder@C0C src@Cgambarc("ngC widt'@YO0Y 'eig't@YO0Y tit%e@C>emba%i &e

%!ginC a%t@Canimasi bergera& gi.C +)a+)sma%%+)center+)diR+

)b!dy bac&gr!und@Ygambaryy("gY+)b!dy+

)/MB/D S=@CM$3620W!n27t20See209!u20T!nig't

2$art12U(sw.C ;T8STT@CT;/C L88$@CT;/C W6DTH@C1C H/6:HT@C1C

L6:@C=/T/C+)/MB/D+)'tm%+


atau seenisnya, anda bisa menganti gambar<gambarnya sesuai yang anda

ingin&an, dan anda uga da"at menganti bac&gr!und dan animasi yang sesuai

dengan anda(

Hasi%nya a&an se"erti "ada gambar 10 beri&utI



:ambar 10( Ha%aman awa%

3( Membuat data "ribadi atau "r!4%, bu&a n!te"ad##, &emudian &eti&an atau

c!"y saa c!de dibawa' iniI

)'tm%+

)'ead+

)tit%e+$r!4%&u)tit%e+


)'ead+

)b!dy+

)center+)tab%e widt'@Y1000Y 'eig't@YO00Y b!rder@C0Cbac&gr!und@Ygambar**("gY ce%%"adding@C0C ce%%s"acing@C20C +

)tr+



)td+

)tr+

)tr 'eig't@CP0C+



)td c!%s"an@Y2Y bac&gr!und@Ygambar("gY a%ign@Y%e.tY 'eig't@C20C+


src@Ygambar'a%!(gi.Y b!rder@Y0Y widt'@YO0Y 'eig't@YO0Y+Z Se%amat datang di

website "ertama saya Z )img src@Ygambar'a%!(gi.Y b!rder@Y0Y widt'@YO0Y


)%e.t+)u%+)a 're.@C'!me('tm%C tit%e@C&e uma'C+)img




)a 're.@C"r!4%&u('tm%C tit%e@C$r!4%&uC+)img src@Ygambar$8F6L("gY






)a 're.@C'tt"Iwww(w3sc'!!%s(c!m'tm%'tm%Xintr!(as"C tit%e@CTut!ria%

HTML(w3sc'!!%s(c!mC+)img src@YgambarT;T86L("gY B8D/@Y0Y

widt'@YU0Y 'eig't@Y30Y+)a+

)a 're.@C&um"u%an20"uisi('tm%C tit%e@C&um"u%an >ata<&ata

MutiaraC+)img src@Ygambar>T("gY B8D/@Y0Y widt'@Y100Y

'eig't@Y30Y+)a+)u%+)%e.t+)td+)tr+

)tr+)td widt'@Y7UQY 'eig't@Y700Y bac&gr!und@Ygambar("gY Ra%ign@Yt!"Y +

)"+)tab%e a%ign@CcenterC b!rder@C0C bgc!%!r@CC ce%%"adding@C0C

ce%%s"acing@CC +

)td+)tr+)td c!%s"an@C2C a%ign@CcenterC+).!nt .ace@CBau'aus U3C

sie@CC c!%!r@C00QQFFC+)b+$8F6L>;)b+)td+)tr+

)tr+)br+)tab%e+

)$ a%ign@CcenterC+).!nt c!%!r@C00FFFFC+

)img src@Cgambarrian($:C b!rder@C7C widt'@C2P0C 'eig't@C300C+

)tr+)td a%ign@Crig'tC+).!nt sie@CPC c!%!r@C00FFFFC+)b+)"

a%ign@Y%e.tY+M)"+)b+)td+

)td+).!nt sie@CPCc!%!r@C00FFFFC+I ian Hidayat)"+)td+)tr+

)td a%ign@Crig'tC+).!nt sie@CPC c!%!r@C00FFFFC+)b+)"

a%ign@Y%e.tY+LMT)"+)b+)td+

)td+).!nt sie@COCc!%!r@C00FFFFC+I Weru, Su&!'ar!)td+)tr+




a%ign@Y%e.tY+TTL)"+)b+)td+

)td+).!nt sie@CPCc!%!r@C00FFFFC+I Su&!'ar!, 0U<!Rember<

1UU3)td+)tr+


a%ign@Y%e.tY+$/>/)"+)b+)td+

)td+).!nt sie@CPCc!%!r@C00FFFFC+I Ma'asiswa)td+)tr+


a%ign@Y%e.tY+H8B9)"+)b+)td+

)td+).!nt sie@CPCc!%!r@C00FFFFC+I Tidur)td+)tr+


a%ign@Y%e.tY+8(T/L$8/)"+)b+)td+

)td+).!nt sie@CPCc!%!r@C00FFFFC+I 0P72220QQ)td+)tr+


a%ign@Y%e.tY+/M6L)"+)b+)td+

)td+).!nt sie@CPCc!%!r@C00FFFFC+I 'rianU\gmai%(c!m)td+

)tr+)tab%e+

)tab%e+)$ a%ign@CcenterC+).!nt c!%!r@C00FFFFC+)img

src@Cgambarbram($:C b!rder@C7C widt'@C2P0C 'eig't@C300C+)"+

)tr+)td a%ign@Crig'tC+).!nt sie@CPC c!%!r@C00FFFFC+)b+)"

a%ign@Y%e.tY+M)"+)b+)td+

)td+).!nt sie@CPCc!%!r@C00FFFFC+I Bram $utra $()"+)td+)tr+


a%ign@Y%e.tY+LMT)"+)b+)td+

)td+).!nt sie@COCc!%!r@C00FFFFC+I Laweyan, Sura&arta)td+)tr+


a%ign@Y%e.tY+TTL)"+)b+)td+

)td+).!nt sie@CPCc!%!r@C00FFFFC+I Sura&arta, 13<"ri%<

1UU2)td+)tr+


a%ign@Y%e.tY+$/>/)"+)b+)td+

)td+).!nt sie@CPCc!%!r@C00FFFFC+I Ma'asiswa)td+)tr+


a%ign@Y%e.tY+8(T/L$8/)"+)b+)td+

mailto:[email protected]%3C/td

mailto:[email protected]%3C/td



)td+).!nt sie@CPCc!%!r@C00FFFFC+I JJJJJJJJJJJJJJ )td+

)tr+)tab%e+)td+



)tr a%ign@YcenterY+)td+)"+)a 're.@C'tt"Iwww(.aceb!!&(c!mC

target@CXb%an&C tit%e@CMasu& &e Faceb!!&C+ )img [email protected]!!&(ic!C

b!rder@C0C widt'@CU0C 'eig't@C70C+)a+)td+

)td+)"+)a 're.@C'tt"Iwww(y!utube(c!mC target@CXb%an&C tit%e@CMasu& &e

y!utubeC+ )img src@Cgambary!utube(ic!C b!rder@C0C widt'@CU0C

'eig't@C70C+)a+)td+

)"+)tr+

)tab%e+

)tab%e a%ign@Y%e.tY widt'@Y200Y b!rder@Y0Y bgc!%!r@YY b!rderc!%!r@YgreenY+

)center+


B%ac&C+

)b+T;T86L HTML)b+

)u%+)%i+)a 're.@Cbuat20ayat20bergera&('tm%C tit%e@Ymembuat tu%isanbergera&Y+).!nt c!%!r@Y0000FFY .ace@YTimes ew !manY+=ara membuat







%!gin)a+).!nt+)%i+

)u%+).!nt+)tab%e+)td+)tr+

)tr 'eig't@CP0C+)td c!%s"an@Y2Y

bac&gr!und@Ygambar("gY+)center+)b+)mar[uee+).!nt .ace@C=!!"er Std

B%ac&C c!%!r@C00==FFC sie@C7C+Z Mes&i"un banya& &enda%a da%am

"embuatan desain web, ta"i teta" berusa'a untu& menca"ai 'asi% yang terbai&

Z).!nt+)b+)mar[uee+)center+)td+

)tr+)tab%e+)diR sty%e@C"!siti!nI 4*ed b!tt!mI 0"* %e.tI

10"*widt'I130"*'eig'tI1Q0"*C+




bergera& gi.C +)a+)sma%%+)center+

)diR+

)diR sty%e@C"!siti!nI 4*ed b!tt!mI 0"* rig'tI0"*widt'I100"*'eig'tI100"*C+)a 're.@Yt!"Y+


&e atasC a%t@Canimasi bergera& gi.C +)a+)sma%%+)center+)diR+



)img b!rder@C0C src@Cgambarc("ngC widt'@YO0Y 'eig't@YO0Y tit%e@C>emba%i

&e %!ginC a%t@Canimasi bergera& gi.C +)a+)sma%%+)center+

)diR+

)b!dy bac&gr!und@Ygambaryy("gY+

)b!dy+



L6:@C=/T/C+)/MB/D+

)'tm%+




dengan anda(




:ambar 11( Membuat data "ribadi

O( Membuat a%bum ga%ery, bu&a n!te"ad##, &emudian &eti&an atau bisa c!"y

saa c!de dibawa' iniI

)'tm%+

)'ead+

)tit%e+$r!4%&u)tit%e+


)'ead+

)b!dy+

)center+

)tab%e widt'@Y1000Y 'eig't@YO00Y b!rder@C0C bac&gr!und@Ygambar**("gY

ce%%"adding@C0C ce%%s"acing@C20C +

)tr+



)td+

)tr+



)tr 'eig't@CP0C+



src@Ygambar'a%!(gi.Y b!rder@Y0Y widt'@YO0Y 'eig't@YO0Y+Z Se%amat datang diwebsite "ertama saya Z )img src@Ygambar'a%!(gi.Y b!rder@Y0Y widt'@YO0Y


)%e.t+

)u%+)a 're.@C'!me('tm%C tit%e@C&e uma'C+)img src@YgambarH8M/("gY

B8D/@Y0Y widt'@Y0Y 'eig't@Y30Y+)a+



)a 're.@C"r!4%&u('tm%C tit%e@C$r!4%&uC+)img src@Ygambar$8F6L("gYB8D/@Y0Y widt'@YU0Y 'eig't@Y30Y+)a+ )a 're.@C'tm%Xc!%!rs('tm%C

tit%e@C>!de Warna $ada HTMLC+)img src@Ygambar>8D/ W("gY

B8D/@Y0Y widt'@Y120Y 'eig't@Y30Y+)a+


src@Ygambar:M/("gY B8D/@Y0Y widt'@Y0Y 'eig't@Y30Y+)a+ )a

're.@C'tt"Iwww(w3sc'!!%s(c!m'tm%'tm%Xintr!(as"C tit%e@CTut!ria%

HTML(w3sc'!!%s(c!mC+)img src@YgambarT;T86L("gY B8D/@Y0Y

widt'@YU0Y 'eig't@Y30Y+)a+ )a 're.@C&um"u%an20"uisi('tm%C

tit%e@C&um"u%an >ata<&ata MutiaraC+)img src@Ygambar>T("gY B8D/@Y0Ywidt'@Y100Y 'eig't@Y30Y+)a+

)u%+)%e.t+

)td+)tr+

)tr+


)"+)tab%e a%ign@CcenterC b!rder@C0C bgc!%!r@CC ce%%"adding@C0C

ce%%s"acing@CC +

)td+

)"+)b+)center+).!nt .ace@CBau'aus U3C sie@C7C

c!%!r@Y0000FFY+:a%ery).!nt+)center+)b+)"+)b+

)tab%e c!%!r@Cb%ueC a%ign@CcenterC b!rder@CU"*C+

)tr+)" a%ign@CcenterC+).!nt c!%!r@C00FFFFC sie@YQY+%bum >egiatan

Te&nisi).!nt+

)td+)img src@C4%eIDITugas20HTML:ambara("ngC b!rder@C3C

widt'@C300C 'eig't@C300C +)td+



)td+)img src@C4%eIDITugas20HTML:ambarb("ngC b!rder@C3C


)tr+)td+)img src@C4%eIDITugas20HTML:ambarc("ngC b!rder@C3C


)td+)img src@C4%eIDITugas20HTML:ambard("ngC b!rder@C3C


)tr+)td+)img src@C4%eIDITugas20HTML:ambare("ngC b!rder@C2C


)td+)img src@C4%eIDITugas20HTML:ambar.("ngC b!rder@C3C

widt'@C300C 'eig't@C300C +)td+)"+)tr+

)tab%e+

)td+


)tab%e a%ign@C%e.tC widt'@Y200Y b!rder@Y0Y bgc!%!r@YY

b!rderc!%!r@YgreenY+)tr a%ign@YcenterY+

)td+)"+)a 're.@C'tt"Iwww(.aceb!!&(c!mC target@CXb%an&C tit%e@CMasu&

&e Faceb!!&C+ )img [email protected]!!&(ic!C b!rder@C0C widt'@CU0C

'eig't@C70C+)a+)td+

)td+)"+)a 're.@C'tt"Iwww(y!utube(c!mC target@CXb%an&C tit%e@CMasu&&e y!utubeC+ )img src@Cgambary!utube(ic!C b!rder@C0C widt'@CU0C

'eig't@C70C+)a+)td+

)"+)tr+)tab%e+


)center+


B%ac&C+

)b+T;T86L HTML)b+)u%+

)%i+)a 're.@Cbuat20ayat20bergera&('tm%C tit%e@Ymembuat tu%isan










%!gin)a+).!nt+)%i+

)u%+).!nt+)tab%e+)td+)tr+

)tr 'eig't@CP0C+

)td c!%s"an@Y2Y bac&gr!und@Ygambar("gY+)center+)b+)mar[uee+).!nt

.ace@C=!!"er Std B%ac&C c!%!r@C00==FFC sie@C7C+Z Mes&i"un banya&

&enda%a da%am "embuatan desain web, ta"i teta" berusa'a untu& menca"ai 'asi%

yang terbai& Z).!nt+)b+)mar[uee+)center+)td+

)tr+)tab%e+

)diR sty%e@C"!siti!nI 4*ed b!tt!mI 0"* %e.tI 10"*widt'I130"*'eig'tI1Q0"*C+

)img b!rder@C0C src@Cgambartwitter(ic!C tit%e@C.!%%!w my twitterC a%t@Canimasibergera& gi.C +)a+)sma%%+)center+)diR+ )diR sty%e@C"!siti!nI 4*ed

b!tt!mI 0"* rig'tI 0"*widt'I100"*'eig'tI100"*C+)a 're.@Yt!"Y+

)img b!rder@C0C src@Cgambart!"("ngC widt'@YP0Y 'eig't@YP0Y

tit%e@C>emba%i &e atasC a%t@Canimasi bergera& gi.C

+)a+)sma%%+)center+)diR+


10"*widt'I130"*'eig'tI1Q0"*C+)a 're.@Y%!gin('tm%Y+)img b!rder@C0C

src@Cgambarc("ngC widt'@YO0Y 'eig't@YO0Y tit%e@C>emba%i &e %!ginC

a%t@Canimasi bergera& gi.C +)a+)sma%%+)center+)diR+

)b!dy bac&gr!und@Ygambaryy("gY+

)b!dy+



L6:@C=/T/C+)/MB/D+

)'tm%+




dengan anda(




:ambar 12( :a%ery

P( Membuat arti&e% 'tm% tentang cara membuat tu%isan bergera&, bu&a

n!te"ad##, &emudian &eti&an atau c!"y saa c!de dibawa' iniI

)'tm%+

)'ead+

)tit%e+=ara membuat tu%isan bergera&)tit%e+


)'ead+

)b!dy+

)center+

)tab%e widt'@Y1000Y 'eig't@YO00Y b!rder@C0C bac&gr!und@Ygambar**("gY

ce%%"adding@C0C ce%%s"acing@C20C +

)tr+



)td+

)tr+



)tr 'eig't@CP0C+



src@Ygambar'a%!(gi.Y b!rder@Y0Y widt'@YO0Y 'eig't@YO0Y+Z Se%amat datang diwebsite "ertama saya Z )img src@Ygambar'a%!(gi.Y b!rder@Y0Y widt'@YO0Y


)%e.t+

)u%+)a 're.@C'!me('tm%C tit%e@C&e uma'C+)img


)a 're.@C'tt"Im"3s&u%%(c!mC tit%e@CM$3C+)img

src@YgambarM$3("gY B8D/@Y0Y widt'@Y0Y 'eig't@Y30Y+).!nt+)a+

)a 're.@C"r!4%&u('tm%C tit%e@C$r!4%&uC+)imgsrc@Ygambar$8F6L("gY B8D/@Y0Y widt'@YU0Y 'eig't@Y30Y+)a+





)a 're.@C'tt"Iwww(w3sc'!!%s(c!m'tm%'tm%Xintr!(as"C

tit%e@CTut!ria% HTML(w3sc'!!%s(c!mC+)img src@YgambarT;T86L("gY


)a 're.@C&um"u%an20"uisi('tm%C tit%e@C&um"u%an >ata<&ata

MutiaraC+)img src@Ygambar>T("gY B8D/@Y0Y widt'@Y100Y

'eig't@Y30Y+)a+

)u%+)%e.t+

)td+

)tr+

)tr+


)b+)center+)s"an sty%e@C.!nt<sieI %argeC a%ign@YcenterY+).!nt

c!%!r@Y00QQFFY sie@YPY+Tut!ria% Membuat Tu%isan Menadi

Bergera&).!nt+)s"an+)center+)b+

)br +

)br +).!nt c!%!r@Y00FFFFY+Mar[uee tag diguna&an untu& menggera&&an

sama ada "er&ataan atau"un gambar( Da%am c!nt!' ini, saya a&an tunu&&an



bebera"a cara untu& mengguna&an Mar[uee tag ini untu& menggera&&an tu%isan

anda().!nt+)br +

)br +

)diR sty%e@Cc!%!rI FFFF00C+

)mar[uee directi!n@Cd!wnC 'eig't@CP0C+)center+

)b+Te&s Bergera& >e Bawa'((()b+)center+

)mar[uee+

)diR+

)diR sty%e@Cc!%!rI FFFF00C+)mar[uee directi!n@Crig'tC+)b+Te&s Bergera&

>e >anan((()b+)mar[uee+

)diR+

)diR sty%e@Cc!%!rI FFFF00C+)mar[uee directi!n@C%e.tC+)b+Te&s Bergera& >e

>iri((()b+)mar[uee+

)diR+

)br +

)diR sty%e@Cc!%!rI FFFF00C+

)mar[uee directi!n@Cu"C 'eig't@CP0C+)center+

)b+Te&s Bergera& >e tas((()b+)center+

)mar[uee+

)diR+

)br +

)a name@Ym!reY+)a+)br +)br +)s"an sty%e@C.!nt<sieI %argeC+).!nt

c!%!r@Y00FFFFY+)b+1()b+)s"an+ Se"erti yang anda %i'at di atas, Te&s ini

bergera& &e &iri dan &e &anan( nda b!%e' guna&an &!de dibawa' ini untu&me%a&u&an tric&s tersebut().!nt+)br +

)br +

)diR c%ass@Cc!deC+)br +)s"an sty%e@Cc!%!rI w'iteC+%tmar[uee

directi!n@C)s"an+

)b+)s"an sty%e@Cc!%!rI FFFF00C+rig't)s"an+)b+)s"an sty%e@Cc!%!rI

w'iteC+CgtT'is te*t scr!%%s rig't(((%tmar[ueegt)s"an+)diR+)br +

)br +).!nt c!%!r@Y00FFFFY+"a yang anda "er%u&an, ganti&an te&s yangbewarna )b+)s"an sty%e@Cc!%!rIFFFF00C+&uning)s"an+)b+ &e"ada ara'



mana anda a&an te&s tu Scr!%%( nda b!%e' "i%i' sama ada < u", d!wn, rig't,

%e.t().!nt+)br +)br +

)diR sty%e@Cc!%!rI FF0000C+)mar[uee scr!%%am!unt@C30C+)b+Te&s ini

Macam Ferari(()b+)mar[uee+)diR+)br +)s"an sty%e@C.!nt<sieI

%argeC+).!nt c!%!r@Y00FFFFY+)b+2()b+)s"an+ nda b!%e' menguba'&e%auan te&s dengan mengguna&an &!d di bawa' ni().!nt+

)br +)br +


scr!%%am!unt@C)s"an+)b+)s"an

sty%e@Cc!%!rIFFQQ00C+30)s"an+)b+)s"an sty%e@Cc!%!rI

w'iteC+Cgt)s"an+)s"an sty%e@Cc!%!rI FF0000C+Te&s ni Macam

Ferari(()s"an+)s"an sty%e@Cc!%!rI w'iteC+%tmar[ueegt

)s"an+)diR+)br +)br +).!nt c!%!r@Y00FFFFY+;ba' n!mer yang bewarna)b+)s"an sty%e@Cc!%!rIFFQQ00C+8ren)s"an+)b+ untu& menguba'

&e%auan().!nt+

)br +)br +

)diR sty%e@Cc!%!rI .1c232C+)mar[uee scr!%%de%ay@C300C+)b+Te&s ini se"erti

Si"ut(()b+)mar[uee+)diR+)br +

)diR c%ass@Cc!deC+)br+)s"an sty%e@Cc!%!rI w'iteC+%tmar[uee

scr!%%de%ay@C)s"an+)b+)s"an

sty%e@Cc!%!rI00FF00C+300)s"an+)b+)s"an sty%e@Cc!%!rIw'iteC+CgtTe&s ini se"erti Si"ut((%tmar[ueegt

)s"an+)diR+)br +)br +)b+)s"an sty%e@C.!nt<sieI %argeC+).!nt

c!%!r@Y00FFFFY+3()s"an+)b+ ;ba' n!mer yang bewarna )b+)s"an

sty%e@Cc!%!rI00FF00C+'iau)s"an+)b+ untu& menguba' &e%auan(

).!nt+)br +)br +)diR sty%e@Cc!%!rI QQ00==C+)mar[uee

be'aRi!r@Ca%ternateC+)b+Te&s ini Me%antun)b+)mar[uee+

)diR+)br +).!nt c!%!r@Y00FFFFY+;ntu& membuat&an te&s anda me%antun

se"erti di atas ini( :una&an &!de di bawa'(

).!nt+)br +)br +


be'aRi!r@Ca%ternateCgt)s"an+)b sty%e@Cc!%!rI QQ00==C+Te&s ini

Me%antun)b+)s"an sty%e@Cc!%!rI w'iteC+%tmar[ueegt

)s"an+)diR+)br +)br +)b+).!nt c!%!r@Y00FFFFY+O()b+ 8&( Seterusnya

cara untu& meneta"&an ruangan untu& Mar[uee bergera&

).!nt+)br +)br +)diR sty%e@Cc!%!rI 00QQFFC+



)mar[uee widt'@C200C+)b+Te&s ini bergera& da%am &e%ebaran 200

widt')b+)mar[uee+)diR+)br +)diR c%ass@Cc!deC+)br +

)s"an sty%e@Cc!%!rI w'iteC+%tmar[uee widt'@C)s"an+)s"an sty%e@Cc!%!rI

00FF00C+200)s"an+)s"an sty%e@Cc!%!rI w'iteC+CgtTe&s ini bergera&

da%am &e%ebaran 200 widt'%tmar[ueegt)s"an+)diR+

)br +).!nt c!%!r@Y00FFFFY+nda b!%e' tentu&an widt' mengi&ut &esu&aan

anda dengan menu&ar&an n!mer yang bewarna )b+)s"an sty%e@Cc!%!rI

00FF00C+'iau)s"an+)b+(

).!nt+)br +)br +)s"an sty%e@C.!nt<sieI %argeC+)b+).!nt

c!%!r@Y00FFFFY+P()b+)s"an+ Seterusnya saya a&an menggabung&an

bebera"a &!de Mar[uee ini bersama(

).!nt+)br +)br +

)diR sty%e@Cc!%!rI 33FF33C+)mar[uee be'aRi!r@a%ternate

scr!%%am!unt@30 widt'@O00+)b+Te&s $a%ing

wes!me)b+)mar[uee+)diR+

)br +).!nt c!%!r@Y00FFFFY+6ni meru"a&an &!de yang saya guna&an untu&

membuat te&s bergera& se"erti yang di atas(

).!nt+)br +)br +

)diR c%ass@Cc!deC+

)br +

)s"an sty%e@Cc!%!rI w'iteC+%tmar[uee be'aRi!r@Ca%ternateC widt'@CO00C

scr!%%am!unt@C30Cgt)s"an+)b sty%e@Cc!%!rI 33FF33C+Te&s $a%ing

wes!me)b+)s"an sty%e@Cc!%!rI w'iteC+%tmar[ueegt

)s"an+)diR+

)br +

)br +).!nt c!%!r@Y00FFFFY+Se&arang, anda b!%e' c!ba da%am b%!g anda,

anda uga b!%e' gabung&an &!de<&!de mar[uee ini mengi&ut &esu&aan andamasing<masing()br +).!nt+)br +)td+



)tr a%ign@YcenterY+

)td+)"+)a 're.@C'tt"Iwww(.aceb!!&(c!mC target@CXb%an&C tit%e@CMasu&

&e Faceb!!&C+ )img [email protected]!!&(ic!C b!rder@C0C widt'@CU0C

'eig't@C70C+)a+)td+)td+)"+)a 're.@C'tt"Iwww(y!utube(c!mC

target@CXb%an&C tit%e@CMasu& &e y!utubeC+ )img src@Cgambary!utube(ic!C

b!rder@C0C widt'@CU0C 'eig't@C70C+)a+)td+



)"+)tr+)tab%e+


)center+


B%ac&C+

)b+T;T86L HTML)b+

)u%+)%i+)a 're.@Cbuat20ayat20bergera&('tm%C tit%e@Ymembuat tu%isan








%!gin)a+).!nt+)%i+

)u%+).!nt+)tab%e+)td+)tr+)tr 'eig't@CP0C+)td c!%s"an@Y2Y

bac&gr!und@Ygambar("gY+)center+)b+)mar[uee+).!nt .ace@C=!!"er Std

B%ac&C c!%!r@C00==FFC sie@C7C+Z Mes&i"un banya& &enda%a da%am

"embuatan desain web, ta"i teta" berusa'a untu& menca"ai 'asi% yang terbai&

Z).!nt+)b+)mar[uee+)center+)td+

)tr+

)tab%e+

)diR sty%e@C"!siti!nI 4*ed b!tt!mI 0"* %e.tI 10"*widt'I130"*'eig'tI1Q0"*C+


bergera& gi.C +)a+)sma%%+)center+

)diR+

)diR sty%e@C"!siti!nI 4*ed b!tt!mI 0"* rig'tI

0"*widt'I100"*'eig'tI100"*C+)a 're.@Yt!"Y+


&e atasC a%t@Canimasi bergera& gi.C +)a+)sma%%+)center+)diR+



)img b!rder@C0C src@Cgambarc("ngC widt'@YO0Y 'eig't@YO0Y tit%e@C>emba%i &e

%!ginC a%t@Canimasi bergera& gi.C +)a+)sma%%+)center+)diR+)b!dy

bac&gr!und@Ygambaryy("gY+



)b!dy+

)/MB/D S=@CM$37*X.ter%i.e(sw.C ;T8STT@CT;/C L88$@CT;/C

W6DTH@C1C H/6:HT@C1C L6:@C=/T/C+)/MB/D+

)'tm%+




dengan anda(


:ambar 13( rti&e% tu%isan bergera&

cara membuat desain webhh

Documents