Download - Web Coding with HTML Handout · Web Coding with HTML Tea or Adventure? From Teaching Coding through Game Creation by Sarah Kepple © 2018 4 In this activity we’ll create a game

WebCodingwithHTMLGettingStarted

FromTeachingCodingthroughGameCreationbySarahKepple©2018

1

HTMLfilesmaybecreatedusingsimpletexteditingtoolssuchasApple’sTextEditorMicrosoft’sNotepad,butitwillbeeasiertouseatexteditorwithIDE-likefeaturessuchascodecompletionandcolor-coding.KomodoEditisfreeandsupportsnumerouslanguagesincludingHTML,JavaScriptandPython.Considerdownloadingitbeforebeginning.https://www.activestate.com/products/komodo-ide/downloads/edit/

Step1 SettingUpandHTMLFile

CreateaDesktopfoldertostoreallHTMLfiles–NameitHTMLpagesOpenKomodoEdit–ChooseNewFileIfyouareworkingwithatexteditorsuchasTextEditmakesuretogointoFormatandMakePlainText.

DocumentTypeAdeclarationofthedocumenttypeshouldalwaysleadoffanHTMLfileTypethedeclarationintothefirstlineofthedocument:<!doctypehtml>GotoFile-SaveAs–ChooseHTMLpagesasthedestinationfolderNamethefileMyFirstWebpage.html

AddtagstodemarkasectionofHTML,removingtheautomaticindentation:<!doctypehtml><html></html>

CommentsAddacomment:<!doctypehtml><html><!Thisisasecretmessage-></html>

ParagraphAddalineofregular,visibletext:<!doctypehtml><html><!Thisisasecretmessage-><p>Thisisapublicmessage.</p></html>

HTMLtagsaresetgroupsofcharactersthatindicatewhatshouldhappenwiththecontentnestedbetweentheopeningtagandtheclosingtag

<html></html>tagindicatesthatthetextwithinshouldbeinterpretedbythebrowserashtml

<!-…->thecommenttagindicatestexttobeignoredbythebrowser

<p></p>theparagraphtagindicatesanelementofregulartexttoprintinthebrowser

SaveandTestinBrowserOpenawebbrowser-GotoFile-OpenSshortcutisControl-O(windows)or⌘O()



2

Step2 OrganizingthePage

HeadPlaceheadtagsinsidethehtmltagsandtitletagsinsideoftheheadtags:<html><head><title>Webpage1</title></head><!Thisisasecretmessage-><p>Thisisapublicmessage.</p></html>

<head></head>theheadelementcontainsmetadataaboutthedocument

<title></title>thetitleelementismandatoryanddefinesthepagetitle

Note-InHTML,nestingiscriticalbutindentationisnot.Indentingsectionsdoes,however,makethecodeeasierforhumanstoread.

BodyDeletethecommentandparagraphlinesandinsertthebodytags:</head><body></body></html>

<body></body>ThebodyelementcontainsallofthemaincontentoftheHTMLdocument.Itisarequiredelementandtherecanbeonlyonebodysection.

AddheadingsusingthecomponentsofPeterPanasshownbelow:

<h#></h#>headings–thesixlevelsofheadingsinHTMLoutlinesubsectionsofthedocumentandareusedbysearchenginestoindexthestructureandcontentofthepage

ExperimentwithformattingusingtheDarlingchildren’snames:



3

Step3 Hyperlinks <ahref=“”></a>Hyperlinksareclickableconnectionsfromonedocumenttoanother.

Addahyperlink:<h2>Neverland</h2><p><ahref="http://www.gutenberg.org/ebooks/16">ReadtheBook</a></p></body>

Theaddressisplacedwithinquotes,andthetextplacedbetweentheopeningtagandtheclosingtagwillbecomethevisualrepresentationofthelink.SaveandTestinBrowserThelinkshouldwork,andyoucanreturntoyourwebpagebyclickingback.

WebCodingwithHTMLTeaorAdventure?


4

Inthisactivitywe’llcreateagamebasedonthefourthchapterinPeterandWendy,“TheFlight.”AsPeterleadstheDarlingchildrentowardNeverlandheasksthemiftheywouldlikeanadventuretostartoriftheywouldratherhavetheirteafirst.Inourgame,playerswillbeaskedtochoosebetweenoptions,andwillbetakentodifferentpagesaccordingly.

Step1 SetUpLaunchFile CreateanewdocumentinKomodo

Edit:GotoFile-New-NewFileSavethefileasTeaOrAdventure.htmlPlaceitintheHTMLpagesfolderEntertherequiredelementsforanHTMLdocAddacommenttoidentifythisasthelaunchpageSaveandOpenintheBrowserThebrowserwindowwillbeblankbutnamedatthetop.

UpdateLaunchPageAddtextinthebodytoinformvisitorsofthepurposeofthepage:<body><h1>TeaorAdventure</h1><h2><i>ANeverlandGame</i></h2>Addalinktothefirstchoiceofthegame:<p><ahref="Choice1.html">Clickhere</a>toplay</p></body>

Thelinkaddresslooksalittledifferentthanatypicalwebsiteaddressbecauseitlinkstoalocaldocument,whichwe’llneedtocreatenext!



5

