IST129 - Ch6: Document Layout and Ch7: Links and Webs

IST129 - Ch6: Document Layout

Netscape proprietary tags:

Following tags are propietary to Netscape. Their use is discouraged.

<spacer> - This tag is used to provide white space around and between text. This example puts space (in the form of pixels) both horizontaly and vertically between characters:

This example shows you how to block out characters (useless if you ask me):
<center> 1 <br> 2 <spacer type=block width=50 height=50 align=middle> 3 <br> 4 </center>

1
2 3
4

<multicol> - This tag allows you to create multi-column layouts on your web pages. Here is an example:

IST129 - Ch7 Links and Webs

This chapter is rather long and deals with various URL's including WWW URL's (http://), FTP for file transfer protocol (ftp://), newsgroups (news://), straight text files (file://), and javascript execution (javascript://). Additionaly, the anchor tag, <a>, is introduced formally.

External links:

The anchor tag allows you to link your web pages to other web pages. When you link to other web pages (on your site or someone else's site), the link is said to be external.

Linking to other pages on your WWW site (or another WWW site) is purely a matter of WWW site design:

Should I replicate WWW content on my site or link to pages on another WWW site where content already exists?
If I link to content on another WWW site, do I need the permission of the site owner ?
How many pages should my WWW site have?
- How many topics and subtopics does my site cover?
- How much volume of content do I provide?
- Do I provide so much information on a topic that it is tedious to scroll through it?
- Would it be better to break up my content into smaller, bite-sized pieces (more pages)?
What sort of hierarchy should my WWW site have to allow easy navigation between pages?

External links are pretty easy. Assuming that this file is called page1.htm, here is a link to display page2.htm:

<a href="page2.htm"> Click here for page 2 </a>

The user sees Click here for page 2. When they click, the next page that displays is page2.htm as shown on the href="page2.htm" attribute.

The preceding example illustrates a relative reference in that you do not explicitly mention that page2.htm exists on a specific web site. The browser assumes that page2.htm exists on the last WWW site accessed. That is, note that the browser retains the site URL even as you page through a site and the HTML web page name changes.

An example of an absolute reference (or fully qualified file name) would be:

<a href=" http://guitarzan.homepage.com/tncc/page2.htm "> Click here for page 2 </a>

Now that you know how to link pages to one another, you must confront the issue of site navigation. This issue deals with how users will find their way around your site and back again.

Some sites offer site maps, [Back] buttons, and Frame navigation bars

Internal links:

The anchor tags also allows you to link to various topics within the same web page. The book refers to this kind of link as a fragment. I refer to this type of link as an internal link. The book correctly refers to internal liks as the programming equivalent of a GOTO statements.

Here are some examples of internal links:bbbb

WWW URL
FTP URL
Javascript URL

Internal links are fairly simple, too. Here are the 3 preceding internal links:

<a href="#WWW">WWW URL</a> <a href="#FTP">FTP URL</a> <a href="#JAVASCRIPT">Javascript URL</a>

Note the # symbol. The # symbol means one thing: ... the current page. In one of the Javascript URL samples below, it means stay on the current page. In the preceding internal links, it means that to link to another section of the current page.

In addition to specifying the anchor tag with the HREF="#..." attribute, you must also specify the section of the web page to jump to. To do that, you must use the anchor tag with the NAME="..." attribute as shown:

<a name="WWW"></a>

Please note that you do not use the # symbol when specifying the NAME.

Use internal links when it just does not make sense to create another HTML file. That is, use internal links when the volume of data is small enough to reside in the same file, yet the number of topics demands some sort of division.

Internal links are used for alphabetical listings like the following that simply take you to phone listings within the same HTML file:

A B C

Do not use internal link if it makes an HTML file especially large and unwieldy for the user to naviagte or for you to maintain. For example, this HTML file is becoming too large to easily maintain.

WWW URL:

(external link)... Click here for Microsoft's WWW site is actually:

<a href="http://www.microsoft.com"> Click here for Microsoft's WWW site </a>

FTP URL:

(external link)... Click here for Microsoft's FTP site is actually:

<a href="ftp://ftp.microsoft.com"> Click here for Microsoft's FTP site </a>

JAVASCRIPT URL:

Pop up window with text:
<a href="javascript:window.alert('Hi mom')">click here</a>
click here

Pop up window with this HTML document displayed and stay on this window [at approximately this same spot] (note the use of the onClick event attribute):
<A HREF="#NOWHERE" onClick="window.open('htmlch67.htm', 'htmlWnd', 'width=370,height=240,status=1')">click here</A>
click here for pop up window

Pop up window with this HTML document displayed and do not stay on this window (note the lack of use of the onClick attribute):
<A HREF="javascript:window.open('htmlch67.htm', 'htmlWnd', 'width=370,height=240,status=1')">click here for pop up window</A>
click here for popup window

Put a message on the status bar at the bottom (put mouse cursor on the picture):
<a href="#NOWHERE" onMouseOver="window.status='A picture of a club';return true"> <img src="club.gif" alt="Tooltip: club.gif"> </a>

Maps Revisited:

Maps are described in more detail in chapter 7. New stuff introduced includes:

shape attribute - shape=poly | shape=circle | shape=rect
When shape=poly, you may use the coords attribute to specify many coordinates for irregular shaped sections of an image.

use maps to carve up images and use the various URL's introduced

Searchable Documents:

The book discusses the use of the <isindex> tag as an aid to search engines to allow your documents to be searched by keyword.

What the book does not stress strongly enough is that searching of HTML documents requires server side programming in PERL, C, or JAVA which is well beyond the scope of this course. Therefore, I leave the reading of this section of the book to you.

<base> tag:

The <base> tag allows you to specify the starting directory that the browser is to use whenever it encounters your use of relative URLs.

The concept assumes that you are familiar with sub-directory hierarchies and that, furthermore, you have a number of sub-directories on your WWW site that hold different kinds of files.

With the <base> tag, you specify the start directory to use for all relative URL references, even if that directory is different than the directory that the currently displayed page is found.

An example follows:

<html> <head> <title>Yadda, yadda, yadda...</title> <base href="/docs/"> </head> ... </html>

META tags:

META tags are used for internal documentation and possibly document automation.

META tags are tags that provide data about tags. That is, META tags provide internal documentation (the user does not see it) about who, what, and when created/modified the HTML.

The <meta> tag has 2 attributes:

name - user specified text string that indicates the purpose of the tag. Common names used are: "keywords" and "Author".
The "keywords" name is used to tell search engines which words to index an HTML page by:
<meta name="keywords" content="guitar, jazz, music">

content - user specified text string to indicate the content that is to be associated with the "name=" attribute:
<meta name="keywords" content="guitar, jazz, music">

There are few rules governing what text strings to use. Common usage of strings like "keywords" is governed by convention, not standards.