xhtml week two web design. 2 what is xhtml? xhtml is the current standard for html newest generation...
Post on 31-Mar-2015
215 Views
Preview:
TRANSCRIPT
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:
<p><b><code>Your Text</code></b></p><p><code><b>Your Text<b></code></p>
What you must not do, is to close tags in the wrong order i.e.
<p><b><code>Your Text</p></code></b>
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>, <strong>important</strong>) However, there are several which are standalone, non-container
tags which do not get closed with a separate closing tag. The main three are:
<br> <img> <hr>
16
Closing Tags 2
These non-container tags are closed within the actual tag itself:<br /><img /><hr />
Notice the space before the /> Not actually necessary in the XHTML specification (you
could use <br/>) 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 <p></p> 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
<!-- Comments go here. -->
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/
top related