lecture four
agenda
- intro to XHTML
- XHTML rules
- intro to cascading style sheets
- how do style sheets work?
- applying style sheets to web pages
- readings
intro to XHTML
- XHTML = eXtensible Hypertext Markup Language
- first major update to HTML since the 4.0 specification was released in 1997
- currently at version 1.0, with 2.0 just around the corner
- providex better, more predictable coding patterns that combat non-standard and sloppy techniques
- almost identical to HTML 4.01, but a much stricter syntax in XHTML
XHTML rules
To be "well-formed" and verifiable, all XHTML documents must adhere to the following rules:
- all elements must be properly nested
- this is not valid:
<p><b>Bolded Text</p></b>
- this is not valid:
- all tags must close:
- e.g.,
<p>Some text here</p> - empty elements are closed as well:
<br /> or <img src="some_image.gif" />(note extra space before /)
- e.g.,
- all elements, attributes and values must be in lower case:
<Img src="some_image.gif">should be<img src="some_image.gif"><p ALIGN="center">should be<p align="center"><form method="POST">should be<form method="post">
- all values must be quoted:
<body bgcolor=black>should be<body bgcolor="black">
- attributes must have explicit values:
<input type="checkbox" checked>should be<input type="checkbox" checked="checked">
nameattribute is replaced withid:<img src="picture_off.gif" name="picture_off" />should be<img src="picture_off.gif" id="picture_off" />- note: in order to work with new and older browsers, use both name and id as an interim measure (however, you will get a warning).
- every XHTML document must have these elements:
<html>- must include xml name space:
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>(must be first element within the<head>)<body>- The
<!doctype...>declaration must be there, but it is part of the document itself rather than an element of the document.
XHTML documents may also use an optional XML declaration:
<?xml version="1.0" encoding="ISO-8859-1"?>- will send IE 6 into quirks mode (looser, more backwards-compatible - but doesn't adhere to standards)
XHTML documents
XHTML has three types of document type definitions (DTDs):
strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">- primarily used for technical documents or content that requires very little markup
transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">- supports most HTML features
- provides a middle ground for users trying to convert from HTML to XHTML in stages
- Will be the class standard
frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">- same as transitional, but allows the use of frames
Based on the rules and DTDs discussed above, here what a sample XHTML document might look like:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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">
<head>
<title>Sample XHTML Document</title>
</head>
<body>
<h1>Welcome!</h1>
<p>There will be absolutely no beer consumed during class.<br />
After class is another matter entirely.</p>
</body>
</html>
Validating your code:
- validate your code to ensure that you are creating well formed documents
- W3C validator: http://validator.w3.org/
- use Firefox and install the HTML validator extension
exercise one
- Copy the URL of this page.
- Visit the W3C Validation Service and plugin the URL from above.
- Note that there are several technical errors.
- Download the week04 files from the signalflare shared server.
- Using the notes above and the chapters in your book, correct the page called
wwhome.htmluntil it validates as a well-formed XHTML document.
introduction to cascading style sheets
- HTML is a structural language: pages are coded according to their logical structure - nothing to do with presentation
- style refers to the set of attributes applied to individual elements - essentially the elements of presentation:
- section head = bold, Verdana, green, 14 point
- if you define a style called "section head" you can apply that style to all section titles in a document or a site using the label "section title" (it's not really called a label...more on that later)
- if you suddenly decide that you want all the section titles to be blue, you change the style definition, not the individual structural tags
how do style sheets work?
- cascading style sheets don't require any fancy software or plug-ins - just rules
- a CSS rule defines what the HTML should look like and how it should behave in the browser window
- three parts to a CSS rule:
- selector
- property
- value
- selector {property: value;} = rule
- selector - can be HTML, class or ID (see below)
- {property: value;} = declaration
- properties identify what is being defined: font-family, font-weight, font-size, color, etc.
- values are assigned to define the nature of the property: verdana, bold, 16pt, green, etc.
- three base types of CSS rules, as determined by their selector:
- HTML selector - the HTML selector (P, H3, etc.) is used to redefine how the tag displays:
p {font: bold 16pt verdana;} - Class - a "free agent" rule that can be applied to any tag at your discretion:
.introhead {font: bold 48pt verdana;} - ID - work like class selectors, but usually apply to only one element on the page:
#mainnav {position: absolute; margin-top: 20px;}
- HTML selector - the HTML selector (P, H3, etc.) is used to redefine how the tag displays:
- three places to define rules:
- in an external document that is then linked or imported into your HTML page(s); called an external rule
- in the head of a document to affect an entire web page; called an embedded rule
- in an HTML tag: in the body of the document to affect one tag only; this is called an inline rule
- this is the cascading part of CSS as you could, in fact, use inline, embedded and external rules together: an inline rule will override an embedded rule, which will override an external rule
- one final IMPORTANT note: in the release of the XHTML standard, selectors are case-sensitive and must be lowercase
applying style sheets to web pages
- to set the style for an indivdual HTML tag (i.e., an inline rule), we use the following syntax:
<h1 style="color: red;">content</h1> - in this way we're gaining more control over the display because there's more things we can do with each tag
- not a huge departure from HTML though, because we're still using a sort of "attribute/value" system
- the main use for CSS is to set the styles for an entire document, which is done by adding the following to your HEAD section:
<style type="text/css">
h1 {color: red;}
</style> - in effect, isn't much different from adding style to an individual tag; except that you can manage style for ALL H1 tags in document from ONE PLACE
- the major benefit of CSS is the external file: allows you to define all your styles for a site in one document, and link it to all pages
- changes to a style can be made once and affect all instances of the style throughout a site
- setting up an external CSS file is a two step process:
- first, set up the rules in a separate text document and save it with a .css extension
- then, link the document to each page using the <link> tag:
<head>
<title>document</title>
<link rel="stylesheet" type="text/css" href="filename.css" />
</head>
- rel="stylesheet" defines the link to a stylesheet
- href="filename.css" is the URL for the external file
old school vs. new school
Styling text and background colours old school:
<body text="black" bgcolor="white">
<p><font size="2" face="arial">Some text</p>
Styling text and background colours new school:
body {
color: black;
font-size: 1em;
font-family: arial,verdana;
background-color: white;
}
Styling links old school:
<body link="orange" vlink="silver" alink="yellow">
Styling links new school:
a:link {
color: orange;
}
a:visited {
color: silver;
}
a:hover {
color: yellow;
}
a:active {
color: tomato;
}
Some info on link specificity from Eric Meyer.
exercise two
- In the folders you downloaded earlier, you will find a file at
week04/ex2/home.html. Open this file in your HTML editor. - Convert the document to valid XHTML (doctype statement, remove font tags, close empty tags, etc.).
- Create CSS rules that recreate the information in the document for styling text, links and background colours. Use the notes from your book and the resources on the class website.
- Your instructor will walk you through the creation of a couple of more complex rules.
homework exercise
Complete the Web Research exercises at the end of Chapter 3 in Web Development & Design Foundations that starts on page 109.
Note: you do not need to print the pages as directed - please upload the finished files to your web space and email your instructor with their location.
Exercise due in class in week five.