Professional Web Authoring With XHTML and CSS
Roy TennantCalifornia Digital Library
escholarship.cdlib.org/rtennant/presentations/2002cil/
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 changesXHTML is a good step forward to learning XMLYou can easily make global changes to how your documents display (demo)There are user benefits to separating information from presentation (demo)
XHTML
If you know HTML, you know more than you thinkXHTML is aimed to replace HTMLXHTML is XML-compliant HTMLIt comes in three “flavors”:
TransitionalStrictFrameset
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 RulesAll 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 RulesAttribute 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
Style-Related 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
Style-Related 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)
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 versionsCommon points of failure:
Font sizesFont namesComplicated layouts
Don’t bet the farm on support for a particular styleGo easy! A little bit of style goes a long way
CSS: Rule Structure
h1 { color: purple; }
h1 { font-family: Optima, Arial, sans-serif; }
propertyproperty valuevalue
begins and ends the declarationbegins and ends the declaration
property/valueproperty/valueseparatorseparator
ends everyends everyproperty/property/value pairvalue pair
declarationdeclarationselectorselector
CSS Rule Example
body {
background: #FFFFFF;
color: black;
margin-left: 5%;
margin-right: 5%;
font-family: Tahoma, Optima, Arial, sans-serif;
}
Grouping Selectors
If you have two or more rules that are the same:
h2 { font-family: Optima, Arial, sans-serif; }
p { font-family: Optima, Arial, sans-serif; }
You can group them:h2, p { font-family: Optima, Arial, sans-serif; }
CSS Selectors: ClassAn HTML element can be assigned a class:
<h1 class=“header”>
Which specifies a particular selector in the style sheet:
h1.header { text-align: center; }
Classes can apply to multiple elements:.header { text-align: 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
:first-letter — first letter in a block element like <p> or <h1>
:first-line— first line in a block element like <p> or <h1>
See samples on the next screen
CSS Selectors: ContextualSelectors 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
text-align: left | center | right | justify
font-size: small | medium…| %
font-family: fontname, fontname, familyname
font-weight: bold | lighter
font-style: italic
Colors
color: red | blue…| hexcode
background-color: 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.)“List-item elements” are HTML elements that have a marker (bullet, number) and an order
Controlling Element DisplayThis HTML:
And these styles:
Result in:
.disappear { display: none; }h1 { display: inline; }em { display: block; }
<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>
CSS: InheritanceUnless a more specific style rule applies, tags enclosed by another tag will inherit its styleA 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 CascadeSpecifying styles in a separate file allows web managers to specify global settingsThe display of an unlimited number of web documents can be changed by changing a setting in a global style sheetGlobal settings can be overridden by using the cascade of precedenceTherefore, 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
External
StyleSheet
[call to external stylesheet]
[styles embedded inside the document]
XHTML File
1)
2)
Generalized order of precedence, all other things being equal
Making the Transition: Learning
Do you know HTML code?Use XHTML TransitionalValidate your docs so you can learn where you tend to make errorsBegin to wean yourself from <font>, <center>, etc.
Is it all new to you?Learn and use XHTML StrictValidate your docs until you get the hang of it
Making the Transition: TidyHTML Tidy is free software that can read your HTML and output a much better file by:
Automatically fixing some errorsChanging uppercase tags to lowercaseIndenting your code to make to make it more readableQuote all attribute valuesAnd 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 re-run 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 stepping-stone to XML, for which you will have many additional uses
Remember — Never stop learning!