a href="http://www.cs.auckland.ac.nz/courses/compsci111/">111 home page</a

Markup Languages
Heading
Paragraph
COMPSCI 111 / 111G
Formatting. Plain text contains all the

content which will appear on the page.
Using a variety of formatting styles makes
the text much easier to read and can be used
to emphasise points.
Emphasise
An introduction to practical computing
Markup Tags
(HTML)
<H1>Formatting.</H1> Plain text contains all the

content which will appear on the page.
<P> Using a variety of formatting styles makes the text
much <EM>easier to read</EM> and can be used to
<EM>emphasise points.</EM>
Formatting
Final
Appearance
XHTML
Plain text contains all the content which will appear on the page.
Using a variety of formatting styles makes the text much easier to read
and can be used to emphasise points.
XHTML 01
Markup Languages
Browser Wars
Markup
HTML 1.0
Indicates the formatting that should be used to display the page
Tim Berners Lee (1993)
Markup Language
Browsers added extra features
A markup language consists of special tags which are placed in the text
Specifies how to format the text
Internet Explorer had unique tags

Netscape Navigator had unique tags
Major problem
Extensible Hypertext Markup Language (XHTML)
What tags should a publisher use?

How can this problem be resolved?
Used to format web pages

Contains hypertext information (links)
Written in ASCII / Unicode
Embedded format codes (tags)
http://en.wikipedia.org/wiki/Browser_wars
XHTML 01
XHTML 01
Development of HTML
Document Type Definition
HTML 2.0
Defines which standard is being used for the page
Internet Engineering Task Force standard (1995)
We use XHTML 1.0 Strict

Extensible Hypertext Markup Language 1.0 Strict
HTML 3.2 / HTML 4.0
Should appear at the top of the file
W3 Consortium recommendation (1997)
<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 4.01
W3C recommendation (1999)
XHTML 1.0
W3C recommendation (2000)
http://en.wikipedia.org/wiki/Html
XHTML 01
Encoding methods
http://en.wikipedia.org/wiki/XHTML
XHTML 01
Use at the start of every file
Different character sets can be used to encode a

page
Copy and paste the code exactly as it appears

Will be provided in tests and exams
Do not have to understand this code
ASCII
UTF-8
Unicode
<?xml version="1.0" encoding="utf-8"?>

Need to tell the browser which encoding is used

We will use the following at the top of the page
XHTML 01
XHTML 01
HTML Source Code
Overview of tags
Code used by the browser to display the page
Markup achieved with tags
White space is ignored
Enclosed with angle brackets < >

Use lower case (XHTML is case-sensitive)
Come in pairs <tag> </tag>
Comments
Ignored by the browser

Allow you to document your code


Tag usually applies to text between start and end tag
Layout
This word is in <i>italics</i>
Use tidy layout where possible

Make code easy to understand
Make code easy to maintain/ modify
Use whitespace and comments to help
XHTML 01
Attributes
XHTML 01
10
Nested Tags
Some tags require additional information
Tags must be correctly nested
Properties or Attributes of the tag

<tag property=value> </tag>
Cannot close an open tag until all the open tags that it affects are also closed
<tag>
Text only affected by tag
<tag2>
Text affected by both tag and tag2
</tag2>
Text only affected by tag
</tag>
XHTML 01
11
XHTML 01
12
Essential tags
Essential tags
<html>
<head>
Encloses the entire document

Specifies that the document uses html
Has 3 attributes (these will always be provided for you):
Contains information for the browser

Does not contain any content to be displayed on the page
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
.
</head>
.
.
.
.
.
</html>
<html>
.
.
.
.
.
.
.
.
</html>
XHTML 01
13
XHTML 01
Essential tags
Essential tags
<title>
14
<body>
Part of the head

Specifies the title to be used by the browser
Name of the window
Used in navigation (bookmarks, history, etc.)
Contains all the content that will appear on the page
<html>
<head>
<title>Introduction to tags</title>
</head>
<body>
.
.
.
</body>
</html>
<html>
<head>
</head>
.
.
.
.
.
</html>
XHTML 01
15
XHTML 01
16
Block-level tags
Paragraphs
<p>
Define the structure of a block
Defines a paragraph of text
Headings
Paragraphs
Lists
Tables
Preformatted text
<html>
<head>
</head>
<body>
<p>This is a very simple web page</p>
<p>
It contains two different paragraphs
of text.
</p>
</body>
</html>
XHTML 01
17
XHTML 01
XHTML Exercise 1
18
Headings
Six levels of headings
Exercise 1: What does XHTML stand for?
<h1>
First level heading
<h2>
Second level heading
Exercise 2: What is a document type definition used for?
Exercise 3: What is white space?
Exercise 4: Is XHTML case sensitive?
<h3>
<h4>
<h5>
<h6>
Third level heading

Fourth level heading
Fifth level heading
Sixth level heading
Exercise 5: Create a complete XHTML document with the title Simple page.
The only text that should appear on the page is Hello World.
XHTML 01
19
XHTML 01
20
Headings
Example of Head, Heading and Title

<html>
<head><title> Titles, headings and heads</title></head>
<body>
<h1>Title</h1>
<p>The title is part of the document head</p>
<html>
<head>
</head>
<body>
<h1>A very simple web page</h1>
<p>It contains two paragraphs and two
headings</p>
<h2>Second section</h2>
<p>This section is less important</p>
</body>
</html>
<h2>Head</h2>
<p>The head is not shown on the page</p>
<h2>Heading</h2>
<p>These come in different sizes
and make up the content of the page.
They should therefore be used only
in the body.</p>
<p>Do not get confused</p>
</body>
</html>
XHTML 01
21
XHTML 01
Unordered Lists
Ordered Lists
Unordered Lists
Bullet Points
<ul> </ul>
<li> </li>
22
Ordered Lists
Automatically numbered
Contains the entire list
<ol> </ol>
Used for each list item
<li> </li>

