HELP! * GREY=local Full HTML for

LOCAL foilset Introduction to HTML--ECS400 fall 96

Given by Nancy J. McCracken at ECS400 Senior Undergraduate Course on Fall Semester 96. Foils prepared 10 Sept 1996
Abstract * Foil Index for this file

See also color IMAGE
HTML stands for HyperText Markup Language. It is defined using SGML (Standard Generalized Markup Language) and provides tags to identify document structure for later formatting and links to other documents.
This presentation will cover the most commonly used or important features of HTML; more details can be found in the references.
Topics will include
  • formatting text on a web page and creating links to other web pages
  • using images and imagemaps
  • creating forms
  • creating tables
  • creating frames
Features will be included from both HTML2.0 and HTML3.0, and the enhancements from the Netscape 1.1 and Netscape2.0 browsers.
References:
  • HTML and CGI Unleashed, John December and Mark GInsburg.
  • http://www.netscape.com/toc.html - Various documents on html features, under the Assistance section of this Table of Contents from Netscape.

Table of Contents for full HTML of Introduction to HTML--ECS400 fall 96


1 Preparing Web Pages with HTML
2 Preparing Web Pages with HTML
3 HyperText Markup Language (HTML)
4 Creating a Web Page
5 Formatting a Web Page: Headers and Paragraphs
6 Formatting a Web Page: Lists
7 Formatting a Web Page: More Lists
8 Creating a Web Page: Hyperlinks (Anchors)
9 More on Hyperlinks
10 Formatting a Web Page: More on Text
11 Formatting a Web Page: Miscellaneous Topics
12 Formatting a Web Page:
13 Formatting a Web Page: Backgrounds
14 Completing your Web Page
15 Inlined Images
16 More on Inlined Images
17 Inlined Images: Performance
18 External Viewers for Images, Audio, and Video
19 External Viewers, continued
20 Producing Images
21 Forms
22 Content Fields of a Form: Text and Password Fields
23 Content Fields of a Form: Radio Buttons and Checkboxes
24 Content Fields of a Form: Menus and Scrolled Lists, TextAreas
25 Content Fields of a Form: Submit and Reset Buttons
26 Example Form
27 Clickable Maps
28 Formatting Tables
29 What's Inside a Table
30 Examples of a Table
31 Frame Documents in Netscape 2.0 Browsers
32 Formatting Frames
33 Example of a Frame Document
34 Password Protection on HTML Documents
35 Example protection files

This table of Contents Abstract



HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 1 Preparing Web Pages with HTML

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
Nancy McCracken
NPAC
Syracuse University
111 College Place
Syracuse NY 13244-4100
May 1996
Click here for body text

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 2 Preparing Web Pages with HTML

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
HTML stands for HyperText Markup Language. It is defined using SGML (Standard Generalized Markup Language) and provides tags to identify document structure for later formatting and links to other documents.
This presentation will cover the most commonly used or important features of HTML; more details can be found in the references.
Topics will include
  • formatting text on a web page and creating links to other web pages
  • using images and imagemaps
  • creating forms
  • creating tables
  • creating frames
