1

TheInternet beganwithaconnectionofcomputersandcomputernetworks.Asweall knowtheInternethaschangedthewayweliveourlivesandinteractwitheachother. Togetusstarted.Letstalkaboutwhatsomethingsarethatweusetheinternetfor? Searchforinformation Communicatewithotherpeople Paybills Etc. HowhastheInternethasrevolutionizedthewaybusinessandindustriesfunction? Companiesnowneedwebsites Customerslookforcompaniesonthenet TalkaboutTopsUrWay

TherearealotofthingssharedontheInternet.Thefirstthreebulletsherecanreallybe onebulletcalledcode,butmorespecifically,HTML,CSS,scripts,text,images,files,etc. Fileslikeimages,documents,audio,videos,etc.canbethoughtofascontent. Browsers interpretthisinformationfortheuser intothewebpageswehavejustbeen discussing.Browsersthenallowtheusertodosomething,seeksomethinganythingthat theywantontheInternetiftheyhavepermissionorknowhowtofindit. YouwillfindoutinthiscoursethatIwillharponhowimportantitistounderstandyour user.Haveyoueverheardthesaying,Thecustomerisalwaysright?Well,forthe purposesofthiscourse,theuserisalwaysright.Andtheyknowwhattheywant.Itisall aboutthem. Ifyoulearnonethinginthiscoursepleaselearnthatitisalwaysabouttheuser.Ihavea closefriendwhoisawebdesigneratafirmoverinIllinoisandheisaskeddailytodesign somethingthatheknowswillnotworkfortheuser.Himrealizingthisallowshimtoaskthe salesdepartmenttocontacttheclientandgetthingscorrected.Whatwouldyouthink wouldhappenifmyfrienddidntnoticethingslikethis? Badwebsite Customerunhappy Etc.

Doesanyoneknowhowmuchthetextbookcosts?

Oneofthereasonswechosethistextbookforthiscoursewasbecauseofthesentence foundonpage14Itisworthitsweightingold! Comprehensiveplanningandanalysisensuresthatdesignersanddeveloperswillprovide whattheiruserswant.IfyoustarttocodeyourWebpageswithoutthoroughplanningand analysis,youruntheriskofmissingpertinentinformation.Itismuchlessexpensiveto makecorrectionstoaWebsiteintheearlyphasesofaprojectdevelopmentthatitisto alterWebpagesthatarecompleted. Itsallabouttheuser.Alwaysabouttheuser.Thewebsiteiffortheuser.Notforthe designerortheclient.AmazonswebsiteisnotforthecompanyAmazon.Itisfortheir customerstheusers.

InthiscoursewewillutilizeaprocesscalledtheWebDevelopmentLifeCycleasa frameworktocreateourtermprojects,i.e.,thewebsitesthatwewillbecreating. Aswebdesigners/developers,weneed(should)tofollowaprocesswhenwearecreating pagesandsitesforourselvesasa"hobbyist"ora"opportunist"freelancewebdesigner. Moreonthatnextweek. Thediagramrepresentsthatprocess.Itrulyhopethatyouwillutilizethisprocessforany furtherwebsitesthatyouwillevermakeasadesignerordeveloper.Besuretopayspecial closeattentiontothediscussionofthiscycleinyourtextbookandthecorresponding weeklylectures.

ThisisareallycoolphotooftheEmersonLibrary.Thephotoisheartohelpremindusthat theinternetbeganasawayforuniversitystudentslikeyourselftoshareresearchcontent. In1969thereneededtobeawayforacomputeratoneuniversitytoconnectwithanother university.Thissimplenetworkhasnowevolvedintobillionsofusersaccessingandsharing content. LikeIwassayingearlier.Contentcouldbetext,graphics,sound,video,etc.Inthecaseof the1969usersIamguessingitwassimpletextfilesofresearchcontent.Modernuniversity usersaresharinglargerfileslikemusicandvideos. Nowinthepresentday,ifuserswanttoaccesscontentontheInternet,theymusthavean accountwithanInternetServiceProvider(ISP).IdontknowwhoWebstergetstheir internetfrom,butatourhomesifwehavetheinternet,weallhaveanISP.WhatISPsdo wehaverepresentedtonight? Charter AT&T Etc. Whileitmightfeellikeitsometimes,thesecompaniesdontowntheInternet.They provideusaccesstotheInternetthroughaDSLorCableconnectionlinessotheiruserscan accesscontent.andasweknowtheychargeapremiumforthis.

