Web Primer Companion

Richard Key
Your Instructor
richard@modulus.io @busyrich RichardKey

Pullingbacktheveilontheinternetcanbeanintimidatingendeavor.Throwinalittleweb developmentaswellanditseemsnearlyimpossibletotakeinalltheknowledgenecessary. However,itisnotthatcomplexifwecomparesomeoftheseconceptstomorefamiliar, everydayones.

Websites 101
Oddlyenough,awebsitecanbethoughtofasabuildingthatlivesinsideyourwebbrowser.This isbecausetheysharealotofthesameengineeringconcepts.Theybothhavesupport structures,theybothrequireutilitiestofunction,andtheybothstrivetohaveapleasingaesthetic tothem.Wecanbreakdownawebsitejustlikewecanabuilding,anditwillhelpusunderstand thebasicsofhowawebsiteworks. Allwebsiteshave,whatwecallintheindustry,aclientsidecomponentandaserverside component.Thekeydifferencebetweenthesetwopiecesiswheretheyarelocatedinrelationto you.Theserversideisaremoteresource,livingout"intheweb",whiletheclientsidelivesonly inyourwebbrowser.Whiletheydocommunicatewitheachother,andthiscommunicationis essential,botharetechnicallyremovedfromeachother.Awelldesignedwebsitecaneven functionsomewhatwithoutthatcommunicationline.

The Server-Side
Tocontinuewithourbuildinganalogy,theserversidecloselyresemblestheutilitiesprovidedtoa building.Utilitiesprovideeverythingabuildingneedstofunction,andthesamecanbesaidfora websiteanditsserversidecomponent.These"utilities"provideawebsitewithallitneedsto operate,exceptintheplaceofwaterorpower,dataandmediaarepipedintothewebsite. Theserversideisalsotheremotepartofthewebsite,meaningitlives"inthecloud"oroutinthe internetifyouwill.Itcannotbedirectlyaccessedinmostcasesandismuchmorecomplexas

farastheinfrastructurerequiredtomakeitwork.Onecouldsaythattheserversideisan entirelydifferentdisciplinealtogether,requiringdifferenttrainingandexpertise.Thisiswhywewill notdigdeeplyintothissideofthewebsite.

The Client-Side
Theclientsidecanberepresentedasthebuildingitself.Itiscompletelycontainedonyour computer,inyourwebbrowser.Justlikeabuilding,theclientsidehasinternalstructure,an aestheticappeal,andawelldefinedfunction.Allthreeworktogethertogivethefullexperienceof whatyouactuallyinteractwithwhenvisitingawebsitebuteachhasitsplaceandimportance. Structure Anyselfrespectingbuildinghasasupportingstructure.Afoundationofraw,moldedmaterials thatgivesitarigidframeandformsthebaseforthenextlayersclingto.Theclientsidebegins withthesameconcept.Thisstructurecontainsnotonlythebasicformthewebsitetakes,butwill alsoinclude"rawmaterials"suchastext,images,andothermedia.Thelanguageweuseto buildthisiscalledHTML,whichwewillcovermoreindepthlater. Aesthetics Whilethestructureisthefoundation,therewillalwaysbeaneedtomakethingslookalittle better.Thisincludesthelayoutorplacementofvariouselements,colorsofthoseelements,and eventhesizetheyare.Werefertothisasaesthetics,andjustlikeanuglybuildingonthecorner, thesepropertiescanbejustasimportantasthestructureitself.Theaestheticsofawebsiteare expressedinalanguagecalledCSS,andagain,wewillgooverthismoreabitlater. Function Abuildingisjustabuildingwithoutthepeoplewithinit,utilizingit,andgivingitfunction.Theyalso controltheflowofutilities,modifythebuildingitself,andmaybeevenupdatealittleaesthetics alongtheway.Awebsitegetsthesamesortoffunctionalityfromscriptsthatperformallofthese needs,alongwithprocessingandcommunication.Thelanguagethesescriptsarewrittenin, JavaScript,isabitmorecomplexsowewillnotbecoveringthisinfulltoday. Thesethreeaspectscombinetogiveyouwhatyouseeandexperiencewhenyouaccessa website,withtheserversideprovidingtheheavylifting.Theyarewhatwewillbefocusingonin ourproject,sincetheserversideisalittleoutofourscopetoday.

