Upload
dave-hallmon
View
215
Download
0
Embed Size (px)
Citation preview
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
1/72
1
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
2/72
2
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
3/72
3
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
4/72
Togetusstarted,Iwouldlikeusalltowatchthefollowingvideodocumentaryfrom
Code.org whichisanonprofitdevotedtothevisionthateverystudentineveryschool
shouldhavetheopportunitytolearnhowtocode.Theybelievethatcomputer
programmingshouldbepartofthecorecurriculumineducation,alongsideother
scienceandmathcoursessuchasbiology,chemistryandalgebra!
4
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
5/72
Anybodyknowwhothisis?
5
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
6/72
ThisisBillGatesatage20.AroundthetimehestartedMicrosoft.
6
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
7/72
Andthis?
7
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
8/72
ThisisSteveJobsatage21.
8
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
9/72
Andthis?
9
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
10/72
Sowhatdothesetechmogulshaveincommon?
ButonethingthatIwouldliketomentionistheirexpertabilitytomakethecomplex
understandablethroughtheirwritingandpresentations.Fromeverythinglikehowto
useaMicrosoft
OS,
the
tech
behind
the
iPhone,
and
the
meaning
of
aFacebook
poke.
Iftheycouldntexplainitwelltootherstheywouldntandtheircompanieswouldntbe
wheretheyaretoday.
10
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
11/72
Designersneedtobeabletotalkwithdevelopers
11
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
12/72
Andbothneedtobeabletotalktothebusiness,eitheraclient,sales,management,
etc.
12
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
13/72
WithoutanabilitytodothispeoplelikeBillGates,SteveJobs,andMarkZuckerberg
wouldnothavebeenassuccessful.
13
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
14/72
14
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
15/72
15
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
16/72
Thisiswhyinthisclasseachweekyouwillbeaskedtowriteupyourthoughtsand
prepareaminidiscussion/presentationofyourthoughtsintwoassignments.TheGood,
Bad,andtheUglyorGBUandtheTermProjectJournalorTPJ.
Sothis
class
is
much
more
than
just
learning
how
to
code.
Students
will
leave
this
class
withskillstorecommendhowawebsitecanberedesigned,recommendbest
practices,analyzeusers,planasite,andofcoursethebasicsofcodingasite.
16
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
17/72
Sotomakesurethatweunderstandtheseassignmentsletstakealookatthecourse
syllabus.
17
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
18/72
Oneofthereasonswewentwiththisbookisbecauseofthisemphasis.Youwillfindin
thisclassIwilldiscussatlengththeimportanceoftheuserandhowattimesIthinkit
shouldbemoreabouttheuserthanevenlearninghowtocode.
Ihave
access
to
asoft
version
of
the
chapters
in
this
book
and
Iput
all
of
the
text
from
Chapter1intoafreewordcloudprogramcalledwordle.Whattheprogramdoesisit
makesthemostcommonwordslargerthantheotherwordstoconveyimportance.
Thebookteachesyouthebasicswiththeuseratthecenter.
18
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
19/72
TheInternetbeganwithaconnectionofcomputersandcomputernetworks.Asweall
knowtheInternethaschangedthewayweliveourlivesandinteractwitheachother.
Togetusstarted.Letstalkaboutwhatsomethingsarethatweusetheinternetfor?
Searchfor
information
Communicatewithotherpeople
Paybills
Etc.
HowhastheInternethasrevolutionizedthewaybusinessandindustriesfunction?
Companiesnowneedwebsites
Customerslookforcompaniesonthenet
TalkaboutTopsUrWay
19
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
20/72
TherearealotofthingssharedontheInternet.Thefirstthreebulletsherecanreallybe
onebulletcalledcode,butmorespecifically,HTML,CSS, scripts,text,images,files,etc.Fileslikeimages,documents,audio,videos,etc.canbethoughtofascontent.Browsers interpretthisinformationfortheuserintothewebpageswehavejustbeen
discussing.Browsers
then
allow
the
user
to
do
something,
seek
something
anything
thattheywantontheInternetiftheyhavepermissionorknowhowtofindit.
20
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
21/72
YouwillfindoutinthiscoursethatIwillharponhowimportantitistounderstandyour
user.Haveyoueverheardthesaying,Thecustomerisalwaysright?Well,forthe
purposesofthiscourse,theuserisalwaysright.Andtheyknowwhattheywant.Itisall
aboutthem.
Ifyou
learn
one
thing
in
this
course
please
learn
that
it
is
always
about
the
user.
Ihave
a
closefriendwhoisawebdesigneratafirmoverinIllinoisandheisaskeddailyto
designsomethingthatheknowswillnotworkfortheuser.Himrealizingthisallowshim
toaskthesalesdepartmenttocontacttheclientandgetthingscorrected.Whatwouldyouthinkwouldhappenifmyfrienddidntnoticethingslikethis?Badwebsite
Customerunhappy
Etc.
Doesanyoneknowhowmuchthetextbookcosts?
21
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
22/72
Oneofthereasonswechosethistextbookforthiscoursewasbecauseofthesentence
foundinchapter1Itisworthitsweightingold!
Comprehensiveplanningand analysisensuresthatdesignersanddeveloperswill
providewhattheiruserswant.IfyoustarttocodeyourWebpageswithoutthorough
planningand
analysis,
you
run
the
risk
of
missing
pertinent
information.
It
is
much
less
expensivetomakecorrectionstoaWebsiteintheearlyphasesofaproject
developmentthatitistoalterWebpagesthatarecompleted.
Itsallabouttheuser.Alwaysabouttheuser.Thewebsiteiffortheuser.Notforthe
designerortheclient.AmazonswebsiteisnotforthecompanyAmazon.Itisfortheir
customerstheusers.
22
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
23/72
InthiscoursewewillutilizeaprocesscalledtheWebDevelopmentLifeCycleasa
frameworktocreateourtermprojects,i.e.,thewebsitesthatwewillbecreating.
Aswebdesigners/developers,weneed(should)tofollowaprocesswhenweare
creatingpages
and
sites
for
ourselves
as
a"hobbyist"
or
a"opportunist"
freelance
web
designer.Moreonthatnextweek.
Thediagramrepresentsthatprocess.Itrulyhopethatyouwillutilizethisprocessfor
anyfurtherwebsitesthatyouwillevermakeasadesignerordeveloper.Besuretopay
specialcloseattentiontothediscussionofthiscycleinyourtextbookandthe
correspondingweeklylectures.
23
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
24/72
ThisisareallycoolphotooftheEmersonLibrary.Thephotoisheartohelpremindus
thattheinternetbeganasawayforuniversitystudentslikeyourselftoshareresearch
content.In1969thereneededtobeawayforacomputeratoneuniversitytoconnect
withanotheruniversity.Thissimplenetworkhasnowevolvedintobillionsofusers
accessingandsharingcontent.
LikeIwassayingearlier.Contentcouldbetext,graphics,sound,video,etc.Inthecase
ofthe1969usersIamguessingitwassimpletextfilesofresearchcontent.Modern
universityusersaresharinglargerfileslikemusicandvideos.
Nowinthepresentday,ifuserswanttoaccesscontentontheInternet,theymusthave
anaccountwithanInternetServiceProvider(ISP).IdontknowwhoWebstergetstheirinternetfrom,butatourhomesifwehavetheinternet,weallhaveanISP.
WhatISPsdowehaverepresentedtonight?Charter
AT&T
Etc.
Whileitmightfeellikeitsometimes,thesecompaniesdontowntheInternet.They
provideusaccesstotheInternetthroughaDSLorCableconnectionlinessotheirusers
24
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
25/72
canaccesscontent.andasweknowtheychargeapremiumforthis.
24
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
26/72
WhenyouhearWWWorWorldWideWeb,thinkofitasacollectionofwebcontent.
Tosupportthesepages,documents,files,ormultimedia forusers,thereneededtobe
somesortofprotocolforhowtheycouldaccessthem.ThisiswherewegettheHyperTextTransferProtocolyouknow,(HTTP)whichisasetofrulesforexchangingthecontent,e.g.,images,audio,video,text,etc.thatarefoundoftenfoundonwebpages.
25
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
27/72
Discusshierarchy
26
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
28/72
Thisisanexampleofawebsitewhichisacollectionofwebpagesmaintainedbyweb
designersanddeveloperslikeourselves.Eachhasahome(i.e.,indexpage)whichtheiruserswillnavigatetofirstandthennavigate tootherareasofthewebsite(ifitiswelldesigned).
Eachofthesepagesarestoredonawebserversomewhere.Thesearesometimescalledahost,becausetheyhostthespaceforthesite.
Forthepurposesofthiscourse,wewillcreatealocalhostwhichjustmeansthatourcomputerswillbehostingoursites.Wewilleventuallybeuploadingor FTPingthesetoWebstersstudentservercalledLabwebs.
Onceasiteissetup,theirusersessentiallymakerequeststotheseserverswhich
servetheuser.
Whatisarequest?Remember,ausercanonlymakearequesttotheserveriftheyhavetheappropriate
permissionsandknowthelocationofthecontentthatyouwant,i.e.,aUniversalResourceLocatoror(URL).
27
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
29/72
Ohwait.TheyalsoneedanISPandabrowser.Whatbrowsersdoyouliketouse?
IE
Firefox
CromeSafari
27
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
30/72
LikeIwassaying,inorderforausertomakearequestwithaURL,theymusthavean
ISPthatcanaccesstheWWWandabrowsertointerpretthecontent.Thereare
protocolsforthis
SoabrowserinterpretstheHTML,CSS,scripts,etc.todisplaythecontentfortheuser.
Thisisoneaspectofthemediumthatwearedesigningwithin.Ourcanvastopaint:).
Otheraspectsofthismediumwillbediscussedlater.
28
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
31/72
LetsgounderthehoodofWebsterswebsite.
Noticehere,aswearenowunderthehoodorWebsterswebsite.ThisistheHTML
usedtocreatethiswebpage.Itisfilledwithspecialinstructionscalledelements that
aremarkedupwithtags anddefinethestructureandlayoutasitisdisplayedinthe
browser.
29
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
32/72
Beforewegoanyfurther,letswatchashortclipfromoneofourLyndatrainingcourses
thatIhavelistedonthesyllabus.Remember,itisnotrequiredtohaveasubscriptionto
Lynda.combutIwillbebringinginvideoresourceshereforthisclass.
WatchHTML
Essential
Training
*WhatisHTML?
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
33/72
Wecancreatedocumentslikethisusingatexteditorwhichallowsausertoenter,
change,save,andprintHTML.
OnPCyouwillmostlikelyuseNotepad++andonMac,TextWrangler.Thereareothers
outthere.
Some
free,
some
not.
Feel
free
to
find
one
that
you
like
to
use.
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
34/72
LetscodeourfirstpageinNotePad++.Togetstarted:
1. Firstweneedtolocateourtexteditorthatwewilluse.
2. EnableWordWrap
3. Copythese
initial
HTML
Tags
and
content
from
your
handout
into
your
text
editor
4. Savethepageashello_world.htmlinafoldercalledweek1onthedesktop.Make
sureyouaddtheHTMLextension.Thiswilltellyourcomputertoopenthefilein
yourdefaultbrowser.
32
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
35/72
Isthispageontheinternet?
Canyourneighboraccessyourpage?
Whois
hosting
this
page?
33
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
36/72
34
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
37/72
35
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
38/72
RememberwhatHTMLstandsfor?Itisamarkuplanguagewhichmeansthatraw
content,e.g.,text.ismarkedupwithelementsandtags(sometimescalleddocumentcontainers).Variouselementsmarkupthecontentaselementse.g.,headings,paragraphs,links,lists,etc.These
tags
are
open
and
closed
with
angle
brackets.
Sometimes
an
element
will
enclose
thecontentwithastartandendtag(oftencalledopenandclose)andsometimes
therearewhatscalledanemptyelementbecauseitisnotmarkingupcontent.
Forexampleanimageisanemptyelementbecauseallitisdoingisprovidingawindow
tothecontentandnotactuallymarkingitup.
Thew3consortiummandatesthatallelementsclosesoforourpagestobefully
XHTMLcompliantwehavetouse
butnoticethedifferenceintheuseofthe
backslash.
36
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
39/72
LetscodeasecondpageinNotePad++.Togetstarted:
1. Savethehello_world.htmlas what_is_html.html
2. CopytheseinitialHTMLTagsandcontentfromyourhandoutintoyourtexteditor
3. Save
37
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
40/72
Ablocklevelelementisanelementthatcreateslargeblocksofcontentlikeparagraphs
orpagedivisions.Usingthemoftenstartsanewlineinthedocumentandtheycan
containotherblockelementsaswellasinlineelements.
Howmany
block
level
elements
do
you
see?
38
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
41/72
Five
39
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
42/72
40
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
43/72
Aninlineelementisanelementthatdefinescontentwithinablocklevelelement,e.g.,
strongmakestheenclosedtext(not)stronglyemphasizedandemwillitalicisethe
text(markuplanguage).Theydon'tstartnewlineswhenyouusethem.Theycancontainotherinlineelementsbutyouhavetowatchyoursyntax.
41
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
44/72
Whichoftheseishasanerrorinsyntax?
42
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
45/72
43
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
46/72
44
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
47/72
Thereisalsoa4thtypeofelementinHTML thosethataren'tdisplayedatall.These
tagsaretheonesthatprovideinformationaboutthepagebutdon'tnecessarilyshow
upinthevisibleportionofthepage.ThisrepresentsthecontentonoursimpleHTML
page.
45
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
48/72
Forexampleinthe
STYLEtodefinestylesandstylesheets,METAtodefinemetadata,andHEADtohold
thoseelements.
Therearemanydifferentdocumentsontheweb.Abrowsercanonlydisplaya
documentcorrectly,ifitknowswhatkindofdocumentitis.
TherearealsomanydifferentversionsofHTML,andabrowsercanonlydisplayan
HTMLpage100%correctlyifitknowstheexactHTMLversionusedinthepage.Thisis
whatisusedfor.
46
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
49/72
47
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
50/72
Attributesoftentellthebrowserhowtovisuallyrenderthecontentoftheelement.For
exampleletssaythatwewantedtocenteraheading.Wefirsthavetoattachthe
alignattributeandthengivetheattributeavalue,i.e.,center.Thesyntaxisvery
specificandmustbeindoublequotes.
Rememberouremptyimageelement?Inthiscase,thevalueofthesrcattributetells
thebrowserthelocationoftheimage.
48
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
51/72
WecanalsocreatestylesforvariouswebpageelementsusingCascadingStyleSheets.
Theserulesdefinehowallparagraphsorlistsmightlookonapage.Thesedealmore
withtheappearanceofawebpage.CSSisnotcontent.
49
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
52/72
Forexample,HTMLiswhatisunderthehoodofawebsite.CSSisthecolorofthecar.
Youcantakethecar,whatisunderthehood,thebodyandaddcolortoit.Addleather
seats,chromewheels,convertibletop,coloritred,etc.Butontheslipitstillsaysitsa
FordMustang.Nowmatterwhatcosmeticthingsyoudotoit,itisstillaMustangand
functionslikeaMustang.Whileitlooksdifferent,itisstillaMustang.
50
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
53/72
Toillustratethispoint,letsallcheckoutCSSZenGarden.com
51
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
54/72
XHTMLisastricterandcleanerversionofHTML.
XHTMLissupportedbyallmajorbrowsers.
XMLis
amarkup
language
where
documents
must
be
marked
up
correctly
and
"well
formed".
Therefore bycombiningthestrengthsofXML,HTML,andXHTML.HTML5was
developed.
52
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
55/72
Today'smarketconsistsofdifferentbrowsertechnologies.Somebrowsersrunon
computers,andsomebrowsersrunonmobilephonesorothersmalldevices.Smaller
devicesoftenlacktheresourcesorpowertointerpreta"bad"markuplanguage.More
onthisnextweek.
RememberearlierwhenIwastalkingaboutmediums?1)beingthebrowser.Theother
2)istheUserAgent.
53
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
56/72
54
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
57/72
Thisisthedifferencebetweengraphicandwebdesign.Agraphicdesignercancreatea
movieposterandthetheirusersallwalkbyitandhavethesameexperience.
55
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
58/72
Forusaswebdesignersweneedtotakeintoaccountthatourusersallusedifferent
browsersanduseragents.Ourgoalistointheorygiveallofourusersthesame
expreince.
56
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
59/72
Beforewegoanyfurther,letswatchtwoshortclipsfromoneofourLyndatraining
coursesthatIhavelistedonthesyllabus.
WatchHTMLEssentialTraining
*ExaminingthestructureofanHTMLdocument
*Understandingdocumentcontainers(onlywatchfirstpart)
57
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
60/72
TogetstartedcodingfullyXHTMLcompliant:
1. Firstweneedtolocateourtexteditorthatwewilluse.
2. EnableWordWrap
3. Copythese
initial
HTML
Tags
and
sample
content
from
your
handout
into
your
text
editor
4. Savethepageassample.htmlinafoldercalledweek1onthedesktop.Makesure
youaddtheHTMLextension.Thiswilltellyourcomputertoopenthefileinyour
defaultbrowser.
5. Nowwecanusethissample.htmlpagetodevelopotherpages.
58
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
61/72
59
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
62/72
Letsuseoursamplepagetocreatesomenewcontent.
1. Firstweneedtolocateourtexteditorthatwewilluse.
2. EnableWordWrap
3. Openyour
sample.html
page
4. Addnewcontent.
5. Savethepageasxhtml_intro.html inafoldercalledweek1onthedesktop.Make
sureyouaddtheHTMLextension.Thiswilltellyourcomputertoopenthefilein
yourdefaultbrowser.
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
63/72
61
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
64/72
62
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
65/72
63
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
66/72
Yourtextmentionsothertexteditors,butpleasedonoteveruseaprogramlikeMS
Wordtocreateawebpage.Whileitcandothis,itaddslotsofadditionalorerroneous
uselesscodethatcaninterferehowthewebpagelooksindifferentbrowsers.
DEMOCreatingAWebPageInMSWordSomebrowsersaremoreforgivingthanothers.Themainthingtoremember,wedonot
everwantcodethatdoesntneedtobethere.Ourcodeshouldalwaysbesimpleand
easytoread.
64
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
67/72
AWYSIWYGEditororwhatyouseeiswhatyougeteditorallowstheusertopreview
thepublishedviewoftheHTML.Someevenallowtheusertoeditthepublishedview.
InothercoursesinthisprogramyoumayhearaboutIDEsoranIntegrated
DevelopmentEnvironment.TheseareprogramslikeDreamweaverwhichIuseona
dailybasisfordesigningwebpagesorVisualBasictodevelopprogrammingand
graphicaluser
interfaces
(GUI)
for
aweb
pages.
Depending
on
which
track
you
take
in
ourprogramhereyoumightgoonewayortheotherormaybeboth.
Needlesstosay,beforeyougetintocreatingwebpagesinanIDE,youneedtoknowthe
basics.ThebestwaytodothatistouseaTextEditor.
Howgoodisahammerifyoudonotknowhowtouseit?Ihaveagaragefulloftools.
Doesthatmakemeageneralcontractor?
65
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
68/72
ThisbringsustotheendofCh1.Theonlythingsthatarelefttocover,whichisa
lectureinitselfaretheWebDevelopmentCycleandbeinganObservantWebUser.Be
surethatyoureadaboutthesetwoconceptsaswewillbeutilizingthesethroughout
thecourseandtherewillbequestionsonthequiznextweekdedicatedtotheseand
howimportanttheyare.Somakesureyoureadthesesectionscarefully.Ifyoudonot
haveyour
text
yet,
you
can
get
the
chapters
in
the
Textbook
eReserves
folder
on
our
courseshomepage.
WewillalsobeutilizingtheWebDevelopment LifeCycletowalkusthroughthe
creationofourwebsitesforourtermprojectsandIhopeanyfurtherwebsitesthat
youwillevermakeasadesignerordeveloper.Inthisfirstweekwewillbeinthe
planningphaseofthecycleforyourtermproject,i.e.,thewebsitethatyouwill
createduringthisterm.
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
69/72
67
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
70/72
68
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
71/72
Aswebdesignersanddevelopersweshouldalwaysbeobservantofwhatisoutthere
ontheweb.Doessomethinglookincorrect?MaybeIcancontactthemandhelpout?
WowthatisreallycoolmaybeIcouldlearnhowtodothatandaddittomysite.
Weshould
especially
be
keeping
an
eye
on
the
functionality
and
design.
One
of
our
weeklyassignmentswillbetheGood,Bad,&TheUglydiscussions.Thisiswhereyour
eyeonthefunctionalityanddesignwillbedeveloped.Thiseyemightbeusedto
makesureyourclientsusersgetwhattheyneedandsaveyouandyourcompanyalot
ofmoneyorgetagreaterreturnonyourinvestment.
7/30/2019 COAP 2000 Fall 1 2013 Week 1 Lesson Introduction to HTML and the Web Development Cycle (Dave Hallmon) We
72/72