WhenyouhearWWWorWorldWideWeb,thinkofitasacollectionofwebcontent.To supportthesepages,documents,files,ormultimedia forusers,thereneededtobesome sortofprotocolforhowtheycouldaccessthem.ThisiswherewegettheHyperText TransferProtocolyouknow,(HTTP)whichisasetofrulesforexchangingthecontent, e.g.,images,audio,video,text,etc.thatarefoundoftenfoundonwebpages.

Discusshierarchy

10

Thisisanexampleofawebsitewhichisacollectionofwebpagesmaintainedbyweb designersanddeveloperslikeourselves. Eachhasahome(i.e.,indexpage)whichtheiruserswillnavigatetofirstandthennavigate tootherareasofthewebsite(ifitiswelldesigned). Eachofthesepagesarestoredonawebserversomewhere.Thesearesometimescalleda host,becausetheyhostthespaceforthesite. Forthepurposesofthiscourse,willcreatealocalhostwhichjustmeansthatour computerswillbehostingoursites.Wewilleventuallybeuploadingor FTPing theseto WebstersstudentservercalledLabwebs. Onceasiteissetup,theirusersessentiallymakerequeststotheseserverswhichserve theuser. Remember,ausercanonlymakearequesttotheserveriftheyhavetheappropriate permissionsandknowthelocationofthecontentthatyouwant,i.e.,aUniversalResource Locatoror(URL). Ohwait.TheyalsoneedanISPandabrowser.Whatbrowsersdoyouliketouse? IE

11

Firefox Crome Safari

11

LikeIwassaying,inorderforausertomakearequestwithaURL,theymusthaveanISP thatcanaccesstheWWWandabrowsertointerpretthecontent.Thereareprotocolsfor thisgetthejoke? SoabrowserinterpretstheHTML,CSS,scripts,etc.todisplaythecontentfortheuser.

12

LetsgounderthehoodofWebsterswebsite. Noticehere,aswearenowunderthehoodorWebsterswebsite.ThisistheHTMLusedto createthiswebpage.Itisfilledwithspecialinstructionscalledelements thataremarked upwithtags anddefinethestructureandlayoutasitisdisplayedinthebrowser.

13

Beforewegoanyfurther,letswatchtwoshortclipsfromoneofourLyndatrainingcourses thatIhavelistedonthesyllabus. WatchXHTMLandHTMLEssentialTraining *IntroducingHTMLandXHTML *UnderstandingversionsofHTMLandXHTML

Wecancreatedocumentslikethisusingatexteditorwhichallowsausertoenter, change,save,andprintHTML. OnPCyouwillmostlikelyuseNotepad++andonMac,TextEdit.Thereareothersout there.Somefree,somenot.Feelfreetofindonethatyouliketouse.

LetscodeourfirstpageinNotePad++.Togetstarted: 1. 2. 3. 4. Firstweneedtolocateourtexteditorthatwewilluse. EnableWordWrap CopytheseinitialHTMLTagsandcontentfromyourhandoutintoyourtexteditor Savethepageashello_world.htmlinafoldercalledweek1onthedesktop.Make sureyouaddtheHTMLextension.Thiswilltellyourcomputertoopenthefileinyour defaultbrowser.

16

17

18

