creating xhtml documents dr john cowell phones off (please) 1csci1412-hw-6
TRANSCRIPT
![Page 1: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/1.jpg)
Creating XHTML Documents
Dr John Cowell
phones off (please)
1CSCI1412-HW-6
![Page 2: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/2.jpg)
2
Overview
CSCI1412-HW-6 2
• XML and XHTML
• Structure of XHTML documents
• Use of CSS for layout
![Page 3: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/3.jpg)
3CSCI1412-I-2
![Page 4: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/4.jpg)
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
![Page 5: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/5.jpg)
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
![Page 6: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/6.jpg)
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
![Page 7: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/7.jpg)
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
![Page 8: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/8.jpg)
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
![Page 9: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/9.jpg)
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.
![Page 10: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/10.jpg)
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.
![Page 11: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/11.jpg)
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):
![Page 12: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/12.jpg)
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.
![Page 13: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/13.jpg)
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">
![Page 14: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/14.jpg)
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.
![Page 15: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/15.jpg)
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">
![Page 16: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/16.jpg)
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">
![Page 17: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/17.jpg)
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.
![Page 18: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/18.jpg)
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>
![Page 19: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/19.jpg)
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.
![Page 20: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/20.jpg)
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>
![Page 21: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/21.jpg)
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>
![Page 22: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/22.jpg)
22
The body element
<body><p>Welcome to Chocolate International, find out everything there is to know about chocolate</p></body></html>
![Page 23: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/23.jpg)
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
![Page 24: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/24.jpg)
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" />
![Page 25: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/25.jpg)
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.
![Page 26: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/26.jpg)
26CSCI1412-I-2
![Page 27: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/27.jpg)
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.
![Page 28: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/28.jpg)
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
![Page 29: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/29.jpg)
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
![Page 30: Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6](https://reader035.vdocuments.site/reader035/viewer/2022062515/56649c7d5503460f949328b9/html5/thumbnails/30.jpg)
30
SummaryIn this lecture we have looked at:The structure of XHTML documentsThe use and structure of CSS for
document layout.