4.
Intermediate HTML
4.1 Using <meta>
Tags
The
<meta> tag can be used for a variety of applications:
Attributes
of meta
CHARSET=name
The CHARSET is used to specify the character set to be
used with this Web page.
CONTENT=string
Specify meta-information in the
double-quoted string format.
For example, the following
meta-information will reload the same document
after 10 seconds:
<meta HTTP-EQUIV="refresh"
CONTENT="10">
And the following meta-information
will cause the homepage at the specified
URL location to be loaded:
<meta HTTP-EQUIV="refresh"
CONTENT="10 URL="http://www.ipfw.edu”>
DIR=direction
Specify the text rendering
direction: LTR (left to right), RTL (right to left)
LANG=language
Specify a standard two-character ISO
language name defined in RFC 2070
standard on internationalization, for examples: fr (French), de (German), en (English), it
(Italian), ja (Japanese), ko (Korean),
ml (Dutch), sv (Swedish), zh (Chinese)
NAME=string
SCHEME=scheme
HTTP-EQUIV=string
Specify client-pull application and
allow the
For
specifying the HTTP equivalent name for the meta-information and cause the
server to include the name and content in the HTTP header for this document
when it transmitted to the client.
Keywords,
Description for Search Engine
<meta NAME="keywords" VALUE="Web, TCP/IP, HTML, JavaScript, Opto22">
<meta NAME="keywords" CONTENT="Web Programming, JavaScript Applications, Visual Basic Applications">
<meta NAME="description" VALUE="Web Programming For Industrial Applications">
<meta NAME="description" VALUE="Web Programming Applications">
<meta NAME='author", CONTENT="Paul I-Hai Lin">
<meta NAME='copyright", CONTENT="2000, Paul I-Hai Lin">
<meta NAME-"robots' CONTENT="noindex, nofollow">
Client
Pulls
HTTP-EQUIV=refresh
<meta HTTP-EQUIV="refresh" CONTENT="20">
<meta HTTP-EQUIV="refresh" CONTENT="10; URL=http://another.html">
To create a slide-show effect:
An example -
In showlin1.html contains:
<meta HTTP-EQUIV="refresh" CONTENT="5; URL=e:\html5\showlin2.html">
In showlin2.html contains:
<meta HTTP-EQUIV="refresh" CONTENT="5; URL=e:\html5\showlin3.html">
In showlin3.html contains:
<meta HTTP-EQUIV="refresh" CONTENT="5; URL=e:\html5\showlin4.html">
In showlin4.html contains:
<meta HTTP-EQUIV="refresh" CONTENT="5; URL=e:\html5\showlin1.html">
Expire
Attribute
For
indicating the expiration date and time of a document that may be used by Web
agents or Web robots:
<meta HTTP-EQUIV="expires" CONTENT="October 10, 2000 10:20:00 EST">
CONTENT-TYPE
For
internationalization of a Web page to indicate the 8-bit encoded Japanese
character sets are used:
<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=SHIFT_JIS">
For
internationalization of a Web page to indicate the 16-bit encoded character
sets are used:
<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-8">
CONTENT-LANGUAGE
The
Web content is prepared with French natural language
<meta HTTP-EQUIV="content-language" CONTENT="fr">
Other
languages:
jw - Japanese
Example
4-1: Creating a slide show using
<meta> tag..
<HTML>
<!-- showlin1.html -->
<HEAD>
<TITLE> Client Pull -- showing Pictures </TITLE>
<meta HTTP-EQUIV="refresh" CONTENT="10;
URL=http://www.etcs.ipfw.edu/~lin/HTML/showlin2.html">
</HEAD>
<BODY>
<CENTER>
<img
SRC="http://www.etcs.ipfw.edu/~lin/HTML/lin4799.jpg">
</CENTER>
</BODY>
</HTML>
<HTML>
<!-- showlin2.html -->
<HEAD>
<TITLE> Client Pull -- showing Pictures </TITLE>
<meta HTTP-EQUIV="refresh" CONTENT="5;
URL=http://www.etcs.ipfw.edu/~lin/HTML/showlin3.html">
</HEAD>
<BODY>
<CENTER>
<img SRC=
"http://www.etcs.ipfw.edu/~lin/HTML/lin82499.jpg">
</CENTER>
</BODY>
</HTML>
<HTML>
<!-- showlin3.html -->
<HEAD>
<TITLE> Client Pull -- showing Pictures </TITLE>
<meta HTTP-EQUIV="refresh" CONTENT="10;
URL=http://www.etcs.ipfw.edu/~lin/HTML/showlin4.html">
</HEAD>
<BODY>
<CENTER>
<img SRC=
"http://www.etcs.ipfw.edu/~lin/HTML/lin510_00.jpg">
</CENTER>
</BODY>
</HTML>
<HTML>
<!-- showlin4.html -->
<HEAD>
<TITLE> Client Pull -- showing Pictures </TITLE>
<meta HTTP-EQUIV="refresh" CONTENT="10;
URL=http://www.etcs.ipfw.edu/~lin/HTML/showlin1.html">
</HEAD>
<BODY>
<CENTER>
<img SRC=
"http://www.etcs.ipfw.edu/~lin/HTML/lin4699.jpg">
</CENTER>
</BODY>
</HTML>
Activities
<HTML>
<!-- index.html
Author: Your Name
Date: Today
Authoring Tools: Microsoft Notepad
-->
<HEAD>
<TITLE>SUNXYZ Co., </TITLE>
</HEAD>
<BODY>
<H1> This page is under the
construction. </H1>
</BODY>
</HTML>
4.2 Image Maps
Uses images as anchors to link to other documents
To prepare a client side image map, we need to use
area
Tag and Attributes
SHAPE= rect | rectangle | circ | circle | poly | polygon
COORDS = values
HREF= URL
Example:
Define a rectangle:
COORDS= "x1, y1, x2, y2" for defining a
rectangle with two upper left (x1, y1), and lower right (x2, y2) of the area.
Where, x1, x2, x3, and x3 are numbers in the units of pixels.
Define a circle:
COORDS= "x1, y1, r" for defining a circle area
with the center at (x1, y1), and the radius of r.
Define a polygon:
COORDS= "x1, y1, x2, y2, x3, y3", using three X,
Y sets for defining a triangle area.
COORDS= "x1, y1, x2, y2, x3, y3, x4, y4, x5, y5, ..,
xn, yn", using n X, Y sets for defining a polygon area.
Image Map Examples
<map NAME="BALLmap">
<area SHAPE=RECT COORDS="2,3,89,48" HREF=/search.shtml>
<area SHAPE=RECT COORDS="95,0,176,48" HREF=#MAILFORM>
<area SHAPE=RECT COORDS="185,1,263,48" HREF=#TOP>
<area SHAPE=RECT COORDS="271,2,359,49" HREF=/index.shtml>
<area SHAPE=RECT COORDS="368,2,485,47" HREF=/guestbook.html>
<area SHAPE=RECT COORDS="491,2,566,47" HREF=/links.shtml>
<area SHAPE=default HREF=/imagemap.shtml>
</map>
<HTML>
<HEAD>
<TITLE> Image Map Example </TITLE>
</HEAD>
<BODY>
<map NAME ="image_name">
<area HREF =
"f_rect1.html" SHAPE = "rect"
COORDS =
"x1, y1, x2, y2" ALT = "Go to f_rect1" >
<area HREF =
"f_rect2.html" SHAPE = "rect"
COORDS =
"x3, y3, x4, y4" ALT = "Go to f_rect2" >
<area HREF =
"f_circle.html" SHAPE = "circle"
COORDS =
"x5, y5, radius" ALT = "Go to f_circle" >
<area HREF =
"f_poly.html" SHAPE = "ploy"
COORDS =
"x6, y6, x7, y7, x8,y8, x9, y9" ALT = "Go to f_poly" >
</map>
<img SRC = "picture.gif" WIDTH = "200" HEIGHT = "200" BORDER =
"2"
ALT = "SUNXYZ
Co." USEmap = "#image_name">
</BODY>
</HTML>
example from Altavista
Artwork on loan from Altavista! |
source code
<a href="http://altavista.digital.com/cgi- bin/query?pg=tmpl&v=about.html">
<img src="/dimages/av-logo.gif" alt="[AltaVista] "
BORDER=0 ALIGN=middle HEIGHT=73 WIDTH=204></a>
<a href="http://altavista.digital.com/cgi-bin/query?pg=aq">
<img src="/dimages/av-adv.gif" alt="[Advanced Query] "
BORDER=0 ALIGN=middle HEIGHT=73 WIDTH=59></a>
<a href="http://altavista.digital.com/cgi-bin/query?pg=q">
<img src="/dimages/av-sim.gif" alt="[Simple Query] "
BORDER=0 ALIGN=middle HEIGHT=73 WIDTH=42></a>
<a href="http://altavista.software.digital.com/products/search/choice.htm">
<img src="/dimages/av-pex.gif"
alt="[Private eXtension Products] "
BORDER=0 ALIGN=middle HEIGHT=73 WIDTH=65></a>
<a href="http://altavista.digital.com/cgi-bin/query?pg=h">
<img src="/dimages/av-help.gif" alt="[Help with Query] "
BORDER=0 ALIGN=middle HEIGHT=73 WIDTH=35></a>
Activities
1. ©Determine the resource needed for designing a Web site
for the SUNXYZ Co., that sales PCs directly through the Web. The company has
the following departments; PRODUCT SALES, TECHNICAL SUPPORT, ACCOUNTING,
PERSONNALE, SHIPPING
2. ©Architect and organize the SUNXYZ Co., Web site by
determining folders or directories for appropriate department. Creating the
folders for the departments as listed above.
3. ©Use Notepad editor to creating your first incomplete
HTML document -- the homepage for the SUNXYZ Co. Refer to example 1 for the
basic tags needed. This page should include the following TAGS and Attributes:
<HTML>
<!-- index.html
Author: Your Name
Date: Today
Authoring Tools:
Microsoft Notepad
-->
<HEAD>
<TITLE>SUNXYZ
Co., </TITLE>
</HEAD>
<BODY>
<H1> This page
is under the construction. </H1>
</BODY>
</HTML>
4. ©Save this incomplete homepage as
"index.html" in the A drive.
5. ©View the index.html using both Microsoft Internet
Explorer and Netscape Navigator browsers.
6. ©Add a client-pull statement in your index.html so that
Web browser view this page will be updated automatically every 10 sec.
(inexpensive Web cam)
7. ©Gto the ECET department Lab server at:
http://149.164.36.204, then click on Webcam to view the lab setup.
8. ©Go to www.alta-vista.com, then search for the keyword
"Imagemap" to look
for
a tutorial on this subject.