Transcript XHTML & CSS

XHTML
By Trevor Adams
Topics Covered

XHTML
 eXtensible HyperText Mark-up Language
 The beginning – HTML
 Web Standards
 Concept and syntax




Elements (tags)
Attributes
Document Types
Document level elements – structure of an HTML document
The Beginning - HTML


Invented by Tim Berners-Lee
Based on SGML



Standardised General Mark-up Language
Developed so research documents could be
shared via the Internet
HTML has had 4 major versions prior to
XHTML

XHTML introduced after CSS and XML became
widely adopted web standards
Hyper Text Mark-up Language


Devised to format textual documents
Transported over the HTTP protocol



HTTP also invented by Tim Berners-Lee
A client browser renders mark-up into an onscreen image
A user consumes the document using a client
browser (user agent)

E.g. Internet Explorer, Mozilla Firefox, Opera,
Chrome and Safari
Web Standards

The nature of the Internet eventually leads us
to agreed standards



From a basic entity to transfer textual documents
To a platform used to deliver almost any
conceivable idea using a multitude of media types
The World Wide Web Consortium (W3C) is
responsible for maintaining and ratifying web
standards


Supported by many industry leaders
http://www.w3.org/
Web Standards

The idea is quite simple







Web site designers create compliant documents
Web browser developers ensure their browsers render
compliant mark-up correctly
End users ensure they use a compliant browser
The Web will then work across all platforms and system
architectures
However, browsers implement bespoke features
Site designers wish to utilise these features
Users do not care or even think about Web
standards (they should not really have to)
Web Standards

Responsible designers create web sites that are
standards compliant


It is possible to design web sites that are not
compliant to web standards



It is better for the web
Why do this?
We know better already
We shall be creating web sites that are compliant to
XHTML 1.0


Supported by major browsers
Comes in Strict, Transitional and Frameset flavours
Web Standards

It is not enough to say:




“It looks OK with Internet Explorer” or
“Checked it with FireFox and it looked ok”
It is not enough that mark-up merely looks right in
the browser
Design for the Internet, design for cross platform
compatibility, design for professional pride and most
of all…


Make your design work in all the ways your users wish to
interact with it
Do not dictate the Internet to the user – it is not our job to
do so!
XHTML
Concept and Syntax
HTML Concepts


HTML is relatively straight forward
Individual Elements (tags)





Special text strings
Interpreted
Provide document structure
Formatting constructs
Every element has a start and end part

Contents of which is formatted accordingly
HTML Concepts

Elements may contain attributes


Attributes are not free form


Name and value pairs contained within the
starting part of the element
Defined by XHTML document types
Used to affect an individual instance of an
element
HTML Concepts
<p style=“color:red;”>Hello, World!</p>
Element Start
Element (tag)
Attribute
Content
Element End
HTML Elements (tags)

Begin with left pointing angle bracket


Ends with right pointing angle bracket


<table>, <img> or <p>
Elements that contain content such as <p> are
closed with a / prefix to the element name


>
Between brackets is a keyword indicating the
element type


<
<p>This is content</p>
Elements with no content are closed inline E.g.

<img src=“file.gif” height=“25” width=“25” alt=“eg” />
HTML Elements (tags)

Some elements must contain other elements
<ul>
<li>This is item 1</li>
<li>This is item 2</li>
</ul>

Another example would be a table
<table>
<tr>
<td>Cell 1,1</td>
<td>Cell 1,2</td>
</tr>
</table>
HTML Attributes




Attributes are contained within the opening part of
an element
Attributes provide a means to alter an individual
instance of an element
Some attributes are required (defined by XHTML
rules)
For example, the <img> element


<img height=“50” width=“50” src=“file.jpg” alt=“example” />
The img element requires (to be valid) a height,
width, source file and alternative text attribute
HTML Attributes

HTML attributes are always in the format:



attribname=“attribvalue”
They are separated within the start of the
element using white space (space, tab, return
line)
They should always be properly formed to
avoid unwanted errors when HTML is
rendered
HTML Document Types




A document type defines the structure of the markup
A statement is included at the top of the document
to indicate which version of HTML is being used
A browser can then render it appropriately
A document type declaration must be given for the
HTML to be valid


You cannot validate a page without declaring how it should
be validated
Document types are defined by the W3C
HTML Document Types

XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">

XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">

Remember them if you can, keep them in a handy
place if you cannot!
HTML Document Elements

Every XHTML document requires the
following basic structure



DTD Declaration
<html> element – contains the document
<head> element contained within <html>


Contains information about the document
<body> element contained within <html>

Contains the body content of the document (what the
user consumes)
First web page

<!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">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>First Complete Web Page</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
HTML Element




Indicates the beginning and end of an
XHTML document
All documents begin with <html> and end
with </html>
You may find browsers can handle the
absence of one or both
We strive for valid XHTML – be sure to
include both
Head Element




Provides extra information about the document
Serves a container for external document linking,
such as a style sheet
The <head> element is ended with </head>
It should always contain a title



<title>Title of the document</title>
Used by the browser and other tools
The head element also contains <meta> elements
for other document related information
Meta Elements


Contained within the <head> element
Allow the author to add extra information
about the document using format:




<meta name=“dataname” content=“data” />
<meta name=“author” content=“Trevor Adams” />
<meta name=“keywords” content=“some stuff” />
Support for meta tags is declining

Still an important part of the document!
Body Element




Where all visible content appears
Appears after the <head> element
Within the <html> element
This is where novice web designers give
most of their attention

Often neglecting other important aspects
In the mean time

Complete the tutorial work this week




Attempt the further exercises
Help you gain understanding
Take your time – it is a huge topic
Get comfortable with XHTML and editors


Notepad++ can be your friend just as much as
Microsoft Expression Web
Attempt to gain understanding of what WYSIWIG
editors are doing for you