Creating XHTML Documents Dr John Cowell phones off (please) 1CSCI1412-HW-6.

Slides:



Advertisements
Similar presentations
CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML.
Advertisements

LIS650lecture 1 XHTML 1.0 strict Thomas Krichel
EXtensible HyperText Markup Language Miruna Bădescu Finsiel Romania Copenhagen, 25 May 2004.
1 The MITRE Using XSL to Generate XHTML Documents Roger L. Costello XML Technologies.
Introduction to HTML & CSS
What is XML? a meta language that allows you to create and format your own document markups a method for putting structured data into a text file; these.
Dr. Alexandra I. Cristea XHTML.
Standards and Increasing Maintainability on Web- based Systems James Eaton SE4112/16/2006.
XHTML Basics.
1. Content – Collective term for all text, images, videos, etc. that you want to deliver to your audience. 2. Structure – How the content is placed on.
HTML/XML XHTML Authoring. Creating Tables  Table: An arrangement of horizontal rows and vertical columns. The intersection of a row and a column is called.
 Fundamentals of Web Design.  Describe the history and theory of XHTML  Understand the rules for creating valid XHTML documents  Apply a DTD to an.
How Tags are used to form your Web Page
Pengantar Teknologi Mobile 13 Antonius Rachmat C, S.Kom, M.Cs XHTML.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 3: XHTML Coding © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page.
Tutorial 9 Working with XHTML
XHTML 16-Apr-17.
Tutorial 9 Working with XHTML. XP Objectives Describe the history and theory of XHTML Understand the rules for creating valid XHTML documents Apply a.
Creating a Well-Formed Valid Document. 2 Objectives Introducing XHTML Creating a Well-Formed Document Creating a Valid Document Creating an XHTML Document.
Tutorial 11 Creating XML Document
XML Primer. 2 History: SGML vs. HTML vs. XML SGML (1960) XML(1996) HTML(1990) XHTML(2000)
Upgrading to XHTML DECO 3001 Tutorial 1 – Part 1 Presented by Ji Soo Yoon 19 February 2004 Slides adopted from
1 HTML’s Transition to XHTML. 2 XHTML is the next evolution of HTML Extensible HTML eXtensible based on XML (extensible markup language) XML like HTML.
Introducing XHTML: Module B: HTML to XHTML. Goals Understand how XHTML evolved as a language for Web delivery Understand the importance of DTDs Understand.
HTML Elements. HTML documents are defined by HTML elements.
Introducing HTML & XHTML:. Goals  Understand hyperlinking  Understand how tags are formed and used.  Understand HTML as a markup language  Understand.
Computer Sciences Department
Basics of HTML Shashanka Rao. Learning Objectives 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters.
Designing Web Pages Getting to know HTML... What is HTML? Hyper Text Markup Language HTML is the major language of the Internet’s World Wide Web Web.
1 HTML/XHTML Objectives Explain what HTML is and how Web pages use HTML Explain what HTML is and how Web pages use HTML Demonstrate how to create Web pages.
HTML & XHTML Introduction. First HTML 1992 Marked-up text to represent a hypertext document for transmission over the network The hypertext mark-up language.
XP Tutorial 9New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with XHTML Creating a Well-Formed Valid Document Tutorial 9.
XP The University of Akron Summit College Business Technology Department Computer Information Systems 2440: 140 Internet Tools Instructor: Enoch E. Damson.
ULI101 – XHTML Basics (Part II) What is Markup Language? XHTML vs. HTML General XHTML Rules Block Level XHTML Tags XHTML Validation.
 XHTML is aimed to replace HTML  XHTML is almost identical to HTML 4.01  XHTML is a stricter and cleaner version of HTML  XHTML is HTML defined as.