HTML & CSS

Todaywewillbefocusingonthestructureandpresentationpiecesofourwebsite.Thismeans

wewilllearnHTMLandCSS,alongwithanunderstandingforhowtheyworktogethertocreatea website.Itallbeginswithastructure.

Structure as Markup
Thefirstthingweneedtodoiscomeupwithastructure,ablueprintforourwebsite.Thisis doneusingHTMLorHypertextMarkupLanguage.HTMLisfromacategoryoflanguagescalled Markuplanguages.Markuplanguagesprovideadefinedsetofinstructionsforannotatingand structuringvariousobjectsandtext.Markuplanguagesdifferfromprogramminglanguages,like thoseusedinthescriptsofawebsite,becausetheyonlydefineastructureandnotlogicor function. Allmarkuplanguagesutilize"tags"whicharejustrepresentationsofobjectsweuseinrealworld documents.Mostmarkuptagsarealsocontainersthatencompasstext,media,or(more commonly)othertags.Eachmarkuplanguagediffersonlyinwhattagsareusedandwhat attributesyoucanaddtothosetags. HereisanexampleofaMarkuptag(notanactualtag):

<atagattribute="value"><btag></btag></atag>
Eachtagwillhaveanopeningtag,whichiswhereyouplaceattributes.Thisopeningtagalso denotesthatyouhave"opened"thecontainer,andeverythingafteritwillbeinsidethetag.Then, asyoucanguess,yousupplyaclosingtagtogatethecontentsofthetag.However,evenif nothingisputinsidethetag,inmostcasesyoumustsupplybothanopeningandclosingtag. HTML Example Funnythingis,markuplanguages(especiallyHTML)arebasedonrealworlddocuments.Just likeanessayyoumaywrite,ourwebsitewillneedatitle,sometext,afewimages,andeven somemetadatathatdescribesit.AllofthiswillbedefinedinoneHTML"document".Belowisan exampleofthemostbasicHTMLstructure,whichincludesafewcommonlyusedcontenttags. ThesetagsareactualHTMLtags,withdefinedtypesandfunctions.

<html> <head> <title>ExamplePage</title> </head> <body> <h1>ImportantStuff</h1>

<p>Sometext.</p> <p>Sometext.</p> <ahref="http://example.com">Reference</a> </body> </html>

Keepinmindthe<html>tagand<body>tagarebothrequired.The<head>tagisnotrequired, butisoftenusedformetadata,orinformationonthedocumentitself,andinthiscaseweuseit tocontainthetitleofourdocument.The<body>tag,ontheotherhand,willcontainanythingto berenderedinthebrowser. Westartour"body"witha<h1>tagorheaderlevel1tag.Thisisactuallyonetaginasetoftags thatgofrom<h1>to<h6>,witheachbeingasubheaderoftheprevious.Soifwehadmultiple sectionsinourdocument,wemayusea<h1>thenafew<h2>tagsspreadoverthewhole document. Theheaderisfollowedimmediatelybysometextcontainedinsidetwo<p>tags.A<p>tag standsforparagraphandisaconceptualcontaineronly,andservesnootherpurposebeyond containingtextandmediafororganizationalpurposes. Finallyweusean<a>tagtolinktoanexternalresource,whichinthiscasewearepretendingit isreferenceforourstatementsabove.<a>tags,oranchortags,requirea"href"attributethat providesthelocationoftheresourcetoviewwhenclicked.Forthisexamplewearesimply linkingtoexample.com. Whenruninsideabrowser,theHTMLabovewillrenderto:

Itisimportanttonotethattheonlyreasonthereisnicespacingandtheheaderislargerisdueto thebrowsersdefaultstyling,whichisappliedwhennostyleisapplied.Allbrowsershavea builtin,default,collectionofstylestouseunlessoverwritten.Beforewecanoverwritethose defaults,wemustlearnaboutCSS.

Aesthetics as Styles
Structureisonething,butallwebsitesneedtobemorethantextthrownonthescreenwitha fewimagesinthemix.Youneedcolor,goodspacing,maybesomemarginshereandthere. Whilethestructurecanmakeawebsitedisorganized,badaestheticscanmakethesame websiteunusableandunattractive. ThestylesofawebsitearedescribedthroughalanguagecalledCascadingStyleSheets,or CSSforshort.Itworksbychangingthingslikesize,location,color,textformatting,etc.of variouselementsintheHTMLdocument.ThisprocessstartsbyselectingapieceoftheHTML document,thenapplyingthestylestotheselectedHTML.Let'sstartwithasimpleexampleof whatCSSlookslike:

