HCI Web Applications 2 - Hypertext Markup Language
Uploaded by adrianwang2003 · 28 May 2024
Preview
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.
Content continues in the PDF.
Related notes
- VJC Chapter 21 SQLite with PythonNotes/Practices · 2025
- VJC Chapter 23 Web Applications PrinciplesNotes/Practices · 2025
- VJC Chapter 10 RecursionNotes/Practices · 2025
- VJC Chapter 20 SQLNotes/Practices · 2025
- VJC Chapter 16 Hash TableNotes/Practices · 2025
- VJC Chapter 22 NoSQLNotes/Practices · 2025
