explanation of web 6, web 7 and web 9 at my site please be sure to bring up the speaker notes for...

Explanation of Web 6, Web 7 and Web 9 at my site

Please be sure to bring up the speaker notes for the explanation

Intro - Web 6, Web 7 and Web 9

Intro - Web 6, Web 7 and Web 9

<HTML><HEAD><TITLE>And...</TITLE></HEAD><BODY BGCOLOR=#FFFFEE><H3>DEFAULT SETTINGS with BODY</H3>Default setting are including in the BODY statement and can includebackground color done with BGCOLOR and text color done with TEXT. You can also change the color of links - LINK changes the color of the link, VLINK changes the color of the visited links - ALINK changes the color of theactive link. We will see more on these when we have looked at links more.

Web6.html (1st part)Web6.html (1st part)

Settings for the entire page are made within the <BODY> command. In this case I am setting a background color attribute for the entire page.

<H3>COLOR</H3>Let's talk about color - there is 6 digit hexadecimal code that is used to express color. Remember hex is the numberingsystem that goes from 0 to F. The first two digits stand forred, the next two green and the last two blue.of red, yellow, and blue. THIS IS REDTHIS IS GREENTHIS IS BLUETHIS IS WHITETHIS IS BLACKMixing and matching these results in different colors. For exampleif I lower the amount of red, but still use no green or blue, I get this: THIS IS REDish If I lower the amount of blue, but still use no red or green, I get this: THIS IS BLUEish Play with the combinations and see what you get!

Web6.html (2nd part)Web6.html (2nd part)

Colors for specific text can be set using the FONT and then setting COLOR within FONT. If you have already set a default TEXT color, the FONT setting will override it for the designated text.

<HTML><HEAD><TITLE>Colors</TITLE></HEAD><BODY BGCOLOR=#000077>WHITE is done with FFFFFF YELLOW is done with FFFF00 A different shade of yellow can be done with CCCC00 A different shade of yellow can be done with 888800 DEEP PINK is done with FF00FF A different shade of deep pink can be done with CC00CC FF00AA makes a variation of deep pink RED is done with FF0000 A different shade of red can be done with CC0000 GREEN is done with 00FF00 BLUE is done with 0000FF PALE BLUE is done with 00FFFF - an equal mix of blue and green 00AA88 mixes shades of blue and green BLACK is done with 000000 </BODY></HTML>

colors.html - Information on colorscolors.html - Information on colors

colors.html as seencolors.html as seen

Other things you can do with FONT include SIZE and FACE (which means fonttype). FONT 2, 99AA00, HELV FONT 3, 99AA00, TIMES FONT 4, 99AA00, BOOK ANTIQUA 

Web6.html (3rd part)Web6.html (3rd part)

SIZE, COLOR and FACE are all attributes of FONT.

FACE should use standard font faces that are supported in most environments.

<H2>Now lets look at Horizontal lines</H2><HR>It is interesting - like the BR for break, the horizontal line does not havea closing /HR. Note that even though it is not always used, the P for paragraph does have a closing /P. If I don't want the line to go all the way across the page, I can do a widthon my horizontal line. And if I want it to be deeper, I can change the thicknessby using the SIZE clause. To make the size a solid line, I also needthe NOSHADE clause. Notice that the line is centered. However to be safein a variety of browsers, it is probably better to use ALIGN=CENTER.<HR NOSHADE WIDTH=100 SIZE=5>If I want the line to start at the LEFT, I need to align it to the left.<HR NOSHADE WIDTH=100 SIZE=5 ALIGN=LEFT>If I want the line to always go across 25% of the screen without worryingabout the number of characters, I can use percent to set the width.<HR NOSHADE WIDTH=25% SIZE=5 ALIGN=LEFT> </BODY></HTML>

Web6.html (4th part)Web6.html (4th part)

WIDTH and SIZE are relative and translate differently when seen in different environments.

Using % means that no matter what size screen or what setting are used, the line will go across 25% of the screen.

Web6.html (1st part of screen)Web6.html (1st part of screen)

Web6.html (2nd part of screen)Web6.html (2nd part of screen)

<HTML><HEAD><TITLE>Link to a second page of yours</TITLE></HEAD><BODY BGCOLOR=#FFFFDD TEXT="BLUE" LINK="RED" VLINK="GREEN" ALINK="ORANGE"><A NAME="top"></A><H1>This page is going to link to another page of yours</H1>Remember that BGCOLOR establishes the back ground color, TEXT establishesthe default text color, LINK establishes the color of the link before itis activated, VLINK establishes the color of the link after it has beenvisited and ALINK establishes the color of the link while it is active - aquick change in the color when the link is clicked on. From this point in my page, I am going to establish a link to anotherpage that I am going to create - this page is called web7.html so thepage I want to link to is going to be called web7a.html. <A HREF="web7a.html">Link to web7a</A> This is just some code to get the page down lower. Hopefully this is low enough! <A HREF="#top">Go to the top</A></BODY></HTML>

Web7.htmlWeb7.html

I only used one hexadecimal color in the BODY - the rest are named.

LINK is the color of the link, VLINK is the color of the visited links and ALINK is the color of the active links.

<A HREF = “web7a.html”> gives the address of the page that you want to link to. The A stands for anchor and the HREF= is where you put the address. In this example I am giving the address of another page that is located in the same directory as the HTML code so I just need to give the name of the page. Note that the name is enclosed in quotes and the > goes with the <A.

After the >Link to Web7a is the words that will appear on the page as the link. Finally you need to close the A with </A>.

Web7.html - screen as seenWeb7.html - screen as seen

Here are the link words Link to Web7a. Note that they are underlined to make it clear that they are a link.

HREF establishes that I want to link to something

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

<A…> Word for link Close A

