05 html & xhtml_pr_tm

7/31/2019 05 HTML & Xhtml_pr_tm

1/18

www.netskills.ac.uk

HTML & XHTML

Web Pages: Structure


2/18

CSC1014

JISC Netskills

Topics

Web page basics

Web page specifications HTML document structure

DTD, , &

HTML Versions

Problems with HTML

XML, XHTML and their advantages

HTML or XHTML?


3/18

CSC1014

JISC Netskills

Web page basics

All web documents use (X)HTML Hypertext Mark-up Language With other embedded technologies to enhance display and behaviour

The code for a web page the source code can be created inmany different ways e.g.

Typed into a text editor Dynamically generated using scripts and programs

Source code delivered to a user-agent (browser) Usually over the web via HTTP

Browser processes document and renders display to user Final appearance is a combination of source construction (by the author)

and rendering capability (in web browser


4/18

CSC1014

JISC Netskills

Web page specifications

The specifications for HTML are provided by the W3C(World Wide Web Consortium)

W3C publishes the Document Type Definitions (DTD) for eachversion of HTML

A DTD contains the rules for a markup language e.g. Which tags can be used Where they can appear in the document Which attributes they can hold

Alongside the DTD are recommendations as to how user-agents(e.g. web browsers) should interpret and render the marked upcontent


5/18

CSC1014

JISC Netskills

HTML: Basic document structure

Specification set by the W3C

An HTML document is composed of three parts:

1. A line containing HTML version information

2. A declarative header section

(delimited by the element)

3. A body, which contains the document's actualcontentimplemented by the element

Sections 2 and 3 should be delimited by the element

http://www.w3.org/TR/html401/struct/global.html
http://www.w3.org/TR/html401/struct/global.htmlhttp://www.w3.org/TR/html401/struct/global.htmlhttp://www.w3.org/TR/html401/struct/global.html


6/18

CSC1014

JISC Netskills

"A line containing HTML versioninformation"

The DTD (Document Type Definition) declaration

Identifies the document version to the user-agent The PUBLIC part identifies the version e.g. XHTML 1.0 The URL specifies the location of the mark-up specification

Common browsers do not validate pages against DTD but A DTD will allows a browser to process document correctly Sometimes called DOCTYPE switching

http://hsivonen.iki.fi/doctype/
http://demos/2/xhtml1-strict.dtd.txthttp://demos/2/xhtml1-strict.dtd.txthttp://hsivonen.iki.fi/doctype/http://hsivonen.iki.fi/doctype/http://demos/2/xhtml1-strict.dtd.txt


7/18

CSC1014

JISC Netskills

"A declarative header section"

Information about the document, used to help process it Must include a and character set info

Optional declarations and references for:

Metadata via

Scripts via

Style sheets via and/or

NO content!

A Simple Document
http://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.html


8/18

CSC1014

JISC Netskills

"A body, which contains thedocument's actual content"

This is processed into the content users actually see! Final appearance may be influenced by information from the

(scripts, style sheets etc)

Creating Web Pages

A one-day workshop run by:
Netskills
http://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.html


9/18

CSC1014

JISC Netskills

"Sections 2 & 3 should bedelimited by the element"

etcetc

etc

etc

HTML 4 XHTML
http://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.html


10/18

CSC1014

JISC Netskills

An HTML 4.01 document

A Simple (HTML) Document

Creating Web Pages


Netskills
http://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.html


11/18

CSC1014

JISC Netskills

HTML versions

HTML was originally designed to be very simple and handle text-based documents

As the web became popular and browsers developed, newfeatures were added to subsequent versions

HTML 2.0 -> HTML3.2 (1996) standardised common features Page structure, Forms, Images, Tables, Frames

HTML 4.01 (1999) added enhancements for new technology Support for CSS (Cascading Style Sheets)

Support for dynamic scripting with JavaScript Accessibility features Standardised support for multimedia and embedded objects
http://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.html


12/18

CSC1014

JISC Netskills

Problems with HTML

HTML originally only targeted at Web browsers on PCs andworkstations

Forgiving of syntax errors and variations in HTML markup (elements withand without end tags, uppercase and lowercase tag names etc.)

Requires more processing at browser than a markup language withstricter syntax

Causes problems for constrained devices and for machine-orientedprocessing of markup

Led to development ofXHTML 1.0 (2000/02)
http://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.html


13/18

CSC1014

JISC Netskills

XHTML

The syntax for HTML has now been tightened up and redefinedto work alongside otherXML documents

This is XHTML and is what you should be using

XHTML = HTML as an application of XML Same tags and attributes as HTML 4.01

Differences are in structure and syntax

Tag/attribute names must be in lowercase Attributes must be name/value pairs Tags must both open andclose Self-contained tags must be closed Special characters must use correct entity values
http://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.html


14/18

CSC1014

JISC Netskills

XML?

Extensible Markup Language A standardised, but flexible specification for creating markup languages

Designed for online data description and exchange Strict but simplified core rules for structuring documents

Many applications of XML e.g. RSS, XHTML, SVG etc. but

All can be processed as XML by anyXML parser

Provides greater consistency

Final context applied by application e.g. web browser, newsaggregator etc.
http://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.html


15/18

CSC1014

JISC Netskills

Advantages of XHTML

XHTML is designed for internationalization, accessibility, device-independence, usability and document structuring

Leading to enforced separation of concerns

XML and XHTML documents must be well-formed Easier to process because a well-formed document adheres to strict

syntax rules

XHTML content can be managed along with other XML

documents in CMS environments Extend and repurpose
http://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.html


16/18

CSC1014

JISC Netskills

An XHTML 1.0 document

A Simple (HTML) Document

Creating Web Pages


Netskills

XHTML 1.0 DTD

Extra attribute in tag

Self-closing non-paired tags e.g.

instead of
http://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.html


17/18

CSC1014

JISC Netskills

HTML or XHTML?

Simple answer is "If you do it rightit shouldn't matter"

Factors to consider include: What are the requirements for your web site? Are there any existing QA/workflow rules specifying one over the other?

In many cases you may not get a choice A CMS may be making the decision for you!

Best practice recommends using XHTML wherever possible

Most important criteria is that whatever you produce, itcomplies with the current standard for that version

Can be checked by code validation at:

http://validator.w3.org
http://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://demos/2/head.htmlhttp://validator.w3.org/http://validator.w3.org/


18/18

CSC1014

JISC Netskills

Reference URLs

W3C HTML Home page http://www.w3.org/html/

W3Schools tutorials http://www.w3schools.com/xhtml/

HTML 4.01 specification http://www.w3.org/TR/html4/

XHTML 1.0 specification http://www.w3.org/TR/xhtml1/
http://www.w3.org/html/http://www.w3schools.com/xhtml/http://www.w3.org/TR/html4/http://www.w3.org/TR/xhtml1/http://www.w3.org/TR/xhtml1/http://www.w3.org/TR/html4/http://www.w3schools.com/xhtml/http://www.w3.org/html/

05 html & xhtml_pr_tm

Documents