Extra Slides, week 2

CSE 190 M (Web Programming), Spring 2008

University of Washington

Reading: Chapter 2, sections 2.4 - 2.6

Except where otherwise noted, the contents of this presentation are © Copyright 2008 Marty Stepp and Jessica Miller and are licensed under the Creative Commons Attribution 2.5 License.

Valid XHTML 1.1 Valid CSS!

Additional XHTML

Tags for adding metadata and icons to a page

Web page metadata: <meta>

information about your page (for a browser, search engine, etc.)

<meta name="description" 
 content="Authors' web site for Building Java Programs." />
<meta name="keywords" content="java, textbook" />
<meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />

meta element to aid browser / web server

<meta http-equiv="Content-Type" 
 content="type of document (character encoding)" />
<meta http-equiv="refresh"
 content="how often to refresh the page (seconds)" />

meta element to describe the page

<meta name="author"
 content="web page's author" />
<meta name="revised"
 content="web page version and/or last modification date" />
<meta name="generator"
 content="the software used to create the page" />

meta element to aid search engines

<meta name="description"
 content="how you want search engines to display your page" />
<meta name="keywords"
 content="words to associate with your page (comma-separated)" />

Internet media ("MIME") types

classifications of data that travel over the internet

Favorites icon ("favicon")

<link rel="shortcut icon" type="MIME type" href="filename" />
<link rel="shortcut icon" type="image/gif" href="cse.gif" />

favicon favicon

Additional CSS

CSS Pseudo-classes

a:link { color: #FF0000; }      /* unvisited link */
a:visited { color: #00FF00; }   /* visited link */
a:hover { color: #FF00FF; }     /* mouse over link */
a:active { color: #0000FF; }    /* selected link */

Pseudo-class example

a:link { color: red; }
a:visited { color: green; }
a:hover { color: purple; background-color: yellow; }
a:active { color: blue; }
<a href="http://www.google.com">Goooooogle</a>
  • answer:
    div#header p a:link, div#footer p a:link {
    	color: blue;