web coding with html handout · web coding with html tea or adventure? from teaching coding through...
Post on 21-Jul-2020
0 Views
Preview:
TRANSCRIPT
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()
WebCodingwithHTMLGettingStarted
FromTeachingCodingthroughGameCreationbySarahKepple©2018
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:
WebCodingwithHTMLGettingStarted
FromTeachingCodingthroughGameCreationbySarahKepple©2018
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?
FromTeachingCodingthroughGameCreationbySarahKepple©2018
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!
WebCodingwithHTMLTeaorAdventure?
FromTeachingCodingthroughGameCreationbySarahKepple©2018
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
WebCodingwithHTMLTeaorAdventure?
FromTeachingCodingthroughGameCreationbySarahKepple©2018
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
WebCodingwithHTMLTeaorAdventure?
FromTeachingCodingthroughGameCreationbySarahKepple©2018
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
WebCodingwithHTMLTeaorAdventure?
FromTeachingCodingthroughGameCreationbySarahKepple©2018
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.
WebCodingwithHTMLTeaorAdventure?
FromTeachingCodingthroughGameCreationbySarahKepple©2018
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.
WebCodingwithHTMLTeaorAdventure?
FromTeachingCodingthroughGameCreationbySarahKepple©2018
10
AddReplayImageOpenMermaids.htmlandadd:<h6>ClickPeterPantoReturntoNeverland!<ahref="Choice1.html"><imgsrc="PeterPan.png"/></a></h6>CopyandPastethesamecodeintoPirates.htmlandChoiceTea.htmlSaveandRefreshBrowserNow,youshouldhaveaclickablePeterPanimageatthebottomofeachstoryendingpagethatwillreturntheplayertothestart.
top related