RememberwhatHTMLstandsfor?Itisamarkuplanguagewhichmeansthatraw content,e.g.,text.ismarkedupwithelementsandtags(sometimescalleddocument containers).Variouselementsmarkupthecontentaselementse.g.,headings, paragraphs,links,lists,etc. Thesetagsareopenandclosedwithanglebrackets.Sometimesanelementwillenclose thecontentwithastartandendtag(oftencalledopenandclose)andsometimesthere arewhatscalledanemptyelementbecauseitisnotmarkingupcontent. Forexampleanimageisanemptyelementbecauseallitisdoingisprovidingawindowto thecontentandnotactuallymarkingitup. Thew3consortiummandatesthatallelementsclosesoforourpagestobefullyXHTML compliantwehavetouse<br/>butnoticethedifferenceintheuseofthebackslash.

19

Ablocklevelelementisanelementthatcreateslargeblocksofcontentlikeparagraphsor pagedivisions.Usingthemoftenstartsanewlineinthedocumentandtheycancontain otherblockelementsaswellasinlineelements. Howmanyblocklevelelementsdoyousee?

20

Five

21

Aninlineelementisanelementthatdefinecontentwithinablocklevelelement,e.g., strongmakestheenclosedtext(not)stronglyemphasizedandemwillitalicisethetext (markuplanguage).Theydon'tstartnewlineswhenyouusethem.Theycancontainother inlineelementsbutyouhavetowatchyoursyntax.

22

Whichoftheseishasanerrorinsyntax?

23

24

25

ThereisalsoathirdtypeofelementinHTML thosethataren'tdisplayedatall.Thesetags aretheonesthatprovideinformationaboutthepagebutdon'tnecessarilyshowupinthe visibleportionofthepage.ThisrepresentsthecontentonoursimpleHTMLpage.

26

Forexampleinthe STYLEtodefinestylesandstylesheets,METAtodefinemetadata,andHEADtoholdthose elements. Therearemanydifferentdocumentsontheweb.Abrowsercanonlydisplayadocument correctly,ifitknowswhatkindofdocumentitis. TherearealsomanydifferentversionsofHTML,andabrowsercanonlydisplayanHTML page100%correctlyifitknowstheexactHTMLversionusedinthepage.Thisiswhat <!DOCTYPE>isusedfor.

27

Attributesoftentellthebrowserhowtovisuallyrenderthecontentoftheelement.For exampleletssaythatwewantedtocenteraheading.Wefirsthavetoattachthealign attributeandthengivetheattributeavalue,i.e.,center.Thesyntaxisveryspecificand mustbeindoublequotes. Rememberouremptyimageelement?Inthiscase,thevalueofthesrcattributetellsthe browserthelocationoftheimage.

28

29

WecanalsocreatestylesforvariouswebpageelementsusingCascadingStyleSheets. Theserulesdefinehowallparagraphsorlistsmightlookonapage.Thesedealmorewith theappearanceofawebpage.CSSisnotcontent. Forexample,HTMLiswhatisunderthehoodofawebsite.CSSisthecolorofthecar.You cantakethecar,whatisunderthehood,thebodyandaddcolortoit.Addleatherseats, chromewheels,convertibletop,coloritred,etc.ButontheslipitstillsaysitsaFord Mustang.Nowmatterwhatcosmeticthingsyoudotoit,itisstillaMustangandfunctions likeaMustang.Whileitlooksdifferent,itisstillaMustang. Toillustratethispoint,letsallcheckoutCSSZenGarden.com

30

31

XHTMLisastricterandcleanerversionofHTML. XHTMLissupportedbyallmajorbrowsers. XMLisamarkuplanguagewheredocumentsmustbemarkedupcorrectlyand"well formed". Therefore bycombiningthestrengthsofHTMLandXML,XHTMLwasdeveloped.XHTML isHTMLredesignedasXML.

32

Today'smarketconsistsofdifferentbrowsertechnologies.Somebrowsersrunon computers,andsomebrowsersrunonmobilephonesorothersmalldevices.Smaller devicesoftenlacktheresourcesorpowertointerpreta"bad"markuplanguage.Moreon thisnextweek.

33

Beforewegoanyfurther,letswatchtwoshortclipsfromoneofourLyndatrainingcourses thatIhavelistedonthesyllabus. WatchXHTMLandHTMLEssentialTraining *ExploringasimpleXHTMLpage *UnderstandingthestructureofanXHTMLdocument(onlywatchfirstpart)

