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.

Slides:



Advertisements
Similar presentations
XML-XSL Introduction SHIJU RAJAN SHIJU RAJAN Outline Brief Overview Brief Overview What is XML? What is XML? Well Formed XML Well Formed XML Tag Name.
Advertisements

CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML.
EXtensible HyperText Markup Language Miruna Bădescu Finsiel Romania Copenhagen, 25 May 2004.
4. Internet Programming ENG224 INFORMATION TECHNOLOGY – Part I
XHTML Week Two Web Design. 2 What is XHTML? XHTML is the current standard for HTML Newest generation of HTML (post-HTML 4) but has many new features which.
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.
Web Development & Design Foundations with XHTML
Dr. Alexandra I. Cristea XHTML.
Website Design.
1 HTML Standards & Compliance. 2 Minimum Required HTML tags: (must go in this order!)
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.
History Leading to XHTML
XHTML1 Building Document Structure. XHTML2 Objectives In this chapter, you will: Learn how to create Extensible Hypertext Markup Language (XHTML) documents.
Unit 2, cont. September 14 HTML,Validating your pages, Publishing your site.
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.
Upgrading to XHTML DECO 3001 Tutorial 1 – Part 1 Presented by Ji Soo Yoon 19 February 2004 Slides adopted from
Introducing XHTML: Module B: HTML to XHTML. Goals Understand how XHTML evolved as a language for Web delivery Understand the importance of DTDs Understand.
Introducing HTML & XHTML:. Goals  Understand hyperlinking  Understand how tags are formed and used.  Understand HTML as a markup language  Understand.
Computer Sciences Department
ECA 228 Internet/Intranet Design I Intro to XML. ECA 228 Internet/Intranet Design I HTML markup language very loose standards browsers adjust for non-standard.
Structure Content Presentation Semantics.
Creating a Simple Page: HTML Overview
Ku-Yaw Chang Assistant Professor, Department of Computer Science and Information Engineering Da-Yeh University.
Working with XHTML Creating a Well-Formed Valid Document.
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.
XHTML The Basics A brief history of HTML SGML (Standard Generalized Markup Language) Then came HTML Followed by the browser…and the great browser wars.
XHTML - Basics Teppo Räisänen LIIKE/OAMK Introduction XHTML = eXtensible Hypertext Markup Language Transitional ~ HTML 4.01 Goal: to replace HTML.
Chapter 1 XHTML: Part I The Web Warrior Guide to Web Design Technologies.
Web page - A Web page is a simple text file that contains a set of HTML tags (code) that describe (to the browser) what should go on a web page. It may.
XHTML1 Building Document Structure Chapter 2. XHTML2 Objectives In this chapter, you will: Learn how to create Extensible Hypertext Markup Language (XHTML)
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
3 XHTML.
1 HTML XHTML. 2 Understand the Doctype tag Know the html tags which are now classed as depreciated Understand how Dreamweaver adds styles Add styles to.
1 XHTML محمد احمدی نیا 2 Of 19 HTML vs XHTML  XHTML is a stricter and cleaner version of HTML.  by combining the strengths of HTML.
XHTML. Introduction to XHTML What Is XHTML? – XHTML stands for EXtensible HyperText Markup Language – XHTML is almost identical to HTML 4.01 – XHTML is.
What is XML?  XML stands for EXtensible Markup Language  XML is a markup language much like HTML  XML was designed to carry data, not to display data.
XML eXtensible Markup Language. Topics  What is XML  An XML example  Why is XML important  XML introduction  XML applications  XML support CSEB.
XP Tutorial 9 1 Working with XHTML. XP SGML 2 Standard Generalized Markup Language (SGML) A standard for specifying markup languages. Large, complex standard.
HTML: Hyptertext Markup Language Doman’s Sections.
Lesson 4.
Web Development & Design Foundations with XHTML Chapter 2 HTML/XHTML Basics.
XML Instructor: Charles Moen CSCI/CINF XML  Extensible Markup Language  A set of rules that allow you to create your own markup language  Designed.
CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. August 25, 2010—All HTML code brought to XHTML standards.
Lecture: Web Design Assis. Prof. Freshta Hanif Ehsan Faculty of Computer Science Kabul Polytechnic University Spring Semester
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.
Copyright © 2003 Pearson Education, Inc. Slide 1-1 Created by Cheryl M. Hughes The Web Wizard’s Guide to XHTML by Cheryl M. Hughes.
HTML A brief introduction HTML1. HTML, what is? HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup.
XP Tutorial 9New Perspectives on HTML and XHTML, Comprehensive 1 Working with XHTML Creating a Well-Formed Valid Document Tutorial 9.
Objective: To describe the evolution of the Internet and the Web. Explain the need for web standards. Describe universal design. Identify benefits of accessible.
Unit 3 — Advanced Internet Technologies Lesson 10 — Introduction to XHTML.
Tutorial 9 Working with XHTML. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Describe the history and theory of XHTML.
Creating Your 1 st Web Page. Tags Refers to anything between on a webpage Most appear in pairs surrounding content Some appear as empty tags (no closing.
Tutorial 9 Working with XHTML. XP Objectives Describe the history and theory of XHTML Understand the rules for creating valid XHTML documents Apply a.
Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.
Extensible Markup Language (XML) Pat Morin COMP 2405.
Unit 4 Representing Web Data: XML
Creating a Well-Formed Valid Document
CITA 330 Section 3 XHTML.
XHTML Basics.
XHTML Basics.
XHTML Basics.
Web Programming Maymester 2004
Structuring Content in a Web Document
XHTML Basics.
XHTML Basics.
Presentation transcript:

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 is a markup language

3 So what’s different in XHTML ? Opening HTML element with xmlns declaration Adding a content tag to specify the content encoding XHTML requires all tags have closing tags Empty elements having closing

4 First, what is XML? XML is used for structuring data XML allows for custom elements unlike HTML In XML we do not use the same elements we are used to using with HTML

5 Custom elements are used in XML Custom element example:

6 Empty elements in XML Empty elements will have only the closing tag An empty element does not have any data in between the element tags since there is only a closing element tag

7 Root element in XML The first line is referred to as the “root element” data can go here more data goes here and more here

8 W3C.org states XML declaration is not required An XML declaration is not required in all XML documents; However XHTML document authors are strongly encouraged to use XML declarations in all their documents. Such a declaration is required when the character encoding of the document is other than the default UTF-8 or UTF-16 and no encoding was determined by a higher-level protocol.

9 XHTML adds xmlns attribute (The xlmns attribute holds a unique identifier that determines the language you mean, for xhtml its " " ) XML uses the URL as a unique identifier for the language for this document, so you can create your own language (URL address does not have pertinent info, in other words there is no requirement that anything actually has to exist at the URL, just that the URL has to be unique for each language)

10 XHTML root element The root element of the document must contain an xmlns declaration for the XHTML namespace [XMLNS]. The namespace for XHTML is defined to be An example root element might look like: Use both the lang and xml:lang attributes when specifying the language of an element. The value of the xml:lang attribute takes precedence.

11 An XML declaration is not required in all XML documents In this XHTML example, the XML declaration is included. Virtual Library Moved to example.org.

12 Adding a content tag to specify the content encoding tag goes right after the element Welcome UTF-8 stands for Unicode Transformation Format-8. UTF-8 is the default encoding for XML.

13 The Document Character Set is used to promote interoperability, each HTML application specifies its document character set A document character set consists of: A repertoire A set of abstract characters and Code positions Each HTML document is a sequence of characters from the repertoire Names for character encodings are case-insensitive

14 W3C.org recommendations for XML Character Encoding Historically, the character encoding of an HTML document is either specified by a web server via the charset parameter of the HTTP Content-Type header, or via a meta element in the document itself. In an XML document, the character encoding of the document is specified on the XML declaration For example:

15 Character Encoding According to the W3C.org… In order to portably present documents with specific character encodings, the best approach is to ensure that the web server provides the correct headers. If this is not possible, a document that wants to set its character encoding explicitly must include both the XML declaration an encoding declaration and a meta http-equiv statement Example: ).

