XHTML
- basic tags
- How to learn more
What is XHTML?
• eXtensible HyperText Markup Language
• XHTML 1.0:
– Recommended by the W3C
– Combination of HTML4 and XML
HTML
• “HTML is the lingua franca for publishing hypertext
on the World Wide Web ”
• Structure and format of documents defined by
.
• Enables connections between documents through
hyperlinks
http://www.w3.org/MarkUp/
HTML
Earlier version of HTML (HTML 3.2 and HTML 2.0)
offered :
– text
– multimedia
– hyperlink features
HTML 4 supports:
– more multimedia options
– scripting languages
– style sheets
HTML 4
Strengths:
• Standard (ISO 8879)
• Text-based => interoperability
Issues:
• Consequences of popularity and flexibility
(sloppy syntax)
• Explosion of device types (Mobile phones,
PDAs, appliances, etc)
XML (to the rescue)
• EXtensible Markup Language.
• Extensible in that the markup symbols are
unlimited and self-defining.
• XML does allow for custom elements to be
processed without redefining the whole
DTD (Document Type Definition).
• It was an attempt to separate the actual
document to how it would be presented
XHTML – conceptually
Attractive proposition:
• Basic set of HTML tags
• Extension framework
• Syntactic improvements (stricter) from HTML
XHTML – In practice
• Today’s standard for web development
• Tags almost identical to HTML’s
• More rigid coding standard
• Good browser compatibility
• Extensions developed for non-standard devices
• Easy to learn – Countless resources available
– http://www.w3schools.com
– http://validator.w3.org/
Historical summary
XHTML
XML
SGML
HTML
Basic example
Hello World!
Hello World!
Hello World
Another basic example
Hello world 2
Some formatted text
This is a paragraph. Text can be formatted easily: italic, Bold,
underlined, italic and underlined (note that underlining
isn't a good stylistic choice on the web, guess why?).
A bullet list
Apples
Pears
Bananas
Oranges
Author: Grégory Leplâtre
Hello world 2 – (1)
(…)
Some formatted text
(…)
Hello world 2 – (2)
(…)
This is a paragraph. Text can be formatted
easily: italic, Bold,
underlined, italic and
underlined (note that underlining isn't a
good stylistic choice on the web, guess why?).
(…)
Hello world 2 – (3)
(…)
Apples
Pears
Bananas
Oranges
(…)
(…)
Author: Grégory Leplâtre
(…)
What we have learnt
• Links:
– (not yet)
• Structural tags:
– , , , , ,
• Formatting tags:
– , ,
• Graphical elements:
–
• Special characters:
– é â
XHTML components
1. An XML declaration (optional)
2. A DOCTYPE
3. The tag (must be the first tag of the
document, after 1 and 2)
4. The XML namespace (xmlns)(optional)
5. and tags.
1. XML declaration (optional)
Simple statement that states that the
document is an XML document and and
specifies its version and encoding (optional).
2. DOCTYPE
Refers to a DTD (Document Type Definition).
Three of them are available:
• Strict: Self-explanatory
• Transitional: allows for use of HTML tags
• Frameset: allows for the use of frames
2. DOCTYPE
• Strict
• Transitional
• Framset
2. DOCTYPE
In the interest of learning, you are asked to use
the strict DOCTYPE. Therefore you will need to
be very careful whilst producing XHTML code.
You are reminded that your code can be
validated at:
http://validator.w3.org/
3-4. XML namespace
To disambiguate between two elements that
happen to share the name name
To group elements relating to a common idea
together
At this stage, you won’t need to worry about this.
5. tag
• The title appears at the top of the browser.
Can be used by search engines.
• Literally: information about (the page). A
typical page will contain several of these tags. Works
with name/content pairs:
• specifies the style sheet to be used (more on
this in the CSS lecture)
5. tag
The content of the page must be included within
the tag.
Proper XHTML Hello World!
XHTML Hello World!
Hello World! page
Hello World!
XHTML tags
Headings
• , , … (h1 largest font, h6,
smallest font)
• Example:
Some Basic Examples
Example 1: formatting
http://www.w3schools.com/tags/tag_hn.asp
Spacing
• – non-breaking space: forces the
browser to display a white space.
• starts a new paragraph (which must be
concluded with a ).
• - line break: starts a new line.
Text formatting
• Bold: or
• Italics: or
• Underline: (not in strict DTD!)
• Preformatted text:
Lists
There are three types of lists:
• Ordered lists – numbered
• Unordered lists – bullet
• Definition lists
Ordered lists
Apples
Bananas
Oranges
Pears
http://www.w3schools.com/tags/tag_ol.asp
Unordered lists
Apples
Bananas
Oranges
Pears
http://www.w3schools.com/tags/tag_ul.asp
Nested lists
1. Starters
Sea food chowder
Soupe du jour
Goats cheese salad
2. Main courses
Haggis
Sea bass
Risotto
3. Sweets
– Chocolate mousse
– Carrot cake
– Apple tart
Tables
2-dimensional representation of data:
• tag to create a table, contains …
• tag for each line, which contains …
• tag for each column
In addition:
• table headings
Formatting:
• Tag attributes
Table example
100
200
300
400
500
600
Tables – Important attributes
• border: border width (0 used frequently)
• cellspacing: space between cells
• cellpadding: space between the cell walls and
content
• width: width of the table (% or pixels)
http://www.w3schools.com/tags/tag_table.asp
http://www.w3schools.com/tags/tag_tr.asp
http://www.w3schools.com/tags/tag_td.asp
Links
One tag , four types of links:
1. Link to a location on the same page
2. Link to a document relative to the current
document
3. Absolute link to a document
4. Email link
General format:
Text to display
The above HTML code will look like: Text to display
HTML code Outcome of HTML
in your browser
1. Link within document
……. 1. Introduction
1. 2. Discussion
Introduction
2.
Discussion
……
Introduction
Introduction ……
…….
Discussion
Discussion
…….
1. Link within document
Two steps:
1. defines a hypertext link that specifies where you
want to go within a document
Go to part 1
2. defines the place where you will jump to with a
document when you click on the above link
Part 1 is here
The # sign indicates a location within a document and
must be included.
2. Relative link
Link to a document on the same server:
link text
Example:
teaching main
page
3. Absolute link
Link to a document on the same server:
link text
Example:
teaching main page
Email link
Creates a link that allows users to send an email
to the specified address.
Example:
contact me
Images
Images are added using the tag:
Pictures can be used as links:
http://www.w3schools.com/tags/tag_img.asp
Audio and Video?
• XHTML doesn’t support these.
• Links to audio or video files are possible.
• Ways to embed media in web pages involves
plugins… For multimedia students next year
…
Final Exercise
My Web Page
My name is: Xxxxxx Xxxxxxx
My characteristics are:
Height 180 cm
Weight 65 Kg
Age 22
Summary
• eXtensible Learning Process
– Simple basic principle (tags)
– Expand your tag knowledge (w3schools)
• Practice
– Next week’s tutorial
– At home
Next week
• Tutorial
– XHTML
• Lecture
– Styling (CSS+ design issues)