34

TogetstartedcodingfullyXHTMLcompliant: 1. 2. 3. 4. Firstweneedtolocateourtexteditorthatwewilluse. EnableWordWrap CopytheseinitialHTMLTagsandsamplecontentfromyourhandoutintoyourtext editor Savethepageassample.htmlinafoldercalledweek1onthedesktop.Makesure youaddtheHTMLextension.Thiswilltellyourcomputertoopenthefileinyour defaultbrowser.

5. Nowwecanusethissample.htmlpagetodevelopotherpages.

35

Letsuseoursamplepagetocreatesomenewcontent. 1. Firstweneedtolocateourtexteditorthatwewilluse. 2. EnableWordWrap 3. Openyoursample.htmlpage 4. Addnewcontent. 5. Savethepageasxhtml_intro.htmlinafoldercalledweek1onthedesktop.Make sureyouaddtheHTMLextension.Thiswilltellyourcomputertoopenthefileinyour defaultbrowser.

37

38

39

40

Yourtextmentionsothertexteditors,butpleasedonoteveruseaprogramlikeMSWord tocreateawebpage.Whileitcandothis,itaddslotsofadditionalorerroneoususeless codethatcaninterferehowthewebpagelooksindifferentbrowsers. DEMOCreatingAWebPageInMSWord Somebrowsersaremoreforgivingthanothers.Themainthingtoremember,wedonot everwantcodethatdoesntneedtobethere.Ourcodeshouldalwaysbesimpleandeasy toread.

41

AWYSIWYGEditororwhatyouseeiswhatyougeteditorallowstheusertopreviewthe publishedviewoftheHTML.Someevenallowtheusertoeditthepublishedview.Inother coursesinthisprogramyoumayhearaboutIDEsoranIntegratedDevelopment Environment.TheseareprogramslikeDreamWeaverwhichIuseonadailybasisfor designingwebpagesorVisualBasictodevelopprogrammingandgraphicaluserinterfaces (GUI)forawebpages.Dependingonwhichtrackyoutakeinourprogramhereyoumight goonewayortheotherormaybeboth. Needlesstosay,beforeyougetintocreatingwebpagesinanIDE,youneedtoknowthe basics.ThebestwaytodothatistouseaTextEditor.

42

43

ThisbringsustotheendofCh1.Theonlythingsthatarelefttocover,whichisalecturein itselfaretheWebDevelopmentCycleandbeinganObservantWebUser.Besurethatyou readaboutthesetwoconceptsaswewillbeutilizingthesethroughoutthecourseand therewillbequestionsonthequiznextweekdedicatedtotheseandhowimportantthey are.Somakesureyoureadthesesectionscarefully.Ifyoudonothaveyourtextyet,you cangetthechaptersintheTextbookeReservesfolderonourcourseshomepage. WewillalsobeutilizingtheWebDevelopmentLifeCycletowalkusthroughthecreationof ourwebsitesforourtermprojectsandIhopeanyfurtherwebsitesthatyouwillever makeasadesignerordeveloper.Inthisfirstweekwewillbeintheplanningphaseofthe cycleforyourtermproject,i.e.,thewebsitethatyouwillcreateduringthisterm.

Aswebdesignersanddevelopersweshouldalwaysbeobservantofwhatisoutthereon theweb.Doessomethinglookincorrect?MaybeIcancontactthemandhelpout?Wow thatisreallycoolmaybeIcouldlearnhowtodothatandaddittomysite. Weshouldespeciallybekeepinganeyeonthefunctionalityanddesign.Oneofourweekly assignmentswillbetheGood,Bad,&TheUglydiscussions.Thisiswhereyoureyeon thefunctionalityanddesignwillbedeveloped.Thiseyemightbeusedtomakesureyour clientsusersgetwhattheyneedandsaveyouandyourcompanyalotofmoneyorgeta greaterreturnonyourinvestment.

46