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 on-

screen 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 better for the web

It is possible to design web sites that are not compliant to web standards 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 Name and value pairs contained within the

starting part of the element Attributes are not free form

Defined by XHTML document types Used to affect an individual instance of an

element

HTML Concepts

Element (tag)

<p style=“color:red;”>Hello, World!</p>

Element Start Element EndAttribute Content

HTML Elements (tags) Begin with left pointing angle bracket

< Ends with right pointing angle bracket

> Between brackets is a keyword indicating the

element type <table>, <img> or <p>

Elements that contain content such as <p> are closed with a / prefix to the element name <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 mark-up

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/xhtml1-strict.dtd">

XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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

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

h1 { font-family: arial; }

{{

Selector

ValueProperty

{Declaration

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