Step2 Choice1Page CreateanewfileinKomodoEdit

calledChoice2.htmlIncludeallrequiredHTMLelementsandsavetoHTMLpagesfolderWe’lluseconsistentheadingsoneachpageofthegame,soadd:<h1>TeaofAdventure</h1><h2><i>ANeverlandGame</i></h2>

Addan<hr>tagtoseparatetheheadingsfromthechoiceoneachpage

<hr>isusedtoseparatecontentordefineathematicchangewithinanHMLpage.

CreatetheFirstChoice:Addaheadingthreeelementtoindicatethatthisisthefirststepinthegame:<h3>"YourFirstChoice"</h3>Addalinebreak:<br> <br>addsalinebreak.

SaveandTestinBrowserDoyourresultslooklikethis----àCreateaTemplateandPagesWe’llbecreatingnumerouschoicepages,solet’smakeourliveseasierbynothavingtotypeallofthissetupoverandoveragain.GotoFile-SaveAsRenamethefileChoiceTemplate.htmlandsavetotheHTMLpagesfolderFollowthesameprocesstocreate:ChoiceTea.htmlAdventure.htmlMermaids.htmlPirates.html



6

CompleteChoice1TextReopenChoice1.htmlInthe<p></p>,addthefirstchoice:<p>AsyouflyintoNeverland,you'reexcitedtoexplore,butyou'realsohungry.</p>Adda<br>andaskthefirstquestion:

<br><h3>Whichwillyoudofirst?</h3>Addtheoptions:<h4>A.Haveyourtea.</h4><br><h4>B.Goonanadventure.</h4>SaveandRefreshintheBrowser

CompleteChoice1LinksLinkChoiceAtoChoiceTea.html:<ahref="ChoiceTea.html">A.Haveyourtea.</a>LinkChoiceBtoAdventure.html:<ahref="Adventure.html">B.Goonanadventure.</a>SaveandRefreshBrowser.TestchoiceAlink,andthenusethebackbuttontotestthechoiceBlink



7

Step3 UpdateChoicePages OpenAdventure.html

updatethetitleinthehead:<title>Adventure</title>Updatethechoicenumberanddescriptor:<h3>YourSecondChoice</h3><br><p>Offtoyourfirstadventure!</p><br>Addaquestion,optionsandlinks:<h3>Wherewillyougo?</h3><h4><ahref="Mermaids.html">A.MermaidLagoon</a></h4><h4><ahref="Pirates.html">A.TheJollyRoger</a></h4>

OpenMermaids.htmlUpdatethetitleinthehead:<title>MermaidLagoon</title>Updatethe<h3>descriptor:<h3>AdventureinMermaidLagoon</h3>Fillinthestoryinthe<p>byeither:-summarizingoneoftheadventuresfromChapter8:TheMermaid’sLagoon-linkingtothechapterinanonlineaccount-createafanfictionstory



8

OpenJollyRoger.htmlUpdatethetitleinthehead:<title>Pirates</title>Updatethe<h3>descriptor:<h3>TheFinalBattle</h3>Fillinthestorybyeither:-summarizingoneoftheadventuresfromChapter15:HookorMeThisTime-linkingtothechapterinanonlineaccount-createafanfictionstory

OpenChoiceTea.htmlFollowthesamestepsastheotherfilestoupdatethetitle,headingandparagraphelements.ThestoryintheexamplebelowcomesfromChapter6:TheLittleHouse:

SaveandRefreshtheBrowser.

Clickthrougheachchoicetomakesurethatthelinksworkandthetitles,headingsandstoriesareallcorrect.



9

Step4 AddImages MakesurethattheimagefileshavebeensavedintheHTMLpagesfolder.

AddTheLittleHouse.jpgtoChoiceTea.html:<imgsrc="TheLittleHouse.jpg"

<img/>indicatesthatanimageshouldbedisplayedfromaprovidedsourcewhichisplacedinquotes

AddtheHook.jpgimagetothePirates.htmlpageAddtheMaroonersRock.jpgtotheMermaids.htmlpage

AddImagesasHyperlinksOpenAdventure.htmlPlacethe<img/>taginsideofthe<a>tagforeachoption:<h4><ahref="Mermaids.html">A.MermaidLagoon<br><imgsrc="MermaidLagoon.jpg"/></a></h4><h4><ahref="Pirates.html">A.TheJollyRoger<br><imgsrc="JollyRoger.jpg"/></a></h4>

FollowthesameprocesstoaddNeverland.jpgtoTeaOrAdventure.htmlandlinkittoChoice1.htmlSaveandRefreshBrowserTheimagesshouldnowbeclickable.



10

AddReplayImageOpenMermaids.htmlandadd:<h6>ClickPeterPantoReturntoNeverland!<ahref="Choice1.html"><imgsrc="PeterPan.png"/></a></h6>CopyandPastethesamecodeintoPirates.htmlandChoiceTea.htmlSaveandRefreshBrowserNow,youshouldhaveaclickablePeterPanimageatthebottomofeachstoryendingpagethatwillreturntheplayertothestart.

Download - Web Coding with HTML Handout · Web Coding with HTML Tea or Adventure? From Teaching Coding through Game Creation by Sarah Kepple © 2018 4 In this activity we’ll create a game

Top Related