Upload
anuragroy1
View
223
Download
0
Embed Size (px)
Citation preview
7/28/2019 Let Me Design (For HTML Beginners)
1/56
7/28/2019 Let Me Design (For HTML Beginners)
2/56
0 | V g c o
Hot Eo LoskcdB\EH @gskms Cuklo
Akrst Olktkid
Gdurgc Lo`
7/28/2019 Let Me Design (For HTML Beginners)
3/56
= | V g c o
\i Ey pgrodts]et$ Eujtg ! ]brk Gdkeosb Lo`Air tbokr @hosskdcs
!Ghsi ti ey hivkdc arkodls ! Gdcoh
7/28/2019 Let Me Design (For HTML Beginners)
4/56
< | V g c o
Kdtrilumtkid
\bks cuklo wgs loskcdol ti togmb `ockddor wo` loskcdors gdl pricrgeeors biw
ti uso B\EH$ \bks cuklo ks gkeol ti ckvo dow`kos g hkttho oxporkodmo kd wrktkdc
B\EH milo( sgvkdc tbokr akhos mirromthy( gdl vkowkdc tbo miephotol wirjs kd g wo`
`riwsor$ B\EH egy sooe midauskdc ir `irkdc gt akrst( `ut wo wkhh bohp yiu
udlorstgdl biw kt wirjs gdl `y tbo odl ia tbo `iij yiu wiuhl `o tihl g`iut
biw ti egjo yiur akrst wo` bieo pgco air yiur wo`skto$
7/28/2019 Let Me Design (For HTML Beginners)
5/56
? | V g c o
@rkoa B\EH @gmjcriudl
Byportoxt Egrjup Hgdcugco B\EH+ ks tbo proliekdgdt egrjup hgdcugco air wo` pgcos$
B\EH ohoeodts gro tbo `gskm `ukhlkdc%`himjs ia wo` pgcos$
\bo akrst pu`hkmhy gvgkhg`ho losmrkptkid ia B\EH wgs g limueodt mghhol "B\EH \gcs"( akrsteodtkidol id tbo Kdtordot `y @ordors%Hookd hgto 7;;7$
So` Vgcos
So` pgcos bgvo egdy usos$ Boro gro sieo kepirtgdt agmts g`iut wbywo` pgcos gro si usoauh$
G mbogp gdl ogsy wgy ti sprogl kdairegtkid ti g hgrco gulkodmo$
Gditbor eolkue ti egrjot yiur uskdoss$
Hot tbo wirhl jdiw g`iut yiu wktb g porsidgh wo`skto'
Sirls ti Jdiw
\gc % _sol ti spomkay "egrj%up"+ rockids ia B\EH limueodts air tbo wo` `riwsor ti
kdtorprot$ \gcs hiij hkjo tbks> 8tgc4
Ohoeodt % G miephoto tgc( bgvkdc gd ipodkdc 8tgc4 gdl g mhiskdc 8)tgc4$
Gttrk`uto % _sol ti eilkay tbo vghuo ia tbo B\EH ohoeodt$ Ohoeodts wkhh iatod bgvo
euhtkpho gttrk`utos$
B\EH Bypor \oxt Egrjup Hgdcugco+
Akhodgeo oxtodskid $bteh( $bte
Kdtordot eolkg typo toxt)bteh
\ypo milo \OR\
_dkaire \ypo Klodtkakor pu`hkm$bteh
Lovohipol `y Sirhl Sklo So` Midsirtkue !
SBG\SC
\ypo ia airegt Egrjup hgdcugco
Oxtodlol arie ]CEH
Oxtodlol ti RB\EH
]tgdlgrls+ K]I)KOM 7?
7/28/2019 Let Me Design (For HTML Beginners)
6/56
1 | V g c o
Air diw nust jdiw tbgt g tgc ks g mieegdl tbo wo` `riwsor kdtorprots( gd ohoeodtks g
miephoto tgc( gdl gd gttrk`uto mustiekzos ir eilkakos B\EH ohoeodts$
B\EH Ohoeodts
B\EH ohoeodts oxkst id egdy hovohs$ Ovorytbkdc yiu soo kd aridt ia yiu( tbo pgrgcrgpb toxts(
tbo Gdurgcs `gddor( gdl tbo dgvkcgtkid hkdjs id tbo hoat gro ghh ohoeodts ia tbks wo` pgco$ Gd
ohoeodt kd B\EH ks g hiiso tore tbgt losmrk`os ogmb kdlkvklugh pkomo ia yiur wo` pgco$
Gd ohoeodt midsksts ia tbroo `gskm pgrts> gd ipodkdc tgc( tbo ohoeodt#s midtodt( gdl akdghhy( g
mhiskdc tgc$
7$ 8p4 % ipodkdc pgrgcrgpb tgc0$ Ohoeodt Midtodt % pgrgcrgpb wirls=$ 8)p4 % mhiskdc tgc
Ovory wo`+pgco roqukros aiur mrktkmgh ohoeodts> tbo bteh( bogl( tktho( gdl `ilyohoeodts$
\bo 8bteh4 Ohoeodt$$$8)bteh4
8bteh4 `ockds gdl odls ogmb gdl ovory wo` pgco$ Kts siho purpiso ks ti odmgpsuhgto ghh tbo
B\EH milo gdl losmrk`o tbo B\EH limueodt ti tbo wo` `riwsor$ Poeoe`or ti mhiso yiur
B\EH limueodts wktb tbo mirrospidlkdc 8)bteh4 tgc gt tbo ittie ia tbo limueodt$
Ka yiu bgvod#t ghrogly( ipod up Ditopgl gdl bgvo g dow( `hgdj limueodt rogly ti ci$ Mipy tboaihhiwkdc B\EH milo kdti yiur toxt olktir$
B\EH Milo>
8bteh4
8)bteh4
Diw sgvo yiur akho `y ]ohomtkdc Eodu gdl tbod ]gvo$ Mhkmj id tbo "]gvo gs \ypo" lrip liwd
`ix gdl sohomt tbo iptkid "Ghh Akhos"$ Sbod gsjol ti dgeo yiur akho( dgeo kt "kdlox$bteh"(
wktbiut tbo quitos$ Liu`ho mbomj tbgt yiu lkl ovorytbkdc mirromthy gdl tbod pross sgvo$ Diw
ipod yiur akho kd g dow wo` `riwsor si tbgt yiu bgvo tbo g`khkty ti roarosb yiur pgco gdl sooyiur mbgdcos$
Ka yiu ipodol up yiur kdlox$bteh limueodt( yiu sbiuhl `o stgrrkdc gt yiur vory akrst `hgdj
wbkto+ wo` pgco'
7/28/2019 Let Me Design (For HTML Beginners)
7/56
3 | V g c o
\bo 8bogl4 Ohoeodt
\bo 8bogl4 ohoeodt ks "doxt" gs tboy sgy$ Gs hidc gs kt aghhs sieowboro `otwood yiur 8bteh4
tgc gdl yiur wo` pgco midtodt 8`ily4+( yiu#ro cihlod$ \bo boglaudmtkids "`obkdl tbo
smodos$" \gcs phgmol wktbkd tbo boglohoeodt gro dit lkromthy lksphgyol `y wo` `riwsors$ So
wkhh `o phgmkdc tbo 8tktho4 ohoeodt boro gdl wo#hh tghj g`iut tbo itbor pissk`ho ohoeodts kd hgtorhossids$
Itbor ohoeodts usol air smrkptkdc Ngvgsmrkpt+ gdl airegttkdc M]]+ wkhh ovodtughhy o
kdtrilumol gdl yiu wkhh bgvo ti phgmo tboe wktbkd yiur bogl ohoeodt$ Air diw( yiur bogl
ohoeodt wkhh midtkduo ti hgy oepty oxmopt air tbo tktho ohoeodt tbgt wkhh `o kdtrilumol doxt$
Boro#s g sgepho ia tbo kdktkgh sot up$
B\EH Milo>
8bteh4
8bogl4
8)bogl4
8)bteh4
Gs ia yot( wo stkhh bgvo ditbkdc bgppodkdc id tbo wo` pgco$ Ghh wo bgvo si agr ks g miupho ia
domossgry ohoeodts tbgt losmrk`o iur limueodt ti tbo wo` riwsor$
\bo 8tktho4 Ohoeodt
Vhgmo tbo 8tktho4 tgc wktbkd tbo 8bogl4 ohoeodt ti tktho yiur pgco$ \bo wirls yiu wrkto`otwood tbo ipodkdc gdl mhiskdc 8tktho48)tktho4 tgcs wkhh `o lksphgyol gt tbo tip ia g vkowor#s
`riwsor$ Boro#s tbo bteh milo>
B\EH Milo>
8bteh4
8bogl4
8tktho4Ey So`Vgco'8)tktho4
8)bogl4
8)bteh4
]gvo tbo akho wktb $bteh ir $bte akho oxtodskid wktb typo ia akho gs ghh akhos sohomtol gdl tbod ipod
kt kd yiur `riwsor$ [iu sbiuhl soo "Ey So`Vgco'" kd tbo uppor%hoat( gs tbo wkdliw#s tktho$
7/28/2019 Let Me Design (For HTML Beginners)
8/56
2 | V g c o
$
\bo 8`ily4 Ohoeodt\bo 8`ily4 ohoeodt ks wboro ghhmidtodt ks phgmol$ Vgrgcrgpbs( pkmturos( tg`hos( otm+$ Gs tbo
eodu id tbo hoat succosts( wo wkhh `o hiijkdc gt ogmb ia tboso ohoeodts kd crogtor lotgkh gs tbo
tutirkgh pricrossos$ Air diw( kt ks idhy kepirtgdt ti udlorstgdl tbgt tbo `ily ohoeodt wkhh
odmgpsuhgto ghh ia yiur wo`pgco#s vkowg`ho midtodt$
B\EH Milo>
8bteh4
8bogl4
8tktho4Ey So`Vgco'8)tktho4
8)bogl4
8`ily4
Bohhi Sirhl' Ghh ey midtodt cios boro'
8)`ily4
8)bteh4
7/28/2019 Let Me Design (For HTML Beginners)
9/56
; | V g c o
B\EH limtypo
\bo B\EH 'limtypo tgc ks usol air spomkaykdc wbkmb vorskid ia B\EH tbo limueodt ks uskdc$ \bks
ks roaorrol ti gs tbo limueodt typo lomhgrgtkid "L\L+$
\bo B\EH limueodt typo lomhgrgtkid stgrts iaa wktb 8'limtypo bteh pu`hkm( aihhiwol kdairegtkidid tbo B\EH spomkakmgtkid tbgt tbo limueodt midaires ti$
B\EH B\EH < ]trkmt( B\EH < \rgdsktkidgh( gdl B\EH < Argeosot$
Ovory B\EH limueodt yiu mrogto sbiuhl bgvo ido ia tboso tbroo L\Ls$ \bo L\L yiu uso wkhh
lopodl id biw strkmt yiu wgdt yiur B\EH ti `o gdl wbotbor yiu gro uskdc argeos ir dit$
B\EH < ]trkmt
\bks limueodt typo kdmhulos ghh B\EH ohoeodts oxmopt tbiso tbgt bgvo `ood lopromgtol( gdl
tbiso tbgt gppogr kd argeosot limueodts$
8'LIM\[VO B\EH V_@HKM "%))S=M))L\L B\EH ))www$w=$irc)\P)bteh))www$w=$irc)\P)bteh))www$w=$irc)\P)bteh
7/28/2019 Let Me Design (For HTML Beginners)
10/56
76 | V g c o
Ngvg]mrkpt ir wktb Ngvg]mrkpt lksg`hol+ ti kcdiro tbo milo kd `otwood$ \bks provodts tbo milo
arie `okdc lksphgyol ti yiur usors$
B\EH Milo
8'%% \bo hovoh < boglkdc cios boro %%48b
7/28/2019 Let Me Design (For HTML Beginners)
11/56
77 | V g c o
Losmrkptkid Eotg \gc
Gs yiu ekcbt bgvo cuossol( tbks tgc wkhh sbiw g `rkoa losmrkptkid ia tbo wo` pgco ti g sogrmb
odckdo$ [iur losmrkptkid sbiuhl `o g sodtodmo ir twi g`iut yiur wo` skto$ Joywirls tbgt
gppogrol kd tbo joywirl eotg tgc sbiuhl gppogr boro gs wohh$
B\EH Milo>
8bogl4
8eotg dgeo5"losmrkptkid" midtodt5"Kdaigdu midtgkds wo`egstor tutirkghs$" )4
8)bogl4
Losmrkptkid gdl Joywirls tgcs gro vory skekhgr( gdl tboy sbiuhl `o$ Gs eodtkidol g`ivo ka tboy
li dit egtmb( yiu egy `o kcdirol ir `himjol `y sieo sogrmb odckdos$ @o mgroauh$
Povksol Eotg \gc
\bo rovksol eotg tgc romirls wbod tbo hgst uplgto wgs lido ti tbo skto$
B\EH Milo>
8bogl4
8eotg dgeo5"rovksol" midtodt5"Bgppy Dow [ogr> 7)7)066=" )4
8)bogl4
Poarosb Vgco gdl Polkromt
Hgtor liwd tbo rigl( yiu egy dool ti rolkromt trgaakm ti gditbor liegkd$ G mieeid rogsid
ekcbt `o tbgt yiu bgvo nust purmbgsol g `ottor liegkd dgeo gdl wiuhl hkjo ti rotgkd yiur ihl
vksktirs( yot stkhh uso yiur dow liegkd$ Sktb tbo roarosb eotg tgc yiu wkhh `o g`ho ti rolkromt
vksktirs ti tbo wo` skto ia yiur mbikmo$
B\EH Milo>
8bogl4
8eotg bttp%oqukv5"roarosb" midtodt5"76: urh5bttp>))www$kdaigdu$mie" )4
8)bogl4
G`ivo sbiws roarosbkdc Kdaigdu#s bieo pgco ovory 76 somidls$ G qukmj roarosb egy `o
domossgry air dows( stimjs( ir gdy itbor tkeo%sodsktkvo kdairegtkid$ \bo eist mieeid uso air
7/28/2019 Let Me Design (For HTML Beginners)
12/56
70 | V g c o
tbks typo ia eotg tgc( biwovor( ks rolkromtkid$ \i rolkromt g vkowor gutiegtkmghhy( nust mbgdco
tbo _PH ti tbo dow skto gs sbiwd `ohiw$ \bks milo wkhh sodl yiur vksktirs ti ospd$mie gator
`okdc gt yiur skto air akvo somidls$
B\EH Milo>
8bogl4
8eotg bttp%oqukv5"roarosb" midtodt5"?: urh5bttp>))www$ospd$mie" )4
8)bogl4
B\EH ]mrkpts\boro gro twi vory pipuhgr smrkpts tbgt gro mieeidhy usol kd B\EH ti egjo wo` pgcos mieo
ghkvo$ B\EH ngvgsmrkpt gdl B\EH v`smrkpt gro vory usoauh smrkptkdc hgdcugcos ti jdiw( ka yiu
bgvo tbo tkeo$Sktb B\EH smrkpts yiu mgd mrogto lydgekm wo` pgcos( egjo kegco rihhivors airroghhy miih eodu oaaomts( ir ovod vghklgto yiur B\EH aire#s lgtg `oairo yiu hot tbo usor
su`ekt$ Biwovor( ngvgsmrkpt gdl v`smrkpt gro vory miephkmgtol miepgrol ti B\EH$ Kt egy `o
skephor nust ti liwdhigl sieoido ohsos smrkptkdc milo gdl uso kt id yiur wo` pgco ka tboy
bgvo ckvod yiu poreksskid ti li si( ia miurso'+$ B\EH Ngvgsmrkpt Milo
Ka yiu wgdt ti kdsort ngvgsmrkpt milo kdti yiur B\EH yiu gro cikdc ti uso tbo smrkpttgc$ Ka yiu
wiuhl hkjo ti jdiw eiro g`iut ngvgsmrkpt( mbomj iut iur Ngvgsmrkpt \utirkgh$ @ohiw ks tbo
mirromt milo ti kdsort oe`ollol ngvgsmrkpt milo idti yiur skto$
B\EH Milo>
8smrkpt typo5"toxt)ngvgsmrkpt"4
8'%%smrkpt
...]ieo ngvgsmrkpt milo sbiuhl ci boro...
%%4
8)smrkpt4
Air ngvgsmrkpt yiu sot tbo typo gttrk`uto oqugh ti "toxt)ngvgsmrkpt"( wbkmb ks skekhgr ti tbo
primoss ia spomkaykdc M]]$ So ghsi kdmhulo g mieeodt griudl tbo ngvgsmrkpt milo$ \bks wkhh
provodt riwsors tbgt li dit suppirt ngvgsmrkpt ir bgvo bgl ngvgsmrkpt lksg`hol arie lksphgykdctbo ngvgsmrkpt milo kd tbo wo` `riwsor$
B\EH Q`smrkpt Biw \i
\i kdsort v`smrkpt milo idti yiur wo`skto yiu eust idmo gcgkd egjo uso ia tbo smrkpttgc$
@ohiw ks tbo mirromt milo ti kdsort v`smrkpt milo idti yiur skto$
7/28/2019 Let Me Design (For HTML Beginners)
13/56
7= | V g c o
B\EH Milo>
8smrkpt typo5"toxt)v`smrkpt"4
8'%%smrkpt
...\bo v`smrkpt milo sbiuhl ci kd tbks spit...
%%4
8)smrkpt4
Air v`smrkpt yiu sot tbo typo gttrk`uto oqugh ti "toxt)v`smrkpt"( wbkmb ks skekhgr ti spomkaykdc
M]]$ So ghsi kdmhulo g mieeodt griudl tbo v`smrkpt milo$ \bks wkhh provodt `riwsors tbgt li
dit suppirt v`smrkpt ir bgvo bgl v`smrkpt lksg`hol arie lksphgykdc tbo v`smrkpt milo kd tbo wo`
`riwsor$
B\EH \gcs
G wo` `riwsor rogls gd B\EH limueodt tip ti `ittie( hoat ti rkcbt$ Ogmb tkeo tbo `riwsor
akdls g tgc( kt ks lksphgyol gmmirlkdchy pgrgcrgpbs hiij hkjo pgrgcrgpbs( tg`hos hiij hkjo tg`hos(otm+$ \gcs bgvo = egnir pgrts> ipodkdc tgcs+( midtodts+( gdl mhiskdc tgcs+$ Pomghh tbgt g
miephotol tgc ks toreol gd ohoeodt$
B\EH \gcs>
8`ily4@ily \gc gmts gs g midtodt sbohh+
8p4Vgrgcrgpb \gc8)p4
8b04Boglkdc \gc8)b04
8`4@ihl \gc8)`4
8k4Ktghkm \gc8)k48)`ily4
\gcs Sktbiut Mhiskdc \gcs
\boro gro g aow tgcs tbgt li dit aihhiw tbo eihl g`ivo$ Kd g wgy( tboy stkhh bgvo tbo = pgrts
ipodkdc)mhiskdc gdl midtodt+$ \boso tgcs biwovor li dit roqukro g airegh 8)mhiskdctgc4 ut
rgtbor g eilkakol vorskid$ \bo rogsid `okdc tbgt tboso tgcs li dit roghhy roqukro gdy midtodt$
Pgtbor sieo ia tboe nust dool g siurmo _PH gdl tbks ks odiucb kdairegtkid air tbo wo`
`riwsor ti lksphgy tbo tgc priporhy kegco tgcs+$ Hot#s tgjo g hiij gt g hkdo `rogj tgc$
B\EH Milo>
8`r )4
\i tohh tbo `riwsor wo wgdt ti phgmo g hkdo `rogj mgrrkgco roturd+ idti tbo skto( kt ks dit
domossgry ti typo 8`r4hkdo`rogj8)`r4$ Ka ovory hkdo `rogj tgc doolol ghh tbroo miepidodts gs
7/28/2019 Let Me Design (For HTML Beginners)
14/56
7< | V g c o
itbor li( hkao wiuhl omieo roludlgdt rogh qukmj$ Kdstogl tbo `ottor sihutkid wgs ti mie`kdo
tbo ipodkdc gdl mhiskdc tgcs kdti g skdcho airegt$ Itbor tgcs bgvo ghsi `ood eilkakol sumb gs
tbo kegco tgc gdl kdput tgc$
Vgrgcrgpb \gc 8p4
Vu`hksbkdc gdy jkdl ia wrkttod wirjs roqukros tbo uso ia g pgrgcrgpb$ \bo pgrgcrgpb tgc ks vory
`gskm gdl g crogt kdtrilumtiry tgc air `ockddor#s `omguso ia kts skephkmkty$
\bo 8p4 tgc loakdos g pgrgcrgpb$ _skdc tbks tgc phgmos g `hgdj hkdo g`ivo gdl `ohiw tbo toxt ia
tbo pgrgcrgpb$ \boso gutiegtol hgdj hkdos gro oxgephos ia biw g tgc "egrjs" g pgrgcrgpb
gdl tbo wo` riwsor gutiegtkmghhy udlorstgdls biw ti lksphgy tbo pgrgcrgpb toxt omguso ia
tbo pgrgcrgpb tgc$
B\EH Milo>
8p4Gvikl hiskdc ahippy lksjs wktb kepirtgdt smbiih$$$8)p4
8p4Air kdstgdmo( hot#s sgy yiu bgl g B_CO smbiih$$$8)p4
\wi B\EH Vgrgcrgpbs>
7/28/2019 Let Me Design (For HTML Beginners)
15/56
7? | V g c o
B\EH % Vgrgcrgpb Nustkakmgtkid
Vgrgcrgpbs mgd `o airegttol kd B\EH eumb tbo sgeo gs yiu wiuhl oxpomt ti akdl kd g wirl
primosskdc pricrge$ Boro tbo ghkcd gttrk`uto ks usol ti "nustkay" iur pgrgcrgpb$
B\EH Milo>
8p ghkcd5"nustkay"4Air kdstgdmo( hot#s sgy yiu bgl g B_CO smbiih ir wirj$$$8)p4
8p ghkcd5"modtor"4Air kdstgdmo( hot#s sgy yiu bgl g B_CO smbiih ir wirj$$$8)p4
8p ghkcd5"rkcbt"4Air kdstgdmo( hot#s sgy yiu bgl g B_CO smbiih ir wirj$$$8)p4
7/28/2019 Let Me Design (For HTML Beginners)
16/56
71 | V g c o
B\EH % Boglkdcs 7>1
G boglkdc kd B\EH ks nust wbgt yiu ekcbt oxpomt( g tktho ir su`tktho$ @y phgmkdc toxt kdsklo ia
8b74 boglkdc+ tgcs( tbo toxt lksphgys `ihl gdl tbo skzo ia tbo toxt lopodls id tbo due`or ia
boglkdc 7%1+$ Boglkdcs gro due`orol 7%1( wktb 7 `okdc tbo hgrcost boglkdc gdl 1 `okdc tbo
seghhost$
B\EH Milo>
8`ily4
8b74Boglkdcs"b7+8)b74
8b04gro"b0+8)b04
8b=4crogt"b=+8)b=4
8b
7/28/2019 Let Me Design (For HTML Beginners)
17/56
73 | V g c o
B\EH Milo>
8p4
Gdurgc8`r )4
Vrgtgp8`r )4
Lo` Piy#s HO\ EO LO]KCD8`r )4
8)p4
B\EH Birkzidtgh Puho
_so tbo 8br )4 tgc ti lksphgy hkdos gmriss tbo smrood$ Dito> tbo birkzidtgh ruho tgc bgs di odlkdc
tgc hkjo tbo hkdo `rogj tgc$
B\EH Milo>
8br )4
_so8br )48br )4
\boe
8br )4
]pgrkdchy
8br )4
7/28/2019 Let Me Design (For HTML Beginners)
18/56
72 | V g c o
B\EH Hksts
\boro gro = lkaaorodt typos ia hksts$ G 8ih4 tgc stgrts gd irlorol hkst( 8uh4 air udirlorol hksts( gdl
8lh4 air loakdktkid hksts$ _so tbo typo gdl stgrtgttrk`utos ti akdo tudo yiur hksts gmmirlkdchy$
8uh4 % udirlorol hkst: `uhhots
8ih4 % irlorol hkst: due`ors
8lh4 % loakdktkid hkst: lkmtkidgry
B\EH Irlorol Hksts
_so tbo 8ih4 tgc ti `ockd gd irlorol hkst$ Vhgmo tbo 8hk4 hkst ktoe+ tgc `otwood yiur ipodkdc
8ih4 gdl mhiskdc 8)ih4 tgcs ti mrogto hkst ktoes$ Irlorol skephy eogds due`orol( gs tbo hkst
`ohiw loeidstrgtos$
B\EH Milo>
8b< ghkcd5"modtor"4Cighs8)b
7/28/2019 Let Me Design (For HTML Beginners)
19/56
7; | V g c o
]tgrt yiur irlorol hkst id gdy due`or `osklos 7 uskdc tbo stgrtgttrk`uto$
B\EH Milo>
8b< ghkcd5"modtor"4Cighs8)b
8ih typo5"g"4
8ih typo5"G"4
8ih typo5"k"4
8ih typo5"K"4
Irlorol Hkst \ypos>
Hiwor%Mgso Hottors _ppor%Mgso Hottors Hiwor%Mgso Dueorghs _ppor%Mgso Dueorghs
g$ Akdl g Ni``$ Cot Eidoym$ Eivo Iut
G$ Akdl g Ni`@$ Cot EidoyM$ Eivo Iut
k$ Akdl g Ni`kk$ Cot Eidoy
kkk$ Eivo IutK$ Akdl g Ni`
KK$ Cot EidoyKKK$ Eivo Iut
7/28/2019 Let Me Design (For HTML Beginners)
20/56
06 | V g c o
B\EH _dirlorol Hksts
Mrogto g `uhhotol hkst wktb tbo 8uh4 tgc$ \bo `uhhot ktsoha mieos kd tbroo ahgvirs> squgros( lksms(
gdl mkrmhos$ \bo loaguht `uhhot lksphgyol `y eist wo` `riwsors ks tbo trglktkidgh auhh lksm$
B\EH Milo>
8b< ghkcd5"modtor"4]bippkdc Hkst8)b
8uh typo5"squgro"48uh typo5"lksm"4
8uh typo5"mkrmho"4
_dirlorol Hkst \ypos>
typo5"squgro" typo5"lksm" typo5"mkrmho"
Ekhj \ikhot Vgpor Morogh @rogl
Ekhj
\ikhot Vgpor
Morogh
@rogl
i Ekhji \ikhot Vgpori Moroghi @rogl
7/28/2019 Let Me Design (For HTML Beginners)
21/56
07 | V g c o
B\EH Loakdktkid \ore Hksts
Egjo loakdktkid hksts gs sood kd lkmtkidgrkos uskdc tbo 8lh4 tgc$ \boso hksts lksphgmo tbo tore
wirl nust g`ivo tbo loakdktkid ktsoha air g udkquo hiij$ Kt#s wkso ti `ihl tbo tores ti lksphgmo
tboe aurtbor$
8lh4 % loakdos tbo stgrt ia tbo hkst
8lt4 % loakdktkid tore
8ll4 % loakdkdc loakdktkid
B\EH Milo>
8lh4
8lt48`4Ariegco8)`48)lt4
8ll4Arodmb wirl air mbooso$8)ll4
8lt48`4Qikturo8)`48)lt4
8ll4Arodmb wirl air mgr$8)ll48)lt4
B\EH % Airegttkdc Ohoeodts w) \gcs
Gs yiu `ockd ti phgmo eiro gdl eiro ohoeodts idti yiur wo` skto( kt wkhh `omieo domossgry ti
egjo ekdir mbgdcos ti tbo airegttkdc ia tbiso ohoeodts$ ]ovorgh tgcs oxkst ti aurtbor gephkay
toxt ohoeodts$ \boso airegttkdc tgcs mgd egjo toxt ihl( ktghkm( su`)suporsmrkptol( gdl eiro$
Airegttkdc \gcs
B\EH % @ihl
Mrogtkdc `ihl toxt mgd `o gmmiephksbol tbriucb tbo uso ia tbo 8`4 `ihl tgc$
B\EH Milo>
8`4\bks toxt ks odtkrohy @IHL'8)`4
7/28/2019 Let Me Design (For HTML Beginners)
22/56
00 | V g c o
B\EH % Ktghkms+
\bo ktghkms tgcs sbiuhl `o usol ti bkcbhkcbt g joy wirl ir pbrgso$ \boso tgcs gro dit kdtodlol ti
ti styhkzo ir sbgpo yiur agmo$ Pgtbor( uso tboe ti oepbgskzo toxt ir wirls$
B\EH Milo>
Ktghkm 8k4tgc8)k4'
8oe4Oepbgskzol8)oe4 \oxt'
Mrogto g 8`himjquito4`himjquito8)`himjquito4'
Airegt yiur 8gllross4gllrossos8)gllross4'
B\EH % Milo 8milo4
\bo milo tgc ghhiws yiu ti spomkay sieo ia yiur toxt gs mieputor milo$ \bks skephy mbgdcos tbo
aidt agmo( skzo( gdl hottor spgmkdc ti ckvo tbo toxt tbo aooh ia `okdc mieputor milo$
[iu egy bgvo ditkmol tbgt dogrhy ghh ia iur oxgephos tbus agr uso tbo mieputor milo tgc wbod
lksphgykdc ogmb B\EH Milo oxgepho$
B\EH Milo>
\bks toxt bgs `ood airegttol ti `o mieputor 8milo4milo8)milo4'
B\EH % 8pro4 Vroairegttkdc
G wo` `riwsor kdtorprots yiur bteh limueodt gs `okdc ido hidc hkdo$ ]uro( yiu egy bgvo tg`s
gdl hkdo `rogjs kd ditopgl ghkcdkdc yiur midtodt si kt ks ogskor ti rogl air yiu tbo wo` egstor
yiur `riwsor kcdiros tbiso tg`s gdl hkdo `rogjs$
So sbiwol yiu ido wgy ti cot griudl tbks `y uskdc tbo ht`r )4 tgc$ \g`s gdl spgmkdc gro qukto
lkaaorodt( gdl g`sihutohy gddiykdc gt tkeos$ Ido skepho sihutkid ekcbt `o ti uso tbo 8pro4 tgc(
stgdlkdc air provkiushy airegttol toxt$
_so tbo 8pro4 tgc air gdy spomkgh mkrmuestgdmos wboro yiu wksb ti bgvo tbo toxt gppogr oxgmthy
gs kt ks typol$ ]pgmos( tg`s( gdl hkdo `rogjs tbgt oxkst kd yiur gmtugh milo wkhh `o prosorvol wktb
tbopro tgc$
7/28/2019 Let Me Design (For HTML Beginners)
23/56
0= | V g c o
B\EH Milo>
8pro4
Pisos gro Pol(
Qkihots gro `huo(
K egy siudl mrgzy(
@ut K hivo yiu'
8)pro4
B\EH % 8sup4 ]uporsmrkpt
]uporsmrkptol toxt mgd `o phgmol idti yiur wo`skto uskdc tbo 8sup4 tgc$ [iu egy kl tboso tgcs
air uso wktb Mgsmglkdc ]tyho ]boots$
B\EH Milo>
8p4\bks toxt ks 8sup4suporsmrkptol'8)sup48)p4
B\EH % ]u`smrkpt
_so tbo su`smrkpt tgcs ti phgmo su`smrkptol toxt idti yiur wo`sktos$
B\EH Milo>
8p4\bks toxt ks 8su`4su`smrkptol'8)su`48)p4
B\EH % ]trkjotbriucb
\i phgmo toxt idti yiur skto tbgt gppogrs ti `o mrissol iut( wo uso tbo 8loh4 tgc$
B\EH Milo>8p4\bks toxt ks 8loh4smrgtmbol8)loh4 iut'8)p4
B\EH % Mbomj Iaa \gsjs
Boro#s gd oxgepho ia g wo` lovohipor mbomjkdc iaa tgsjs gs tboy gro poraireol$
7/28/2019 Let Me Design (For HTML Beginners)
24/56
0< | V g c o
B\EH Milo>
8ih4
8hk4Mhogd ey riie8)hk4
8hk48loh4Miij Lkddor8)loh48)hk4
8hk48loh4Sgsb Lksbos8)loh48)hk4
8)ih4
@ihl( Ktghkm gdl Eiro
B\EH Milo>
8p4Gd oxgepho ia 8`4@ihl \oxt8)`48)p4
8p4Gd oxgepho ia 8oe4Oepbgskzol \oxt8)oe48)p4
8p4Gd oxgepho ia 8stridc4]tridc \oxt8)stridc48)p4
8p4Gd oxgepho ia 8k4Ktghkm \oxt8)k48)p4
8p4Gd oxgepho ia 8sup4suporsmrkptol \oxt8)sup48)p48p4Gd oxgepho ia 8su`4su`smrkptol \oxt8)su`48)p4
8p4Gd oxgepho ia 8loh4strumjtbriucb \oxt8)loh48)p4
8p4Gd oxgepho ia 8milo4Mieputor Milo \oxt8)milo48)p4
7/28/2019 Let Me Design (For HTML Beginners)
25/56
0? | V g c o
B\EH % Aidt gdl @gsoaidt
\bo 8aidt4 tgc ks usol ti gll styho( skzo( gdl mihir ti tbo toxt id yiur skto$ _so tbo skzo( mihir(
gdlagmo gttrk`utos ti mustiekzo yiur aidts$ _so g 8`gsoaidt4 tgc ti sot ghh ia yiur toxt ti tbo
sgeo skzo( agmo( gdl mihir$
Aidt ]kzo]ot tbo skzo ia yiur aidt wktb skzo$ \bo rgdco ia gmmoptol vghuos ks arie 7seghhost+ ti
3hgrcost+$\bo loaguht skzo ia g aidt ks =$
B\EH Milo>
8p4
8aidt skzo5"?"4Boro ks g skzo ? aidt8)aidt4
8)p4
Aidt Mihir]ot tbo mihir ia yiur aidt wktb mihir$
B\EH Milo>
8aidt mihir5"-;;6666"4\bks toxt ks boxmihir -;;66668)aidt4
8`r )4
8aidt mihir5"rol"4\bks toxt ks rol8)aidt4
Aidt Agmo
Mbiiso g lkaaorodt aidt agmo uskdc gdy aidt yiu bgvo kdstghhol$ Loaguht ks \keos Dow Piegd$
B\EH Milo>
8p4
8aidt agmo5"@iijegd Ihl ]tyho( @iij Gdtkqug( Cgrgeidl"4\bks pgrgcrgpb
bgs bgl kts aidt$$$8)aidt4
8)p4
7/28/2019 Let Me Design (For HTML Beginners)
26/56
01 | V g c o
B\EH 8lh4 \gc
\bo 8lh4 tgc loakdos g loakdktkid hkst$ \bo 8lh4 tgc ks usol kd midnudmtkid wktb 8lt4 loakdos tbo
ktoe kd tbo hkst+ gdl 8ll4 losmrk`os tbo ktoe kd tbo hkst+$
B\EH Milo>
8lh4
8lt4Miaaoo8)lt4
8ll4% hgmj bit lrkdj8)ll4
8lt4Ekhj8)lt4
8ll4% wbkto mihl lrkdj8)ll4
8)lh4
B\EH 8g``r4 \gc
\bo 8g``r4 tgc losmrk`os gd g``rovkgtol pbrgso$
@y egrjkdc up g``rovkgtkids yiu mgd ckvo usoauh kdairegtkid ti riwsors( spohhmbomjors( smrood
roglors( trgdshgtkid systoes gdl sogrmb%odckdos$
Gd g``rovkgtkid ks egrjol up gs aihhiws>
\bo 8g``r tktho5"Sirhl Boghtb Ircgdkzgtkid"4SBI8)g``r4 wgs aiudlol kd 7;
7/28/2019 Let Me Design (For HTML Beginners)
27/56
03 | V g c o
B\EH % Hkdjs gdl Gdmbirs
\bo wo` cit kts spklory dgeo arie tbo phodtkauh middomtkids `otwood wo` sktos$ \boso
middomtkids gro eglo uskdc gdmbir tgcs ti mrogto hkdjs$ \oxt( Kegcos( gdl Aires egy `o usol
ti mrogto tboso hkdjs$
B\EH % Byportoxt Poaorodmo broa+
\bo broagttrk`uto loakdos roaorodmo tbgt tbo hkdj roaors ti$ @gskmghhy tbks ks wboro tbo usor wkhh
`o tgjod ka tboy wksb ti mhkmj tbks hkdj$
Byportoxt roaorodmos mgd `o Kdtordgh( Himgh( ir Chi`gh$
Kdtordgh % Hkdjs ti gdmbirs id tbo murrodt pgco
Himgh % Hkdjs ti itbor pgcos wktbkd yiur liegkd
Chi`gh % Hkdjs ti itbor liegkds iutsklo ia yiur skto
B\EH Milo>
Kdtordgh % broa5"-gdmbirdgeo"
Himgh % broa5"$$)pkms)pkmturoakho$npc"
Chi`gh % broa5"bttp>))www$gdurgclo`=$6aoos$dot)pkmturoakho$npc "
B\EH % \oxt Hkdjs
_so tbo 8g48)g4 tgcs ti loakdo tbo stgrt gdl odlkdc ia gd gdmbir$ Lomklo wbgt typo iabroa
gttrk`uto yiu dool gdl phgmo tbks gttrk`uto kdti tbo ipodkdc tgc$ \bo toxt yiu phgmo `otwood
tbo ipodkdc gdl mhiskdc tgcs wkhh `o sbiwd gs tbo hkdj id g pgco$ _so tbo loeidstrgtkid `ohiw
gs g roaorodmo$
B\EH Milo>
8g broa5"bttp>))www$ciicho$mie)" 4Ciicho Bieo8)g4
8g broa5"bttp>))www$gdurgclo`=$6aoos$dot)" 4Ey @hic Bieo8)g4
8g broa5"bttp>))www$ygbii$mie)" 4[gbii Bieo8)g4
B\EH % Hkdj \grcots
\bo tgrcot gttrk`uto loakdos wbotbor ti ipod tbo pgco kd g sopgrgto wkdliw( ir ti ipod tbo hkdj
kd tbo murrodt riwsor wkdliw$
7/28/2019 Let Me Design (For HTML Beginners)
28/56
02 | V g c o
B\EH Milo>
tgrcot5" Y`hgdj" Ipods dow pgco kd g dow `riwsor wkdliw
Ysoha" Higls tbo dow pgco kd murrodt wkdliw
Ypgrodt" Higls dow pgco kdti g argeo tbgt ks suporkir ti wboro tbo hkdj
hkos
Ytip" Higls dow pgco kdti tbo murrodt `riwsor wkdliw( mgdmohhkdcghh argeos
B\EH % Oegkh Hkdjs
Mrogtkdc gd oegkh hkdj ks skepho$ Ka yiu wgdt sieo`ily ti egkh yiu g`iut yiur skto g ciil wgy
ti li kt ks phgmo gd oegkh hkdj wktb g su`nomt ghrogly kd phgmo air tboe$
B\EH Milo>
8g broa5"egkhti>oegkhFgdurgclo`=$6aoos$dot9su`nomt5Aool`gmj" Oegkh!`ily5\bks oegkh ksarie yiur wo`skto"4Oegkh eo 8)g4
7/28/2019 Let Me Design (For HTML Beginners)
29/56
0; | V g c o
B\EH Mbgrgmtor Odtktkos
Gd odtkty ks g agdmy tore air g sye`ih$ ]ovorgh sye`ihs sumb gs mipyrkcbt( trgloegrj( ir airokcd
mgsb sye`ihs oxkst iutsklo ia tbo idos yiu soo id yiur joy`igrl$
B\EH Milo>8p4
8`r )4
Crogtor tbgd % !ct: 8`r )4
@ily tgc % !ht:`ily!ct:
8)p4
8p4Ovorytbkdc tbgt cios up( eust mieo !d`sp:!d`sp:!d`sp:!d`sp:liwd'8)p4
!mipy: Mipyrkcbt Posorvol Gdurgc
Odtktkos Eogdkdc
!ht: i Hoss tbgd!ct: i Crogtor \bgd!mipy i Mipyrkcbt ]ye`ih!d`sp i ]pgmo
B\EH Kegcos
Kegcos gro g stgpho ia gdy wo` loskcdor( si kt ks vory kepirtgdt tbgt yiu udlorstgdl biw ti uso
tboe priporhy$ _so tbo 8kec )4 tgc ti phgmo gd kegco id yiur wo` pgco$
B\EH Milo>
8kec srm5" hici$pdc " )4
B\EH % Kegco srm
G`ivo wo bgvo loakdol tbo srm gttrk`uto$ ]rm stgdls air siurmo( tbo siurmo ia tbo kegco ir eiro
gppriprkgtohy( wboro tbo pkmturo akho ks himgtol$
_PH \ypos>
Himgh ]rm Himgtkid Losmrkptkid
srm5" hici$pdc " pkmturo akho rosklos kd sgeo lkromtiry gs $bteh akho
srm5"$$) hici$pdc " pkmturo akho rosklos kd provkius lkromtiry gs $bteh akho
srm5"$$)pkms) hici$pdc " pkmturo akho rosklos kd tbopkm lkromtiry kd g provkius lkromtiry gs
$bteh akho
7/28/2019 Let Me Design (For HTML Beginners)
30/56
=6 | V g c o
B\EH % Ghtordgtkvo Gttrk`uto
\bo ghtgttrk`uto spomkakos ghtordgto toxt ti `o lksphgyol ka air sieo rogsid tbo `riwsor mgddit
akdl tbo kegco( ir ka g usor bgs kegco akhos lksg`hol$
B\EH Milo>
8kec srm5 hici$pdc ght5kegco7)4
B\EH % Kegco Bokcbt gdl Skltb
\i loakdo tbo bokcbt gdl wkltb ia tbo kegco( rgtbor tbgd hottkdc tbo `riwsor mieputo tbo skzo(
uso tbo bokcbtgdl wkltb gttrk`utos$
B\EH Milo>
8kec srm5" hici$pdc " bokcbt5"?6" wkltb5"766"4
Qortkmghhy gdl Birkzidtghhy Ghkcd Kegcos
_so tbo ghkcd gdl vghkcd gttrk`utos ti phgmo kegcos wktbkd yiur `ily( tg`hos( ir somtkids$
7$ ghkcd Birkzidtgh+i rkcbti hoati modtor
0$ vghkcd Qortkmgh+i tipi `ittiei modtor
7/28/2019 Let Me Design (For HTML Beginners)
31/56
=7 | V g c o
Kegcos gs HkdjsKegcos gro vory usoauh air hkdjs gdl mgd `o mrogtol wktb tbo B\EH `ohiw$
B\EH Milo>
8g broa5"bttp>))gdurgclo`=$6aoos$dot)"4
8kec srm5"hici$pdc"4
8)g4
B\EH Aires
Aires gro g vktgh tiih air tbo wo`egstor ti romokvo kdairegtkid arie tbo wo` suraor( sumb gs>
tbokr dgeo( oegkh gllross( mrolkt mgrl( otm$
\oxt Akohls
@oairo wo togmb yiu biw ti egjo g miephoto aire( hot#s stgrt iut wktb tbo `gskms ia aires$
Kdput akohls gro cikdc ti `o tbo eogt ia yiur aire#s sgdlwkmb$ \bo 8kdput4 bgs g aow gttrk`utos
tbgt yiu sbiuhl o gwgro ia$
typo % Lotorekdos wbgt jkdl ia kdput akohl kt wkhh `o$ Vissk`ho mbikmos gro toxt( su`ekt(
gdl pgsswirl$
dgeo % Gsskcds g dgeo ti tbo ckvod akohl si tbgt yiu egy roaorodmo kt hgtor$
skzo % ]ots tbo birkzidtgh wkltb ia tbo akohl$ \bo udkt ia eogsuroeodt ks kd `hgdj spgmos$
egxhodctb % Lkmtgtos tbo egxkeue due`or ia mbgrgmtors tbgt mgd o odtorol$
eotbil% So wkhh idhy `o uskdc tbo pist audmtkidghkty ia eotbil( wbkmb sodls tbo lgtg
wktbiut lksphgykdc gdy ia tbo kdairegtkid ti tbo vksktir$
gmtkid % ]pomkakos tbo _PH ti sodl tbo lgtg ti$ So wkhh `o sodlkdc iur kdairegtkid ti g
agjo oegkh gllross$
7/28/2019 Let Me Design (For HTML Beginners)
32/56
=0 | V g c o
B\EH Milo>
8aire eotbil5"pist" gmtkid5"egkhti>yiuroegkhFoegkh$mie"4
Dgeo> 8kdput typo5"toxt" skzo5"76" egxhodctb5"yiuroegkhFoegkh$mie"4
Sbgt jkdl ia sbkrt gro yiu wogrkdc9 8`r )4
]bglo>8kdput typo5"rglki" dgeo5"sbglo" vghuo5"lgrj"4Lgrj
8kdput typo5"rglki" dgeo5"sbglo" vghuo5"hkcbt"4Hkcbt 8`r )4
]kzo>
8kdput typo5"rglki" dgeo5"skzo" vghuo5"seghh"4]eghh
8kdput typo5"rglki" dgeo5"skzo" vghuo5"eolkue"4Eolkue
8kdput typo5"rglki" dgeo5"skzo" vghuo5"hgrco"4Hgrco 8`r )4
8kdput typo5"su`ekt" vghuo5"Oegkh Eysoha"48)aire4
7/28/2019 Let Me Design (For HTML Beginners)
33/56
== | V g c o
B\EH Mbomj @ixos
Mbomj `ixos ghhiw air euhtkpho ktoes ti `o sohomtol air g mortgkd criup ia mbikmos$ \bo mbomj
`ix#s dgeo gdl vghuo gttrk`utos obgvo tbo sgeo gs g rglki uttid$
B\EH Milo>
8aire eotbil5"pist" gmtkid5"egkhti>yiuroegkhFoegkh$mie"4
]ohomt yiur agvirkto mgrtiid mbgrgmtors$
8kdput typo5"mbomj`ix" dgeo5"tiid" vghuo5"Ciiay"4Ciiay
8kdput typo5"mbomj`ix" dgeo5"tiid" vghuo5"Lidghl"4Lidghl
8kdput typo5"mbomj`ix" dgeo5"tiid" vghuo5"@ucs"4@ucs @uddy
8kdput typo5"mbomj`ix" dgeo5"tiid" vghuo5"]mii`"4]mii`y Lii
8kdput typo5"su`ekt" vghuo5"Oegkh Eysoha"4
8)aire4
B\EH Lrip Liwd Hksts
Lrip liwd eoduos gro mrogtol wktb tbo 8sohomt4 gdl 8iptkid4 tgcs$ 8sohomt4 ks tbo hkst ktsoha
gdl ogmb 8iptkid4 ks gd gvgkhg`ho mbikmo air tbo usor$
B\EH Milo>
8aire eotbil5"pist" gmtkid5"egkhti>yiuroegkhFoegkh$mie"4
Mihhoco Locroo9
8sohomt dgeo5"locroo"4
8iptkid4Mbiiso Ido8)iptkid4
8iptkid4]ieo Bkcb ]mbiih8)iptkid4
8iptkid4Bkcb ]mbiih Locroo8)iptkid4
8iptkid4]ieo Mihhoco8)iptkid4
8iptkid4@gmbohir#s Locroo8)iptkid4
8iptkid4Limtirgto8)iptkid4
8kdput typo5"su`ekt" vghuo5"Oegkh [iursoha"4
8)sohomt48)aire4
7/28/2019 Let Me Design (For HTML Beginners)
34/56
=< | V g c o
B\EH \oxt Grogs
\oxt grogs sorvo gs gd kdput akohl air vkowors ti phgmo tbokr iwd mieeodts idti$ Airues gdl
tbo hkjo uso toxt grogs ti pist wbgt yiu typo idti tbokr skto uskdc smrkpts$ Air tbks aire( tbo toxt
grog ks usol gs g wgy ti wrkto mieeodts ti sieo`ily$
Piws gdl mihueds dool ti `o spomkakol gs gttrk`utos ti tbo 8toxtgrog4 tgc$ Piws gro riucbhy
70pkxohs bkcb( tbo sgeo gs kd wirl pricrges gdl tbo vghuo ia tbo mihueds roahomts biw egdy
mbgrgmtors wklo tbo toxt grog wkhh `o$ k$o$ \bo oxgepho `ohiw sbiws g toxt grog ? riws tghh gdl
06 mbgrgmtors wklo$ Gditbor gttrk`uto ti `o gwgro ia ks tbo wrgp$ Srgp bgs = vghuos$
wrgp5
i "iaa"i "vkrtugh"i "pbyskmgh"
Qkrtugh eogds tbgt tbo vkowor wkhh soo tbo wirls wrgppkdc gs tboy typo tbokr mieeodts( `utwbod tbo pgco ks su`ekttol ti yiu( tbo wo` bist( tbo limueodt sodt wkhh dit bgvo wrgppkdc
wirls$
Vbyskmgh eogds tbgt tbo toxt wkhh gppogr `itb ti yiu( tbo wo` bist( gdl tbo vkowor kdmhulkdc
gdy pgco `rogjs gdl gllktkidgh spgmos tbgt egy `o kdputol$ \bo wirls mieo gs tboy gro$
Iaaia miurso( turds iaa wirl wrgppkdc wktbkd tbo toxt grog$ Ido idcikdc hkdo$
B\EH Milo>
8aire eotbil5"pist" gmtkid5"egkhti>yiuroegkhFoegkh$mie"4
8toxtgrog riws5"?" mihs5"06" wrgp5"pbyskmgh" dgeo5"mieeodts"4
Odtor Mieeodts Boro
8)toxtgrog4
8kdput typo5"su`ekt" vghuo5"Oegkh [iursoha"4
8)aire4
7/28/2019 Let Me Design (For HTML Beginners)
35/56
=? | V g c o
B\EH \g`hos
\g`hos egy sooe lkaakmuht gt akrst( `ut gator wirjkdc tbriucb tbks hossid yiu#hh soo biw tboy
grod#t tii `gl$ \bo 8tg`ho4 tgc ks usol ti `ockd g tg`ho$ Sktbkd g tg`ho ohoeodt gro tbo 8tr4
tg`ho riws+ gdl 8tl4 tg`ho mihueds+ tgcs$ \g`hos gro g bgdly wgy ti mrogto g skto#s hgyiut( `ut
kt lios tgjo sieo cottkdc usol ti$ Boro#s biw ti egjo g tg`ho$
B\EH Milo>
8tg`ho irlor5"7"4
8tr4
8tl4Piw 7 Mohh 78)tl48tl4Piw 7 Mohh 08)tl4
8)tr4
8tr4
8tl4Piw 0 Mohh 78)tl4
8tl4Piw 0 Mohh 08)tl4
8)tr4
8)tg`ho4
]pgddkdc Euhtkpho Piws gdl Mohhs
_so riwspgd ti spgd euhtkpho riws gdl mihspgd ti spgd euhtkpho mihueds$
B\EH Milo>
8tg`ho irlor5"7"4
8tr48tb4Mihued 78)tb4
8tb4Mihued 08)tb4
8tb4Mihued =8)tb4
8)tr4
8tr48tl riwspgd5"0"4Piw 7 Mohh 78)tl4
8tl4Piw 7 Mohh 08)tl48tl4Piw 7 Mohh =8)tl48)tr4
8tr48tl4Piw 0 Mohh 08)tl48tl4Piw 0 Mohh =8)tl48)tr4
8tr48tl mihspgd5"="4Piw = Mohh 78)tl48)tr4
8)tg`ho4
Mohh Vgllkdc gdl ]pgmkdc
Sktb tbo mohhpgllkdc gdl mohhspgmkdc gttrk`utos yiu wkhh `o g`ho ti glnust tbo wbkto spgmo id
yiur tg`hos$ ]pgmkdc loakdos tbo wkltb ia tbo `irlor( wbkho pgllkdc roprosodts tbo lkstgdmo
`otwood mohh `irlors gdl tbo midtodt wktbkd$ Mihir bgs `ood gllol ti tbo tg`ho ti oepbgskzo
tboso gttrk`utos$
7/28/2019 Let Me Design (For HTML Beginners)
36/56
=1 | V g c o
B\EH Milo>
8tg`ho irlor5"7" mohhspgmkdc5"76" `cmihir5"rc`6(0??(6+"4
8tr4
8tb4Mihued 78)tb4
8tb4Mihued 08)tb4
8)tr4
8tr4
8tl4Piw 7 Mohh 78)tl4
8tl4Piw 7 Mohh 08)tl4
8)tr4
8tr4
8tl4Piw 0 Mohh 78)tl4
8tl4Piw 0 Mohh 08)tl4
8)tr4
8)tg`ho4
B\EH Mihir % `cmihir
\bo `cmihir gttrk`uto ks usol ti midtrih tbo `gmjcriudl ia gd B\EH oheoeodt( spomkakmghhy pgco
gdl tg`ho gmjcriudls$ @cmihir mgd o phgmol wktbkd sovorgh ia tbo B\EH tgcs$
]ydtgx
8\GCDGEO cmihir5"vghuo"4
Wukmj gdl lkrty( boro ks biw ti mbgdco tbo `gmjcriudl ia yiur wo` pgco$ Nust uso tbo `cmihir
gttrk`uto kd tbo 8`ily4 tgc gdl yiu gro cihlod$
7/28/2019 Let Me Design (For HTML Beginners)
37/56
=3 | V g c o
B\EH Milo>
8bteh4
8`ily cmihir5"]khvor"4
8p4So sot tbo gmjcriudl$$$8)p48)`ily4
8)bteh4
Gllkdc Mihir ti [iur \g`hos
\bks oxgepho sbiws biw ti gll g `gmjcriudl mihir air gd odtkro tg`ho uskdc codorkm vghuos ia
mihir$
B\EH Milo>
8tg`ho `cmihir5"-MMMMMM" `irlor5"7"4
8tr4
8tl4Kdlkg Qs Vgjkstgd Egtmb Sbi Skhh Skd $8)tl4
8)tr4
8tr `cmihir5"-111111"4
8tl4Kdlkg8)tl4
8)tr4
8tr `cmihir5"-;;;;;;"4
8tl4Vgjkstgd8)tl4
8)tr4
8)tg`ho4
7/28/2019 Let Me Design (For HTML Beginners)
38/56
=2 | V g c o
@gmjcriudl Mihir gdl Aidt Mihir
Mbomj iut tbks "]miro`igrl" wo eglo wktb tbo uso ia aidt mihir gdl `cmihir'
B\EH Milo>
8tg`ho `cmihir5"-MMMMMM"4
8tr4
8tl cmihir5"-111111"4
8aidt mihir5"-AAAAAA" ghkcd5"rkcbt"4Kdlkg8)aidt4
8)tl4
8tl48aidt mihir5"-666666"47
7/28/2019 Let Me Design (For HTML Beginners)
39/56
=; | V g c o
Egrquoo
[iu mgd mrogto g smrihhkdc egrquoo k$o$ smrihhkdc toxt ir smrihhkdc kegcos+ `y uskdc tbo
8egrquoo4 tgc$ [iu mgd egjo tbo toxt)kegcos smrihh arie rkcbt ti hoat( hoat ti rkcbt( tip ti
`ittie( ir `ittie ti tip % kt#s yiur mbikmo'
\KV> [iu mgd egjo kt ogsy id yiursoha `y uskdc tbo egrquoo codorgtir$
]hklo%kd toxt>\bks toxt shklos kd arie tbo rkcbt( tbod stgys wboro kt ks$ [iu wkhh dool ti roarosb tbks pgco ti soo
tbo oaaomt gcgkd$
Midtkduius smrihhkdc toxt>
\oxt `iudmkdc `gmj gdl airtb>
\oxt ]mrihhkdc _pwgrls>
8egrquoo obgvkir5"shklo" lkromtkid5"hoat"4[iur shklo%kd toxt cios boro8)egrquoo4
8p styho5"aidt%skzo>76px:"48g broa5"bttp>))www$kdaigdu$mie)bteh)milos)"4B\EH
milo8)g48)p4
8egrquoo obgvkir5"smrihh" lkromtkid5"hoat"4
[iur smrihhkdc toxt cios boro
8)egrquoo4
8p styho5"aidt%skzo>76px:"48g broa5"bttp>))www$kdaigdu$mie)bteh)milos)"4B\EH
milo8)g48)p4
8egrquoo obgvkir5"ghtordgto"4
[iur iudmkdc toxt cios boro8)egrquoo4
8p styho5"aidt%skzo>76px:"4
8g broa5"bttp>))www$kdaigdu$mie)bteh)milos)"4B\EH milo8)g4
8)p4
8egrquoo `obgvkir5"smrihh" lkromtkid5"up"4[iur upwgrl smrihhkdc toxt cios
boro8)egrquoo4
7/28/2019 Let Me Design (For HTML Beginners)
40/56
]mrihhkdc Kegcos>
]kephy rophgmo tbo srm5"$$$ pgrt wktb tbo himgtkid ia yiur iwd kegco$
Kegcos ! \oxt @itb ]mrihhkdc+>
]kephy gll yiur toxt udlor tbo kegco tgc `ut stkhh wktbkd tbo egrquoo tgc+$
B\EH Argeos
Argeos ghhiw air euhtkpho "$bteh" limueodts ti `o lksphgyol kdsklo ia ido `riwsor wkdliw gt g
tkeo$ \bks eogds tbgt ido pgco bgs di midtodt id kt( `ut rgtbor tohhs tbo `riwsor wbkmb wo`
pgcos yiu wiuhl hkjo ti ipod$
8egrquoo obgvkir5"smrihh" lkromtkid5"hoat" smrihhgeiudt5"7"4]hiw smrihh
spool8)egrquoo4
8egrquoo obgvkir5"smrihh" lkromtkid5"hoat" smrihhgeiudt5"76"4Eolkue smrihh
spool8)egrquoo4
8egrquoo obgvkir5"smrihh" lkromtkid5"hoat" smrihhgeiudt5"06"4Agst smrihh
spool8)egrquoo4
8p styho5"aidt%skzo>76px:"48g broa5"bttp>))www$kdaigdu$mie)bteh)milos)"4B\EH
milo8)g48)p4
8egrquoo obgvkir5"smrihh" lkromtkid5"hoat"48kec srm5")pkx)sekho$cka" wkltb5"766" bokcbt5"766"
ght5"sekho" )48)egrquoo4
8p styho5"aidt%skzo>76px:"48g broa5"bttp>))www$kdaigdu$mie)bteh)milos)"4B\EH milo8)g48)p4
8egrquoo obgvkir5"smrihh" lkromtkid5"hoat"4
8kec srm5")pkx)sekho$cka" wkltb5"766" bokcbt5"766" ght5"sekho" )4
8p4]gepho toxt udlor g 8g
broa5"bttp>))www$kdaigdu$mie)bteh)milos)btehYegrquooYmilo$mae"4Egrquoo kegco8)g4$8)p4
8p styho5"aidt%skzo>76px:"48g broa5"bttp>))www$kdaigdu$mie)bteh)milos)"4B\EH milo8)g48)p4
8)egr uoo4
7/28/2019 Let Me Design (For HTML Beginners)
41/56
8bteh4
8bogl4
8)bogl4
8argeosot mihs5"=6/(."48argeo srm5"eodu$bteh"48argeo srm5"midtodt$bteh"48)argeosot4
8)bteh4
Argeo ]ot>Boro#s tbo oxgepho> Argeo Kdlox
argeosot % \bo pgrodt tgc tbgt loakdos tbo mbgrgmtorkstkms ia tbks argeos pgco$ Kdlkvklugh
argeos gro loakdol kdsklo kt$
argeosot mihs5"-/( ."% Mihsmihueds+ loakdos tbo wkltb tbgt ogmb argeo wkhh bgvo$ Kd
tbo g`ivo oxgepho wo mbiso tbo eodu tbo 7st mihued+ ti `o =6/ ia tbo titgh pgco gdl
usol g "."( wbkmb eogds tbo midtodt tbo 0dl mihued+ wkhh uso tbo roegkdkdc wkltb air
ktsoha$
argeo srm5"" %\bo himgtkid ia tbo wo` pgco ti higl kdti tbo argeo$
G ciil ruho ia tbue` ks ti mghh tbo pgco wbkmb midtgkds tbks argeo kdairegtkid "kdlox$bteh"
`omguso tbgt ks typkmghhy g skto#s egkd pgco$
B\EH Milo>
8bteh4
8bogl4
8)bogl4
8argeosot irlor5"7" argeo`irlor5"7" argeospgmkdc5"6" riws5"06/(."4
8argeo srm5"boglor$bteh"48argeosot irlor5"7" argeo`irlor5"7" argeospgmkdc5"6" mihs5"=6/(."4
8argeo srm5"eodu$bteh"4
8argeo srm5"midto t$bteh"4
8)argeosot48diargeos48)diargeos4
8)bteh4
7/28/2019 Let Me Design (For HTML Beginners)
42/56
8argeosot riws5"06/(."4
8argeo dgeo5"tktho" srm5"tktho$bteh"4
8argeosot mihs5"=6/(."4
8argeo dgeo5"eodu" srm5"eodu$bteh"4
8dgeo5"midtodt" srm5"midtodt$bteh"4
8)argeosot4
B\EH Milo>
8bteh4
8bogl4
8`gso tgrcot5"midtodt"4
8)bogl4$
8)bteh4
7/28/2019 Let Me Design (For HTML Beginners)
43/56
7/28/2019 Let Me Design (For HTML Beginners)
44/56
8'%% 8kdput typo5"toxt" skzo5"70" )4 %% Kdput Akohl %%4
Diw wbod wo gro rogly ti lksphgy tbgt ohoeodt( wo mgd skephy roeivo tbo mieeodt tgcs gdl
iur `riwsor wkhh roglkhy lksphgy tbo ohoeodt$
B\EH Milo>
8kdput typo5"toxt" skzo5"70" )4
Kdput Akohl>
Mieeodt iut ohoeodts gdl `kts ia milo tbgt yiu egy wgdt ti romghh gdl uso gt g hgtor lgto$
Ditbkdc ks eiro arustrgtkdc tbgd lohotkdc `kts ia milo idhy ti turd griudl gdl romilo tboe$
7/28/2019 Let Me Design (For HTML Beginners)
45/56
7/28/2019 Let Me Design (For HTML Beginners)
46/56
7/28/2019 Let Me Design (For HTML Beginners)
47/56
8tg`ho kl5"sbohh" tktho5"]bohh" bokcbt5"0?6" wkltb5"
7/28/2019 Let Me Design (For HTML Beginners)
48/56
8`ily4
8lkv styho5"`gmjcriudl> crood"4
8b? 4]OGPMB HKDJ]8)b?4
8g tgrcot5"Y`hgdj" broa5"bttp>))www$ciicho$mie"4Ciicho8)g4
8)lkv4
8)`ily4
B\EH % Lkv Hgyiuts
Sbod B\EH akrst `ocgd( wo` mrogtirs idhy bgl twi mbikmos$ G tg`ho hgyiut( ir argeos$ \bo lkv
ohoeodt privklos g =rl ghtordgtkvo( skdmo g lkv mgd midtgkd gdy)ovory itbor typo ia bteh
ohoeodt wktbkd kts `ockddkdc gdl odlkdc tgc$
7/28/2019 Let Me Design (For HTML Beginners)
49/56
8lkv kl5"eodu" ghkcd5"hoat" 4
8g broa5""4BIEO8)g4 |
8g broa5""4MID\GM\8)g4 |
8g broa5""4G@I_\8)g4
8)lkv4
8lkv kl5"midtodt" ghkcd5"hoat" `cmihir5"wbkto"4
8b?4Midtodt Grtkmhos8)b?4
8p4\bks pgrgcrgpb wiuhl o yiur midtodt
pgrgcrgpb wktb ghh ia yiur roglg`ho egtorkgh$8)p4
8)lkv4
B\EH Lkv Hgyiut>
Gttrk`uto Qghuo Losmrkptkid
ghkcd hoat
rkcbt
modtor
nustkay
Lopromgtol$ _so styhos kdstogl$
]pomkakos tbo ghkcdeodt ia tbo midtodt kdsklo g lkv
ohoeodt
]tgdlgrl Gttrk`utos
\bo 8lkv4 tgc suppirts tbo aihhiwkdc stgdlgrl gttrk`utos>
Gttrk`uto Qghuo Losmrkptkid
mhgss mhgssdgeo ]pomkakos g mhgssdgeo air gd ohoeodt
lkr rth
htr
]pomkakos tbo toxt lkromtkid air tbo midtodt kd gd
ohoeodt
kl kl ]pomkakos g udkquo kl air gd ohoeodt
7/28/2019 Let Me Design (For HTML Beginners)
50/56
?6 | V g c o
hgdc hgdcugcoYmilo ]pomkakos g hgdcugco milo air tbo midtodt kd gd
ohoeodt
styho styhoYloakdktkid ]pomkakos gd kdhkdo styho air gd ohoeodt
tktho toxt ]pomkakos oxtrg kdairegtkid g`iut gd ohoeodt
xeh>hgdc hgdcugcoYmilo ]pomkakos g hgdcugco milo air tbo midtodt kd gd
ohoeodt( kd RB\EH limueodts
B\EH 8i`nomt4 \gc
\bo 8i`nomt4 tgc ks usol ti kdmhulo i`nomts sumb gs kegcos( gulki( vklois( Ngvg gpphots( GmtkvoR(
VLA( gdl Ahgsb$
\bo i`nomt ohoeodt wgs kdtodlol ti rophgmo tbo kec gdl gpphot ohoeodts$ Biwovor( `omguso ia
`ucs gdl g hgmj ia `riwsor suppirt tbks bgs dit bgppodol$
\bo i`nomt suppirt kd `riwsors( lopodl id tbo i`nomt typo$ _dairtudgtohy( tbo egnir `riwsors
uso lkaaorodt milos ti higl tbo sgeo i`nomt typo$
Humjkhy( tbo i`nomt ohoeodt privklos g sihutkid$ Ka tbo i`nomt ohoeodt ks dit lksphgyol( tbo milo
`otwood tbo 8i`nomt4 gdl 8)i`nomt4 tgcs wkhh `o oxomutol$ \bks wgy wo mgd bgvo sovorgh dostol
i`nomt ohoeodts ido air ogmb `riwsor+$
B\EH Milo>8bteh4
8`ily4
8i`nomt wkltb5"
7/28/2019 Let Me Design (For HTML Beginners)
51/56
?7 | V g c o
B\EH Euskm Milos
Kdsortkdc euskm idti g wo` pgco ks rohgtkvohy ogsy$ Kd tbo pgst euhtkpho tgcs bgl ti `o usol
`omguso `riwsors lkl dit bgvo g udkaire stgdlgrl air loakdkdc oe`ollol eolkg akhos$
Biwovor( K ge chgl ti gddiudmo tbgt tbks ks g pri`hoe ia tbo pgst gdl yiu wkhh bgvo g eumb
ogskor tkeo tbod wo`egstors ia tbo pgst$
B\EH Oe`ol
Euskm ks kdsortol idti g wo` pgco wktb tbo uso ia tbo oe`oltgc$ \boro gro itbor wgys ti hkdj
ti euskm( `ut oe`ol ks diw midsklorol tbo stgdlgrl air kdsortkdc eolkg$ @ohiw ks gd ekdkeghkst
oxgepho ia tbo oe`ol tgc uskdc tbo srm gttrk`uto ti loakdo tbo eolkg akho#s himgtkid$
B\EH Milo>
8oe`ol srm5"I%Po%Vkyg$ep=" )4
8p4G`ivo ks gd oe`ollol eolkg phgyor$ \i stip tbo euskm pross stip)pguso$8)p4
Oe`ol Gttrk`utos % Pohgtol ti Lksphgy
\i mustiekzo tbo gppogrgdmo ia tbo oe`ollol eolkg phgyor `o suro ti sot tbo aihhiwkdc
gttrk`utos$
wkltb % tbo wkltb ia tbo eolkg phgyor$
bokcbt % tbo bokcbt ia tbo eolkg phgyorbkllod % ka tbks vghuo ks truo tbod tbo eolkg phgyor wkhh dit `o lksphgyol$ So romieeodl
uskdc tbks gttrk`uto idhy ka yiu jdiw tbgt yiur vksktirs wkhh dit wgdt tbo iptkid ti stip
tbo euskm tbgt ks phgykdc id yiur wo` pgco$ Qghuos gro truo)aghso+
Oe`ol Gttrk`utos % Pohgtol ti Audmtkidghkty
\i mustiekzo tbo audmtkidghkty ia tbo oe`ollol eolkg phgyor `o suro ti sot tbo aihhiwkdc
gttrk`utos$
gutistgrt % mbiiso ka tbo eolkg akho wkhh stgrt gutiegtkmghhy
hiip % sots tbo eolkg akho ti ropogt ir dit
vihueo % sot tbo vihueo ia tbo eolkg akho$ \bo rgdco ks 6%766$
B\EH % Qkloi Milos
Qklois mgd o oe`ollol kdti yiur bteh limueodts wo` pgcos+ twi lkaaorodt wgys$ Ido
eotbil ks ti uso tbo 8oe`ol )4 tgc ti lksphgy yiur eolkg akho$ \bo oe`ol tgc lios dit roqukro
g mhiskdc tgc$ Kd agmt( kt wirjs eumb hkjo tbo kegco tgc$ G srm gttrk`uto eust `o loakdol `y tbo
7/28/2019 Let Me Design (For HTML Beginners)
52/56
?0 | V g c o
mirromt _PH himgh ir chi`gh+ kd irlor air tbo vkloi akho ti `o lksphgyol mirromthy$ Boro ks g hiij gt
tbo oe`ol tgc wktb g chi`gh _PH( aooh aroo ti uso tbks _PH wbkho yiu prgmtkmo$
B\EH Milo>
8oe`ol srm5"looptk$wev" gutistgrt5"aghso" )4
Biw ti egjo yiur So` Vgco
Diw try ti egjo tbks wo`pgco$ Mgd [iu9
7/28/2019 Let Me Design (For HTML Beginners)
53/56
?= | V g c o
\bo Hkdo ]tip mrkeo gcgkdst piir mieeudkty ks nust gd kegco gdl yiu mgd mrogto kt tbiucb E]
pgkdt uskdc sieo miih aidts gdl tbod sgvo kt kd $npc airegt nikdt pkmturo criup+
Ij K jdiw yiu mgd li kt `ut ti bohp yiu boro ks sieo milo
8bteh4
7/28/2019 Let Me Design (For HTML Beginners)
54/56
?< | V g c o
8bogl4
8tktho4@o Buegd8)tktho4
8)bogl4
8`ily gmjcriudl5"=$npc"4
8p48kec srm5"boglor$pdc" wkltb5"126" bokcbt5";;" )48)p4
8tg`ho wkltb5"127" bokcbt5"==1" irlor5"7" mohhpgllkdc5"7" mohhspgmkdc5"7"
`cmihir5"-MMMMMM"4
8tr4
8tl wkltb5"2;"48p4Bieo8)p4
8p4G`iut _]8)p4
8p4Lidgtkids8)p4
8p4Midtgmt _s8)p4
8)tl4
8tl wkltb5"?3;"48p4Kd 7;;0 wbod Mhkdtid wgs ruddkdc air prosklodt( bo eglo g pikdt ia
hogvkdc tbo mgepgkcd trgkh ti ci `gmj ti Grjgdsgs air gd oxomutkid( sodlkdc g stridc eossgco ti
tbo Georkmgd poipho tbgt bo wgs kd auhh suppirt ia tbo logtb podghty$ \bo vkmtke wgs g eodtghhy
rotgrlol egd dgeol Pkmjy Pgy Pomtir( wbi tihl tbo cugrls tgjkdc bke arie bks mohh ti tbo
oxomutkid mbge`or tbgt bo wgs cikdc ti hogvo bks lossort id tbo sklo ia bks `udj$
!quit:K!rsqui:e cikdc ti ogt kt gator ey oxomutkid(!quit: bo sgkl$8)p4
8p4Ovory lgy( ovory biur( ovory ekduto$G pihktkmgh systoe tbgt mgrrkos iut mrkekdgh `obgvkir
boro gt bieo mgd mortgkdhy mgrry iut wgr mrkeos g`rigl$K ge arie \oxgs( g stgto tbgt bgs
oxomutol 726 iut ia tbo ?16 jkhhol kd tbo _] skdmo tbo logtb podghty wgs rokdstgtol kd 7;31(
eiro poipho tbgt gdy itbor stgto kd tbo miudtry$ \boro gro
7/28/2019 Let Me Design (For HTML Beginners)
55/56
?? | V g c o
8)tr4
8)tg`ho4
8)`ily4
8)bteh4
7/28/2019 Let Me Design (For HTML Beginners)
56/56
@ost Ia Humj