Name of html page I want to link or go to

<HTML><HEAD><TITLE>This is the page being linked to...</TITLE></HEAD><BODY BGCOLOR=#FFFFEE TEXT=GREEN><A NAME="top"></A><H1>This is the page that I am linking to</H1>From the web page called web7.html, I linked to the page calledweb7a.html. These pages are in the same directory, so a complete path does not haveto be given. If the pages were in different directories, then the directoryname should be included as part of the path. <A HREF="#top">Go to the top of the page</A></BODY></HTML>

Web7a.html Web7a.html

Notice that when I used colors before they were enclosed in quotes, this time they are not. HTML handles both.

Top is usually recognized as a branch or link to the top of the page - I define it anyway with the NAME command, incase...

Note I could have put in a label to show where top was. In this case the code would be:<A NAME="top">This is the top</A>These words would now appear at the top of the page.

Web7a.html - as seen on screenWeb7a.html - as seen on screen

Linking to another page:

If the page you want to link to is in the same location/directory as the page you are linking from, you can simply provide the name ofthe page.

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

If the page is in a different subdirectory, you need to provide a path so the page can be found. In the example below, assume I amsitting in my home page and I want to link to my directory called Cis44 which contains my syllabus. The link would be written as:

<A HREF="Cis44/sylC4400.html">Syllabus</A> 

If the page I am looking for is located in the HTML subdirectory under Cis44, then I must include that name as well.

<A HREF="Cis44/sylC4400.html">Syllabus</A> 

If the page I need is not located at my home site, then I need to give a complete link to another address. In this case, I want to go towww.bristol.mass.edu and find the direcory pgrocer which will contain the page CIS44LNK.html.

<A HREF="http://www.bristol.mass.edu/pgrocer/CIS44LNK.html">Links to information for CIS44</A>

In this example, I not only needed to go to pgrocer I needed to go to the directory cis44 which is under pgrocer and then to thedirectory HTML which is under cis44 before I can load snow.html.

<A HREF="http://www.bristol.mass.edu/pgrocer/cis44/HTML/snow.html">Snow in 1996 - snow.html</A> 

Notes on linking to another page

Notes on linking to another page

<HTML><HEAD><TITLE>Entering a point in another page...</TITLE></HEAD><BODY><A NAME="top"></A><H1>This is web9.html</H1>This is going to summarize some of the things involved in linking/branchingwithin your page(s). We will look at linking within a page, linking to another page in your directory, and linking to another location within another page. <A NAME="first"><H2>FIRST</H2></A>This is an entry to the first point that I am going to make. There is a link from another point in the page to this point. NAME designates the entry point. You can then set up a HREF some where else on the page to link to this entry point. I am now going to set up two more entry points for my other points. The entry pointsthat I have set up before have been invisible. These are going to be identified by the word FIRST or SECOND or THIRD that I put between the A and the close of the A. <A NAME="second"><H2>SECOND</H2></A>

Web9.html (1st part)Web9.html (1st part)

The NAME is first - the word FIRST in large letters will appear on the page.

Second I want to discuss linking to another page. If the other page is in the same directory then I simply need to give the file name in the HREF link. If the other page is in another directory, I need to give the path name to find the other page. This means if there are one or more directories involved they have to be included in the path so the file can be found. From this page, which I saved under the name web9.html, I am going to link to a page in the same directory called web9a.html. To do this I will enter the following link:"web9a.html". <A HREF="web9a.html">Link to web9a</A> The page address is included after HREF and it is enclosed in quotes. The words Link to web9a are what appears on the page telling the user where to click to execute the link. The link that follows will link back up to the first point that I am making on this page - the one I gave the NAME of first. <A HREF="#first">Link to the first point</A> Note that I have to have the # to indicate link within the page. The words Link to the first point are enclosed within the A and the close of the A. This is the point where the user will click to execute the link. 

Web9.html (2nd part)Web9.html (2nd part)

This is the link to first - shown on the previous slide - the NAME first is part of the current page.

This is the link to another page. Because there is no path, we know the page is in the same directory. The words between <A> and </A>, Link to web9a will appear on the page as a link that can be clicked.

<A NAME="third"><H2>THIRD</H2></A>The NAME above establishes a third entry point on this page. The third point that I am going to make involves linking not just to another page but to another spot on that page. For example lets say that once I have linked over to web9a.html, I want to link back to this page, but instead of coming in at the top of the page, I want to come in at the beginning of the second point. In that case the link will not only give the page that I want to link to, but the NAME entry point that I want to come in at. This is done by adding the #second to the page link that gets me to web9.html. Use the link above to link over to web9a.html and then see the link that sends you back to this page at the NAME second entry point. At the top of the page, I established a link to point called top. I did not give this spot a name - it is an invisible entry point. This is the link to the top of the page. <A HREF="#top">Go to the top...</A> Bottom of the page!</BODY></HTML>

Web9.html (3rd part)Web9.html (3rd part)

Web9.html (1st part as seen)Web9.html (1st part as seen)

Web9.html (2nd part as seen)Web9.html (2nd part as seen)

<HTML><HEAD><TITLE>This is web9a</TITLE></HEAD><BODY><H1>This is WEB9A.HTML</H1>There is a link in web9.html that brings me this page. Now I am going to link back to web9.html, but specifically I want to link to the entry point with the NAME second. To do that I establish the following link: "web9.html#second" as the HREF. <A HREF="web9.html#second">This is a link to web9 and the area labeled second</A></BODY></HTML>

Web9a.htmlWeb9a.html

This is a link to we9.html (in the same directory) and specifically to the part of the page that has been designated with NAME as second.

Web9a.html - as seenWeb9a.html - as seen

explanation of web 6, web 7 and web 9 at my site please be sure to bring up the speaker notes for...

Documents