Markup Languages

Trinity College

Markup Languages
Timothy Richards

Trinity College, Hartford CT • Department of Computer Science • CPSC 225

HTML
Hypertext Markup Language

Trinity College, Hartford CT • Department of Computer Science • CPSC 225 2

HTML

A Family of Related Languages


HTML

A Family of Related Languages

Most documents communicated
on the web are written using HTML.


HTML
After the next few lectures
you should be able to...
• Create standards-compliant static HTML documents
• Know where to find the reference definitions of HTML and
XML and be able to understand (most of) these defns.
• Determine if an XHTML document is syntactically correct
by consulting an XML document type definition or schema.
• Describe the history of HTML and relationship between
HTML, XML, and XHTML.
• Discuss pros and cons of following standards.
• Explain the new additions to the next version: HTML 5


HTML Example

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/1999/xhtml”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>HelloWorld</title>
</head>
<body>
Hello World!
</body>
</html>

HTML Example
Every HTML document contains two types of information

<!DOCTYPE html
<head>
</head>
<body>
Hello World!
</body>
</html>

HTML Example
The markup information (tags)

<!DOCTYPE html
<head>
</head>
<body>
Hello World!
</body>
</html>

HTML Example
The character data of the document (not tags)

<!DOCTYPE html
<head>
</head>
<body>
Hello World!
</body>
</html>

HTML Example
Document Type Declaration (more later)

<!DOCTYPE html
<head>
</head>
<body>
Hello World!
</body>
</html>

HTML Example
Document Instance

<!DOCTYPE html
<head>
</head>
<body>
Hello World!
</body>
</html>

HTML Example
Each tag is either a start tag or end tag

<!DOCTYPE html
<head>
</head>
<body>
Hello World!
</body>
</html>

HTML Example
The “word” in a tag is called the element name

<!DOCTYPE html
<head>
</head>
<body>
Hello World!
</body>
</html>

HTML Example
This is called the content of the head element.

<!DOCTYPE html
<head>
</head>
<body>
Hello World!
</body>
</html>

HTML Example
Each document has a root element

<!DOCTYPE html
<head>
</head>
<body>
Hello World!
</body>
</html>

HTML Example
Each document has a root element

<!DOCTYPE html
<head>
</head>
<body> This is always
Hello World! html in HTML
</body>
documents
</html>

HTML Example
This document strictly conforms
to the XHTML 1.0 standard
<!DOCTYPE html
<head>
</head>
<body>
Hello World!
</body>
</html>

HTML Example
When viewed as a tree, XHTML 1.0 Documents always
have two children: head and body
<!DOCTYPE html
<head>
</head>
<body>
Hello World!
</body>
</html>

HTML Example
<!DOCTYPE html
<head>
</head>
The head element is
<body>
used to provide certain
Hello World!
instructions to the browser
</body>
</html>

HTML Example
<!DOCTYPE html
<head>
</head>
The body element deﬁnes
<body>
the content of the page.
Hello World!
</body>
</html>

HTML Example
This document as a tree.

html

head body

title p

“HelloWorld” “Hello World!”


HTML History
• Tim Berners-Lee (CERN, 1990)
• CERN - Physics Research Center
• Originally designed with science and
engineering interest in mind.

• •1992 Elements:
title
• paragraph
• hyperlinks
• headings
• simple lists
• glossaries
• monospace text
• address blocks & search terms in URL


HTML History
• Tim Berners-Lee (CERN, 1990)
• CERN - Physics Research Center
• Originally designed with science and
engineering interest in mind.

• •1992 Elements:
title
• paragraph
• hyperlinks That was it!
• headings
• simple lists
• glossaries
• monospace text
• address blocks & search terms in URL


HTML History
• Marc Andreessen, Eric Bina
• National Center for Supercomputer Applications (NCSA)
• Graphical Browser: Mosaic (1993)
• Key Developers Left...
• To form Netscape Communications!
• Microsoft
• Created a team to develop Internet Explorer.
• The “Browser Wars”!
• 1993-1997 HTML was deﬁned by browser support

