coap 2000 fall 1 2013 week 1 lesson introduction to html and the web development cycle (dave...

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


2/72

2


3/72

3


4/72

Togetusstarted,Iwouldlikeusalltowatchthefollowingvideodocumentaryfrom

Code.org whichisanonprofitdevotedtothevisionthateverystudentineveryschool

shouldhavetheopportunitytolearnhowtocode.Theybelievethatcomputer

programmingshouldbepartofthecorecurriculumineducation,alongsideother

scienceandmathcoursessuchasbiology,chemistryandalgebra!

4


5/72

Anybodyknowwhothisis?

5


6/72

ThisisBillGatesatage20.AroundthetimehestartedMicrosoft.

6


7/72

Andthis?

7


8/72

ThisisSteveJobsatage21.

8


9/72

Andthis?

9


10/72

Sowhatdothesetechmogulshaveincommon?

ButonethingthatIwouldliketomentionistheirexpertabilitytomakethecomplex

understandablethroughtheirwritingandpresentations.Fromeverythinglikehowto

useaMicrosoft

OS,

the

tech

behind

the

iPhone,

and

the

meaning

of

aFacebook

poke.

Iftheycouldntexplainitwelltootherstheywouldntandtheircompanieswouldntbe

wheretheyaretoday.

10


11/72

Designersneedtobeabletotalkwithdevelopers

11


12/72

Andbothneedtobeabletotalktothebusiness,eitheraclient,sales,management,

etc.

12


13/72

WithoutanabilitytodothispeoplelikeBillGates,SteveJobs,andMarkZuckerberg

wouldnothavebeenassuccessful.

13


14/72

14


15/72

15


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


17/72

Sotomakesurethatweunderstandtheseassignmentsletstakealookatthecourse

syllabus.

17


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


19/72

TheInternetbeganwithaconnectionofcomputersandcomputernetworks.Asweall

knowtheInternethaschangedthewayweliveourlivesandinteractwitheachother.

Togetusstarted.Letstalkaboutwhatsomethingsarethatweusetheinternetfor?

Searchfor

information

Communicatewithotherpeople

Paybills

Etc.

HowhastheInternethasrevolutionizedthewaybusinessandindustriesfunction?

Companiesnowneedwebsites

Customerslookforcompaniesonthenet

TalkaboutTopsUrWay

19


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


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


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


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


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


25/72

canaccesscontent.andasweknowtheychargeapremiumforthis.

24


26/72

WhenyouhearWWWorWorldWideWeb,thinkofitasacollectionofwebcontent.

Tosupportthesepages,documents,files,ormultimedia forusers,thereneededtobe

somesortofprotocolforhowtheycouldaccessthem.ThisiswherewegettheHyperTextTransferProtocolyouknow,(HTTP)whichisasetofrulesforexchangingthecontent,e.g.,images,audio,video,text,etc.thatarefoundoftenfoundonwebpages.

25


27/72

Discusshierarchy

26


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


29/72

Ohwait.TheyalsoneedanISPandabrowser.Whatbrowsersdoyouliketouse?

IE

Firefox

CromeSafari

27


30/72

LikeIwassaying,inorderforausertomakearequestwithaURL,theymusthavean

ISPthatcanaccesstheWWWandabrowsertointerpretthecontent.Thereare

protocolsforthis

SoabrowserinterpretstheHTML,CSS,scripts,etc.todisplaythecontentfortheuser.

Thisisoneaspectofthemediumthatwearedesigningwithin.Ourcanvastopaint:).

Otheraspectsofthismediumwillbediscussedlater.

28


31/72

LetsgounderthehoodofWebsterswebsite.

Noticehere,aswearenowunderthehoodorWebsterswebsite.ThisistheHTML

usedtocreatethiswebpage.Itisfilledwithspecialinstructionscalledelements that

aremarkedupwithtags anddefinethestructureandlayoutasitisdisplayedinthe

browser.

29


32/72

Beforewegoanyfurther,letswatchashortclipfromoneofourLyndatrainingcourses

thatIhavelistedonthesyllabus.Remember,itisnotrequiredtohaveasubscriptionto

Lynda.combutIwillbebringinginvideoresourceshereforthisclass.

WatchHTML

Essential

Training

*WhatisHTML?


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.


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


35/72

Isthispageontheinternet?

Canyourneighboraccessyourpage?

Whois

hosting

this

page?

33


36/72

34


37/72

35


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


39/72

LetscodeasecondpageinNotePad++.Togetstarted:

1. Savethehello_world.htmlas what_is_html.html

2. CopytheseinitialHTMLTagsandcontentfromyourhandoutintoyourtexteditor

3. Save

37


40/72

Ablocklevelelementisanelementthatcreateslargeblocksofcontentlikeparagraphs

orpagedivisions.Usingthemoftenstartsanewlineinthedocumentandtheycan

containotherblockelementsaswellasinlineelements.

Howmany

block

level

elements

do

you

see?

38


41/72

Five

39


42/72

40


43/72

Aninlineelementisanelementthatdefinescontentwithinablocklevelelement,e.g.,