#myThing{ backgroundcolor:rgb(50,50,50) color:rgb(255,255,255) }

Herewehavetheselector"#myThing".Whatthisdoesisselecttheelementwithit's"id"attribute setto"myThing".Thatiswhatthe"#"symbolprefixisusedfor,selectingonanelement'sid attribute.Anythingafteristheidtolookfor.Thus"#myThing"essentiallysays"selecttheelement whoseidissettomyThing". Anythinginsidethe{}isconsideredthestylestoapplytotheselectedelements.Oneofthemost commonstylesistochangethebackgroundandtextcolor. Onceyouhaveanelementselected,itsassimpleasthrowingsomestyleinformationtoapplyto thatselection.Usingtheform"style:value"wecanbreakdowneachstyletodeterminewhat exactlyitisdoing. Firstwehave"backgroundcolor"whichisprettyselfexplanatory,itchangesthebackground color.Thevalueofthestyleisabitmoreconfusingthough.Sinceweexpectacolorwecan assumewhatweseeisacolor.CSShasmanydifferentwaysofdefiningacolor,butthe simplestistheRedGreenBluedefinition.Usingdifferentvaluesforeachprimarycolor,youcan createanalmostendlessamountofcolors.Thestylewehavehereusesthesamevalueforall

threemeaningitisaneutralvalue.InanRGBscale,all0sisblack,soall50smeanadarkgrey. Whataboutthe"color"style?Thisstyleisusedtochangethetext,orfont,colorofanytextinside theelement.Ifall0sinanRGBscaleisblack,255s(whichisthemax)iswhite.Soweare changingthetextcolortowhite. Puttingitalltogether,wearetakingtheHTMLtagwiththeidattributesetto"myThing"and reversingthebackgroundandtextcolor.Whitetextonadarkgreybackground.Let'stakethe followingHTML:

<html> <body> <p>NormalStyle</p> <pid="myThing">ReversedStyle</p> </body> </html>

ApplyingourexampleCSSwouldlooklikethis:

Thepossibilitiesareendless,itisjustmatteroflearninghowtoselectwhatyouwantandwhat stylescanbeused.

Organization
ItistruethatallyourHTMLandCSScanbecontainedinonefile,butitisconsideredbad practice.Likeanystandardwayofdoingsomething,therearemanyreasonsnottocram everythingintoasinglefile.First,itisimpossibletoreusestylesacrossmultiplepageswithout copyingeverythingintotheotherfile,whichinturnmakesmanagementofthestylesimpossible. Italsolocksthestyleofthatpage.Ifyouwanttoupdatethewaythepagelooks,youwillhaveto

updateallofthatpage.Theconvenienceofhavingeverythinginonefilequicklybecomesa consumingnightmare. SeparatingoutyourCSSfromyourHTMLwillmakeupdatingonepiece,structureorstyle, easier.Itwillalsoallowyoutoswitchoutthestylewithoutmodifyingthestructurefile,and viseversa.Bysimplyswitchingoutafile,youcancompletelychangetheexperienceawebsite provides.Forexample,thisimageshowsthesamewebsite,butwith4differentstyles.

Thisisthebasisofwebsiteorganization.Youwanttoseparatethestructure,style,andscripts, whatwecall"separationofconcerns".Oneshouldnotrelyonupdatingtheother,and maintainingoneshouldnotnecessarilybereliantonmaintainingtheother.IEyoushouldbeable toswitchoutorevenremoveonewithoutaffectingtheother.Atleastwhenpossible.This principleisextremelyimportantforanyproject,bigorsmall.

Resources
Presentation Presentation(PDF)

More Learning

MarkupLanguages(wikipedia) HistoryofHTML(W3C) BasicHTMLTags(W3CSchools) HistoryofHTML&CSS(WebDesignTeams) Chapter2of"CascadingStyleSheets,designingfortheWeb"(W3C) TheMostCommonHTMLandCSSMistakestoAvoid(WebDesign Ledger) IntroductiontoJavaScript(Adobe) WebFundamentals(Codecademy)