Lecture Notes 4a:
Web Page Metadata
CSE 190 M (Web Programming), Spring 2007
University of Washington
Reading: Sebesta Ch. 2 sections 2.4.7, 2.4.9
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 HTML 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 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?)
meta element to aid browser / web server
<meta http-equiv="refresh"
content="how often to refresh the page (seconds)" />
</head>
<meta http-equiv="Content-Type"
content="what type of document this is
(may include internationalization information such as character encoding)" />
- using the
meta Content-Type tag 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)
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)
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
HTML Character Entities
a way of representing any Unicode character within a web page
| character(s) | entity |
|---|
| < > | < > |
| é è ñ | é è ñ |
| ™ © | ™ © |
| π δ Δ | π δ Δ |
| И | И |
| " & | " & |
HTML-encoding text
<p><a href=
"http://www.google.com/search?q=marty+stepp&ie=utf-8&aq=t">
Search Google for Marty</a></p>
- To display the above text in a web page, its special characters must be encoded as shown below:
<p><a href=
"http://www.google.com/search?q=marty+stepp&ie=utf-8&aq=t">
Search Google for Marty</a></p>