strongmakestheenclosedtext(not)stronglyemphasizedandemwillitalicisethe

text(markuplanguage).Theydon'tstartnewlineswhenyouusethem.Theycancontainotherinlineelementsbutyouhavetowatchyoursyntax.

41


44/72

Whichoftheseishasanerrorinsyntax?

42


45/72

43


46/72

44


47/72

Thereisalsoa4thtypeofelementinHTML thosethataren'tdisplayedatall.These

tagsaretheonesthatprovideinformationaboutthepagebutdon'tnecessarilyshow

upinthevisibleportionofthepage.ThisrepresentsthecontentonoursimpleHTML

page.

45


48/72

Forexampleinthe

STYLEtodefinestylesandstylesheets,METAtodefinemetadata,andHEADtohold

thoseelements.

Therearemanydifferentdocumentsontheweb.Abrowsercanonlydisplaya

documentcorrectly,ifitknowswhatkindofdocumentitis.

TherearealsomanydifferentversionsofHTML,andabrowsercanonlydisplayan

HTMLpage100%correctlyifitknowstheexactHTMLversionusedinthepage.Thisis

whatisusedfor.

46


49/72

47


50/72

Attributesoftentellthebrowserhowtovisuallyrenderthecontentoftheelement.For

exampleletssaythatwewantedtocenteraheading.Wefirsthavetoattachthe

alignattributeandthengivetheattributeavalue,i.e.,center.Thesyntaxisvery

specificandmustbeindoublequotes.

Rememberouremptyimageelement?Inthiscase,thevalueofthesrcattributetells

thebrowserthelocationoftheimage.

48


51/72

WecanalsocreatestylesforvariouswebpageelementsusingCascadingStyleSheets.

Theserulesdefinehowallparagraphsorlistsmightlookonapage.Thesedealmore

withtheappearanceofawebpage.CSSisnotcontent.

49


52/72

Forexample,HTMLiswhatisunderthehoodofawebsite.CSSisthecolorofthecar.

Youcantakethecar,whatisunderthehood,thebodyandaddcolortoit.Addleather

seats,chromewheels,convertibletop,coloritred,etc.Butontheslipitstillsaysitsa

FordMustang.Nowmatterwhatcosmeticthingsyoudotoit,itisstillaMustangand

functionslikeaMustang.Whileitlooksdifferent,itisstillaMustang.

50


53/72

Toillustratethispoint,letsallcheckoutCSSZenGarden.com

51


54/72

XHTMLisastricterandcleanerversionofHTML.

XHTMLissupportedbyallmajorbrowsers.

XMLis

amarkup

language

where

documents

must

be

marked

up

correctly

and

"well

formed".

Therefore bycombiningthestrengthsofXML,HTML,andXHTML.HTML5was

developed.

52


55/72

Today'smarketconsistsofdifferentbrowsertechnologies.Somebrowsersrunon

computers,andsomebrowsersrunonmobilephonesorothersmalldevices.Smaller

devicesoftenlacktheresourcesorpowertointerpreta"bad"markuplanguage.More

onthisnextweek.

RememberearlierwhenIwastalkingaboutmediums?1)beingthebrowser.Theother

2)istheUserAgent.

53


56/72

54


57/72

Thisisthedifferencebetweengraphicandwebdesign.Agraphicdesignercancreatea

movieposterandthetheirusersallwalkbyitandhavethesameexperience.

55


58/72

Forusaswebdesignersweneedtotakeintoaccountthatourusersallusedifferent

browsersanduseragents.Ourgoalistointheorygiveallofourusersthesame

expreince.

56


59/72

Beforewegoanyfurther,letswatchtwoshortclipsfromoneofourLyndatraining

coursesthatIhavelistedonthesyllabus.

WatchHTMLEssentialTraining

*ExaminingthestructureofanHTMLdocument

*Understandingdocumentcontainers(onlywatchfirstpart)

57


60/72

TogetstartedcodingfullyXHTMLcompliant:


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


61/72

59


62/72

Letsuseoursamplepagetocreatesomenewcontent.


2. EnableWordWrap

3. Openyour

sample.html

page

4. Addnewcontent.

5. Savethepageasxhtml_intro.html inafoldercalledweek1onthedesktop.Make

sureyouaddtheHTMLextension.Thiswilltellyourcomputertoopenthefilein

yourdefaultbrowser.


63/72

61


64/72

62


65/72

63


66/72

Yourtextmentionsothertexteditors,butpleasedonoteveruseaprogramlikeMS

Wordtocreateawebpage.Whileitcandothis,itaddslotsofadditionalorerroneous

uselesscodethatcaninterferehowthewebpagelooksindifferentbrowsers.

DEMOCreatingAWebPageInMSWordSomebrowsersaremoreforgivingthanothers.Themainthingtoremember,wedonot

everwantcodethatdoesntneedtobethere.Ourcodeshouldalwaysbesimpleand

easytoread.

64


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


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.


69/72

67


70/72

68


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.


72/72

coap 2000 fall 1 2013 week 1 lesson introduction to html and the web development cycle (dave...

Documents