XHTML

Professional Web Authoring
With XHTML and CSS
Roy Tennant
California Digital Library
escholarship.cdlib.org/rtennant/presentations/2003il
Outline
What You’re In For
Why XHTML & CSS?
XHTML
CSS
Making the Transition
The Future
What You’re In For
A lecture on ditching bad habits:
Unclosed tags: <p>
Formatting tags: <font>, <b>
Browser extensions: <center>
An introduction to the most essential
elements of XHTML and CSS
Why XHTML & CSS?
Garbage code is…uh…garbage!
Information encoded in XHTML can be more
easily migrated as technology changes
XHTML is a good step forward to learning
XML
You can easily make global changes to how
your documents display (demo)
There are user benefits to separating
information from presentation (demo)
Information Presentation
XHTML Cascading
Doc Style Sheet
Web Server
Information Presentation
User-defined
XHTML Cascading
Cascading
Doc Style Sheet
Style Sheet
Web Server
Information Transformatio Presentation
n
XML XHTML
XSLT
Doc & CSS
Web Server
XHTML
If you know HTML, you know more than
you think
XHTML is aimed to replace HTML
XHTML is XMLcompliant HTML
It comes in three “flavors”:
Transitional
Strict
Frameset
XHTML: Transitional
Easier learning curve, less strict
Some formatting tags such as <center>
and <font> are allowed, but in
Transitional, but not in Strict
XHTML: Strict
NO formatting codes or attributes are
allowed — display is completely
handled by CSS
XHTML Strict is compliant XML
XHTML: The Basic Rules
All tags must be in lowercase:
<title></title>
All tags must end:
<p></p>
Even empty tags:
<br></br> = <br />
All tags must properly nest:
<p>This is an <a
name=“here”>anchor</a>.</p>
All attribute values must be quoted:
<div align=“center”></div>
XHTML: More Rules
Attribute minimization is forbidden:
<input type=“radio” name=“stuff” CHECKED>
becomes…
<input type=“radio” name=“stuff”
checked=“checked” />
You must use a document type declaration:
Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
And add a namespace declaration to <html>:
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
The Most Important Tags
Structure & Meta Information
Miscellaneous
Tables
Forms
Lists
StyleRelated Tags
Structure & Meta Information
<!DOCTYPE> = document type definition (DTD)
<html></html> = defines an XHTML doc
<head></head> = defines doc header
<title></title> = doc title
<meta></meta> = metadata
<body></body> = defines doc body
<h1></h1>…<h6></h6> = doc headers
<p></p> = doc paragraphs
<blockquote></blockquote> = quoted text
<! > = comment
Miscellaneous
<a></a> = an anchor/link
<img /> = an image
<map></map> = an image map
<area></area> = an image map area
<br /> = line break
<hr /> = horizontal rule
<em></em> = emphasis
<strong></strong> = strong emphasis
<sup></sup> = superscript
<sub></sub> = subscripted text
<pre></pre> = preformatted text
Tables
<table></table> = defines a table
<tr></tr> = table row
<th></th> = table header
<td></td> = table cell
<caption></caption> = table caption
Forms
<form></form> = defines a form
<input></input> = form input
<textarea></textarea> = text block input
<select></select> = scrolling or drop
down list of options
<option></option> = select option
Lists
<ul></ul> = defines a bulleted list
<ol></ol> = defines a numbered list
<li></li> = list item
<dl></dl> = defines a definition list
<dt></dt> = definition term
<dd></dd> = definition description
StyleRelated Tags
<link></link> = a resource reference (stylesheet):
<link type="text/css" rel="stylesheet" href="FILE.css" />
<style></style> = embedded style rules:
<style type=“text/css”> h1 { color: red; } </style>
<div></div> = doc subset (block)
<span></span> = doc subset (inline)
http://validator.w3.org/
Cascading Style Sheets
Specifies how XHTML should be
displayed to the user
Replaces tags like:
<b>, <i>, <font> — any tag or attribute
setting that specifies how something
should be displayed
Can either be specified within the HTML
file itself, or as a separate file
Browser Support for CSS
Varies between browsers (MSIE, Netscape,
etc.), platforms (Windows v. Mac), and versions
Common points of failure:
Font sizes
Font names
Complicated layouts
Don’t bet the farm on support for a particular
style
Go easy! A little bit of style goes a long way
CSS: Rule Structure
selectordeclaration
h1 { color: purple; } ends every

