Presentation covering web 6, web7 and web 9 - topic LINKS and COLORS

Speaker Notes

Slide 1:

These notes will give a brief explanation of Web 6, Web 7 and Web 9.

Slide 2:

On this slide we can see the use of color. For more explanation of color you should go to the links on color that I have provided at my site. A brief explanation will be included in this show.

In the <BODY command, I can make default settings that will apply to the whole page. In this example, I have inserted a background color of FFFFEE which will produce a very light beige as a background for the entire page. To do this I use:

<BODY BGCOLOR=#FFFFEE>.

Other settings can also be made in the BODY statement. For example, I could have set up a default color for the TEXT, a default color for the LINKs to another page etc. This will be shown again in another page.

Slide 3:

The color for particular words within your page can be done using the FONT command. For example:

<FONT COLOR=#FF0000>THIS IS RED</FONT>

The FONT command allows for a COLOR to be specified. All of the words between the <FONT and the </FONT> which closes the font will be changed to that color. In this example, the words THIS IS RED will be shown in red.

Slide 4:

This shows some of the colors that can be created. The codes are hexidecimal which means that each individual character can range from 0 to F. Notice that the intensity and the shade can both be changed my manipulating the color codes.

Excellent charts are available on the web or experiment yourself - that's what I did!

The next slide will show the results of this color experiment.

Slide 5:

This shows the results of the color code created in the previous slide. Particularly notice the differences in intensity with higher hexadecimal numbers.

Remember also that the way colors show to someone accessing your page has a lot to do with their local settings.

Slide 6:

FONT can contain attributes about SIZE, COLOR and FACE as shown on this slide. With these settings you can change the look of your site to meet your design goals.

Slide 7:

This slide illustrates horizontal lines which are done with <HR>. You can change the look of the line by setting alignment, size and using noshade to make the line solid.

I have found that width expressed in percentages translates better to the web where your screen will be shown on a variety of user computers.

Slide 8:

This shows the first part of this page. You can see the impact of the FONT command.

Slide 9:

This slide shows the results of the variety of horizontal line settings illustrated in web6.html.

Slide 10:

This slide the default settings in BODY. They will control the background color, the text color and the color of the links. Notice that I am using both hexadecimal color codes for background and the word codes for the links. The standard colors can be expressed with words as shown here.

This page shows how to link to another page.

<A HREF="web7a.html">Link to web7a</A>

The reference here is to web7a.html which is stored in the same directory as the current page. If the page was stored in a different directory, a more complete path would be required. (See notes in a later slide.)

Slide 11:

This shows the words Link to web7a which will be clicked on to move to the new page. The color is shown in RED because of the settings I did on LINK within the <BODY.

Slide 12:

This is the page called web7a.html that I linked to in the previous slide.

Again notice the background and text settings within the BODY command.

This page also includes a branch to top. Notice that top has been named using the NAME command and linked to using the HREF.

Technically, top does not have to be named - it is a usually interpreted as a default, but to be sure I have done the setting.

Slide 13:

This is the page called web7a.html that web7.html links to.

The Go to the top of the page is the link to the top of this page described in the previous slide.

The font is green because of the text setting within the BODY command.

Slide 14:

When I link to another page, I must give the information that will be needed to locate that page. If the page is in the directory that contains the current page, then I simply give the page name. If the page is located anywhere else, I need to provide the path needed to locate the page.

The next set of pages illustrate these points.

Slide 15:

Note the NAME entry points that I have set up on this page. At another point in the page I will use the HREF to branch or move up to these entry points.

In this example the words FIRST or SECOND will actually appear on the pages to show the entry points. If I did not use these names, I would establish a blind entry point. The entry point would still work but there would be no designation showing where the entry would be made. Because I have enclosed the words FIRST and SECOND in H2 headings, the names will appear in a large font.

Slide 16:

This slide illustrates two links:

<A HREF="web9a.html"Link to web9a</A> links to another page that is located in the same directory as the current page web9.html.

<A HREF="#first">Link to the first point</A> links to a NAME entry point on this page. Note the # to indicate a link within the page.

On the previous slide, I defined the entry point first with the following code:

<A NAME="first"><H2>FIRST</H2></A>

Slide 17:

This slide discusses linking to a particular spot within a page. The entry points on this page, FIRST, SECOND, THIRD can be refered to on another page.

This will be illustrated in web9a.html

Slide 18:

FIRST and SECOND are the names given to the entry points that I set up with NAME.

The Link to web9a is the link that I established to page web9a.html using the HREF.

Slide 19:

This finishes web9.html.

Slide 20:

On this page, I link back to web9.html, but instead of going in at the top I want to go into the location designated as SECOND. To do this, I link to the page and a place within the page that was defined using NAME.

<A HREF="web9.html#second">This is a link to web9 and the area labeled second</A>

Not that when you follow this link the address including the #second will appear in the URL.

www.erols.com/pgrocer/Cis44/HTML/web9.html#second

Slide 21:

This shows the screen that will allow me to link back to web9.html and come in at the entry point SECOND.