The document discusses HTML, XML, and XHTML technologies. It provides an overview of HTML 4.01 and validation, introduces XML as an extensible meta-language for defining customized markup languages, and describes XHTML as a stricter version of HTML defined as an XML application. It also discusses document type definitions (DTDs) and how they are used to specify the syntax for XHTML documents.
2. Agenda
Debrief on HTML from midterm and
A4
IT News
IT in action – interdisciplinary!
HTML validation today and Tuesday
Tuesday: Assignment #6 will be
distributed & discussed
Thursday: Quiz and group
presentations
3. IT News & Stuff
Beating Moore's Law
https://twitter.com/#!/Chiefkariuki
http://www.codeacademy.com
LBS!
http://www.airbnb.com
http://www.relayrides.com
4. Attendance Check!
On the blank side of the index card,
write the following:
– Your name
– Your FSU email address
On the LINED side of the index card,
answer this question:
– How can location-based services impact
your life? Have you ever used such
services? Reference the sites we just
talked about.
5 minutes – go!
5. Beyond HTML
HTML 1.0 and 2.0
– 1989-> mid 90s
– Browser wars with different ―standards‖
HTML 3.0
– 1995->
– Still 2 ways of doing things (IE and Netscape)
HTML 4.0
– 1998->
– W3C intervenes to get rid of the discrepancies
– Proposed separating HTML into structure (HTML 4.0)
and presentation (CSS)
6. Beyond HTML
HTML 4.01
– 1999->
– W3C rules adopted
– Current standard
– Birth of CSS but everyone not happy
XHTML 1.0
– 2000->
– HTML (popular, browser-friendly) and XML
(strictness, extensibility)
– 7/26/06 – W3C released 8th draft of XHTML 2.0
7. Beyond HTML
With the different types of code …
YOU have to tell the BROWSER
what to do OTHERWISE it uses a
default code
We do this with DOCTYPES!
8. Beyond HTML (transitional)
Now you have to ―prep‖ the browser
<!DOCTYPE HTML PUBLIC ―-//W3C//DTD HTML 4.01 Transitional//EN‖ ―http://www.w3.org/TR/html4/loose.dtd‖>
<HTML> is the first element
Standard is Publicly available
Using html 4.01 written in English
Transitional allows for legacy,
Non standard HTML to work
File at W3C that identifies
Not HTML executable code
standard
9. Beyond HTML
Now you have to ―prep‖ the browser
<meta http-equiv=―Content-Type‖ content=―text/html; charset=ISO-8859-1‖>
Meta tells browser about
Content in page
Using an HTML file
Using a special character encoding
Latin-1 characters –
all European languages
10. Beyond HTML
Standards make using browsers easier
So…You told the browser that you are
using html 4.01 … But are you???
Check using http://validator.w3.org
If it passes … you are validated (sort
of)
11. Beyond HTML (strict)
Now you have to ―prep‖ the browser
<!DOCTYPE HTML PUBLIC ―-//W3C//DTD HTML 4.01//EN‖ ―http://www.w3.org/TR/html4/strict.dtd‖>
Transitional is gone!
We move to STRICT!
Check using http://validator.w3.org
12. Beyond HTML
So who cares?
If it works – relax and enjoy!
If not .. Go back and fix the pages
Benefits
– Adheres to standards
– ADA compliance (alt attributes with images)
13. HTML 4.01
Always start each page with a DOCTYPE
<html> starts and </html> ends page
Everything must go in <head> or <body>
<head>
– Always use a <title>
– <meta> and <style> optional
<body>
– <h?>, <p>, <blockquote> allowed
– More rules (see a tutorial – w3c.org)
14. HTML 4.01
4.01 is the widely supported
standard
W3C defines ―standards‖
Browsers will work with original
HTML but who knows for how long?
15. HTML 5
• HTML5 ≈ HTML 5 + CSS 3 + JavaScript
• HTML5 is a suite of tools for:
• Markup (HTML 5)
• Presentation (CSS 3)
• Interaction (DOM, Ajax, APIs)
• Brought on by the evolving use of the web
16. Example (old style)
<html>
<head>
<title>Singleton’s Page</title>
</head>
<body bgcolor="yellow" text="black">
<p>
As you can see by my performance, I can play with the big boys inside and fading
away. I am <font face="arial">6ft 9inches and weigh 220 lbs</font> and I have
good leaping ability. So, here's why you should come seem me:
</p>
<ul>
<li>Stronger Upper Body
<li>Accuracy with free throws
<li>Ability to DUNK
</ul>
<p align ="right">
NOLES ROCK!
<center><font size="small">This page brought to you by Warchant
Promotions</font></center>
</body>
</html>
17. Validator Results
The following missing or conflicting information caused the validator to perform guesswork prior to validation. If the
guess or fallback is incorrect, it may make validation results entirely incoherent. It is highly recommended to check
these potential issues, and, if necessary, fix them and re-validate the document.
Unable to Determine Parse Mode!
The validator can process documents either as XML (for document types such as XHTML, SVG, etc.) or SGML (for HTML
4.01 and prior versions). For this document, the information available was not sufficient to determine the parsing mode
unambiguously, because:
– in Direct Input mode, no MIME Media Type is served to the validator
– No known Document Type could be detected
– No XML declaration (e.g <?xml version="1.0"?>) could be found at the beginning of the document.
– No XML namespace (e.g <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">) could be found at the root of
the document.
As a default, the validator is falling back to SGML mode.
No DOCTYPE found! Checking with default HTML 4.01 Transitional Document Type.
No DOCTYPE Declaration could be found or recognized in this document. This generally means that the document is
not declaring its Document Type at the top. It can also mean that the DOCTYPE declaration contains a spelling error, or
that it is not using the correct syntax.
The document was checked using a default "fallback" Document Type Definition that closely resembles ―HTML 4.01
Transitional‖.
Learn how to add a doctype to your document from our FAQ.
↑ Top
Validation Output: 1 Error
Line 1, Column 0: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>".<html> ✉
The checked page did not contain a document type ("DOCTYPE") declaration. The Validator has tried to validate with a
fallback DTD, but this is quite likely to be incorrect and will generate a large number of incorrect error messages. It is
highly recommended that you insert the proper DOCTYPE declaration in your document -- instructions for doing this are
given above -- and it is necessary to have this declaration before the page can be declared to be valid.
18. Second try (loose)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN―
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Singleton’s Page</title>
</head>
<body bgcolor="yellow" text="black">
<p>
As you can see by my performance, I can play with the big boys inside and fading away. I am <font
face="arial">6ft 9inches and weigh 220 lbs</font> and I have good leaping ability. So, here's why you
should come seem me:
</p>
<ul>
<li>Stronger Upper Body
<li>Accuracy with free throws
<li>Ability to DUNK
</ul>
<p align ="right">
NOLES ROCK!
<center><font size="small">This page brought to you by Warchant Promotions</font></center>
</body>
</html>
20. Week 8
Validator Results (strict)
Validation Output: 8 Errors
Line 7, Column 14: there is no attribute "BGCOLOR".<body bgcolor="yellow"
text="black">
Line 7, Column 28: there is no attribute "TEXT".<body bgcolor="yellow" text="black"> ✉
Line 9, Column 105: there is no attribute "FACE".…e and fading away. I am <font
face="arial">7ft 1inches and weigh 241 lbs</f ✉
Line 9, Column 112: element "FONT" undefined.…ading away. I am <font face="arial">7ft
1inches and weigh 241 lbs</font> an ✉
Line 16, Column 10: there is no attribute "ALIGN".<p align ="right"> ✉
Line 18, Column 7: element "CENTER" undefined.<center><font size="small">This page
brought to you by Warchant Promotions</font ✉
Line 18, Column 19: there is no attribute "SIZE".<center><font size="small">This page
brought to you by Warchant Promotions</font ✉
Line 18, Column 26: element "FONT" undefined.<center><font size="small">This page
brought to you by Warchant Promotions</font ✉
SO NOW YOU GO FIX THESE!
21. XML (eXtensible Markup Language)
A programming language/specification developed by the
W3C - pared-down version of SGML (standard general
markup language - IBM markup initiative)
It enables Web authors and designers to create their own
customized tags to provide functionality not available with
HTML - XML is great for information exchange
Widely used system for defining data formats, provides a
very rich system to define complex documents and data
structures such as invoices, molecular data, news feeds,
glossaries, inventory descriptions, real estate properties, etc.
22. XML (eXtensible Markup Language)
As long as a programmer has the XML definition for a
collection of data (often called a "schema") then they can
create a program to reliably process any data formatted
according to those rules
―The introduction of XML is in many ways like the creation
of writing in the evolution of language. People had spoken
language for a long period before they got to the point of
inventing writing. But as soon as they did, they were able
to make huge steps forward‖ – David Turner, MICROSOFT
23. XML (eXtensible Markup Language)
XML means ―Extensible Markup Language‖ - not fixed
format like HTML
XML is a meta-language - a language for describing
other languages
Enables you to define your own customized markup
languages for different classes of documents
IBM, Microsoft, Oracle and Sun all agree: XML is the
key to e-business
XML enables business application sharing, direct
transactions and other business applications
Blending EDI (electronic data exchange) with HTML for
business
24. XML (eXtensible Markup Language)
<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
<to>Tom</to>
<from>Janice</from>
<heading>Reminder</heading>
<body>Don't forget the money!</body>
</note>
25. XML (eXtensible Markup Language)
Element
– delimited by angle brackets
– Identify the nature of the content they
surround
– General format: <element> … </element>
– Empty element: <empty-Element/>
Attribute
– Name-value pairs that occur inside
start-tags after element name, like:
• <element attribute="value">
26. XML (eXtensible Markup Language)
<h1> Bibliography </h1>
<p> <i> Foundations of DBs</i>, Abiteboul, Hull, Vianu
<br> Addison-Wesley, 1995
<p> <i> Logics for DBs and ISs </i>, Chomicki, Saake, eds.
HTML
<br> Kluwer, 1998
<bibliography>
<book> <title> Foundations of DBs </title>
<author> Abiteboul </author>
<author> Hull </author>
<author> Vianu </author>
<publisher> Addison-Wesley </publisher>
....
XML
</book>
<book> ... <editor> Chomicki </editor>... </book> ...
</bibliography>
28. XML (eXtensible Markup Language)
XML is a language
It has types, structure, like any other programming language
To start the PAGE!
– Declaration
• Includes
– A declaration: version, encoding, standalone
– An optional DTD (Document Type Definition )
• Example
– <?xml version="1.0" encoding="ISO-8859-1"
standalone="yes"?>
NEXT – XHTML!
30. Meta Data Example
XHTML
– is aimed to replace HTML
– is almost identical to HTML 4.01
– is a stricter (hence the validator) and cleaner
version of HTML
XML vs XHTML
– XML is a markup language designed for
describing data
– XHTML is HTML redefined as an XML
application
– XHTML is a ―bridge‖ between HTML and XML
31. XHTML (eXtensible Hypertext Markup Language)
HTML started out as a way of way of
describing the structure of documents,
with tags to format
Users demanded control over the
appearance of documents
HTML acquired tags to control fonts,
alignment, etc.
The result is a markup language that does
both, but is very messy
32. XHTML (eXtensible Hypertext Markup Language)
XHTML elements must be properly nested
<b><i>bold and italic</b></i> is wrong
XHTML documents must be well-formed
<html>
<head> ... </head>
<body> ... </body>
</html>
Tag names must be in lowercase
All XHTML elements must be closed
– <br />, <hr />, <img src="smile.gif" />
– Note: Some browsers require a space before the
/
Attribute names must also be in lower case
– Example: <table width="100%">
Attribute values must be quoted
– Example: <table width="100%">
33. DTD (Document Type Definitions)
Describes the syntax to use for the current
document
There are three different DTDs for XHTML—
you can pick the one you want
– These DTDs are public and on the web
– You must start your XHTML document
with a reference to one of these DTDs
Every XHTML document must begin with
one of the DOCTYPE declarations (DTDs)
34. DTD (Document Type Definitions)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">
Strict - Use for really clean markup, with no display information
(no font, color, or size information) or use with CSS (Cascading
Style Sheets) if you want to define how the document should
look
Transitional - Use with standard HTML and/or with CSS; Allows
deprecated HTML elements
Frameset - Use if your document uses HTML frames
35. DTD (Document Type Definitions)
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN―
―http://www.w3.org/TR/xhtml1/DTD/xhtml
1-strict.dtd">
<html>
<head>
<title>A simple document</title>
</head>
<body>
<p>A simple paragraph.</p>
</body>
</html>