Features will be included from both HTML2.0 and HTML3.0, and the enhancements from the Netscape 1.1 and Netscape2.0 browsers.
References:
  • HTML and CGI Unleashed, John December and Mark GInsburg.
  • http://www.netscape.com/toc.html - Various documents on html features, under the Assistance section of this Table of Contents from Netscape.

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 3 HyperText Markup Language (HTML)

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
is the formatting language used for creating hypertext documents on the World Wide Web, which can be displayed by Web browsers (sometimes referred to as viewers) such as Mosaic.
HTML is very simple - a minimum of formatting functions
consists of formatting commands called tags in a text file
  • tags are in < > brackets
  • most are paired for beginning and end: <title> . . . </title>
  • not case sensitive: <TITLE> is the same as <title>
  • Some tags have attributes within the brackets
  • <tag attribute1=value1 attribute2=value2 . . . >
  • In general, numeric values are just given as numbers, while text values are put into quotes.

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 4 Creating a Web Page

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
A web page has tags to show the different parts and to identify its purpose on the Web.
Each web page is one Unix, Mac or PC file.
The top level file (sometimes called the "home page" is usually named "index.html". You can actually call it anything.html, but if it's index.html, your URL can be shorter.
The text of each web page is surrounded with html, head, body and title tags:
  • <html>
  • <head>
  • <title>The Oriental Rug Company in Syracuse NY</title>
  • </head>
  • <body>
  • . . . {all your other html, text, links and images
    • will go here} . . .
  • </body>
  • </html>
The title does not actually appear in your homepage, but is an English version of your URL - it serves as a identifier to the WWW. Browers can show the title of the page they are viewing in the header bar and save it in the bookmarks.

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 5 Formatting a Web Page: Headers and Paragraphs

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
Headers come in different sizes, from <h1> very large down to <h6> very small. For example, a page might start with a large header of the name of the company, followed by a smaller header with a short description:
  • <h1> Oriental Rug Company </h1>
  • <h3> Imported Handmade Oriental Rugs </h3>
Blank space and line breaks in your file are ignored in HTML. It will format the lengths of your lines to whatever will fit in the window, disregarding however you may have typed it.
To separate two sections of text, you can add a line break tag, <br>, with no blank lines, or a paragraph tag, <p>, which has extra blank lines.
  • Every year we stock thousands of rugs in all patterns
  • which we obtain in our annual rug-buying expeditions
  • to the markets of the Middle East. <p> . . .

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 6 Formatting a Web Page: Lists

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
HTML can format three types of lists: an ordered list <ol>, an unordered list <ul>, and a descriptive list <dl>.
Here's an unordered list of topics about a company that people might be interested in.
<ul>
<li> About Handmade Oriental Rugs
<li> Catalog of Rugs
<li> Ordering Information
</ul>
The result of the formatting will be bulleted items.
Ordered lists are the same, except that you put <ol> in place of <ul> and the items will be numbered in the result.

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 7 Formatting a Web Page: More Lists

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
Definition lists are somewhat different than the other lists in that each item has a brief term followed by a definition or description, which is placed underneath the term and indented.
The tags used are <dt> and <dd>:
<dl>
<dt>Afghan
<dd>These generally come in larger sizes with a wine red background and a dark-colored design featuring rows of octagons.
<dt>Kashan
<dd>Very finely woven rugs of wine red backgrounds and a design featuring a center medallion and corners and generally a smaller patterned figure in the rest of the field.
</dl>

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 8 Creating a Web Page: Hyperlinks (Anchors)

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * Critical Information in IMAGE
Full HTML Index
The main feature of hypertext is that we can set up links to other documents.
A hyperlink must specify 2 things:
  • the file containing the document to link to
  • the text or object in the current document that you want to be highlighted as the hyperlink.
A hyperlink to another document is created using an anchor <a> tag:
<a href="aboutrugs.html"> About Handmade Oriental Rugs </a>
The file can be given by any Unix relative pathname, which means that it can be any document in the current directory or in any subdirectory.
"rugs1/moreonrugs.html"

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 9 More on Hyperlinks

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
Links can also refer to any other documents on the Web.
For example, suppose that we want to include references to other information about rugs.
The Oriental Rug Company is a member of the <a href="http://www.rug.org/general/index.html"> Oriental Rug Consortium </a>, an organization devoted to identifying and preserving sources of Oriental rugs.
The string of characters in the HREF field is called a Uniform Resource Locator or URL. It provides a unique way of locating any document on the Internet. Server types include http, ftp, gopher, WAIS, news, telnet.
Note that in the above example, the URL could also be given as http://www.rug.org/general/

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 10 Formatting a Web Page: More on Text

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
Sections of text can be marked to be formatted as they appear in the file. <pre> for preformatted and <blockquote> which also indents.
"Trust your browser":
Logical Styles:
<dfn>, <em>, <cite>and <var> typically displayed in italics.
<code>,<kbd>,<samp> typically displayed in fixed-width font.
<strong> typically displayed in bold.
Physical Styles:
<b> bold
<i> italic
<tt> typewriter - fixed-width font
Escape sequences for characters used for tags
&lt for <
&gt for >
&amp for &
&quot for "
Additional escape sequences support special characters, such as &reg for the Registered Trademark symbol and &copy for the Copyright symbol.

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 11 Formatting a Web Page: Miscellaneous Topics

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
There are tags for centering text within the window:
  • <center> Oriental Rug Company </center>
For a really startling effect, not particularly recommended!, there is a tag for blinking text.
  • <blink> Amazing New Products! </blink>
To separate areas of your web page, there is a horizontal line, <hr>, which draws a line the width of the current window. This tag also has attributes to control the appearance and placement of the line:
  • <hr size=number> gives the thickness of the line in pixels
  • <hr width=number|percent> specifies the width of the line either by the number of pixels or by a percentage of the current window
  • <hr align=left|right|center> is the placement of the line
  • <hr size=3 width="75%" align=center>
Comments can be given in the html file.
  • <!-- Put your comments here -->

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 12 Formatting a Web Page:

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
Another way to specify larger and smaller sizes of text, is to give font size.
  • <font size=value> where value is from 1 to 7
  • <font size=+1> to increase current size by 1
The default size is 3. Of course, this is all relative to the sizes chosen by the browser.
A Netscape 2.0 enhancement:
  • <font color=#HHHHHH>
where each pair HH of hexadecimal digits specifies a number. The three numbers are taken as Red, Green and Blue in the RGB color representation.
Another Netscape 2.0 enhancement is providing tags for subscripts and superscripts <sub> and <sup>.

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 13 Formatting a Web Page: Backgrounds

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
A nice feature in controlling the appearance of your web page (aren't you tired of so-called "Mosaic gray"?) is being able to design the background. This is done either by giving a plain color or by supplying an image to use for the background. Backgrounds are specified as an attribute to the <body> tag.
<body bgcolor="#HHHHHH">
<body background="URL">
where the URL refers to an image. Note that this image can be small - it will just be repeated as necessary to fill the browser window.
Many image files suitable for backgrounds are found at the web site http://www.netscape.com/assist/net_sites/bg/background.html
Other <body> attributes can specify colors for links.

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 14 Completing your Web Page

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
You should always add your address to the bottom of any HTML page you create, so people know how to contact you with questions or comments.
There is an address tag for this, which just puts the text in italics. Usually people separate this from the rest of the text by a horizontal line.
<hr>
<address> This page maintained by the staff of the Oriental Rug Co., Learbury Building, Syracuse NY. Please send comments to oriental@aol.com.
</address>
Or you can use the convenient "mailto" feature:
Please send comments to <a href="mailto:oriental@aol.com">oriental@aol.com. </a>
People often put a copyright symbol, or an anchor to a copyright notice here. (Copyright issues are still being debated.)
If the page has information that changes frequently, you may wish to put a notice "Last updated on 1/5/95".

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 15 Inlined Images

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
Browsers such as Mosaic and Netscape allow you to include images inbetween lines of text.
The image must be in GIF format. (Netscape now allows inlined JPEG images.)
Suppose that we make a banner for our company that includes the name in a GIF image. Then we can replace our original plain text header with the image:
<img src="rugbanner.gif", alt="Oriental Rug Company">
Only the SRC attribute of the image is required. ALT is optional and gives alternate text for text-based viewers such as Lynx which cannot show the image.
The attribute BORDER=value tells the width of the picture border in pixels (this is blue if the image is a link).
The VSPACE=value and HSPACE=value attributes specify the numbers of pixels of blank space to surround the image.
Another attribute is ALIGN=top|texttop|middle|absmiddle|baseline|bottom|absbottom. If there is any text after the picture which can fit on the formatted page besides the picture, this will say how to place it. The default is "bottom".

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 16 More on Inlined Images

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * Critical Information in IMAGE
Full HTML Index
In general, text is not flowed around images. Instead, think of the text as a stream of items with an inlined image just occuring as one more item in the stream.
The only exceptions to this are additions to the ALIGN attribute (align=left|right) which DO allow text to be flowed either to the left or the right of an image.
<img src="tekke.gif" align=left> This Tekke style rug was imported from Pakistan. <br> 1986 <br clear=left>
The <br> tag can be used to start a new line beside the image. Then the <br> tag is extended to have an attribute CLEAR=left|right|all to start a new line where the left margin is clear of images, the right margin, or both.

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 17 Inlined Images: Performance

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
More attributes of the IMG tag specify the width and height of the image in pixels.
<img src="rugbanner.gif" width=150 height=50>
Typically, images are quite large and take longer to download than text files. If the browser knows the width and height of the image, it can leave space for the image and go ahead and format the remaining text. The image can be downloaded afterward. This means that the viewer can go ahead and start reading text after the image while waiting for it to download.
If the width and height specified do not match the actual image, the image is automatically scaled to fit.
Interlaced gifs are another technique for downloading images in strips.

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 18 External Viewers for Images, Audio, and Video

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
Mosaic and Netscape can show images in other formats as well as audio and video.
The image, audio, or video must be in a file with the correct file extension. For example, images in JPEG or TIFF formats must have the form
  • image1.jpeg
  • image2.tiff
Or one audio format has the form
  • sounds.au
In your document, you put an anchor to an external document which has the image, audio, or video
<a href="tekke.gif"> Click here to see a picture of a Tekke rug. </a>
Saying "click here" is not usually recommended. Instead people generally put a tiny version of the picture, called a thumbnail. Any such picture will have a blue bar around it and everyone assumes that it can be clicked on to get a larger version of the picture.
<a href="tekke.gif"> <img src="tekketn.gif"> </a><b>Tekke Prayer Rug </b>

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 19 External Viewers, continued

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
There is a fairly standard list of free viewers which are available to anyone with a Mosaic or Netscape client. However, this is an area where you should know what kind of viewers your intended audience is likely to have.
Audio and video are available through anchors.
<a href="rugsales.au"> Here is a message from one of our friendly salespersons. </a>
Or simply put an audio icon to indicate an audio file.
<a href="rugsales.au"> <img src="iconaudio.gif"></a>
Since people have a wide variation in how fast their network is, it is a nice style to warn people if an image, audio, or video is likely to be large enough to cause some people to have too slow a download time. The download time is roughly equivalent to the size of the file, so these objects often have sizes posted.
<a href="video.mpeg"><img src="iconvideo.gif"> My video </a> 3 Mbytes - Very Slow!

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 20 Producing Images

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
Methods of producing images
  • Using Graphics programs such as SuperPaint, Freehand, and PhotoShop
  • Scanned Photos
  • Photo CD produced from 35 mm negatives
  • Digital camera - low quality such as QuickTake or high quality
Image Conversion to produce GIF's on a Mac
  • PhotoShop for scanned photos and graphics
  • Debabelizer for anything
  • GraphicsConverter (freeware)
Image Conversion on a Unix workstation with X windows:
  • xv

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 21 Forms

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
Forms provide a method for a Web viewer to send information back to the server of the HTML document.
<form action="URL"> . . . </form>
Attributes of this tag are discussed in CGI programming.
Within one form many pieces of information can be collected and returned to the server.
  • Text entry fields, one line
  • Password fields
  • Scrollable text fields
  • Checkboxes (off/on toggle)
  • Radio buttons
  • Pop-up menus
  • Push buttons - submit and reset
Example begin form tag:
<form method=post action="http://newton.npac.syr.edu/ ???/post-query">
The form handler "post-query" is a standard program that accepts all the data and prints it out.

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 22 Content Fields of a Form: Text and Password Fields

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * Critical Information in IMAGE
Full HTML Index
HTML for sample text field
Type your name: <input type="text" name="username" value="nobody" size=20 maxlength=40>
What shows on the browser window is
Type your name: nobody
The typing box is of length 20 characters (default=20) and will scroll up to a max of 40 characters (default=unlimited). The value, size and maxlength fields are optional - "nobody" is the initial value in this case.
What is sent to the CGI program is the name and value pair: username=<whatever the user typed>
The password field is the same, except that whatever the user types is not shown, <input type="password" . . .>
The hidden field is the same, except that nothing shows on the browser, <input type="hidden" . . .>. This is a technique for one CGI program to pass data to another.

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 23 Content Fields of a Form: Radio Buttons and Checkboxes

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
A checkbox field has the form
Pepperoni <input type="checkbox" name="pepperoni">
If the user checks the box, then pepperoni=on is sent to the CGI program. Or you can add a value attribute such as value="ok", and then value=ok is sent.
Radio buttons are similar except that you typically put several of them with the same name field and the browser only allows one of them to be checked.
<input type="radio" name="topping" value="pepperoni"><br>
<input type="radio" name="topping" value="mushroom">
If the user checks mushroom, then topping=mushroom is sent to the CGI program.
Both fields allow an attribute checked, which makes the default value be on.
<input type="checkbox" name="pepperoni" checked>

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 24 Content Fields of a Form: Menus and Scrolled Lists, TextAreas

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
These are created using the select tag, followed by a number of options. The size attribute determines if a menu or list is displayed.
<select name="card" size=1>
<option selected> Master Card
<option> Visa
<option> Discover
</select>
A size of 1 produces a menu and a size of 2 or more produces a scrolled list.
Use a textarea to show a large typing area:
<textarea rows=10 cols=50 name="comments">
This is the default information.
</textarea>

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 25 Content Fields of a Form: Submit and Reset Buttons

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
Nearly all forms have both a submit and a reset button, one to send the information to the server and the other to reset all fields.
<input type="submit" value="submit the form">
<input type="reset" value="clear all fields">
The value text is printed on the buttons.
You may also have a button that consists of an image.

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 26 Example Form

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
This example asks for the name and email address, some demographics, and for feedback.
Name: <input text name="username" value="noname"><br>
Email: <input text size=30 name="usermail"><br>
Zipcode: <input text name="userzipcode"><p>
<select name="usersex">
<option> Male <option> Female </select><p>
Please send us your comments!<br>
<textarea name="usercomments" rows=6 cols=50> </textarea>
<input type="submit" value="send comments">
<input type="reset" value="clear form">
</form>
Before the end of the form, we will ask for all the information from one customer. (There is no way to tell if two different forms came from the same session.)

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 27 Clickable Maps

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
Allow users to click on areas of a map or picture to get more information on the subject represented there.
To define a map, get an image and find the pixel coordinates of the "hot spots" (link areas). xv is a handy program for this.
Each hotspot has a shape of circle, polygon, or rectangle. The rectangle is given by Upper Left corner and Lower Right corner pixel coordinates, the circle by Center and an edge-point, and the polygon by a sequence of points.
Example definition of an image map file (called usa.map) with two hot spots:
default default.html
rect /map/indiana.html 230,100 260,150
circle /map/rhodeisland.html 600,90 600,85
Put a link to an image map in your html document and use the ISMAP attribute in the <img> tag that refers to the actual image.
<a href="http://www.orc.com/map/usa.map">
<img src="map/usa.gif" ISMAP></a>

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 28 Formatting Tables

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
An html table (within <table> and </table>) consists of a number of rows, each of which has a number of cells. Formatting with tables on a Web page provides a good way to place and align images and text.
Attributes for the table tag
  • CELLSPACING=value - the amount of space between individual cells
  • CELLPADDING=value - the amount of space between the border of a cell and the contents of the cell
  • BORDER to specify there should be a line around the table and inbetween the cells, or BORDER=value to give the width of the border.
  • WIDTH=value|percent - allows you to describe the desired width in pixels or as a percentage of the document width.

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 29 What's Inside a Table

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
Within the table tags can be a caption tag and some number of row tags.
  • <caption> . . . </caption> Other html tags can be used inside these tags to format the caption text. The <caption> tag has an ALIGN=top|bottom attribute to say where to place the caption.
  • <tr> . . . </tr> Within each pair of row tags will be all the cell tags of that row. The <tr> tag can have ALIGN and VALIGN attributes as described below to specify allignment for all cells in that row.
Within the row tags are any number of cell and header tag pairs. If the rows of a table don't have the same number of cells, they will be padded with blank cells to the length of the longest row.
  • <td> . . . </td> Within these tags is the contents of an individual cell (table data). Other html tags can be used to to make text, images, links, etc.
  • <th> . . . </th> Header cells are just like data cells, except that the text is bold face and centered.
Attributes to align contents of cells
  • ALIGN=left|center|right
  • VALIGN=top|middle|bottom|baseline

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 30 Examples of a Table

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * Critical Information in IMAGE
Full HTML Index
<table>
<tr> <th colspan=2>Tekke Rugs </th> <th colspan=2> Bokhara Rugs </th></tr>
<tr> <td> <img src="tekke1.gif"></td><td><img src="tekke2.gif"></td>
  • <td> <img src="bok1.gif"></td><td><img src="bok2.gif"></td>
</tr>
. . .
</table>
For examples of every type of table, see http://home.netscape.com/assist/net_sites/table_sample.html

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 31 Frame Documents in Netscape 2.0 Browsers

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
Multiple, independently scrollable frames in a single browser screen. Each frame can have its own URL.
Frames can be used to place static objects within the window, such as banners, table of contents, control bars, copyright notices, etc.
Frames also provide the ability to view more than one information source, such as submitting a keyword for searching in one frame and viewing its results in another. Both can be on the screen at one time.
In an html frame document, the tags <frameset> . . . </frameset> replace the <body> tags of a normal html document. The frameset tag can have one of the attributes:
  • ROWS="rowheightvaluelist" where each value is either in pixels or a percent.
  • COLS="columnwidthlist", also is pixels or percents.
Within the frameset tags, only the tags, <frame>, <noframes>, and <frameset> . . . </frameset> (for nested frames) can appear.
  • The <noframes> tag pair can give a normal html body for browsers that don't have frames.

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 32 Formatting Frames

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * See also color IMAGE
Full HTML Index
Each frame can have attributes:
  • SRC="URL" - the contents of the frame
  • NAME="windowname" - This assigns a name to this frame. The contents of this frame (and others in the same screen) can use this name to display the results of links using the new target attribute to anchor tags:
  • <a href="URL" target="windowname"> . . . </a>
  • SCROLLING="yes|no|auto" - tells whether this frame will have a scrollbar or not.
  • NORESIZE - This flag restricts the user from resizing the browser window.
  • MARGINWIDTH=value and MARGINHEIGHT=value

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 33 Example of a Frame Document

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * Critical Information in IMAGE
Full HTML Index
<html>
<head>
<title>Web Techology class at Syracuse University </title>
</head>
<frameset rows="7%,93%">
  • <frame src="banner.html">
  • <frameset cols="25%,75%">
  • <frame src="tableofcontents.html" name="TOC">
  • <frame src="contents.html" name="contents">
  • </frameset>
</frameset>
</html>

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 34 Password Protection on HTML Documents

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * Critical Information in IMAGE
Full HTML Index
Many servers, including NCSA, use an Access Control File (ACF) to configure basic authorization for access to all web documents in a directory.
The global ACF is named access.conf in the server's configuration directory.
Any directory in the server's document space can have a local ACF named .htaccess. Here is the format of an NCSA ACF:

HELP! * GREY=local HTML version of LOCAL Foils prepared 10 Sept 1996

Foil 35 Example protection files

From Introduction to HTML--ECS400 fall 96 ECS400 Senior Undergraduate Course -- Fall Semester 96. * Critical Information in IMAGE
Full HTML Index
An example of a .htaccess file
The password file can be created with a program called htpasswd (which creates a file called .htpasswd) that is distributed with the server. The password file should not be kept in a publicly accessible directory.

Northeast Parallel Architectures Center, Syracuse University, npac@npac.syr.edu

If you have any comments about this server, send e-mail to webmaster@npac.syr.edu.

Page produced by wwwfoil on Wed Feb 19 1997