HyperText Markup Language (HTML)

HyperText MarkupLanguage (HTML)Mendel RosenblumCS142 Lecture Notes - HTML1

Web Application ArchitectureWeb Server /Application serverWeb BrowserStorage SystemLANInternetHTTPCS142 Lecture Notes - HTML2

Browser environment is differentTraditional app: GUIs based on pixelsSince 1970s: software accessed mapped framebuffers (R/G/B)Toolkits build higher level GUI widgets (buttons, tables, etc.)Web browsers display Documents described in HTMLUntil HTML5’s canvas region, you couldn’t write pixelsMake applications out of documentsEarly web apps: Multiple documents (pages) with ‘form’ tag for inputCurrent: Use JavaScript to dynamically generate and update documentsCS142 Lecture Notes - HTML3

HTML: HyperText Markup LanguageConcept: Markup Language - Include directives with contentDirectives can dictate presentation or describe contentIdea from the 1960s: RUNOFFExamples: i italics word /i , title Title words /title Example of a declarative languageApproach1. Start with content to be displayed2. Annotate it with tagsHTML uses to denote tagsCS142 Lecture Notes - HTML4

HTML tagsTags can provide:Meaning of text: h1 means top-level heading p means paragraph ul li for unordered (bulleted) listFormatting information ( i for italic)Additional information to display (e.g., img )Tags can have tags inside (nesting supported) - Document forms a treeCS142 Lecture Notes - HTML5

Example of HTML - Start with raw content textIntroductionThere are several good reasons for takingCS142: Web Applications:You will learn a variety of interesting concepts.It may inspire you to change the way software is developed.It will give you the tools to become fabulously wealthy.CS142 Lecture Notes - HTML6

Example of HTML - Annotate with tags h2 Introduction /h2 p There are several good reasons for taking i CS142: Web Applications /i : /p ul li You will learn a variety of interesting concepts. /li li It may inspire you to change the way software is developed. /li li It will give you the tools to become fabulously wealthy. /li /ul CS142 Lecture Notes - HTML7

Browser doesn’t care but programmers do h2 Introduction /h2 p There are several good reasons for taking i CS142: Web Applications /i : /p ul li You will learn a variety of interesting concepts. /li li It may inspire you to change the way software is developed. /li li It will give you the tools to become fabulously wealthy. /li /ul CS142 Lecture Notes - HTML8

Example HTML - Browser outputIntroductionThere are several good reasons for taking CS142: Web Applications: You will learn a variety of interesting concepts. It may inspire you to change the way software is developed. It will give you the tools to become fabulously wealthy.CS142 Lecture Notes - HTML9

HTML EvolutionInfluenced by browser implementation quirksWhat to do if you see “ p Some text” (missing closing /p )?1.2.Complain bitterly about malformed HTML.Figure out there was a missing /p , add it, and continue processing.Forked into HTML and XHTML (XML-based HTML)XHTML is more strict about adhering to proper syntaxFor the HTML class projects (1, 2, and 3) we will use XHTMLUsers came to depend on browser quirks, so browsers couldn't changeCS142 Lecture Notes - HTML10

Example XHTML document ?xml version "1.0" encoding "utf-8"? !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 -strict.dtd" html xmlns "http://www.w3.org/1999/xhtml" xml:lang "en" lang "en" head title Hello World /title /head body p Hello world! /p /body /html CS142 Lecture Notes - HTML11

Basic Syntax rules for XHTMLDocument: hierarchical collection of elements, starting with html Element: start tag, contents, end tagElements may be nestedEvery element must have an explicit start and endCan use foo / as shorthand for foo /foo Start tags can contain attributes: img src "face.jpg" input type "text" value "94301" name "zip" div class "header" CS142 Lecture Notes - HTML12

