3. Web Languages


  1. The World Wide Web
  2. Web Languages
  3. HyperText Markup Language (HTML)
  4. Elements and tags
  5. HTML Document Structure
  6. Some Block-Level HTML Elements
  7. Some In-line HTML Elements
  8. Attributes of Elements
  9. HTML, XHTML and XML
  10. Permissive Syntax of HTML
  11. Limitations of (X)HTML
  12. XML Overview
  13. XML Example
  14. Some XML Vocabularies
  15. SVG
  16. MathML
  17. RSS
  18. RSS Example
  19. XML Syntax Rules
  20. Well-Formed XML
  21. More XML syntax
  22. Character Encodings
  23. Character and built-in entities
  24. Namespaces
  25. The namespaces solution
  26. Namespace declarations
  27. Scope of namespace declarations
  28. Namespaces example
  29. Overriding namespaces
  30. JSON
  31. JSON Data Types
  32. JSON example
  33. Exercises
  34. Links to more information

3.1. The World Wide Web

3.2. Web Languages

3.3. HyperText Markup Language (HTML)

3.4. Elements and tags

3.5. HTML Document Structure

3.6. Some Block-Level HTML Elements

Element name Description
h1...h6 headings
p paragraph
table table
ol ordered list
ul unordered list
li list item
br line break
hr horizontal rule
pre preformatted text
div division (often used for formatting with stylesheets)

3.7. Some In-line HTML Elements

Element name Description
code sample code
em emphasis
a anchor (for links)
img inline image
span often used for formatting with stylesheets

3.8. Attributes of Elements

3.9. HTML, XHTML and XML

3.10. Permissive Syntax of HTML

3.11. Limitations of (X)HTML

3.12. XML Overview

3.13. XML Example

Representing information about a collection of classical CDs: cd-collection.xml

<CDcollection>
  <CD>
    <soloist>Martha Argerich</soloist>
    <orchestra>London Symphony Orchestra</orchestra>
    <conductor>Claudio Abbado</conductor>
    <date>1968</date>
    <performance>
      <composer>Frederic Chopin</composer>
      <composition>Piano Concerto No. 1</composition>
    </performance>
    <performance>
      <composer>Franz Liszt</composer>
      <composition>Piano Concerto No. 1</composition>
    </performance>
  </CD>

  <CD>
    <composer>Antonin Dvorak</composer>
    <performance>
      <composition>Symphony No. 9</composition>
      <orchestra>Vienna Philharmonic</orchestra>
      <conductor>Kirill Kondrashin</conductor>
      <date>1980</date>
    </performance>
    <performance>
      <composition>American Suite</composition>
      <orchestra>Royal Philharmonic</orchestra>
      <conductor>Antal Dorati</conductor>
      <date>1984</date>
    </performance>
  </CD>
</CDcollection>

3.14. Some XML Vocabularies

Meaning of acronyms:

3.15. SVG

3.16. MathML

3.17. RSS

3.18. RSS Example

<rss>
  <channel>
    <title> ... </title>
      ...
    <item>
      <title> ... </title>
      <description> ... </description>
      <link> ... </link>
      <pubDate> ... </pubDate>
    </item>
      ...
    <item>
      <title> ... </title>
      <description> ... </description>
      <link> ... </link>
      <pubDate> ... </pubDate>
    </item>
  <channel>
</rss>

3.19. XML Syntax Rules

Attribute values can be enclosed in either single quotes or double quotes. This allows one to use quotes inside attribute values, such as height='72"'.

3.20. Well-Formed XML

3.21. More XML syntax

The XML declaration can also specify the character encoding used, using the encoding attribute, and whether or not the document is dependent on others, using the standalone attribute. Putting this information inside the document makes it self-identifying, which is preferable to using file extensions, for example.

Processing instructions contain instructions which are supposed to be passed on to applications processing the document.

3.22. Character Encodings

3.23. Character and built-in entities

Single quotes and double quotes have special meaning in XML in that they are used to delimit attribute values. If, for example, we want to use a double quote to represent inches inside an attribute value delimited using double quotes, we can use the quot entity to do so as follows: height="72&quot;". Now the value of the height attribute returned by an XML parser will be 72".

3.24. Namespaces

3.25. The namespaces solution

3.26. Namespace declarations

3.27. Scope of namespace declarations

3.28. Namespaces example

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg">
   ...
   <p>A circle looks like this
      <svg:svg ... >
         ...
         <svg:circle ... />
         ...
      </svg:svg>
      and has
      ...
   </p>
</html>

3.29. Overriding namespaces

3.30. JSON

3.31. JSON Data Types

3.32. JSON example

XML CDCollection example from earlier, represented in JSON

{
  "CDs": [
    {
      "soloist": "Martha Argerich",
      "orchestra": "London Symphony Orchestra",
      "conductor": "Claudio Abbado",
      "date": 1968,
      "performances": [
        {
        "composer": "Frederic Chopin",
        "composition": "Piano Concerto No. 1"
        },
        {
        "composer": "Franz Liszt",
        "composition": "Piano Concerto No. 1"
        }
      ]
    },
    {
      "composer": "Antonin Dvorak",
      "performances": [
        {
        "composition": "Symphony No. 9",
        "orchestra": "Vienna Philharmonic",
        "conductor": "Kirill Kondrashin",
        "date": 1980
        },
        {
        "composition": "American Suite",
        "orchestra": "Royal Philharmonic",
        "conductor": "Antal Dorati",
        "date": 1984
        }
      ]
    }
  ]
}

3.33. Exercises

  1. Consider using an XML document to represent information about students on an MSc programme. All information should be represented using elements rather than attributes. The root element of the document is programme. A programme has a degree, whose value in this case is "MSc", and a year, whose value in this case is "2015/16". These elements are followed by the results for the programme. The results are partitioned into distinction, merit, pass and fail. Within each is a sequence of name elements, each containing the name of a person having achieved the corresponding result for the programme. The actual results are as follows: Jemima Puddle-Duck and Peter Rabbit obtained distinctions, Tom Kitten obtained a merit, and Samuel Whiskers failed (nobody obtained only a pass).


  2. Consider a relational database containing a relation teaches with attributes course and lecturer, representing the relationship between courses taught on an MSc programme and the lecturers who teach them. Give an XML document which represents a relation instance containing two tuples. (You are free to make up your own course and lecturer names.)

3.34. Links to more information

HTML is covered in Chapter 1 and XML in Chapter 2 of [Moller and Schwartzbach]. XML is covered in Chapter 1 of [Jacobs]. HTML and XML are mentioned in passing in Chapter 4 of [Comer].