Embed Size (px)
Citation preview
XHTML
Web and Database Management System
HTML’s History
• HTML was initially defined by Tim-Berners-Lee in 1990 at CERN (European Organization for Nuclear Research)
• The early language was designed with science and engineering interest
• As of Nov 1992, its elements included: title, paragraph, hyperlinks, headings, simple lists, glossaries, address blocks:
• It did not have table or fill-in form elements
Netscape
• By Feb 1993, Marc Andreessen and Eric Bina of NCSA (National Center for Supercomputer Applications) at Univ. of Illinois at Urbana-Champaign publicly released a graphical web browser for UNIX called “Mosaic”
• The Windows and Macintosh versions were release in September in Sep 1993
• NCSA Mosaic browser was able to play video and sound
• Later Andreessen and key individuals at NCSA began the company that became “Netscape Communications”
NCSA Mosaic Web Browser
War of Browsers
• Meanwhile, Microsoft worked on “Internet Explorer”
• The “browsers wars” between Netscape and Microsoft began, especially on:– Innovation is web technologies, in general– HTML definition in particular
• During 1993 and 1997, HTML was defined operationally by the elements that browser developers chose to implement to gain competitive advantage
• This led to HTML differences, and it diverted more and more from a language defined by Berners-Lee
W3C
• In Oct 1994, Tim Berners-Lee launched W3C (World Wide Web Consortium) to produce standard for HTML
• In Jan 1997, HTML version 3.2 was adopted as a standard– This was “to capture recommended practice as of early ’96”– This was even a year behind the browser manufacturers
• HTML 4 recommendation was released in Dec 1997– Due to the slow-down of the “browsers wars”, WC3 finally caught
up
HTML 4.01 vs XHTML
• A language used to describe the syntax of other languages is referred to as a metalanguage
• Metalanguage used to describe the syntax of programming languages, ie. Java, is called Backus-Naur Form (BNF)
• Metalanguage for HTML 4.0.1 is SGML (Standard Generalized Markup Language)
• Metalanguage for XHTML is XML (Extensible Markup Language)
• XHTML 1.0 is semantically identical to HTML 4.0.1– Except that XHTML restricts some of HTML’s generality in a few
ways
HTML Document
• Every HTML document contains two types of information– Markup information: which is contained in tags (<xxx>)
• Start tag <ElementName>• End tag </ElementName>• Start tag + end tag + all documents between are called: an element
of the document.• The portion between tags is called the content of element.
– Character information: everything outside the markup tags• This is information intended to be displayed on browser:• “HelloWorld.html” and “Hello World!”
<!DOCTYPE htmlPUBLIC “-//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>HelloWorld.html</title></head><body>
<p>Hello World!</p></body></html>
Element Tree for “Hello World!”
• The name of the root element is “html”– Root element can occur only once in the document– Attribute specification, which consists of an attribute name
(xmlns) and an attribute value (string within quotes), which in this case is http://www.w3.org/1999/xhtml
• Html document contains two parts: head and body• Head element contains title (maybe <script> …or.etc.)• Body element contains p element and could be anything
intended to be displayed in the browser’s body.
html
head
title
body
p
Why XHTML?
• Many pages on the internet contain "bad" HTML
• A browser will try it best to render/interpret “BAD” HTML
• This will work fine in a browser (even if it does NOT follow the HTML rules)
<html><head> <title>This is bad HTML</title><body>
<h1>Bad HTML<p>This is a paragraph
</body>
Why XHTML? (contd)
• Today’s browsers are running on different devices:– Some run on computers– Some run on mobile devices such as cellphone, PDA, etc.– Some run on other small devices
• Those small/mobile devices may not have enough resources or power to interpret a “BAD" markup language
• Therefore, W3C recommended a markup language that can impose standard on writing HTML
• This is by combining HTML and XML and calls it “XHTML”
What is XHTML?
• XHTML stands for eXtensible HyperText Markup Language
• XHTML is almost identical to HTML 4.01
• XHTML is a combination of HTML and XML
• XHTML is a stricter and cleaner version of HTML
• XHTML is HTML defined as an XML application
• XHTML is a W3C Recommendation
What to remember?
• XHTML elements must be properly nested
• XHTML elements must always be closed
• Empty elements must always be closed
• XHTML elements must be in lowercase
• XHTML documents must have one root element
What to remember? (contd)
• XHTML elements must be properly nested
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> <li>Milk</li></ul>
This is wrong<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li></ul
This is correct
What to remember? (contd)
• XHTML elements must always be closed
• Empty elements must always be closed
<p>This is a paragraph
<p>This is another paragraph
<p>This is a paragraph</p>
<p>This is another paragraph</p>
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
What to remember? (contd)
• XHTML elements must be in lowercase
• XHTML documents must have one root element
<BODY>
<P>This is a paragraph</P>
</BODY>
<body>
<p>This is a paragraph</p>
</body>
<html>
<head> ... </head>
<body> ... </body>
</html>
The basic document structure is:
XHTML Syntax
• Attribute names must be in lower case
• Attribute values must be quoted
• Attribute minimization is forbidden
• The XHTML DTD defines mandatory elements
More on XHTML Syntax
• Attribute names must be in lower case– <table WIDTH="100%"> X– < table width="100%"> √
• Attribute values must be quoted– <table width=100%> X– <table width=“100%”> √
More on XHTML Syntax
• Attribute minimization is forbidden
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />
List of Minimized Attributes in HTML
HTML XHTML
compact compact="compact"
checked checked="checked"
declare declare="declare"
readonly readonly="readonly"
disabled disabled="disabled"
selected selected="selected"
defer defer="defer"
ismap ismap="ismap"
nohref nohref="nohref"
noshade noshade="noshade"
nowrap nowrap="nowrap"
multiple multiple="multiple"
noresize noresize="noresize"
More on XHTML Syntax (contd)
• The lang attribute applies to almost every XHTML element.
• It specifies the language of the content within an element.
• If lang attribute in an element is used, the xml:lang attribute must also be added:
• The XHTML DTD defines mandatory elements– An XHTML document must have a DOCTYPE declaration– The html, head, title, and body elements must also be presented
<div lang="it" xml:lang="it">Ciao bella!</div>
<!DOCTYPE> Is Mandatory
• An XHTML document consists of three main parts:– the DOCTYPE declaration– the <head> section– the <body> section <!DOCTYPE ...>
<html><head>
<title>... </title></head><body> ... </body></html>
Note: The <!DOCTYPE> declaration refers to a Document Type Definition (DTD). A DTD specifies the rules for the markup language, so that the browsers render the content correctly.
XHTML Example
• Example of XHTML document with a minimum of required tags:<!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>Title of document</title></head>
<body></body>
</html>
Note: The xmlns attribute in <html>, specifies the xml namespace for a document, and is required in XHTML documents.
XHTML 1.0 Strict
• This DTD contains all HTML elements and attributes,
• It does NOT INCLUDE presentational or deprecated elements (like font).
• Framesets are not allowed.
• The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
• This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font).
• Framesets are not allowed.
• The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
• This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
• This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN“ "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Conforming with XHTML
• A <!DOCTYPE> Was Added
• The xmlns Attribute Was Added
• Lowercase Tags And Attribute Names
• All Attribute Values Were Quoted
• Empty Tags Were Properly Closed
• To validate a web page: http://validator.w3.org/
An XHTML Doc that passes the Validation
<!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>Title of document</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body><p id="test">
This is a new paragraph.<br />
</p></body>
</html>
A Screenshot on http://validator.w3.org