property/
value pair
property value
h1 { font-family: Optima, Arial, sans-serif; }
property/value
separator
begins and ends the declaration
CSS Rule Example
body {
background: #FFFFFF;
color: black;
marginleft: 5%;
marginright: 5%;
fontfamily: Tahoma, Optima, Arial, sansserif;
}
CSS: Types of Selectors
Simple
Class
Pseudo class
Pseudo element
Contextual
CSS Selectors: Simple
An HTML tag:
<p>, <h1>, etc.
Example:
h1 { textalign: center; }
Grouping Selectors
If you have two or more rules that are the
same:
h2 { fontfamily: Optima, Arial, sansserif; }
p { fontfamily: Optima, Arial, sansserif; }
You can group them:
h2, p { fontfamily: Optima, Arial, sansserif; }
CSS Selectors: Class
An HTML element can be assigned a class:
<h1 class=“header”>
Which specifies a particular selector in the
style sheet:
h1.header { textalign: center; }
Classes can apply to multiple elements:
.header { textalign: center; }
will apply to <h2 class=“header”>, etc.
CSS Selectors: Psuedo Class
Selectors that are inferred by the
browser, not coded in the XHTML
document
a:link — untraveled, inactive link
a:hover — mouse on top of
a:active — being clicked on
a:visited — traveled
CSS Selectors: Psuedo Element
:firstletter — first letter in a block
element like <p> or <h1>
:firstline— first line in a block element
like <p> or <h1>
See samples on the next screen
CSS Selectors: Psuedo Element
CSS Selectors: Contextual
Selectors that only match under certain
contexts; for example, the style:
h1 em { color: red; }
And this XHTML:
<h1>This is header text, and <em>this text is
emphasized</em> but this is not.</h1>
results in this:
Popular Text Properties
textalign: left | center | right | justify
fontsize: small | medium…| %
fontfamily: fontname, fontname,
familyname
fontweight: bold | lighter
fontstyle: italic
Colors
color: red | blue…| hexcode
backgroundcolor: red | blue…| hexcode
Colors you may be able to use by name
instead of hex code:
Black = #000000 Green = #008000 Silver = #C0C0C0
Lime = #00FF00 Gray = #808080 Olive = #808000
White = #FFFFFF Yellow = #FFFF00 Maroon = #800000
Navy = #000080 Red = #FF0000 Blue = #0000FF
Purple = #800080 Teal = #008080 Fuchsia= #FF00FF
Aqua = #00FFFF
Types of Elements
“Block” elements are HTML elements that are
displayed on a line by themselves
(paragraphs, headings, lists, tables, divs,
etc.) and can only be enclosed by other block
elements
“Inline” elements are HTML elements that do
not force a line break and can be enclosed
within any other element (a, em, span, etc.)
“Listitem elements” are HTML elements that
have a marker (bullet, number) and an order
Controlling Element Display
This HTML:
<h1>This is header text, and <em>this text is emphasized</em> but this is
not.</h1> <p>If the "display: none" rule works, there will be nothing
displayed after the colon: <em class="disappear">This text should not
display</em></p>
And these styles: .disappear { display: none; }
h1 { display: inline; }
Result in: em { display: block; }
CSS: Inheritance
Unless a more specific style rule applies, tags
enclosed by another tag will inherit its style
A style rule like this: h1 { color: red; }
And HTML like this:
<h1>A Document <em>Title</em><h1>
Will result in “Title” being both red and italic
(the default display of <em>)
But if a rule like this exists: em { color: blue; }
then it will override the style inherited from the
<h1>
CSS: The Cascade
Specifying styles in a separate file allows web
managers to specify global settings
The display of an unlimited number of web
documents can be changed by changing a
setting in a global style sheet
Global settings can be overridden by using
the cascade of precedence
Therefore, CSS offers both power and
flexibility in determining how documents are
displayed
CSS: How the Cascade Works
The process:
Find all declarations that apply to a given
element
Sort by specificity (e.g., a simple selector like
h1 = 1; class selector like .highlight = 10)
Sort by order of appearance; the later a
declaration appears, the more weight it is
given
CSS: Diagram of Precedence
XHTML File
Extern
2) [call to external al
stylesheet] Style
1)[styles embedded inside Sheet
the document]
Generalized order of
precedence, all other
things being equal
http://jigsaw.w3.org/css-validator/
Making the Transition: Learning
Do you know HTML code?
Use XHTML Transitional
Validate your docs so you can learn where
you tend to make errors
Begin to wean yourself from <font>,
<center>, etc.
Is it all new to you?
Learn and use XHTML Strict
Validate your docs until you get the hang of it
Making the Transition: Tidy
HTML Tidy is free software that can read your
HTML and output a much better file by:
Automatically fixing some errors
Changing uppercase tags to lowercase
Indenting your code to make to make it more
readable
Quote all attribute values
And other things, depends on configuration file
An error report may also be generated that
can identify remaining problems
Making the Transition:
Migrating an Existing Site
All at once:
Copy entire site to another location
Run Tidy; check and rerun as needed
Clean up remaining problems
Transfer back
Gradual:
Do all new things in XHTML/CSS
Migrate old files as you update them for other
reasons
The Future
Will XML replace HTML?
It already has! That’s why you’re here!
XML will typically not be delivered to web
clients; that is what XHTML will be for
So, is this the last markup you have to learn?
No way! Use this as a steppingstone to XML,
for which you will have many additional uses
Remember — Never stop learning!

XHTML

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

XHTML

Uploaded by

Copyright:

Available Formats

Professional Web Authoring

h1 { color: purple; } ends every

h1 { font-family: Optima, Arial, sans-serif; }

You might also like