|
|
|
|
|
Welcome to the Introduction to WWW/HTML online class notes. This tutorial has been given to IBM Rochester.
As the information superhighway (Internet) glows exponentially over the years, customers of the superhighway demand a need for one tool, one program, one appli cation that will take it from being a much-hyped but difficult-to-use linking of com puters around the world to being a highly informative, highly usable database and communications tool. The spreadsheet was the killer app for PCs a long time ago, but so far the Net doesn't have one. Some have given a potential "killer app" status to a program called Mosaic, Netscape or Microsoft IE.
What the superhighway does have at this point is a killer concept called World Wide Web (WWW). The WWW provides the technology needed to offer a navigable, attractive interface for the Internet's vast sea of resources, in much the same way that the toolbar on a word processor screen obscures the intimidating codes that the program actually consists of. The most accurate terminology might be meta-interface-an interface that incorporates other interfaces. WWW is a concept, not a program, not a system, and not even a specific protocol. It is the concept that brings internet users together through different applications and interface to access infor mation from the internet.
Nowadays, advertisements and editorial content in many publications such as Newsweek, Time, The New York Time, and the Wall Street Journal now routinely use the Web's identifying scheme, the Universal Resource Locator, as a means for directing the user to further information. Small business, organizations, even US White House, and individuals all over the world also use the Web for communication, information, and interaction.
This intense interest in the Web is a result of the potential it offers for communication. Using the Web, individuals or organizations can instantaneously and continuously present hypermedia--text images, movies, and sound-to a GLOBAL audience. For Web developers, this information environment demands excellent, effective content development in order to rise above the information clutter. With so much information on the Web, only that which truly meets user needs well can survive and flourish.
HTML is a subset of the SGML, or Standard Generalized Markup Language. HTML is now the "standard" code used in the internet to make documents readable across a variety of platforms and software. HTML operates through a series of codes placed within an ASCII document. These codes are translated by a "World Wide Web Client" such as Mosaic, Netscape, OS2 WWW Explorer or MacWeb into specific kinds of formats to be displayed on the screen, and on which the user can act (for example, send a mail).
HTML is a glowing language, it stays around and more complex it is becoming. Please refer to Item 5 of this package, "A Beginner's Guide to HTML" for detail descriptions of HTML syntax.
HTML documents are plain-text (also known as ASCII) files that
can be created using any text editor (e.g., Emacs or vi on UNIX
machines; BBEdit on a Macintosh; Notepad on a Windows machine).
You can also use word-processing software if you remember to save
your document as "text only with line breaks."
Some WYSIWYG editors are available (e.g., HotMetal, which is available for several platforms or Adobe PageMill for Macintoshes). You may wish to try one of them after you learn some of the basics of HTML tagging. It is useful to know enough HTML to code a document before you determine the usefulness of a WYSIWYG editor.
If you haven't already selected your software, refer to an online
listing of HTML editors (organized by platform) to help you
in your search for appropriate software.
If you have access to a Web server at school or work, contact
your webmaster (the individual who maintains the
server) to s ee how you can get your files on the Web. If you do
not have access to a server at work or school, check to see if
your community operates a FreeNet, a community-based
network that provides free access to the Internet. Lacking a
FreeNet, you may need to contact a local Internet provider that
will post your files on a server for a fee. (Check your local
newspaper for advertise ments or with your Chamber of Commerce
for the names of companies.)
An element is a fundamental component of the structure of a text document. Some examples of elements are heads, tables, paragraphs, and lists. Think of it this way: you use HTML tags to mark the elements of a file for your browser. Elements can contain plain text, other elements, or both.
To denote the various elements in an HTML document, you use tags. HTML tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>). Tags are usually paired (e.g., <H1> and </H1>) to start and end the tag instruction. The end tag looks just like the start tag except a slash (/) precedes the text within the brackets.
Some elements may include an attribute, which is additional information that is included inside the start tag. For example, you can specify the alignment of images (top, middle, or bottom) by including the appropriate attribute with the image source HTML code.
NOTE: HTML is not case sensitive. <title> is equivalent to <TITLE> or <TiTlE>.
Not all tags are supported by all World Wide Web browsers. If
a browser does not support a tag, it (usually) just ignores it.
Every HTML document should contain certain standard HTML tags. Each document consists of head and body text. The head contains the title, and the body contains the actual text that is made up of paragraphs, lists, and other elements. Browsers expect specific information because they are programmed according to HTML and SGML specifications.
Required elements are shown in this sample bare-bones document:
<html>
<head>
<TITLE>A Simple HTML Example</TITLE>
</head>
<body>
<H1>HTML is Easy To Learn</H1>
<P>Welcome to the world of HTML.
This is the first paragraph. While short it is
still a paragraph!</P>
<P>And this is the second paragraph.</P>
</body>
</html>
The required elements are the <html>, <head>, <title>, and <body> tags (and their corresponding end tags). Because you should include these tags in each file, you might want to create a template file with them. (Some browsers will format your HTML file correctly even if these tags are not included. But some browsers won't! So make sure to include them.)
To see a copy of the file that your browser reads to generate the information in your current window, select View Source (or the equivalent) from the browser menu. The file contents, with all the HTML tags, are displayed in a new window.
This is an excellent way to see how HTML is used and to learn tips and constructs. Of course, the HTML might not be technically correct. Once you become familiar with HTML and check the many online and hard-copy references on the subject, you will learn to distinguish between "good" and "bad" HTML.
Remember that you can save a source file with the HTML codes and use it as a template for one of your Web pages or modify the format to suit your purposes.
With an valid userid, e.g. ibmjoeuser. Sign on as ibmjoeuser and do the following steps to create a homepage under IBM Rochester:
A list of files are available under "gump.watson.ibm.com(9.2.11.26)/pub/httpdos2/." The following is a sample list:
README 2 Kb Tue Apr 11 00:00:00 1995 code10.zip 452 Kb Tue Apr 11 00:00:00 1995 core 29 Kb Tue Oct 1 06:31:00 1996 misc/ Thu Jun 15 00:00:00 1995 Directory ncsadoc.zip 549 Kb Wed Mar 8 00:00:00 1995 patch10.zip 105 Kb Tue Apr 11 00:00:00 1995 src10.zip 91 Kb Tue Apr 11 00:00:00 1995 unzip.exe 90 Kb Fri Feb 17 00:00:00 1995
The following is the installation guide:
Quick Installation Guide
1. Copy the package file code10.zip to the root directory of your choice.
HPFS drive is much preferred, but it will also work on a FAT drive.
2. You must use PKZIP 204g compatible decompression program.
Do not use a DOS-mode archiver because HTTPD for OS/2 contains
long file names. InfoUnzip for OS/2 works best.
A copy of InfoUnzip for OS/2 can be found in the same place
you found this package.
3. Unzip the package file with the -d switch so that the correct
directory tree will be created.
unzip -d code10.zip
4. CD to httpd, and start the server.
httpd
5. Now start your favorite web browser, and off you go!
6. Optionally, you can install NCSA documentation online. Copy ncsadoc.zip
to the same root directory and issue unzip -d ncsadoc.zip.
When unzip asks if you want to replace an "index.html" file, reply yes.
7. If your document root is on a HPFS drive, you may want to turn
"FATTranslation" off in conf\srm.cf. You can just comment out the line.
Go to Richard's OS/2
Home Page for Instruction
Note: After installation, your home page will
be in c:\httpd\www\index.html
Setting Up an HTTP Server On An AS/400
<HTML>
<HEAD>
<TITLE> Welcome to AS400 Home Page! </TITLE>
</HEAD>
<BODY>
<H1 align=center>Hi.</H1>
</BODY>
</HTML>
Pass /* /QSYS.LIB/HTTP.LIB/HTDOCS.FILE/*
AlwaysWelcome On
AccessLog WWWAccess
ErrorLog WWWError
More hints:
ez2html: Converts datastream files into WWW documents What ez2html is Ez2html reads any datastream file (with styles and insets, created by EZ), or plain ASCII file, or source code, converts that input into HTML+ tag format, and outputs the result to stdout. "HTML+ tag format" is the markup used by documents on the World Wide Web. See the htmltext help for more details. Starting ez2html To convert a file to HTML+, invoke the following command: ez2html [-h] [-o dataobj] [infile] -h Displays usage help. -o dataobj Tells the converter which dataobject to use, in case the file extension is not mapped in /usr/andrew/lib/global.ezinit. See the ez-extensions help for more info. infile Name of file to read as input. If omitted, stdin will be used. Examples ez2html -o ctext <~/bin/myshell> ~/WWW/myshell.html Reads ~/bin/myshell (a shellscript), styles is as C code, and outputs the HTML+ markup version to ~/WWW/myshell.html. ez2html mytool.help > mytooldoc.html Reads mytool.help (a styled help file), converts the styles into HTML+ markup, and outputs the result to mytooldoc.html. Warnings ATK datastream files can have styles and multimedia insets that the HTML+ spec has no provisions for retaining. These styles and insets will be discarded, and omitted from the output. In other words, this may be a LOSSY conversion in some cases. Advice This conversion tool is intended primarily for use by a Web server. Ideally, you should LEAVE your existing documents in datastream format, and just let the SERVER convert them as necessary. If you are creating NEW documents to be made available on the World Wide Web, you should read the htmltext help for information on using EZ to create them.
1.1 Why the BM Utilities?
The DynaMIT project is a travel behaviour simulation written in C++, and
intended to be built upon by the author and others to perform various
experiments on travel behaviour. The framework must be maintainable and
documentation is an essential part of that.
1.1.2.4 The World-Wide Web
This supports collaborative working and hyperlinks in a way that is
extraordinarily easy for users to use. In addition, HTML is a markup
language which has been designed to be easy to parse and transform -
unlike LaTeX etc (see "LaTeX or a Common Paginating Program" in
topic 1.1.2.2).
Development of documentation in raw HTML is difficult, however -
especially the maintenance of documents in separate files, and ensuring
the integrity of hyperlinks. Also, despite the potential, there are
presently few good ways to print HTML documents - indeed, HTML's concept
of a document is scarcely appropriate for printing.
1.1.3 The BM Utilities Approach
The option that has been chosen to document the DynaMIT project, is to
write the documents in a language resembling IBM BookMaster**: a bmu
program is then used to convert these documents into HTML for on-line
viewing, or LaTeX for printing. Other formats can also be supported.
This approach allows full exploitation of the World-Wide Web, without any
of the disadvantages mentioned in "The World-Wide Web" in topic 1.1.2.4.
BookMaster is a markup language with as much purity as HTML - though its
most common implementation, using Script/VS**, is open to some abuse. bmu
supports a subset of BookMaster, and will only accept pure source
documents.
"User Guide" in topic 2.0 describes how the bmu program is invoked, the
differences between IBM BookMaster and bmu's language, and the
transformations used for the various output types supported.
2.1 Invoking bmu
2.1.1 Command-Line Syntax
You can invoke the bmu program with syntax like the following:
bmu fn<.ext>
fn filename of master input file
ext extension of master input file - default .scr
Options:
-f format
select output format: can be
html format for WWW HTML browsing - the default
latex format for LaTeX processing
-m mainfn
specify main file - mainfn.toc will be used as toc input
-od outdir
specify output directory - default current directory
where
fn<.ext>
is the file to be processed
The default extension is .scr. See "Files - Imbedding and Setup" in
topic 2.2.2 for more information on how bmu processes input files.
-f format
the output format, one of
html HTML - hypertext markup language - suitable for the
World-Wide Web. This is the default. See "HTML Format" in
topic 2.3.1 for information about how bmu converts into
HTML.
latex LaTeX source, suitable for formatting with LaTeX into a
printed document. See "LaTeX Format" in topic 2.3.2 for
information about how bmu converts into LaTeX.
-m mainfn
the file being processed by this run of bmu is really a part of the
document whose main file is mainfn.scr in the same directory. Do not
specify a path or extension for the main file. The file mainfn.toc
will be read in for resolving cross-references, and will not be
written after processing is complete. Intended for use with the
.setup control word. See "Files - Imbedding and Setup" in
topic 2.2.2.
-od outdir
the directory to contain output files
The default is the current directory; if you specify this directory in
a relative way, it is relative to the current directory.
bmu works by reading the .xrf file, if it exists, then by processing the
document, and then by writing the .xrf file (if necessary). It only does
a single pass through the document. If you want to be sure that
cross-references and table-of-contents entries are correct, you must run
bmu twice. The Script/VS twopass keyword is not supported.
Most Web browsers can display inline images (that is, images next to text) that are in X Bitmap (XBM), GIF, or JPEG format. Other image formats are being incorporated into Web browsers [e.g., the Portable Network Graphic (PNG) format]. Each image takes time to process and slows down the initial display of a document. Carefully select your images and the number of images in a document.
To include an inline image, enter:
<IMG SRC=ImageName>
where ImageName is the URL of the image file.
The syntax for <IMG SRC> URLs is identical
to that used in an anchor HREF. If the image file is
a GIF file, then the filename part of ImageName must
end with .gif. Filenames of X Bitmap images must end
with .xbm; JPEG image files must end with .jpg
or .jpeg; and Portable Network Graphic files must
end with .png.
You should include two other attributes on <IMG> tags to tell your browser the size of the images it is downloading with the text. The HEIGHT and WIDTH attributes let your browser set aside the appropriate space (in pixels) for the images as it downloads the rest of the file. (Get the pixel size from your image-processing software, such as Adobe Photoshop.)
For example, to include a self portrait image in a file along with the portrait's dimensions, enter:
<IMG SRC=SelfPortrait.gif HEIGHT=100 WIDTH=65>
NOTE: Some browsers use the HEIGHT
and WIDTH attributes to stretch or shrink an image
to fit into the allotted space when the image does not exactly
match the attribute numbers. Not all browser developers think
stretching/shrinking is a good idea. So don't plan on your
readers having access to this feature. Check your dimensions and
use the correct ones.
You have some flexibility when displaying images. You can have images separated from text and aligned to the left or right or centered. Or you can have an image aligned with text. Try several possibilities to see how your information looks best.
Aligning Text with an Image
By default
the bottom of an image is aligned with the following text, as
shown in this paragraph. You can align images to the top or
center of a paragraph using the ALIGN= attributes TOP
and CENTER.
This text is aligned with the top of the image (<IMG
SRC = "5.hkbut.gif" ALIGN=TOP>). Notice how
the browser aligns only one line and then jumps to the bottom of
the image for the rest of the text.
And this text is centered on the image (<IMG
SRC = "5.hkbut.gif" ALIGN=CENTER>). Again,
only one line of text is centered; the rest is below the image.
Images without Text
To display an image without any associated text (e.g., your
organization's logo), make it a separate paragraph. Use the
paragraph ALIGN= attribute to center the image or
adjust it to the right side of the window as shown below:
<p ALIGN=CENTER> <IMG SRC = "5.hkbut.gif"> </p>
which results in:
The image is centered; this paragraph starts below it and left justified.
Some World Wide Web browsers--primarily those that run on VT100 terminals--cannot display images. Some users turn off image loading even if their software can display images (especially if they are using a modem or have a slow connection). HTML provides a mechanism to tell readers what they are missing on your pages.
The ALT attribute lets you specify text to be displayed instead of an image. For example:
<IMG SRC="UpArrow.gif" ALT="Up">
where UpArrow.gif is the picture of an upward pointing arrow. With graphics-capable viewers that have image-loading turned on, you see the up arrow graphic. With a VT100 browser or if image-loading is turned off, the word Up is shown in your window.
You should try to include alternate text for each image you
use in your document, which is a courtesy for your readers.
Newer versions of Web browsers can load an image and use it as a background when displaying a page. Some people like background images and some don't. In general, if you want to include a background, make sure your text can be read easily when displayed on top of the image.
Background images can be a texture (linen finished paper, for example) or an image of an object (a logo possibly). You create the background image as you do any image.
However you only have to create a small piece of the image. Using a feature called tiling, a browser takes the image and repeats it across and down to fill your browser window. In sum you generate one image, and the browser replicates it enough times to fill your window. This action is automatic when you use the background tag shown below.
The tag to include a background image is included in the <BODY> statement as an attribute:
<BODY BACKGROUND="filename.gif">
By default browsers display text in black on a gray background. However, you can change both elements if you want. Some HTML authors select a background color and coordinate it with a change in the color of the text.
Always preview changes like this to make sure your pages are readable. (For example, many people find red text on a black background difficult to read!)
You change the color of text, links, visited links, and active links using attributes of the <BODY> tag. For example, enter:
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">
This creates a window with a black background (BGCOLOR), white text (TEXT), and silvery hyperlinks (LINK).
The six-digit number and letter combinations represent colors by giving their RGB (red, green, blue) value. The six digits are actually three two-digit numbers in sequence, representing the amount of red, green, or blue as a hexadecimal value in the range 00-FF. For example, 000000 is black (no color at all), FF0000 is bright red, and FFFFFF is white (fully saturated with all three colors). These number and letter combinations are cryptic. Fortunately an online resource is available to help you track down the combinations that map to specific colors:
You may want to have an image open as a separate document when a user activates a link on either a word or a smaller, inline version of the image included in your document. This is called an external image, and it is useful if you do not wish to slow down the loading of the main document with large inline images.
To include a reference to an external image, enter:
<A HREF="MyImage.gif">link anchor</A>
You can also use a smaller image as a link to a larger image. Enter:
<A HREF="LargerImage.gif"><IMG SRC="SmallImage.gif"></A>
The reader sees the SmallImage.gif image and clicks on it to open the LargerImage.gif file.
Use the same syntax for links to external animations and sounds. The only difference is the file extension of the linked file. For example,
<A HREF="AdamsRib.mov">link anchor</A>
specifies a link to a QuickTime movie. Some common file types and their extensions are:
| File Type | Extension |
|---|---|
| plain text | .txt |
| HTML document | .html |
| GIF image | .gif |
| TIFF image | .tiff |
| X Bitmap image | .xbm |
| JPEG image | .jpg or .jpeg |
| PostScript file | .ps |
| AIFF sound file | .aiff |
| AU sound file | .au |
| WAV sound file | .wav |
| QuickTime movie | .mov |
| MPEG movie | .mpeg or .mpg |
Keep in mind your intended audience and their access to
software. Most UNIX workstations, for instance, cannot view
QuickTime movies.
Frames allow a single web browser window to be divided into several different areas. Each area can display a different web page. Frames thus add flexibility to a web site. For examples, they allow different background colors or images to be used for different parts of the same window, or a table of contents to be available at all times while the user scrolls through the main body of a document. It's not hard to come up with other creative applications for them.
The HTML tags that break a browser window up into several frames are similar to the tags that define lists. Using them is fairly straightforward. First, define a page that gives the frame layout. Second, specify a web page to put in each frame.
A page that gives a frame layout does not have a BODY; instead, it has a FRAMESET and individual FRAMEs. Every time you use the FRAMESET tag, you break the window into columns or rows. Each column or row may then be used as a frame, or broken up into smaller frames by using another FRAMESET tag. Like the <BODY> tag, the <FRAMESET> must be ended with the </FRAMESET> tag.
Here's how FRAMESET works. Use it in place of the BODY tag in a web page. In the tag, specify whether you want to divide the window into rows or columns, and give a list of sizes for the rows or columns. The tag itself looks like this:
<FRAMESET TYPE = "size1, size2, ....">
In place of TYPE, insert ROWS to divide the window into horizontal frames, or insert COLS to divide the window into vertical frames. In place of each size, provide a size for a frame. This can be one of three types:
We'll discuss these size options more later. For now, let's focus on frames given as a percent of the total window size.
After you have set up the layout of the frames, you need to tell the browser where to find the web page that goes into each one. This is done using the <FRAME> tag. The tag works as follows:
<FRAME SRC = "URL">
In place of URL, give the URL of a page, image, newsgroup, telnet session, or whatever you want.
Let's look at an example. I've written two simple web pages, called wpage1.html and wpage2.html, that have a picture and a link back to this spot. I'll put each one in a frame. The example gives the HTML source of the page that defines the frame layout. This example is designed to show the basic use of <FRAMESET> and <FRAME>.
Example 1: Two frames
<HTML>
<HEAD>
<TITLE>Example 1</TITLE>
</HEAD>
<FRAMESET COLS = "50%, 50%">
<FRAME SRC = "wpage1.html">
<FRAME SRC = "wpage2.html">
</FRAMESET>
</HTML>
Nested Frames
Frames may also be nested. Once you have divided the window into frames, you may then divide each frame into smaller frames. This is again accomplished by using the <FRAMESET> tag, and is illustrated in Example 2. In this example, a single page is divided into two column frames, and then the second column is further split into two row frames. I'll recycle my wpage1.html and wpage2.html files for two of the frames, and put an image in the third.
Example 2: Nested frames
<HTML>
<HEAD>
<TITLE>Example 2</TITLE>
</HEAD>
<FRAMESET COLS = "50%, 50%">
<FRAME SRC = "wlogo.gif"> - This is
the first frame
<FRAMESET ROWS = "50%, 50%"> - The
second frame is itself a set of two more frames
<FRAME SRC = "wpage1.html">
<FRAME SRC = "wpage2.html">
</FRAMESET>
</FRAMESET>
</HTML>
As noted in the introduction, not all browsers support frames.
You should make provisions for those people. The FRAMESET
tag has a complementary NOFRAMES tag. A browser that
does support frames will ignore everything between <NOFRAMES>
and </NOFRAMES>, and browsers in general ignore
tags that they do not recognize, so you can put the HTML
definition of a standard web page between the two for other
viewers to use.
Let's look at a brief example of this. To see the NOFRAMES section, you will have to use a non-frames browser. Note that the NOFRAMES section must be within the FRAMESET section.
Example 3: HTML for non-frame browsers
<HTML>
<HEAD>
<TITLE>Example 3</TITLE>
</HEAD>
<FRAMESET COLS = "50%, 50%">
<NOFRAMES>
<BODY>
If you can see this, your browser does not support
frames.<P>
Some new links can be added to here </BODY>
</NOFRAMES>
<FRAME SRC = "wpage1.html">
<FRAME SRC = "wpage2.html">
</FRAMESET>
</HTML>
More on sizing:
As described earlier, each frame is given a size in one of three ways. First, it may be given set number of pixels. Second, it may be given a percent of the remaining space. Third, it may be given a share of the leftover space in the window. Let's look at each one in a bit more detail.
Pixel sizes: All frames that ask for a set number of pixels are given those sizes, if possible. If not, the browser will override the specifications so that the frames fit into/fill the window. These sizes are allocated first.
Percent sizes: Next, all of the frames that ask for a percent of the available window are given their respective percentages of the space that is left. If the total of the percent frames is greater than 100, all numbers are scaled back so that they total 100. For example, if the sizes "40%, 80%, 80%" are requested, Netscape will divide all numbers by 2 so that they total 100. The first frame will get 20% of the available space, etc. If the sizes total less than 100, and no relative-sized frames are present, the numbers will be scaled up in a similar manner so that they total 100.
Relative sizes: Last, relative frames are given the remaining space. If the pixel-sized frames do not take all of the available space, and the percent-sized frames do not ask for 100 percent (or more) of the available space, the rest is given to the relative-sized frames. Each * counts as one share of this remaining space. If there is one frame, with size *, it gets all of the remaining space. Two frames sized * and * share it evenly. If two frames are sized * and 2*, the second frame gets twice as much of the remaining space as the first.
Other modifications:
The individual frames may be modified in several ways. First, scrollbars may be added or removed. Normally this is done automatically; if a web page doesn't fit into its frame, Netscape adds scrollbars. When the frames are defined, the author may choose to force scrollbars to be present at all times, or prevent them from ever appearing, by using the SCROLLING modifier to the FRAME tag, as follows:
<FRAME SCROLLING = "YES" SRC = "wpage1.html">
If this tag were used in one of the previous examples, the frame containing the web page wpage1.html would always have scrollbars. Replacing the "YES" with "NO" would prevent scrollbars from ever appearing in the frame, regardless of how small the user resized the window.
Viewers may also be prevented from resizing the frames within the window (but not the window itself) by adding the NORESIZE modifier to the FRAME tag. Note that this fixes all edges of the frame, so it will also prevent some parts of the adjacent frames from being manually resized. To use this modifier, just add NORESIZE to the FRAME tag in the following manner:
<FRAME NORESIZE SRC = "wpage1.html">
The frames may also be named, by using the NAME modifier to the FRAME tag. The syntax is very simple; to create a frame named "frame1", use the following tag:
<FRAME NAME = "frame1" SRC = "wpage1.html">
Names become useful when you begin to use TARGETs in your documents.
Targets are the complement to links. A link tells the browser what file to display. A target tells the browser where to display it. You can use targets to specify a frame in a current window, for example, or call up a new window when a link is selected.
There are two primary ways to specify the target of a link. First, a target may be given for an individual link. Second, a default target may be specified. Let's look at each of these in turn.
Targets for individual links: The TARGET modifier is added to the <A HREF> tag in the following manner:
<A HREF = "url" TARGET = "targetname">Hit me</A>
Here url is the URL of the new web page or file. targetname is the name of the target. If it matches the name of an existing frame, whatever is stored at URL will be displayed in that frame. If the targetname does not match any frame names, a new window will be created.
Default target for all links: The BASE tag is used at the beginning of a document to specify a target for all links that do not have a target already given in the manner shown above. The syntax is very simple, but note that this tag belongs in the header section of your HTML document:
<HEAD>
<BASE TARGET = "maintarget">
</HEAD>
If no TARGET is given in a particular link, the link will behave as if TARGET = "maintarget" had been added to it.
Time for an example. I've created another page with three frames, as in Example 2. On the left are two links. One link specifies a frame as a target. The other does not; it thus uses the BASE target.
Example 4: Default and specific targets
<HTML>
<HEAD>
<TITLE>Example 4</TITLE>
<BASE TARGET = "frame3">
</HEAD>
<FRAMESET COLS = "50%, 50%">
<FRAME SRC = "frame4a.html">
<FRAMESET ROWS = "50%, 50%">
<FRAME NAME = "frame2" SRC =
"blank.html">
<FRAME NAME = "frame3" SRC =
"blank.html">
</FRAMESET>
</FRAMESET>
</HTML>
The name of targets must begin with a number or letter. There are four special target names that may always be used. They all begin with the underscore ( _ ) character. The syntax is the same: TARGET = "specialname", where specialname is one of the following four special target names:
_blank - causes the link to be loaded into a new blank window.
_self - causes the link to be loaded into the same window or frame in which it was clicked on by the user. This comes in handy when a default target was specified using the BASE tag.
_parent - causes the link to load in the parent document. This is useful if more than one window has been created.
_top - causes the link to load in the full window. This is useful for wiping out a frameset without creating a new window.
Before HTML tags for tables were finalized, authors had to carefully format their tabular information within <PRE> tags, counting spaces and previewing their output. Tables are very useful for presentation of tabular information as well as a boon to creative HTML authors who use the table tags to present their regular Web pages. (Check out the NCSA Relativity Group's pages for an excellent, award-winning example.)
Think of your tabular information in light of the coding explained below. A table has heads where you explain what the columns/rows include, rows for information, cells for each item. In the following table, the first column contains the header information, each row explains an HTML table tag, and each cell contains a paired tag or an explanation of the tag's function.
Table Elements |
|
|---|---|
| Element | Description |
| <TABLE> ... </TABLE> | defines a table in HTML. If the BORDER attribute is present, your browser displays the table with a border. |
| <CAPTION> ... </CAPTION> | defines the caption for the title of the table. The
default position of the title is centered at the top of
the table. The attribute ALIGN=BOTTOM can be
used to position the caption below the table. NOTE: Any kind of markup tag can be used in the caption. |
| <TR> ... </TR> | specifies a table row within a table. You may define default attributes for the entire row: ALIGN (LEFT, CENTER, RIGHT) and/or VALIGN (TOP, MIDDLE, BOTTOM). See Table Attributes at the end of this table for more information. |
| <TH> ... </TH> | defines a table header cell. By default the text in this cell is bold and centered. Table header cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information. |
| <TD> ... </TD> | defines a table data cell. By default the text in this cell is aligned left and centered vertically. Table data cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information. |
Table Attributes |
|
|---|---|
| NOTE: Attributes defined within <TH> ... </TH> or <TD> ... </TD> cells override the default alignment set in a <TR> ... </TR>. | |
| Attribute | Description |
|
|
The general format of a table looks like this:
<TABLE> <== start of table definition <CAPTION> caption contents </CAPTION> <== caption definition <TR> <== start of first row definition <TH> cell contents </TH> <== first cell in row 1 (a head)
<TH> cell contents </TH> <== last cell in row 1 (a head) </TR> <== end of first row definition <TR> <== start of second row definition <TD> cell contents </TD> <== first cell in row 2
<TD> cell contents </TD> <== last cell in row 2 </TR> <== end of second row definition
<TR> <== start of last row definition <TD> cell contents </TD> <== first cell in last row ... <TD> cell contents </TD> <== last cell in last row </TR> <== end of last row definition </TABLE> <== end of table definition The <TABLE> and </TABLE> tags must surround the entire table definition. The first item inside the table is the CAPTION, which is optional. Then you can have any number of rows defined by the <TR> and </TR> tags. Within a row you can have any number of cells defined by the <TD>...</TD> or <TH>...</TH> tags. Each row of a table is, essentially, formatted independently of the rows above and below it. This lets you easily display tables like the one above with a single cell, such as Table Attributes, spanning columns of the table.
Some HTML authors use tables to present nontabular information. For example, because links can be included in table cells, some authors use a table with no borders to create "one" image from separate images. Browsers that can display tables properly show the various images seamlessly, making the created image seem like an image map (one image with hyperlinked quadrants).
Using table borders with images can create an impressive
display as well. Experiment and see what you like.
You have certainly seen imagemaps on the web somewhere. An imagemap is an image that is divided (invisibly) into different areas. Clicking on each area sends the browser to a different web site. A standard imagemap works by using a cgi program on your web server to assign URLs to the different areas. While this has the advantage that it will work with all graphical browsers, it also involves extra communication with the server, which can take a little bit of time.
A simpler method is to have the browser itself look at where the user clicked, and assign the URL itself. This is where the term "client-side" comes from - the browser does the work of operating the imagemap. As with all Netscape tags (actually this one was developed by Spyglass), remember that an imagemap created in the manner I describe here will not work for many people, so you should provide a text alternative as well.
To create a client-side imagemap, you need only two things: an image, and a list of regions on the image and the URL that you want to assign to each region.
First, the image. Since it will be displayed by the browser, it should be in either XBM, GIF, or JPEG format. In this example I'll use a GIF file called "clientimage.GIF". You will also need to know the size, in pixels, of the image. For this example, clientimage.GIF is 218 pixels wide and 74 pixels high.
Second, the map information. This is the list of regions and the URLs that go with them. The actual HTML that makes up a map is pretty straightforward. It is contained between the <MAP> and </MAP> tags. To begin, you need to assign a name to your map. A good system is to use the same name that you use for your image, and replace the extension with ".map".
You then describe the different areas by giving the shape and the coordinates. The only shape that is supported in the same way by Netscape Navigator and Spyglass Mosaic is the rectangle. To define a rectangular area, use the AREA tag, like this:
<AREA SHAPE = "RECT" COORDS = "xupleft, yupleft, xloright, yloright" HREF = "URL">
The italicized items must be customized for your page. xupleft is the number of pixels between the left edge of the image and the left edge of the rectangular area, and yupleft is the number of pixels between the top of the image and the top of the rectangular area. That is how pixels are generally counted; they start from the upper left corner of the image. xloright is then the number of pixels between the left edge of the image and the right edge of the rectangular area, and yloright is the number of pixels between the top of the image and the bottom of the rectangular area. URL is the URL of what you want to associate with the rectangular area; this may be either a relative or an absolute link, just like in a standard <A HREF> tag.
Let's take a look at how this works.
Example 6: A client-side imagemap
<IMG SRC = "clientimage.gif" USEMAP = "#clientimage.map">
<MAP NAME = "clientimage.map">
<AREA SHAPE = "RECT" COORDS = "0, 0, 109,
74" HREF = "#T1">
<AREA SHAPE = "RECT" COORDS = "110, 0, 218,
74" HREF = "#T9">
</MAP>
Implementation of client-side imagemaps will spread to more browsers, but unfortunately it looks like it will be different on each - already Spyglass Mosaic, Netscape Navigator, and Microsoft's Internet Explorer do some things differently. The above should work on all three browsers. However, you may want to have the same imagemap handled on the client-side by browsers with that capability, and on the server-side (the standard method) for other graphical browsers. This is possible, as shown in the next example.
To begin, set up your imagemap in the standard fashion. Then define a MAP section that gives the same links and regions. To set up the equivalent of the default URL, make the final entry in the MAP section a region that covers the entire image, and assign the default URL to it. Then, combine the A HREF and ISMAP tags used for standard imagemaps with the USEMAP for client-side imagemaps, as shown in the next example.
The FONT tag, introduced with versions 1.x of Netscape Navigator, can also be used to change the color of the enclosed text, when used with version 2.x. The color must be specified using the same hexadecimal RGB notation used for defining background colors (see the 1.x Netscape tutorial page). It is pretty simple, as shown below.
Example 8: Changing font color
The <FONT COLOR = "#ff0000">color of your text</FONT> may be changed.
The color of your text may be changed.
Demo with Macro.
<HEAD>
<SCRIPT>
<!-- Beginning of JavaScript Applet -------------------
function scrollit_r2l(seed)
{
var m1 = " Introduction to WWW/HTML ";
var m2 = " 10/17/96 from 11:30am-12:30pm in the 003-Auditorium ";
var m3 = " Page and Materials Still in Development ";
var msg=m1+m2+m3;
var out = " ";
var c = 1;
if (seed > 100) {
seed--;
var cmd="scrollit_r2l(" + seed + ")";
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 100 && seed > 0) {
for (c=0 ; c < seed ; c++) {
out+=" ";
}
out+=msg;
seed--;
var cmd="scrollit_r2l(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 0) {
if (-seed > msg.length) {
out+=msg.substring(-seed,msg.length);
seed--;
var cmd="scrollit_r2l(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else {
window.status=" ";
timerTwo=window.setTimeout("scrollit_r2l(100)",75);
}
}
}
// -- End of JavaScript code -------------- -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#FFFF00" VLINK="#00FF00" ALINK="#FF0000" onLoad="timerONE=window.setTimeout('scrollit_r2l(100)',500);">
Copyright 1996-2001 OpenLoop Computing. All rights reserved.