Post on 14-Dec-2015
Creating XHTML Documents
Dr John Cowell
phones off (please)
1CSCI1412-HW-6
2
Overview
CSCI1412-HW-6 2
• XML and XHTML
• Structure of XHTML documents
• Use of CSS for layout
3CSCI1412-I-2
XMLThe markup language HTML is based on Standard
Generalized Markup Language (SGML)SGML is over complex and difficult to useSimplified with eXtensible Markup Language, XML
license-free, platform-independent and well-supportedused to define XHTMLmost of the power and flexibility of SGML
but is far less complicatedSee this document on the W3C web site at
www.w3.org/XML/1999/XML-in-10-points.htmlSee also:
http://www.htmlgoodies.com/tutors/xhtml.html
CSCI1412-I-2 4
An XHTML Document<?xml version="1.0" encoding="UTF-8"?><!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> <title>AMI by Fiteris - Home</title>
<link rel="stylesheet" href="CSS/FiterisStyle.css" type="text/css" /> </head><body><div id="FiterisLogo">
<img src="Images/celtic.png" alt="Fiteris Logo" /></div>
<div id="theheader1"><h1>AMI</h1>
</div>
<div id="theheader2"><h2>by Fiteris.com</h2>
</div>..................
CSCI1412-HW-6 5
XHTML 1Extensible Hyper Text Markup LanguageXHTML uses the syntax rules of XML, but adds
meaning to that syntaxE.g. XML syntax defines that <p> is an elementXHTML gives meaning to this - says it stands for ‘paragraph’
XHTML is XML compliant HTML follows the syntax and requirements rules of XML
XHTML is an application of XMLtherefore XHTML uses XML terminology, in particular the
terms: element tag attribute
CSCI1412-I-2 6
HTML and XHTMLRules for writing XML (and therefore XHTML) elements are strictXHTML is case sensitive
all tags must be written in lower case letters Eg <head>
Every non-empty XHTML element must have a closing tagEg <title>This appears on the browser title bar</title>NB closing tag is same as opening tag apart from the / in front of
itEmpty elements have a single slash / before the closing >
Eg <img hetty = "hetty.gif" /> Include a space in front of the /> as some older browsers make mistakes here
Attributes must be placed within quotation marksEg <td align = "center" />
Attributes which do not have an obvious value must be assigned oneEg <input type = “text” readonly = “readonly“ />
CSCI1412-I-2 7
8
Starting an XHTML documentXHTML is an XML compliant application
An XHTML document always starts with three components:
An XML statement.A DOCTYPE statement.A namespace statement
9
The XML statement
Announces this is an XML compliant document.Must appear first without any preceding white
space.No corresponding closing statement. If an XML processor does not recognize the
encoding type, this is a fatal error.
It has two mandatory attributes:version of XML.encoding. The format used.
10
The XML statement<?xml version = "1.0" encoding = "UTF-8" >Default encoding attribute is UTF-8. Many regional
variations:ISO-8859-1 Western Europe, USA and South America.ISO-8859-2 Central and Eastern Europe.ISO-8859-3 South-eastern Europe.ISO-8859-4 Scandinavia.ISO-8859-5 Cyrillic.ISO-8859-3 Arabic.EUC-JP, Shift_JIS and ISO-2022-JP may be used for
Japanese.
The DOCYPE StatementThe DOCTYPE statement comes next e.g.
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
The DOCTYPE statement specifies a Document Type Definition, (DTD):
12
The DOCTYPE statementDefines the elements, attribute names and the
relationships between them.e.g. to define what is valid for the html element, the DTD
contains the statement:<!ELEMENT html (head, body)>All elements must be defined.Entities define the relationship between a group of
elements, for example:<!ENTITY % heading "h1|h2|h3|h4|h5|h6">You can use one of the three standard ones defined by the
W3C. To reference a DTD the DOCTYPE statement must be used.
13
The DOCTYPE statementThe DOCTYPE statement has the following five components:<!DOCTYPE html PUBLIC | SYSTEM DTDidentifier URLofDTT 1. An opening <! which indicates it is an XML declaration,
followed by the keyword DOCTYPE.2. The type of document, this must be html for XHTML documents.
(not xhtml)3. A keyword follows which must be either PUBLIC, or SYSTEM.4. The identifier of the DTD, e.g.
"-//W3C//DTD XHTML 1.0 Strict//EN"5. Finally the URL of the DTD, for example
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
14
The DOCTYPE statementFor example:
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
To define your own DTD you should use the SYSTEM keyword and a valid URL.
The PUBLIC DTD are not currently URLs.- hard coded into the browser.
15
Public DTDsThe three public DTDs defined by the W3C.Strict. This variant does not allow the use of deprecated
elements and attributes.<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional. The Transitional DTD supports most of the deprecated elements apart from frames.<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset. This should be used to create a frameset document.<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Staring an XHTML DocumentEvery XHTML document you create will start like
this:
<?xml version = "1.0" encoding = "UTF-8" > <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
17
The namespace declaration<html> must be the first tag in the document. The xmlns
attribute specifies XML the namespace of the document, for example:
<html xmlns = "http://www.w3.org/1999/xhtml">
This is the default XML namespace for XHTML. Avoids conflict with other XML variants which use the same names.
The </html> tag ends the html element and closes the document.
18
Starting an XHTML DocumentThe <html> and </html> tags are the first and
last in the document.
<?xml version = "1.0" encoding = "ISO-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml">….….</html>
19
The head elementThe <head> tag is after the <html> tag.Contains information about the whole document e.g the title<?xml version = "1.0" encoding = "ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"><head></head></html>
The following two elements, title and meta are placed within the head element.
20
The title elementThe title element information is displayed in the browser title
bar.If a page is bookmarked, this text will be used for that
bookmark.<?xml version = "1.0" encoding = "ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"><head><title>My first XHTML document</title></head></html>
21
The meta elementThe meta element optional.Designed to provide information about your document to
search engines, for example:<?xml version = "1.0" encoding = "ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"><head><meta name = "author" content = "Joanne Harris" /><meta name = "keywords" content = "chocolate, fudge, cocoa butter" /> <title>My first XHTML document</title></head></html>
22
The body element
<body><p>Welcome to Chocolate International, find out everything there is to know about chocolate</p></body></html>
Xhtml authenticationThe W3C will test web-
site code and authenticate it as good xhtml
Use the W3C web site http://validator.w3.org
Enter the URL of the page you wish to check (or select ‘upload file’)
Correct the errors!Add the logo to your
page when all errors corrected
CSCI1412-I-2 23
24
White space – a common problem
Do not add extra white space to tagsA closing </html> tag should not include any
white space.One exception:- For empty tags there must be a space before the
closing /> characters.<hr size = "10" width = "100" align = "left" />
HTML and XHTMLSome problems with HTML:Some tags are not supported by all browsers.
Difficult to develop consistent web sites – each page has its own formatting built in. XHTML uses CSS to overcome these problems.
Cascading Style Sheets are used for this.
26CSCI1412-I-2
27
Why use CSS?Cascading Style sheets – a way of describing layout
not content.Maintain a ‘look’ across the site. e.g.:fonts; colours; positioning; and borders.defines a series of styles which are applied to tags:e.g. define a style as 20pt bold Times Roman and
assign to h1The CSS2 specification has been released by the
W3C:Fully compatible with CSS1 - 338 pages long.There is a CSS validator on the W3C web site.
Cascading StylesheetsTo create a consistent layout/format across
multiple html pages, use a stylesheettraditionally use the file extension “.css”requires a link tag in the web-page head section to
link to stylesheet file<link rel="stylesheet“ type="text/css“href=“styles/mystyles.css" />
Define the style in the stylesheetp {font size:13pt; font-family: times new roman; text-align: left}
.cent {font-size: 13pt; font-family: times new roman; text-align: center}
CSCI1412-I-2 28
Using Stylesheet RulesUse in the XHTML page
<p class = “cent”>text here</p>
The text will take on all the attributes defined in the stylesheet ruleIn this case, text will be
13pt in size centered in Times New Roman font
Read more at http://www.htmlgoodies.com/beyond/css.html
CSCI1412-I-2 29
30
SummaryIn this lecture we have looked at:The structure of XHTML documentsThe use and structure of CSS for
document layout.