Introduction to XHTML  
Introduction HTML 4.0
  • Hypertext markup language
  • uses tags to communicate with browser
  • Removed formatting from structure and content
  • Formatting could applied to an entire website (CSS)
  • HTML formatting tags were deprecated

XML

  • Extensible Markup language
  • uses similar tags as HTML
  • used to create other markup languages
  • strict syntax

XHTML

  • Combined HTML tags with XML
  • stricter syntax than HTML

CSS

  • Cascading style sheets
  • syntax to indicate the style or format for each tag or class of tags

 

Standards - Three standard flavors

transitional - allow use of deprecated tags

strict - prohibits use of deprecated tags

frameset - allows deprecated tags and frames

 
xHTML Extensible HyperText Markup Language (XHTML)

Format for all Web Pages
'Kinda Like a Programming Language'
Human Readable (and Writable)
"Plain Text" (Platform Independent)
Document Structure

XHTML is NOT

Page Layout language (even though everyone uses it that way)

XHTML is

Structure
Links
Images
Forms

authoring
tools		 HTML Authoring Tools
 

Good Basic Text Editors

Notepad (Windows)
TextEdit (Macintosh)
Pico (Linux & Macintosh)
Joe (Linux)

Functional Word Processors(tricky)

Word
WordPerfect
AppleWorks
 

Good WYSIWYG Web Editors

DreamWeaver
FrontPage
Composer
Word ( it thinks it's a web page editor)

Best Advanced Text Editors

BBEdit (Macintosh)
UltraEdit (Windows)
Gnotepad (Linux)
JEdit (Cross-Platform: Java)

tools for this
course		 MS FrontPage
Notepad
Joe editor
xHTML
tags		 XHTML tags

XHTML is a "Markup Language" made up of "Tags"
Tags are identified by being enclosed in "angle brackets"

i.e. <html>

Tags originally were not case sensitive...
                                         ...but they are now!
"Whitespace" is mostly ignored
        (spaces, tabs, carriage returns)
Any run of whitespace is rendered as a single space

 

Tag Types

Most tags are pairs, with a begin tag and an end tag:

<html> </html>

Some tags are "empty" and have no end tag:

<hr \>

**These tags are required to be typed with a slash since there is not ending tag


Tags may be nested, but may not overlap.


OK:         <b><i>Bold Italic</i></b>
Not OK:  <b><i>Bold Italic</b></i>
 
doctype Doctypes for XHTML docs

For XHTML strict:
(Use this doctype when you're not using any deprecated or frameset tags with XHTML.)

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

For XHTML transitional:
(Use this doctype if your document is in XHTML and contains deprecated tags.)

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

For XHTML frameset:
(Use this doctype if your document is in XHTML and contains frameset tags and/or deprecated tags.)

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 

** for XHTML use the following open html tag:

<html xmlns = "http://www.w3.org/1999/xhtml">

 

Doctypes for HTML docs

For HTML strict:
(Use this doctype if your document is in HTML and contains no deprecated tags.)

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

For HTML transitional (or loose):
(Use this doctype if your document is in HTML but contains one or more deprecated tags.)

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

For HTML frameset:
(Use this doctype if your document is in HTML and contains frameset tags and/or deprecated tags.)

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

 

** for HTML use the following open html tag:

<html >

 
Simplest
web page
(transitional XHTML)		 <!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>Simplest Web Page</title>
</head>
<body>
     This is the simplest complete web page.
</body>
</html>