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.
<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" />
head
of your XHTML pagemeta
tags often have both the name
and content
attributes
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>
Content-Type
gets rid of the W3C "tentatively valid" warning<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
meta
refresh
tag can also redirect from one page to another:<meta http-equiv="refresh" content="5;url=http://www.bjp.com" />
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>
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>
classifications of data that travel over the internet
MIME type | file extension |
---|---|
text/html | .html |
text/plain | .txt |
image/gif | .gif |
image/jpeg | .jpg |
video/quicktime | .mov |
application/octet-stream | .exe |
<link rel="shortcut icon" type="MIME type" href="filename" />
<link rel="shortcut icon" type="image/gif" href="cse.gif" />
link
tag, placed in the HTML page's head
section, can specify an icon for a web page
.ico
format named favicon.ico
in the root directory of the web server (instructions)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 anothera: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
div
with id header
or id footer
?div#header p a:link, div#footer p a:link { color: blue; }