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"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Need to tell the browser which encoding is used
We will use the following at the top of the page
<?xml version="1.0" encoding="utf-8"?>
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
<!-- Put your comment here -->
<!-- this is a comment -->
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>
<title>Introduction to tags</title>
</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>
<title>Introduction to tags</title>
</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>
<title>Introduction to tags</title>
</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>
Contains the entire list
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>
Contains the entire list
<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
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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
