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.
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" />
- placed in the
head of your XHTML page
meta tags often have both the name and content attributes
- some
meta tags use the http-equiv attribute instead of name
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)" />
</head>
- using the
Content-Type gets rid of the W3C "tentatively valid" warning
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- the
meta refresh tag can also redirect from one page to another:
<meta http-equiv="refresh" content="5;url=http://www.bjp.com" />
- why would we want to do this? (example)
meta element to describe the page
<head>
<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" />
</head>
- many WYSIWYG HTML editors (FrontPage, PageMaker, etc.) place their names in the
meta generator tag (why?)
meta element to aid search engines
<head>
<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)" />
</head>
- these are suggestions to search engines about how to index your page
- the search engine may choose to ignore them (why?)
Internet media ("MIME") types
classifications of data that travel over the internet
-
sometimes when including resources in a page (style sheet, icon, multimedia object), we specify their type of data
| MIME type | file extension |
|---|
| text/html | .html |
| text/plain | .txt |
| image/gif | .gif |
| image/jpeg | .jpg |
| video/quicktime | .mov |
| application/octet-stream | .exe |
- Lists of MIME types: by type, by extension
Favorites icon ("favicon")
<link rel="shortcut icon" type="MIME type" href="filename" />
<link rel="shortcut icon" type="image/gif" href="cse.gif" />
- the
link tag, placed in the HTML page's head section, can specify an icon for a web page
- this icon will be placed in the browser title bar and bookmark/favorite
- IE6: this doesn't work; must place a file in
.ico format named favicon.ico in the root directory of the web server (instructions)
Additional CSS
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 */
:active : an activated or selected element:focus : an element that has the keyboard focus:hover : an element that has the mouse over it:link : a link that has not been visited:visited : a link that has already been visited:first-letter : the first letter of text inside an element:first-line : the first line of text inside an element:first-child : an element that is the first one to appear inside another
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>
Goooooogle
- How would we make unvisited links blue, only they are in a paragraph inside of the
div with id header or id footer?