HCI Web Applications 2 - Hypertext Markup Language

Web Applications Name: __________________________ ( ) Class:_________ Date: _________ Lesson 2: HyperText Markup Language Instructional Objectives: By the end of this task, you should be able to: ● StatethatwebpagesarewrittenusingtheHyperTextMarkupLanguage (HTML) and Cascading Style Sheets (CSS) language ● Usethe"ViewSource"featureofawebbrowsertoexaminetheHTMLsource code of any web page ● Identifythetags,attributes,characterreferencesandcommentsthatare present in a given static HTML document ● ExplainhowHTMLonlydescribesthestructureofa webpage(intermsof elements) and not its presentation ● Distinguishbetweentagsfornormalelementsthatrequireanendtagand tags for void elements that do not have an end tag ● Usethe<html>, <head>, <title>, <body>, <h1>, <h2>, <h3>, <p>, <a>, <img>,<table>,<tr>,<th>,<td>,<form>,<input>and<textarea>tags withrelevantattributesto createwebpagesthatmeeta givenset of requirements without producing any syntax errors ● UsetheDeveloperToolsof a webbrowserto examinehowformdatais encoded differently for HTTP GET requests and HTTP POST requests Part 1: Behind the Scenes of a Web Page Opena webbrowsersuchasGoogleChromeandvisitwww.example.com. Youshould see a simple web page as shown in the following screenshot. CPDD Computer Education Unit Version: Nov 20181

Web Applications How do you think web pages like this one are made? JustlikehowprogramsarewritteninaprogramminglanguagesuchasPython,webpagesare writtenusingthe HyperText MarkupLanguage(HTML). Unlikeprogramminglanguagesthatarespecializedfordescribingstep-by-stepinstructions,HTML is specialized for describing the structure of web pages. To viewthe HTMLsourcecodeof a webpagein Chrome,pressCtrl-U.(Alternatively, right-clickandselect“Viewpagesource”.)Trythisnowforthewebpage onwww.example.com: CPDD Computer Education Unit Version: Nov 20182

Web Applications 1 TrytofindtheportionoftheHTMLthatrepresentsthe"Moreinformation..."link shown below and copy it into the blank space provided: ExaminetheHTMLsourcecodeonthewebbrowser. Doyouseethatthecontentsof the web page are surrounded by text enclosed in angle brackets (i.e.,<and>)? <h1>Example Domain</h1> Thetextsurroundedbyanglebracketsarespecialprocessinginstructionsfortheweb browser calledtags. These tags areunderlinedfor clarity below: <h1>Example Domain</h1> YoumayalsonoticethatthefirstpartoftheHTMLdocumentincludessomecodethatappearsto bewrittenin anothercomputerlanguage.Thisis a stylesheetwrittenintheCascadingStyleSheets(CSS)languagethatcontrolsthewebpage'sappearance.Withoutstylesheets,webpageshavea verylimitedappearancebydefault (i.e., blackTimes New Romantext on a whitebackground). Inthispracticaltask,wewillfocusoncontentfirstbeforelookingatlayoutwithCSSin the following practical tasks. CPDD Computer Education Unit Version: Nov 20183

Web Applications Part 2: Anatomy of a HTML Document Youhavelearntto identifytagsin a HTMLdocumentasportionsoftextthatareenclosedinanglebrackets.Tagscanbefurtherclassifiedintostarttagsandendtags. Start tags may also have one or moreattributes: 2 How do you tell the difference between start tags and end tags? LikePython,certaincharacters(suchastheanglebrackets< and>) havespecialmeaningsinHTMLandwouldcauseasyntaxerroriftheyareusedwithoutescapingthem.In HTML,escapecodesarecalledcharacterreferencesthatstartwithanampersand&and end with a semicolon;. Some common character references are as follows: Character AmpersandLess-Than SignGreater-Than SignQuotation Mark& < > "CharacterReference &amp; &lt; &gt; &quot; 3 Circleall starttagsandunderlineall endtagsin the followingHTMLdocument.(Ignorethefirstlinethatreads<!doctypehtml>fornow.Itwillbeexplained in a later part of this practical task.) <!doctype html><html><head><title>Welcome Page</title></head><body><p>Welcome to our R&amp;D department.</p><img src="welcome.png" alt="Welcome"> CPDD Computer Education Unit Version: Nov 20184

