HyperText Markup Language

Browser environment is different

  • Traditional app: GUIs based on pixels
    • Since 1970s: software accessed mapped framebuffers (R/G/B)
    • Toolkits build higher level GUI widgets (buttons, tables, etc.)
  • Web browsers display Documents described in HTML
    • Until HTML5's canvas region, you couldn't write pixels
    • Make applications out of documents
      • Early web apps: Multiple documents (pages) with 'form' tag for input
      • Current: Use JavaScript to dynamically generate and update documents

HTML: HyperText Markup Language

  • Concept: Markup Language - Include directives with content
    • Directives can dictate presentation or describe content
    • Idea from the 1960s: RUNOFF
    • Examples: <i>italics word</i>, <title>Title words</title>
    • Example of a declarative language
  • Approach
      1. Start with content to be displayed
      1. Annotate it with tags

HTML tags

  • Tags can provide:
    • Meaning of text:
      • <hl> means top-level heading
      • <p> means paragraph
      • <ul><li> for unordered (bulleted) list
<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>

https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

  • Forked into HTML and XHTML (XML-based HTML)
    • XHTML is more strict about adhering to proper syntax
  • For the HTML class projects (1, 2, and 3) we will use XHTML
  • Users came to depend on browser quirks, so browsers couldn't change

Basic Syntax rules for XHTML

  • Document: hierarchical collection of elements, starting with <html>
  • Element: start tag, contents, end tag
  • Elements may be nested
  • Every element must have an explicit start and end
    • Can use <foo /> as shorthand for <foo></foo>
  • Start tags can contain attributes:
<img src="face.jpg">
<input value-"94301" name = 'zip'>
<div class="header">
  • Need to handle markup characters in content

HTML differences from XHTML

  • HTML 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 tags
    • Carry on even with obvious syntax errors such as missing <body> or </html>
    • Infer the position of missing close tags
    • Guess that some < characters are literal, as in "What if x < 0?"
    • Not obvious how to interpret some documents (and browsers differed)

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 WebGL
  • Timed media playback: <video> and <audio>