Download presentation
Presentation is loading. Please wait.
1
Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6
2
2 Overview CSCI1412-HW-6 2 XML and XHTML Structure of XHTML documents Use of CSS for layout
3
3 CSCI1412-I-2
4
XML The markup language HTML is based on Standard Generalized Markup Language (SGML) SGML is over complex and difficult to use Simplified with eXtensible Markup Language, XML license-free, platform-independent and well-supported used to define XHTML most of the power and flexibility of SGML but is far less complicated See this document on the W3C web site at www.w3.org/XML/1999/XML-in-10-points.html See also: http://www.htmlgoodies.com/tutors/xhtml.html CSCI1412-I-2 4
5
An XHTML Document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> AMI by Fiteris - Home AMI by Fiteris.com......... CSCI1412-HW-6 5
6
XHTML 1 Extensible Hyper Text Markup Language XHTML uses the syntax rules of XML, but adds meaning to that syntax E.g. XML syntax defines that is an element XHTML 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 XML therefore XHTML uses XML terminology, in particular the terms: element tag attribute CSCI1412-I-2 6
7
HTML and XHTML Rules for writing XML (and therefore XHTML) elements are strict XHTML is case sensitive all tags must be written in lower case letters Eg Every non-empty XHTML element must have a closing tag Eg This appears on the browser title bar NB closing tag is same as opening tag apart from the / in front of it Empty elements have a single slash / before the closing > Eg Include a space in front of the /> as some older browsers make mistakes here Attributes must be placed within quotation marks Eg Attributes which do not have an obvious value must be assigned one Eg CSCI1412-I-2 7
8
8 Starting an XHTML document XHTML is an XML compliant application An XHTML document always starts with three components: An XML statement. A DOCTYPE statement. A namespace statement
9
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
10 The XML statement 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.
11
The DOCYPE Statement The DOCTYPE statement comes next e.g. <!DOCTYPE html PUBLIC "-//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
12 The DOCTYPE statement Defines 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: All elements must be defined. Entities define the relationship between a group of elements, for example: You can use one of the three standard ones defined by the W3C. To reference a DTD the DOCTYPE statement must be used.
13
13 The DOCTYPE statement The 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
14 The DOCTYPE statement For example: 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
15 Public DTDs The three public DTDs defined by the W3C. Strict. This variant does not allow the use of deprecated elements and attributes. Transitional. The Transitional DTD supports most of the deprecated elements apart from frames. Frameset. This should be used to create a frameset document.
16
Staring an XHTML Document Every XHTML document you create will start like this:
17
17 The namespace declaration must be the first tag in the document. The xmlns attribute specifies XML the namespace of the document, for example: This is the default XML namespace for XHTML. Avoids conflict with other XML variants which use the same names. The tag ends the html element and closes the document.
18
18 Starting an XHTML Document The and tags are the first and last in the document. …. ….
19
19 The head element The tag is after the tag. Contains information about the whole document e.g the title The following two elements, title and meta are placed within the head element.
20
20 The title element The title element information is displayed in the browser title bar. If a page is bookmarked, this text will be used for that bookmark. My first XHTML document
21
21 The meta element The meta element optional. Designed to provide information about your document to search engines, for example: My first XHTML document
22
22 The body element Welcome to Chocolate International, find out everything there is to know about chocolate
23
Xhtml authentication The 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
24 White space – a common problem Do not add extra white space to tags A closing tag should not include any white space. One exception: - For empty tags there must be a space before the closing /> characters.
25
HTML and XHTML Some 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.
26
26 CSCI1412-I-2
27
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 h1 The 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.
28
Cascading Stylesheets To create a consistent layout/format across multiple html pages, use a stylesheet traditionally use the file extension “.css” requires a link tag in the web-page head section to link to stylesheet file Define the style in the stylesheet p {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
29
Using Stylesheet Rules Use in the XHTML page text here The text will take on all the attributes defined in the stylesheet rule In 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
30 Summary In this lecture we have looked at: The structure of XHTML documents The use and structure of CSS for document layout.
Similar presentations