16 Charset/Character encoding examples Commonly character encodings: ISO (also referred to as "Latin-1"; usable for most Western European languages) ISO (which supports Cyrillic) SHIFT_JIS (a Japanese encoding) EUC-JP (another Japanese encoding) UTF-8 (an encoding of ISO using a different number of bytes for different characters) (Names for character encodings are case-insensitive, so that for example "SHIFT_JIS", "Shift_JIS", and "shift_jis" are equivalent)

17 XHTML What’s else is different? Empty elements having closing

18 XHTML requires all tags have closing tags Elements are required to have closing tags, if there is no closing tag then these empty tags should end in /> Putting a space before /> is recommended not required For example:

19 XHTML 1.0 Strict Requirements Opening HTML tag must be the first tag after the DOCTYPE Closing HTML tag must be the last tag in the document All element names must be written with lowercase letters

20 XHTML 1.0 Strict Requirements All opening tags must have closing tags If element is an empty tag must end with a space and then /> All attribute values must be surrounded by double quotes and must have values Don’t use & (ampersand character) in the content section Instead of & use the html entitity: & Convert any other special characters to html entities

21 Benefits to using XHTML More likely to work with future browsers and devices Better for aural screen readers and visually impaired devices Can be extended to include new markups XHTML is more current, better to go with the current versus using antiquated HTML

22 Benefits to using XHTML XML data can be more easily translated into XHTML XHTML can more easily tie into third party software which understands XML XHTML is designed to be backwards compatible with older browsers

23 Migrating from strict HTML 4.01 to XHTML 1.0 is fairly straightforward Always make sure to validate pages to check for conformance

24 You can even add validation logo to show you passed To show your readers that you have taken the care to create an interoperable Web page, you may display this icon on any page that validates.

25 Converting and Validating in DW Dreamweaver enables you to convert pages to desired version of HTML File>Convert Dreamweaver enables you to validate pages based on your documents DTD File>Validate>Markup

26 Migrating websites to XHTML There are also third party tools that can help to convert whole websites to XHTML like Can take non validating html and reformat/update the code so that it can validate Also can removes much of the legacy presentation code and replace with CSS

27 Review of the benefits to always validating Web pages will work more consistently and on a wide variety of browsers and load faster Will be better supported on new devices being used to view web pages More accessible to the visually impaired who use aural screen readers and businesses required to be ADA compliant ( alt and src required for strict) Job security?

28 XHTML specific required tags shown in bold for validation for XHTML 1.0 my page welcome to my webpage -end of slides