Web Applications </body></html> 4 In the previous document, which start tags do not have matching end tags? 5 Circle the syntax error in the following HTML snippet. <p>I was sent to A&E in an ambulance.</p> Rewrite the snippet and fix the error so it works as intended on all browsers: HTML tags are used to describe the structure of a web page by organizing itscontents into a tree ofelements. In general, eachstart tag corresponds to a singleelement. For instance, the HTML snippet on the left also describes the tree ofelements on the right: <body><h1>Mood Tracker</h1><p>Today's Mood:<imgsrc="happy.jpg" alt="happy"></p></body> You may have noticed that some start tags always have a matching end tag whileother start tags do not. Start tags with a matching end tag (such as<body>,<h1>and<p>) correspond tonormal elementsthat may containa combination of textcontents and other elements. On the other hand, start tags that do not have amatching end tag (such as<img>and<input>) correspondtovoid elementsthatmust not contain any other content. CPDD Computer Education Unit Version: Nov 20185

Web Applications Finally, like Python programs, HTML documents may include comments that arereadable by humans but are ignored by the web browser. Comments in HTML muststart with<!--and end with-->. Furthermore, thecontents of the comment mustNOT contain two consecutive hyphen characters--. 6 For each code snippet below, place a tick in the corresponding box if thesnippet is a HTML comment with no syntax errors. Code Snippet Valid? <!-- The markup language of the web -- HTML. --> <!-- The markup language of the web - HTML. --> <!- The markup language of the web - HTML. -> Part 3: Your Own Web Page NowthatweknowaboutthebasicsofHTML,itistimetowriteourownwebpage.LikePythonprograms,HTMLdocumentsarejustplaintextfilesexceptthattheyusea.htmlextensioninsteadofa.pyextension.WhilewecanwriteHTMLusinganytexteditor, wewilluseNotepad++sothatourcodewillbedisplayedwithsyntaxhighlighting. OpenNotepad++,createa newfile andsaveit in youruserdirectoryasexample.html. Then enter the following HTML document: <!doctype html><html><head><title>My Web Page</title></head><body><h1>Example</h1><p>Hello, World!</p></body></html> CPDD Computer Education Unit Version: Nov 20186

Web Applications Savethedocumentagainanddouble-clickexample.htmlinWindowsExplorertoopen it in a web browser. You should see something similar to the following: Congratulations! You have just created a web page. JustlikehowPythonhasmanyfunctions,HTMLhasavocabularyoftagssuchas<head>,<title>,<body>,<h1>and<p>that you shouldbecome familiar with: Theremainderof thispracticaltaskwillintroducetheseHTMLtagsbyorganisingthemintofivegroups:requiredtags,tagsfordescribingsections,tagsfordescribingtext and media, tags for describing tables and tags for describing forms. Part 4: Required Tags All HTML documents have a number of required elements. First, every HTMLdocument must start with adoctypethat looks likethis: CPDD Computer Education Unit Version: Nov 20187

Web Applications <!doctype html> This declares that the remainder of the file is a HTML document. (Note that thedoctype is technically not considered a tag. It tells the web browser the version ofHTML used in the document. This is important as the web browser supports multipleversions of HTML.) After the doctype, the remainder of the document must be enclosed between a<html>start tag and</html>end tag: <!doctype html><html>...document goes here...</html> This describes a singlehtmlelement that serves attheroot elementof thedocument's structure. Inside thehtmlelement, theremust be aheadelement formetadata (data that describes other data), followed immediately by abodyelementfor the main content: <!doctype html><html><head>...metadata goes here...</head><body>...main content goes here...</body></html> Inside theheadelement, there must be atitleelementto set the title of the webpage that appears in the browser window or tab: <!doctype html><html><head><title>My Web Page</title></head><body>...main content goes here...CPDD Computer Education Unit Version: Nov 20188

Web A