xhtml week two web design. 2 what is xhtml? xhtml is the current standard for html newest generation...

XHTMLWeek Two

Web Design

2

What is XHTML?

XHTML is the current standard for HTML

Newest generation of HTML (post-HTML 4) but has many new features which mean that it is, in some ways, like XML

XHTML stands for eXtensible HyperText Markup language and is a cross between HTML and XML

3

Why Use XHTML?

XHTML was created for two reasons:

To create a stricter standard for marking web pages, reducing incompatibilities between browsers

To create a standard that can be used on a variety of different devices without change

4

Standards

XHTML is a web standard agreed by the W3C Creates better structured code Greater accessibility now and in the future XHTML replaces HTML

5

The Main Differences

Several main changes in XHTML from HTML v.4.0:

All documents must have a Doctype All tags must be in lower case All tags must be nested correctly All tags must be closed All attributes must be quoted Rules about block & inline elements are stricter Attributes cannot be shortened The name attribute has changed

6

The Doctype

The first change which will appear on your page is the Doctype

When using HTML it was good practice to add a Doctype to the beginning of the page

Although optional in HTML, XHTML requires you to add a Doctype

7

DTD – Document Type Definition

The DTD defines how the XML (XHTML) document should be structured – the rules the document will adhere to.

The main definition building blocks are: Elements Attributes (and the values they may have) Entities

8

Doctypes

There are three document type definitions available for use: Strict Transitional Frameset

The Doctype should be the very first line of your document and should be the only thing on that line

You don't need to worry about it confusing older browsers because the Doctype is actually a comment tag

It is used to find out which code the page is written in (but only by browsers/validators which support it)

9

Strict

Used mainly when the markup is very clean and there is no 'extra' markup to aid the presentation of the document

Best applied if you are using Cascading Style Sheets for presentation

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

10

Transitional

Used if you want to use presentational features of HTML in your page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

11

Frameset

Used if you want to use frames on your page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

12

HTML Document Format

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

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Page Title</title>OTHER HEAD DATA

</head> <body>

DISPLAYED CONTENT </body></html>

13

Lowercase

Probably the biggest change in XHTML (besides the tags themselves) is that the way in which you write them must be correct

In XHTML, tags must always be lower case

This means that:

<CODE><Code><CoDE>

are all incorrect tags and must not be used

The code tag must now be used as follows:

<code>

14

Nesting

Often need to apply several tags to a single element (e.g. text string) Must open and close tags in the paired correct order (nesting) For example, for bold red text in a paragraph, the correct nesting

would be any of the following:

<code>Your Text</code><code>Your Text</code>

What you must not do, is to close tags in the wrong order i.e.

<code>Your Text</code>

Although code in this form may be rendered using HTML, this is incorrect in the XHTML specification and would not be displayed correctly

15

Closing Tags

All tags in XHTML must be closed Container tags are closed after the content they contain, e.g.

<code>if (whatever)</code>, important) However, there are several which are standalone, non-container

tags which do not get closed with a separate closing tag. The main three are:

 <img> <hr>

16

Closing Tags 2

These non-container tags are closed within the actual tag itself: <img /><hr />

Notice the space before the /> Not actually necessary in the XHTML specification (you

could use ) but as well as being correct XHTML, it will also make the tag compatible with past browsers

An example:

<img src="myimage.gif" alt="My Image" width="400" height="300" />

17

Attributes in quotation marks

All attributes in XHTML must be quoted

In HTML you could have used the following: <td rowspan=3>

Gives no compatibility issues and would render okay

However, this is incorrect in XHTML coding

All attributes must be surrounded by quotes (")

Therefore, the correct format of this code would be:

<td rowspan=“3”>

Block & Inline elements

Some html elements always appear in their own ‘block’, that is, on their own set of lines: p, table, div, ol, ul, dl, h1…h6

These are called block elementsSome elements don’t go on a new line,

they’re called inline elements: img, strong, span, em

Block & Inline rules

All inline elements must be in a block element So, you can’t just have some text, or an image or any inline

element unless it’s in a block – like a for instance Inline elements can’t contain block elements

Not all blocks can contain other blocks You can’t put one block element inside another,

except: a list item (li) can contain paragraphs td can contain paragraphs (p) and lists (ol, ul, dl) divs can contain anything, including other divs

20

Shortening Attributes

Common practice in HTML to shorten some attributes

Can’t be done with XHTML since it causes incompatibilities between browsers e.g.

<input type="checkbox" value="yes" name="agree" checked>

In XHTML, all shortened attributes must be given in their 'long' format e.g.

<input type="checkbox" value="yes" name="agree" checked="checked" />

21

Show Me Some ID

Another significant change using XHTML involves tag attributes

In HTML, the tag can have an attribute called ‘name’, in XHTML you now use 'id' – which must be unique

e.g. in HTML: <img src="myimage.gif" name="my_image">

e.g. in XHTML: <img src="myimage.gif" id="my_image" />

In XHTML the name attribute can now only be used with certain elements and no longer with <img… nor <a…

22

Validation

Can use W3C service to validate your Web pages against the HTML and XHTML recommendations Go to http://validator.w3.org/ Enter your URL/file location in the text box

Can upload files from hard drive

The validation tool checks the syntax of the document and ensures it is well formed

Coding Tips

Coding Clarity Indentation Comments

Entities (special characters)

Indentation

Indent your html structures for clarity, which is clearer?

<ol><li>item one</li><li>item two</li>

</ol>

<ol><li>item one</li><li>item two</li></ol>

25

Comments

Good practice to include commentsProvide indication of what each aspect of

your code does/containsEnables easy access/modification for

other developers



Remember to comment your XHTML!

26

Special Characters - entities

Certain characters are reserved for special use in XHTML e.g. <

To be able to include these in a web page you need the formula &code; i.e. for the ‘less than’ symbol (i.e. <), substitute

the code < Others examples are & for ampersand,

© for copyright and £ for ??

27

Summary

XHTML has superseded HTML DOCTYPE definitions – Frames, Strict and Transitional XHTML only accepts lowercase tags and attribute names All attribute values must be quoted and no shortening is

allowed All tags must be ended correctly

Web pages MUST be well formed Check all syntax is correct Validate!

28

Further Reading

XHTML 1.0 - The Extensible HyperText Markup Language (Second Edition) www.w3.org/TR/xhtml1/

XHTML Tutorial http://www.htmldog.com/

XHTML.ORG http://www.xhtml.org/

Introduction to XHTML, with eXamples http://www.wdvl.com/Authoring/Languages/XML/XHTML/

XHTML: The Clean Code Solution http://www.oreillynet.com/pub/a/network/2000/04/28/feature/xhtml_rev.html

XHTML Information and Resources http://www.websitetips.com/xhtml/

XHTML 1.1. Under discussion, the next version of XHTML involving modularization http://www.w3.org/TR/xhtml11/

xhtml week two web design. 2 what is xhtml? xhtml is the current standard for html newest generation...

Documents