Transcript XHTML & CSS

XHTML & CSS
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
CSS
 Cascading Style Sheets
 Purpose of styles
 CSS levels 1, 2 and 3
 Defining styles
 Understanding selectors
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,
Netscape 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>


</tr>
</table>


<td>Cell 1,1</td>
<td>Cell 1,2</td>
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


XHTML 1.0 Transitional


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<!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>




</head>
<body>

<p>Hello, World!</p>
</body>
</html>


<meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" />
<title>First Complete Web Page</title>
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
Cascading Style Sheets
Introduction
What do a CSS do?

Allows to define rules to determine the
appearance of mark-up



We do not want appearance mark-up in our HTML
files.
Not necessary – for many reasons
Think about it for a moment
Meaning and Appearance

The XHTML document should contain the
meaning





It is the information that is paramount
Design issues are subjective
Not everyone can use a visual design
People may not want the style you chose
But what about my great design!


Take pride in delivering a web site that is
accessible first and looks good second
CSS lets you accomplish both
CSS is good for you

External CSS files make each of your HTML files
smaller and efficient



No need to repeat the formatting rules
You can manage your site look and feel from one file
 No matter two or two hundred pages
Concentrate on producing clean mark-up
 The information in the mark-up should make sense when
there is no style attached
 Users should not have to rely on the style you create for
them
 They may night have keen sense of style!
CSS is good for the user


Pages are smaller, therefore faster to
download
A browser can easily cache a style sheet


No need to keep retrieving it upon page requests
Some browsers allow users to customise
their experience with personal style sheets

Let the user ‘use’ their computer the way they
want to – do not force them into things they do not
want
Format of CSS

A rule is made with


Selector – element(s) to reference
Declaration – set of statements that associate an element
display property with a value specified. Every declaration is
in the format ‘property-name: value;’ A declaration may
have one or more rules defined
Selector
{
Declaration
Property
{
{
h1 { font-family: arial; }
Value
Where are we going with CSS


We shall style our documents using CSS
Also, control the screen layout using
positional CSS



But not this week grass hoppers!
First we must master the basics
Learn how to create dynamic effects without
JavaScript, such as menu rollovers
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
Macromedia® Dreamweaver®
Attempt to gain understanding of what WYSIWIG
editors are doing for you