Web Coding with HTML Handout · Web Coding with HTML Tea or Adventure? From Teaching Coding through...
10
Web Coding with HTML Getting Started From Teaching Coding through Game Creation by Sarah Kepple © 2018 1 HTML files may be created using simple text editing tools such as Apple’s TextEdit or Microsoft’s Notepad, but it will be easier to use a text editor with IDE-like features such as code completion and color-coding. Komodo Edit is free and supports numerous languages including HTML, JavaScript and Python. Consider downloading it before beginning. https://www.activestate.com/products/komodo-ide/downloads/edit/ Step 1 Setting Up and HTML File Create a Desktop folder to store all HTML files – Name it HTMLpages Open Komodo Edit – Choose New File If you are working with a text editor such as TextEdit make sure to go into Format and Make Plain Text. Document Type A declaration of the document type should always lead off an HTML file Type the declaration into the first line of the document: <!doctype html> Go to File-Save As – Choose HTMLpages as the destination folder Name the file MyFirstWebpage.html Add tags to demark a section of HTML, removing the automatic indentation: <!doctype html> <html></html> Comments Add a comment: <!doctype html> <html> <!This is a secret message-> </html> Paragraph Add a line of regular, visible text: <!doctype html> <html> <!This is a secret message-> <p>This is a public message.</p> </html> HTML tags are set groups of characters that indicate what should happen with the content nested between the opening tag and the closing tag <html></html> tag indicates that the text within should be interpreted by the browser as html <!-…-> the comment tag indicatestext to be ignored by the browser <p></p> the paragraph tag indicates an element of regular text to print in the browser Save and Test in Browser Open a web browser-Go to File- Open Sshortcut is Control-O (windows) or ⌘O()
Transcript of Web Coding with HTML Handout · Web Coding with HTML Tea or Adventure? From Teaching Coding through...
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.
