Professional Web Authoring With XHTML and CSS

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)

Presentation Information Cascading Style Sheet XHTML Doc Web Server

Presentation Information Cascading Style Sheet User-defined Cascading Style Sheet XHTML Doc Web Server

Information Transformation Presentation XSLT XHTML & CSS XML Doc Web Server

XHTML • If you know HTML, you know more than you think • XHTML is aimed to replace HTML • XHTML is XML-compliant 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 • 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/

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

selector declaration ends every property/ value pair property value property/value separator begins and ends the declaration CSS: Rule Structure h1 { color: purple; } h1 { font-family: Optima, Arial, sans-serif; }

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: Class • An 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: 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:

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 Display <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> • This HTML: • And these styles: Result in: .disappear { display: none; } h1 { display: inline; } 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 External Style Sheet 2) [call to external stylesheet] 1) [styles embedded inside 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 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