HTML Authoring and Web Publishing Minder Chen, Ph.D. [email protected]Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher Server External Applications Non-HTTP objects CGI: Common Gateway Interface Internet Global Reach Broad Range
149
Embed
HTML Authoring and Web Publishing Minder Chen, Ph.D. [email protected] Web Browser Client Web Server HTML Authoring Tools/Editors End User Web Master Web Publisher.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
HTML Authoring and Web PublishingMinder Chen, Ph.D.
The basic architecture of the World Wide Web (WWW) and its implications to business people, IS professionals and end users is the focus of this course. Basic HTML (HyperText Markup Language) tags for defining document structure and appearance, for defining anchors and hyperlinks, plus advanced HTML features including tables, images, forms, and frames will be explained. Participants will create their own web page in the computer lab using HTML authoring tools. Issues on Web page design and style, as well as how to promote a home page will be discussed.
Course Outline• Introduction to World Wide Web • HyperText Markup Language: Basic Tags• Anchors, Links, and Uniform Resource Locator• Images and Image Links• Tables • Multimedia Contents• Forms • HTML Extensions• Frames • Web Publishing • Class Project Solutions
WWW: What Is It? • The World Wide Web (WWW) is a breakthrough in new
technology designed to enable global, distributed information systems.
• From a user's perspective, the Web is a collection of documents, or pages, which contain text, images, and hypertext links to other pages.
• WWW merges the techniques of information retrieval and hypertext to create a powerful global information system. By simply pointing and clicking, the user has instant access to a mind-boggling collection of information, distributed across the globe.
• From an information providers point of view, the Web is an easy and efficient way of distributing any kind of information to a very large audience. Nobody is certain of how many users are on the Internet, but estimates start at 20 million.
• From Start button• Choose Programs • Choose Accessories• Choose WordPad• Enter your HTML code• Save it as Text File
– Choose "Text Document" Format– Name the file with .htm extension
• Open the Internet Explorer • Choose File / Open Page …• Choose the file you just saved• Open the file to view it• Go back to edit your HTML code• Use ALT-TAB key to switch back to the
browser• Click "Reload" button to refresh it• Use ALT-TAB key to switch back to the
AITC Web Site• Company Introduction• Products• How to Contact us• Online HTML ResourcesDeveloped by Advanced IT Consulting contact us at [email protected]
<html><head><title>Advanced IT Consulting</title></head><body>
<h1>AITC Web Site</h1>
<ul><ul>
<li>Company Introduction<li>Company Introduction
<li>Products<li>Products
<li>How to Contact us<li>How to Contact us
<li>Online HTML Resources<li>Online HTML Resources
• HTML Editor– Notepad / WordPad– AOLPress (www.aolpress.com)– HTML-Kit (www.chami.com/html-kit/) – HTML Assistant Pro (www.brooknorth.com)– HotMetal from SoftQuad (www.sq.com)– HotDog from Sausage Software (www.sausage.com)– Netscape Communicator (www.netscape.com)– PageMill from Adobe– Microsoft FrontPage – Macromedia Dreamweaver– Recommendation: Use first a WYSIWYG authoring tool for common
tasks and use another non-WYSIWYG authoring tool for advanced features not currently supported by the first tool.
• HTML Conversion Tool • HTML Syntax Validation Tool (www.w3.org/MarkUp/html-test/)• Web Site Development Environment (e.g., FrontPage)
AITC Web Site• Company Introduction• Products• How to Contact us• Online HTML ResourcesDeveloped by Advanced IT Consulting contact us at [email protected]
AITC
C:\temp\index.htm
AITC Introduction
AITC is …..
Guest Book Entry: Name: Know HTML
Submit Resume
profile.htm
AITC Employees• Minder Chen• Bruce Johnson• Terry Smith
Introduction to HTML• Most web pages on the World Wide Web are created in a
standard document format know as Hypertext Markup Language, or HTML.
• In practical terms, HTML is a collection of styles (indicated by markup tags) that define the various components of a World Wide Web document. HTML was invented by Tim Berners-Lee while at CERN.
• The "Hypertext" in HTML is the links that allow you to surf from one document to the next on the World Wide Web.
• All Web browsing tools like Microsoft Internet Explorer, and Netscape Navigator, read HTML documents and allow you to browse these documents by traversing these links.
• Not all browsing tools interpret or display HTML in the exact same way. This is why some pages look different in one browser than they do in another. It is important to keep this in mind when you are creating your web pages. Test your web pages on different browsers.
• Line Breaks – Horizontal Rules <hr>– <br> and <nobr>
• Character Formatting – Physical Versus Logical: Use Logical Tags When Possible – Using Character Tags: <b> <i> – Special Characters – Escape Sequences
Physical and Logical Styles in HTML• If physical and logical styles produce the same result on the screen,
why are there both? It is because of the philosophy of SGML, which can be summed in a Zen-like mantra: "Trust your browser.''
• In the ideal HTML universe, content is divorced from presentation. Thus, HTML tags a level-one heading as a level-one heading, but does not specify that the level-one heading should be displayed.
• The advantage of this approach (it's similar in concept to style sheets in many word processors) is that if you decide to change level-one headings to be 20-point left-justified Helvetica, all you have to do is change the definition of the level-one heading in the presentation device (i.e., your World Wide Web browser) or cascading style sheet (CSS).
• The other advantage of logical tags is that they help enforce consistency in your documents. It's easier to tag something as <H1> than to remember that level-one headings are 24-point bold Times or whatever. The same is true for character styles. For example, consider the <STRONG> tag. Most browsers render it in bold text. However, it is possible that a reader would prefer that these sections be displayed in red instead. Logical styles offer this flexibility.
Logical Styles• <DFN>: for a word being defined. Typically displayed in italics.
(NCSA Mosaic is a World Wide Web browser.)• <EM>: for emphasis. Typically displayed in italics. (Watch out for
pickpockets.)• <CITE>: for titles of books, films, etc. Typically displayed in italics.
(A Beginner's Guide to HTML)• <CODE>: for snippets of computer code. Displayed in a fixed-width
font. (The <stdio.h> header file)• <KBD>: for user keyboard entry. Should be displayed in a bold
fixed-width font, but many browsers render it in the plain fixed-width font. (Enter passwd to change your password.)
• <SAMP>: for computer status messages. Displayed in a fixed-width font. (Segmentation fault: Core dumped.)
• <STRONG>: for strong emphasis. Typically displayed in bold. (Important)
• <VAR>: for a "metasyntactic'' variable, where the user is to replace the variable with a specific instance. Typically displayed in italics. (rm filename deletes the file.)
Physical Styles• <B>: bold text• <I>: italic text• <U>: Underline text (Don’t use it)• <TT>: typewriter text, e.g. fixed-width font• <PRE>: Use a non-proportional font to maintain the white spaces, tabs,
and carriage returns.
Examples: • <b>Boldface</b> • <PRE> This is a tabbed line </pre>• Correct: <b> <i> Boldface and italic </i> </b>
• Incorrect: <i> <b> Boldface and italic </i> </b>
Paragraph• The browser ignores any indentations or blank lines in
the source text. HTML relies almost entirely on the tags for formatting instructions, and without the <P> tags, the document becomes one large paragraph.
• <p>...</p> The closing tag </p> is optional • <p> Start a new paragraph• <p align=center> HTML 3.0 feature• <br> Force a line break • <!-- This is a comment line --> • <h1 align=center>...</h1> • <center>...</center> • <nobr> Do not wrap the enclosed text </nobr>• Force a space character
<NOBR>This is a paragraph. Spaces, line breaks, empty lines donot work in HTML documents.</NOBR> You need to use
line break tag <br>. This line has a line break.<BR>This line is followed by a horizontal line.<HR><PRE>Another paragraph after <hr> the <hr></PRE> This is another paragraph with extra space.
• <OL>...</OL> Netscape Extended Attributes: • TYPE="..." A, a, I, i, 1• Start="2" The value to start the list with • e.g., <OL type="A" start="3"> <li> … <li> … </OL>
• <OL>...</OL> Netscape Extended Attributes: • TYPE="..." A, a, I, i, 1• Start="2" The value to start the list with • e.g., <OL type="A" start="3"> <li> … <li> … </OL>
Glossary: <DL>, <DT>, <DD> </DL><html><head><title>Glossary </title></head><body><p><h3>WWW Glossary</h3><dl> <dt> HTML <dd> HyperText Markup Language. HTML is a
markup language that is used to define web pages.
<dt> URL <dd> Uniform Resource Locator. URL is used
to locate (specify the address) a document (or resource) on the WWW.
<dt> WWW <dd> World Wide Web. An Internet-based
networked hypertext system. </dl></body></html>
<html><head><title>Glossary </title></head><body><p><h3>WWW Glossary</h3><dl> <dt> HTML <dd> HyperText Markup Language. HTML is a
markup language that is used to define web pages.
<dt> URL <dd> Uniform Resource Locator. URL is used
to locate (specify the address) a document (or resource) on the WWW.
Introduction to Hypertext• Definition of hypertext: "A combination of natural language text with the
computer's capacity for interactive branching, or dynamic display... of a nonlinear text." -- Ted Nelson
• The idea of hypertext system can be traced back to Vannevar Bush, President Roosevelt's Sciences Advisor, 1945 article "As We May Think" in which he described the idea of mechanize the scientific literature system.
• Now hypertext really means hypermedia that include not just text, but also audio, graphic, video, etc.
• Hypertext documents on WWW usually are stored in a special format called HTML, stands for HyperText Markup Language.
• A window will be used to view part of the hypertext document retrieved.
• On your Netscape Browser, the underlying HTML link to another Web document will be displayed at the message bar when you move mouse pointer over a link.
Hypertext Links• A hypertext link is a pointer pointing to another
document or another part of the current document. • These linked documents can be on the same WWW
server or on WWW servers distributed globally. • Hypertext links are represented as a purple color and
underlined texts, or as a graphic object (inline graphics). When you move the mouse cursor over a hypertext link, the mouse cursor will change from a pointer to a pointing hand.
• You may use Image Maps such that different parts of the graphic representing links to different documents.
– <a href="http://www.aitc.com/~mchen/fileX.htm"> Another file in the same directory</a>
– Can be written as <a href="fileX.htm">Another file in the same directory</a> – <a href="subdir/fileY.htm">Another file in the subdirectory under current
document's directory</a>
• Reasons to use relative URLs– Less typing is required to enter them.– If you move all the files to a different location but keep the same directory
structure you don't have to revise the URLs. – The same file referred to by a relative URL can be accessed by different
Links Between Documents<html><head> <title>Links with Relative URLs </title> </head><body><h2>Links with Relative URLs</a></h2><h3>Links to another file on the same web site and in the same directory </h3><ul><li>Go to another document in the same directory
<ul><li><a href="10_link.htm">Go to the Anchors and Hyperlinks</a> <br><li><xmp><a href="10_link.htm">Go to the Anchors and Hyperlinks</a> <br></xmp></ul>
<li>Go to an anchor of another document in the same directory<ul><li><a href="10_link.htm#section2">Go to Section 2 of the Anchors and Hyperlinks</a> <br><li><xmp><a href="10_link.htm#section2">Go to the Section 2 of the Anchors and Hyperlinks</a> <br></xmp></ul>
</ul><h3>Links to another file on the same web site but in a different directory </h3><ul><li>Go to a document in a subdirectory directory of the current directory
<ul><li><a href="webpub/10_test.htm">Go to a 10_test.htm in the subdirectory /webpub under /tutor </a> <li><xmp><a href="webpub/10_test.htm">Go to 10_test.htm </a></xmp> in a subdirectory webpub under /tutor
</ul><li>Go to a document in a different directory
<ul><li><a href="../../nvcc/oracle.htm">Go to Oracle training</a> <li><xmp><a href="../../nvcc/oracle.htm">Go to Oracle training</a> </xmp></ul>
URL: Uniform Resource Locator• Uniform Resource Locator: A standard method of
identifying any document or resource on the Internet.
• The port number can generally be omitted. The default http port name is 80. Unless someone tells you otherwise, leave it out.
• In http, if filename is omitted, a default file such as index.html may be retrieved. – http://www.aitc.com/mydoc/– http://www.aitc.com:80/mydoc/index.html
– http: A file on a World Wide Web server– ftp: A file on an anonymous FTP server– mailto: Send an e-mail to an e-mail address– file: A file on your local system– gopher: A file on a Gopher server– WAIS: A file on a WAIS server– news: An Usenet newsgroup– telnet: A connection to a Telnet-based service
• More examples: – ftp://ftp.ncsa.uiuc.edu/Web– gopher:make.up.something– news:comp.databases.oracle– mailto:[email protected]– telnet://osf1.gmu.edu
Defining Absolute Hyperlinks: <a href="URL"> Hot words </a>
<HTML><HEAD><TITLE>Hyperlinks to other web sites</TITLE></HEAD><BODY><H2>Using Absolute URLs </H2><P>Absolute URLs are used to define links to resources on other web sites.</P><UL><LI><A href="http://www.aitc.com/~mchen/justin/spelling.htm#week1">Justin'sfirst week's spelling </A> <br><LI><A href="http://www.yahoo.com/">Yahoo Directory</A><br><LI><a href="ftp://ftp.sausage.com/download.zip">Download hotdog HTML editor software</a><br></UL></BODY></HTML>
<HTML><HEAD><TITLE>Hyperlinks to other web sites</TITLE></HEAD><BODY><H2>Using Absolute URLs </H2><P>Absolute URLs are used to define links to resources on other web sites.</P><UL><LI><A href="http://www.aitc.com/~mchen/justin/spelling.htm#week1">Justin'sfirst week's spelling </A> <br><LI><A href="http://www.yahoo.com/">Yahoo Directory</A><br><LI><a href="ftp://ftp.sausage.com/download.zip">Download hotdog HTML editor software</a><br></UL></BODY></HTML>
<BASE href="URL">
Set the absolute URL against which all other relative URLs are resolved.
<BASE href="URL">
Set the absolute URL against which all other relative URLs are resolved.
Include Inline Images <HTML><HEAD><TITLE>Image </TITLE></HEAD><BODY><H2>Include images in your HTML documents:<xmp><IMG SRC="image.gif"></xmp></H2><IMG SRC="money.gif"> How to make money on WWW? <br> <IMG SRC="phone.gif" ALIGN=TOP> Call us! <IMG SRC="phone.gif" ALIGN=MIDDLE> Call us! <IMG SRC="phone.gif" ALIGN=BOTTOM> Call us! <br><IMG SRC="phone.gif" ALT="[an image of phone]"> Call us!</BODY></HTML>
<HTML><HEAD><TITLE>Image </TITLE></HEAD><BODY><H2>Include images in your HTML documents:<xmp><IMG SRC="image.gif"></xmp></H2><IMG SRC="money.gif"> How to make money on WWW? <br> <IMG SRC="phone.gif" ALIGN=TOP> Call us! <IMG SRC="phone.gif" ALIGN=MIDDLE> Call us! <IMG SRC="phone.gif" ALIGN=BOTTOM> Call us! <br><IMG SRC="phone.gif" ALT="[an image of phone]"> Call us!</BODY></HTML>
Image File Types• GIF (pronounced as jiff): Graphics Interchange Format.
Limited to 256 colors. Unisys owns the copyright of the LZW compression algorithm.– GIF87– GIF89a supports transparency and interlacing– Animated GIF: Use tools such as Microsoft GIF Animator at
http://www.microsoft.com/imagecomposer/
• JPEG (pronounced jay-peg): Joint Photographic Experts Images. Good for photographic images.
• Use thumbnail for big image file.• Use interlacing for big files. • Cut down number of colors used to reduce file size. 8
bit/pixel resolution is 256 colors.• Max 5 seconds download time per page.
HTML Code <HTML><HEAD><TITLE>Find and Use Images and Icons</TITLE></HEAD><BODY><a href="http://www.yahoo.com/computers/multimedia/pictures/clip_art/"> Clip art collection on Yahoo</a> <br><img src="left.gif"><img src="right.gif"><img src="down.gif"><img src="up.gif"><img src="top.gif"> <img src="eyes.gif"> <br><img src="ball2blue.gif"> Go back to where you are! <img src="goback.gif">
<br><img src="ball2blue.gif"> Money grows! <img src="money1.gif"> <br><img src="ball2blue.gif"> Using thumbnail <a href="nailbig.gif"><img src="nailsmll.gif">with Interlace </a><br><img src="ball2blue.gif"> Using thumbnail <a href="nailbig2.gif"><img src="nailsmll.gif"> Without
Graphic and Image Tools• Shareware product: Paint Shop Pro for Windows 95/NT
4.0 from JASC, Inc. at http://www.jasc.com/pspdl.html– Resizing– File format conversion
• Use tools such as Adobe Illustrator for more complicated drawings (www.adobe.com)
• Adobe PhotoshopAdobe Photoshop has been the definitive application for digital image enhancement, retouching, and photo composition and it is also the de facto standard for preparing images for the World Wide Web.
• Hardware: Scanner, Digital Camera, or Video capturing system
• The Netscape browser will be able to recognize the file followed by these extensions– AIFF sound .au– JPEG graphic .jpeg or .jpg– MPEG movie .mpeg or .mpg– PostScript document .ps– QuickTime movie .mov– WAVE sound .wav
AIFF: Audio Interchange File FormatMPEG: Moving Picture Experts Group
5-seconds of audio Size Format36KB WAV4KB RealAudio 14.48KB RealAudio 28.8
Configure Your Browser for Viewing Multimedia Documents
• In Netscape: General Preferences|Helpers• Use the General Helpers preferences panel to create or
reconfigure how a file's format maps to a external helper application.
• Netscape has the built-in capability to interpret and display several formats, including the HTML format used by HTTP servers.
• Helper applications are used by Netscape to interpret files that it has retrieved but is unable to read.
• You can designate MIME file types (a method of differentiating file formats using a suffix appended to a file name), helper applications and their associated actions.
• When you display the Helpers general preferences panel, you see a scrolling text field that lists the file formats and helper applications available to Netscape.
<html><head><title>777 Virtual Tour</title></head><body><h1>777 Virtual Tour</h1><img src="/gif/777.gif"><p>In order to take the virtual tour of the 777, you'll need QuickTime VR software on
your computer. Click here to retrieve <a href="http://qtvr.quicktime.apple.com/">QuickTime VR</a> and instructions on how to load it onto your machine. Then come back and take the tour!
<p><ul><li><a href="/qtvr/777fd.mov">Tour the flight deck of the 777</a>. (155K)<li><a href="/qtvr/777in.mov">Tour the spacious first class interior of the 777</a>.
Using <object> Tag for Multimedia ObjectsHTML 4.0<html><head><title>MPEG Video</title></head><body><object data="test.mpg" type="video/mpeg">Demo of a movie</object></body></html>
<html><head><title>MPEG Video</title></head><body><a href="test.mpg">Demo of a movie<a> <embed src="test.mpg" HEIGHT=300 WIDTH=200> Demo of a movie </embed></body></html>
<embed src="test.mpg"> Demo of a movie</embed>
Test.mpg can be found at http://www.erols.com/aitc/html/test.mpg
– Last Name: <INPUT TYPE="text" NAME="LastName" SIZE=20> • TYPE
– TEXT: Single line text box– PASSWORD: Password entry– CHECKBOX: Check box– RADIO: Radio button– HIDDEN: Hidden field sends a variable and a value – SUBMIT: Submit button– RESET: Reset button
• NAME: required for all form elements other than SUBMIT and RESET buttons
• VALUE: default value for textbox; label for submit and reset buttons
• CHECKED: Apply to Check box and Radio button • SIZE: Size of the Text box. • MAXLENGTH: Maximum number of characters acceptable
Preventing a Document From Being Cached• You can prevent a document from being cached by
adding the following META tag to the document.
<META HTTP-EQUIV="Expires" CONTENT="0">
• Preventing the document from being cached ensures that a fresh copy of the document will always be retrieved from the site, even during the user's current session, regardless of how the user has set the browser's caching options. This is useful if the content of the document changes frequently.
BGCOLOR<HTML><HEAD><TITLE>This is the second slide</TITLE><META HTTP-EQUIV="REFRESH" CONTENT="4; URL=REFRESH3.HTM"></HEAD><BODY BGCOLOR=#FFFF00><P><A HREF="refresh1.html">Previous</A> <A HREF="refresh1.html">Top</A> <A HREF="refresh3.html">Next</A></P><H1>This is the second slide</H1><P><FONT size=+2> world! </FONT></P></BODY></HTML>
<HTML><HEAD><TITLE>This is the second slide</TITLE><META HTTP-EQUIV="REFRESH" CONTENT="4; URL=REFRESH3.HTM"></HEAD><BODY BGCOLOR=#FFFF00><P><A HREF="refresh1.html">Previous</A> <A HREF="refresh1.html">Top</A> <A HREF="refresh3.html">Next</A></P><H1>This is the second slide</H1><P><FONT size=+2> world! </FONT></P></BODY></HTML>
RGB Color • Red Green Blue (RGB) • Red: #00 No red <---> #FF bright red • #000000: White• #FFFFFF: Black • <body bgcolor="#FFFF00"> • <body bgcolor="magenta"> • <body bgcolor="blue4"> Netscape only• blue1 (=blue), blue2, blue3, blue4 (from light to dark)
<frame> </frame>• Load information independent of other frames• Can be given a target name• Can resize dynamically• This <frame> tag defines a single frame in a
frameset. • It has 6 possible attributes:
– SRC: The URL of the document to be displayed. – NAME: This is used to assign a name to a frame so that it can be
targeted by other links.– MARGINWIDTH: The left and right margin from the boundary of the
frame to the document and the value is in pixels.– MARGINHEIGHT: The upper and lower margins – SCROLLING: yes | no | auto– NORESIZE: Make the frame nonresizable. Frames are resizable by
• A frame's window space can be divided into rows and columns.
• ROWS="value_list": This is a comma separated list of values. These values can be expressed in an absolute number of pixels, as a percentage (between 1 and 100) or as relative scaling values.
• Percentage: <FRAMESET ROWS="20%,60%,20%">• Pixels: <FRAMESET ROWS="100,500,100">; You'll almost certainly
want to use these values in combination with other percentage based or relative values.
• Relative scaling: <FRAMESET ROWS="50, 2*, *">; This is a mix of fixed and relative values. In this case the first ROW is 50 pixels wide. The other two rows are divide the remaining space. A single "*" means that the frame gets all of the remaining space. When more than one "*" appear, you can give them relative portions of the remaining space. In this case, the second row gets 2/3 of the
remaining space and the third row gets 1/3 of the remaining space.
Free Web Hosting• Start New Sites: You may want to start new sites
for different subjects you want to cover. You can then submit your new sites and link the sites together to share the traffic. Here are places where you can get free sites: – Tripod : http://www.tripod.com– Angelfire : http://www.angelfire.com/– Geocities : http://www.geocities.com/
Let Your Web Site Be Known• Key words used in searches of your sites must be present in your top-level home
page.• Get Listed on the News groups: For general announcement of new websites:
comp.infosystems.www.anounce• Negotiate Mutual Pointers with sites trying to attract audience similar to your
audience.• Online Resource: http://www.ftpplanet.com/webmaster/web_promotion.htm• Sites to Help You Submit Your: SiteThese sites will submit your site to many
search engines and directories for you. – Bcentral: http://www.BCentral.com– The Promoter: http://www.tila.com/promote/ -- submits to search engines and
link pages for free. – Submit-it!: http://submitit.linkexchange.com/ -- submits to more than 400 search
engines and link pages. – Submit-it! Free: http://siteowner.linkexchange.com/Free.cfm -- submits to search
engines for free. – WebStep 100: http://www.mmgco.com/top100.html -- submits to top web sites for
AITC Web Site• Company Introduction• Products• How to Contact us• Online HTML ResourcesDeveloped by Robert Smith atAdvanced IT Consulting contact us by mail at [email protected]
AITC
C:\temp\index.htm
AITC Introduction
AITC is …..
Guest Book Entry: Name: Know HTML
Submit Resume
profile.htm
AITC Employees• Minder Chen• Bruce Johnson• Robert Smith
index.htm<html><head><title>Advanced IT Consulting</title></head><body><h1>AITC Web Site</h1><ul><li><a href="profile.htm">Company Introduction</a><li><a href="product.htm">Products</a><li><a href="contact.htm">How to Contact Us</a><li><a href="resource.htm">Online HTML Resources</a></ul>Developed by <a href="contact.htm#smith">Robert Smith</a> at<a href="http://www.erols.com/aitc/">Advanced IT Consulting </a>contact us <a href="mailto:[email protected]">by email </a> at [email protected]</body></html>
profile.htm<html><head><title>AITC Company Profile </title></head><body><h1>AITC Introduction</h1>AITC is IT consulting and training firm. ...<p>Guest Book Entry: <hr><form method="POST"
Imagemap• ISMAP: The ISMAP (is map) attribute identifies an image as
an image map. Image maps are graphics in which certain regions are mapped to URLs. By clicking on different regions, different resources can be accessed from the same graphic. Example of use:
• To be able to use image maps in HTML documents, the HTTP server which will be controlling document access must have the correct cgi-bin software installed to control image map behavior.
• Files needed: – "Map" image: sample.gif in the example.– Map file: e.g., book1.map in the example. Has two
formats: NCSA and CERN and you can use MapEdit or MAP This to create it.
default map_dflt.htm#The rectangle at the bottomrect (1,122) (129,163) rect.htm#The circle at the middlecircle (60,85) 35 circle.htm#Polygon at the toppoly (56,1) (8,50) (104,50) polygon.htm
default map_dflt.htm#The rectangle at the bottomrect (1,122) (129,163) rect.htm#The circle at the middlecircle (60,85) 35 circle.htm#Polygon at the toppoly (56,1) (8,50) (104,50) polygon.htm
Sample Map Specification<HTML><HEAD><TITLE>Client-Side Image Map</TITLE></HEAD><BODY><h1>Try out the following client-side image map</h1> <p> <img src="map1.gif" usemap="#map_spec">
Including Both Client-Side and Server-Side Processing
• Netscape 2.0+ and Internet Explore support client-side image map. Other browsers may ignore the usemap attribute in the <img> tag.
• For the same image map, we can include both client-side (honored by the browsers that can handle it) and server-side processing (for backward compatibility).
<tr><td>1</td><td>$400,000</td><td>TH</td><td>8,000</td><td>3/2/1</td><td>123 Main St.</td></tr><tr><td>2</td><td>$350,000</td><td>SFH</td><td>8,000</td><td>4/2/2</td><td>777 Main St.</td></tr>
</tbody></table>Contact <a href="http://www.erols.com/aitc/ger.htm">GE Reality</a> if you want to buy a house.<br>Contact <a href="http://www.microsoft.com/">Microsoft</a> if you have problem with IE.</body>
URL and Security• URLs are standardized in RFC1738, and in their most
generic form, they are defined as
• <scheme>:<scheme-specific-part>
• The best-known scheme is the Common Internet (http for WWW), in which the <scheme> is the name of a protocol and the <scheme-specific-part> is defined as:
• //<user>:<password>@ <user>:<password>@ <host>:<port>/<url-path> in which only the host part is mandatory. – The ":" and "@" characters have a special meaning and thus the
server can parse the entire string.
– If a user and a password are provided, the host part only comes after the @ character.