Introduction to HTML  
Introduction
HTML 4
  • 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

XHTML 1.0 Markup (W3C)

  • Combined HTML tags with XML
  • stricter syntax than HTML
  • Flavors:
    • transitional - allow use of deprecated tags
    • strict - prohibits use of deprecated tags
    • frameset - allows deprecated tags and frames

HTML 5

HTML Markup (W3C)

  • Extension of HTML 4
  • Adds more for multimedia and server communication
 
CSS
  • Cascading style sheets
  • syntax to indicate the style or format for each tag or class of tags

 

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
Kompozer
 

Best Advanced Text Editors

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

HTML
tags
HTML tags

HTML 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 1.0 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"
lang ="en">

** for XHTML use the following meta tag:

<meta http-equiv = "Content-Type"
content = "text/html; charset=utf-8" />

 

Doctypes for HTML5 docs

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

<!DOCTYPE html>

 

** for HTML use the following open html tag:

<html lang="en">

** for HTML use the following meta tag:

<meta charset=utf-8" />


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" lang ="en">
<head>
<title>Simplest Web Page</title>
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
</head>
<body>
     This is the simplest complete web page.
</body>
</html>