HTML History
• Marc Andreessen, Eric Bina
• National Center for Supercomputer Applications (NCSA)
• Graphical Browser: Mosaic (1993)
• Key Developers Left...
• To form Netscape Communications!
• Microsoft
• Created a team to develop Internet Explorer. This was
BAD!
• The “Browser Wars”! Why?
• 1993-1997 HTML was deﬁned by browser support

HTML History
• HTML Developers
• Required to “code” to each browser’s idiosyncrasies
• World Wide Web Consortium (W3C)
• Launched in October of 1994 (16 years ago this month!)
• Tim Berners-Lee


HTML History
• HTML Developers
• Required to “code” to each browser’s idiosyncrasies
• World Wide Web Consortium (W3C)
• Launched in October of 1994 (16 years ago this month!)
• Tim Berners-Lee
• Goal: Produce Web Standards!


HTML History
• Standards lagged behind de facto standards
• 2.0 was a standard 6 months after draft for 3.0 released
• 3.0 was never a standard
• 3.2 was adopted as a standard by W3C in 1997
• 3.2 speciﬁcation captured “practice” of 1996 (year behind)
• HTML 4 released in December 1997
• HTML 4.01 is the “standard”
• HTML 5 is up and coming!


HTML History
HTML standards are now being
adopted from W3C rather than
browser manufactures.


HTML History

There are two important aspects
of standardization for HTML.


HTML History


Syntax


HTML History


Syntax Semantics


HTML History
The Syntax

Deﬁnes the strings of characters that can be
used to represent an HTML document and
those that cannot.


HTML History
The Syntax

Deﬁnes the strings of characters that can be
used to represent an HTML document and
those that cannot.

< > A-Z a-z / * & % $ @ ! 0-9

HTML History
The Semantics

A description of what the various elements of
a syntactically correct document mean.


HTML History
The Semantics

A description of what the various elements of
a syntactically correct document mean.

The p element represents a paragraph
The a element represents an anchor
The href attribute represents a hyperlink


HTML History
The Semantics

Formal methods do exist for deﬁning
semantics, however, often a language is deﬁned
using natural-language descriptions.


HTML History
The Semantics

Formal methods do exist for deﬁning
semantics, however, often a language is deﬁned
using natural-language descriptions.

For the syntax of computer languages,
however, we use a metalanguage to describe
components of the language.


HTML History
For languages such as Java, a formal notation
known as Backus-Naur Form (BNF) is used.


HTML History

BNF could be used to deﬁne HTML...


HTML History


But, SGML
(Standard Generalized Markup Language)
is used for HTML 4.01


HTML History


Turns out SGML is VERY complex!


HTML History



W3C introduced XML in 1998 to describe
HTML...


HTML History



HTML...

This resulted in XHTML 1.0, which is
syntactically identical to HTML 4.01

HTML History



With Some HTML...
Restrictions
This resulted in XHTML 1.0, which is
syntactically identical to HTML 4.01

HTML History
• XHTML 1.0
• Semantically identical to HTML 4.01
• Restricts from of HTML 4.01 generality
• Abstract Syntax Trees (AST)
• Representation of HTML elements “abstractly” as trees
• Concrete Syntax Trees (CST)
• Representation of HTML elements as characters in trees
• XHTML 1.0 AST == HTML 4.01 AST
• XHTML 1.0 CST != HTML 4.01 CST

HTML History
• XHTML 1.0 Differences
• Omitted tags are not allowed
• All element and attribute names must be lowercase
(HTML 4.01 names are case insensitive)

• All attribute values must be quoted (not always necessary
in HTML 4.01)

• Differences are not burdensome
• They make it easier to write software to process HTML
documents


Digging into XHTML

More on this next time!

Any questions?


Markup Languages

More Related Content

Viewers also liked

Similar to Markup Languages

More from University of Massachusetts Amherst

Markup Languages