professional web authoring with xhtml and css

Professional Web Authoring With XHTML and CSS

Roy TennantCalifornia 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 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)

XHTMLDoc

Information

Web Server

Presentation

CascadingStyle Sheet

XHTMLDoc

Information

Web Server

Presentation

CascadingStyle Sheet

User-definedCascadingStyle Sheet

XMLDoc

Information

Web Server

Transformation

XSLTXHTML & CSS

Presentation

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)

http://validator.w3.org/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 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;

}

CSS: Types of Selectors

Simple

Class

Pseudo class

Pseudo element

Contextual

CSS Selectors: Simple

An HTML tag:<p>, <h1>, etc.

Example:h1 { text-align: center; }

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: Psuedo Element

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:

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

http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/

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!

professional web authoring with xhtml and css

Documents