Need to handle markup characters in contentTo display a literal or in a document, use entities:<Displays >Displays &Displays &"Displays " Nonbreaking space (won’t insert a line break at this space)Many other entities are defined for special characters.Whitespace is not significant except in a few cases (e.g. textarea, pre tags)CS142 Lecture Notes - HTML13

Example XHTML document structure ?xml version "1.0" encoding "utf-8"? !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 -strict.dtd" html xmlns "http://www.w3.org/1999/xhtml" xml:lang "en" lang "en" head title Hello World /title /head body p Hello world! /p /body /html CS142 Lecture Notes - HTML14

XHTML document structure ?xml version "1.0" encoding "utf-8"? !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 -strict.dtd" Indicate that this is an XHTML document, conforming to version 1.0 of thestandard; use these lines verbatim in all the web pages you create for thisclass. html xmlns "http://www.w3.org/1999/xhtml" xml:lang "en" lang "en" Outermost element containing the document head : Contains miscellaneous things such as page title, CSS stylesheets, etc. body : the main body of the documentCS142 Lecture Notes - HTML15

Common usage XHTML tags p br h1 , h2 , . b , i pre img a href "." New paragraphForce a line break within the same paragraphHeadingsBoldface and italicTypically used for code: indented with a fixed-width font,spaces are significant (e.g., newlines are preserved)ImagesHyperlink to another Web page !-- comments -- Comment tagsCS142 Lecture Notes - HTML16

Common used XHTML tags - continued table , tr , td Tables ul , li Unordered list (with bullets) ol , li Ordered list (numbered) div Used for grouping related elements, where the groupoccupies entire lines (forces a line break before and after) span Used for grouping related elements, where the group iswithin a single line (no forced line breaks) form , input , textarea , select , . Used to create forms whereusers can input dataCS142 Lecture Notes - HTML17

Commonly used tags: head section title link Specify a title for the page, which will appear in the title barfor the browser window.Include CSS stylesheets script Used to add Javascript to a page (can be used in body as well)CS142 Lecture Notes - HTML18

HTML differences from XHTMLHTML supports the same tags, same features, but allows quirkier syntax:Can skip some end tags, such as /br , /p Not all attributes have to have values: select multiple Elements can overlap: p b first /p p second /b third /p Early browsers tried to "do the right thing" even in the face of incorrect HTML:Ignore unknown tagsCarry on even with obvious syntax errors such as missing body or /html Infer the position of missing close tagsGuess that some characters are literal, as in "What if x 0?"Not obvious how to interpret some documents (and browsers differed)CS142 Lecture Notes - HTML19

Newer HTML - HTML5 Additions tags to allow content definition article , section , header , footer , summary , aside , details mark , figcaption , figure nav , menuitem Drawing svg - Scalable Vector Graphics - Draw shapes canvas - Draw from JavaScript - 3D with WebGLTimed media playback: video and audio CS142 Lecture Notes - HTML20

Another markup language: Markdown# HeadingBullet list:## Sub-heading* apples* oranges* pears### Another deeper headingParagraphs are separatedby a blank line.Numbered list:1. apples2. oranges3. pearsTwo spaces at the end of a line leave aline break.Text attributes italic , *italic*, bold , **bold**, monospace .A [link](http://example.com).Horizontal rule:---CS142 Lecture Notes - HTMLExample from https://en.wikipedia.org/wiki/Markdown21

Markdown language example outputBullet list:Heading Sub-headingAnother deeper headingapplesorangespearsNumbered list:1.2.3.Paragraphs are separated by a blank line.Two spaces at the end of a line leave aline break.applesorangespearsA link.Text attributes italic, italic, bold, bold, monospace.Horizontal rule:CS142 Lecture Notes - HTML22

for unordered (bulleted) list Formatting information ( for italic) Additional information to display (e.g., ) Tags can have tags inside (nesting supported) - Document forms a tree CS142 Lecture Notes - HTML 5. Example of HTML - Start with raw content text CS142 Lecture Notes - HTML 6.