Used for each list item
<p>Structure of an HTML document</p>

<ul>
<li>HTML</li>
<li>HEAD</li>
<li>BODY</li>
</ul>
XHTML 01
<p>Structure of an HTML document</p>

<ol>
<li>HTML</li>
<li>HEAD</li>
<li>BODY</li>
</ol>
23
XHTML 01
24
Definition Lists
Inline tags
Terms and explanations
Appear within the blocks
<dl> </dl>
<dt> </dt>
<dd> </dd>
A definition term
A definition description
Apply to words within paragraphs etc.
Common inline tags

Line Breaks
Images
Hypertext References
<p>Some definitions</p>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
</dl>
XHTML 01
25
XHTML 01
Line break
26
Images
<br>
Pages may contain images
Forces a line break

Same as hitting the Enter key
Use <br></br>
But images are not plain text

Cant be inserted directly into HTML page
Solution
Backwards compatibility
Use hack that older browsers will accept

<br />
XHTML 01
27
Store the image on the internet (or locally on disk)

Tag contains the address of the image
Web browser loads image when required
Only use images the browser understands
GIF, JPG, PNG
XHTML 01
28
<img> example
Image tag
<img>
An image is inserted inline, so it is used inside a block-level element

(a paragraph in this example).
Insert an image at this location
<p>
Here is one of my holiday pictures.
<img src="Empire.jpg" alt="The Empire State Building>
</img>
It was late December and it was very cold.
</p>
src
The source file of the image
Attribute that specifies the file name
alt
Attribute to specify alternate text
Displayed if the image cant load
Important for people with visual impairment
<img src=filename alt=description></img>
XHTML 01
29
XHTML 01
Hypertext reference
30
URLs
A link to another resource on the WWW
Fully specified
References to other documents

Pages, images, files, sections
<a>
Anchor tag
Protocol
Host name
Path
File
Relative
Omit the first parts
Path and file
File
href
Attribute used to specify the destination of the link
URL
http://www.cs.auckland.ac.nz/courses/compsci111/index.html
/courses/compsci111/index.htm
lectures/index.html
index.html
<a href= url >text appearing</a>
XHTML 01
31
XHTML 01
32
XHTML Exercise
Validated Code
Exercise 6: What XHTML code is required to create a hypertext

reference that links to a page at the location
http://www.cs.auckland.ac.nz/courses/compsci111/. The
underlined link on the page should be the text 111 home page.
XHTML 01
Example Source Code

<html xmlns=http://www.w3.org/1999/xhtml xml:lang=en lang=en >
<head>
<title>A sample page</title>
</head>
<body>
<h1>Example</h1>
<p>This is a complete xhtml web page. You can verify that all the
code is correct using the <a href=http://validator.w3.org">W3C
Validator</a>.</p>
<h2>Images</h2>
<p>If your code is correct, then you can include an image to show
that the page is validated.</p>
<p>
Author: Andrew Luxton-Reilly<br></br> Date: 01/04/06<br></br>
</p>
<p>
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Validated
xhtml logo"></img>
</p>
</body>
</html>
33
Online system to check correctness of code

Provided by W3C
http://validator.w3.org
XHTML 01
Resulting Web Page
34

a href="http://www.cs.auckland.ac.nz/courses/compsci111/">111 home page</a

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

a href="http://www.cs.auckland.ac.nz/courses/compsci111/">111 home page</a

Uploaded by

Copyright:

Available Formats

Markup Languages

COMPSCI 111 / 111G

Formatting. Plain text contains all the

An introduction to practical computing

<H1>Formatting.</H1> Plain text contains all the

Indicates the formatting that should be used to display the page

Tim Berners Lee (1993)

Browsers added extra features

Internet Explorer had unique tags

Extensible Hypertext Markup Language (XHTML)

What tags should a publisher use?

Used to format web pages

Document Type Definition

Defines which standard is being used for the page

Internet Engineering Task Force standard (1995)

We use XHTML 1.0 Strict

HTML 3.2 / HTML 4.0

Should appear at the top of the file

W3 Consortium recommendation (1997)

<!DOCTYPE html PUBLIC

Use at the start of every file

Different character sets can be used to encode a

Copy and paste the code exactly as it appears

<?xml version="1.0" encoding="utf-8"?>

Need to tell the browser which encoding is used

<?xml version="1.0" encoding="utf-8"?>

HTML Source Code

Code used by the browser to display the page

Markup achieved with tags

White space is ignored

Enclosed with angle brackets < >

Ignored by the browser

Tag usually applies to text between start and end tag

This word is in <i>italics</i>

Use tidy layout where possible

Some tags require additional information

Tags must be correctly nested

Properties or Attributes of the tag

Encloses the entire document

Contains information for the browser

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Part of the head

Contains all the content that will appear on the page

Define the structure of a block

Defines a paragraph of text

Exercise 1: What does XHTML stand for?

First level heading

Second level heading

Exercise 2: What is a document type definition used for?

Exercise 3: What is white space?

Exercise 4: Is XHTML case sensitive?

Third level heading

Example of Head, Heading and Title

Contains the entire list

<p>Structure of an HTML document</p>

<p>Structure of an HTML document</p>

Terms and explanations

Appear within the blocks

Contains the entire list

Apply to words within paragraphs etc.

Common inline tags

Pages may contain images

Forces a line break