Essential Tags Web Design – Sec 3-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
1 © Netskills Quality Internet Training, University of Newcastle Introducing XML © Netskills, Quality Internet Training University.
Essential Tags Web Design – Sec 3-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
XHTML - Basics Teppo Räisänen LIIKE/OAMK Introduction XHTML = eXtensible Hypertext Markup Language Transitional ~ HTML 4.01 Goal: to replace HTML.
XHTML and Forms Review – Page 1CSCI 2910 – Client/Server-Side Programming CSCI 2910 Client/Server-Side Programming Topic: Review XHTML and Forms.
XHTML1 Building Document Structure Chapter 2. XHTML2 Objectives In this chapter, you will: Learn how to create Extensible Hypertext Markup Language (XHTML)
1 XHTML محمد احمدی نیا 2 Of 19 HTML vs XHTML  XHTML is a stricter and cleaner version of HTML.  by combining the strengths of HTML.
HTML. WHAT IS HTML HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of.
XHTML. Introduction to XHTML What Is XHTML? – XHTML stands for EXtensible HyperText Markup Language – XHTML is almost identical to HTML 4.01 – XHTML is.
XP Tutorial 9 1 Working with XHTML. XP SGML 2 Standard Generalized Markup Language (SGML) A standard for specifying markup languages. Large, complex standard.
IT Engineering I Instructor: Rezvan Shiravi
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Creating XHTML Documents Essentials for.
WEB APPLICATION DEVELOPMENT For More visit:
1 XML and RDF Paul Miller Interoperability Focus UK Office for Library & Information Networking (U KOLN ) U.
Lecture: Web Design Assis. Prof. Freshta Hanif Ehsan Faculty of Computer Science Kabul Polytechnic University Spring Semester
1 herbert van de sompel CS 502 Computing Methods for Digital Libraries Cornell University – Computer Science Herbert Van de Sompel
XP Tutorial 9New Perspectives on HTML and XHTML, Comprehensive 1 Working with XHTML Creating a Well-Formed Valid Document Tutorial 9.
Unit 3 — Advanced Internet Technologies Lesson 10 — Introduction to XHTML.
CSS THE MISSING MANUAL Introduction. Benefits of CSS Style sheets offer more formatting choices than are offered in straight HTML  EXAMPLE: When you.
Tutorial 9 Working with XHTML. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Describe the history and theory of XHTML.
Tutorial 9 Working with XHTML. XP Objectives Describe the history and theory of XHTML Understand the rules for creating valid XHTML documents Apply a.
Unit 4 Representing Web Data: XML
Creating a Well-Formed Valid Document
CITA 330 Section 3 XHTML.
Tutorial 9 Working with XHTML
Tutorial 9 Working with XHTML
Chapter 1 HTML, XHTML, and the World Wide Web
INP150: Basic HTML Instructor: Paul J. Millis
Chapter 7 Representing Web Data: XML
Chapter 1 HTML, XHTML, and the World Wide Web
Tutorial 9 Working with XHTML
What is HTML?.
Structuring Content in a Web Document
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Creating Web Documents
Presentation transcript:

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

3 CSCI1412-I-2

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 See also: CSCI1412-I-2 4

An XHTML Document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " AMI by Fiteris - Home AMI by Fiteris.com CSCI1412-HW-6 5

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

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 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 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 Default encoding attribute is UTF-8. Many regional variations: ISO Western Europe, USA and South America. ISO Central and Eastern Europe. ISO South-eastern Europe. ISO Scandinavia. ISO Cyrillic. ISO Arabic. EUC-JP, Shift_JIS and ISO-2022-JP may be used for Japanese.

The DOCYPE Statement The DOCTYPE statement comes next e.g. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " The DOCTYPE statement specifies a Document Type Definition, (DTD):

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 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 "

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 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.

Staring an XHTML Document Every XHTML document you create will start like this:

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 Starting an XHTML Document The and tags are the first and last in the document. …. ….

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 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 The meta element The meta element optional. Designed to provide information about your document to search engines, for example: My first XHTML document

22 The body element Welcome to Chocolate International, find out everything there is to know about chocolate

Xhtml authentication The W3C will test web-site code and authenticate it as good xhtml Use the W3C web site 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 tags A closing tag should not include any white space. One exception: - For empty tags there must be a space before the closing /> characters.

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 CSCI1412-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 h1 The CSS2 specification has been released by the W3C: Fully compatible with CSS pages long. There is a CSS validator on the W3C web site.

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

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 CSCI1412-I-2 29

30 Summary In this lecture we have looked at: The structure of XHTML documents The use and structure of CSS for document layout.