1. 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

2. And... DEFAULT SETTINGS with BODY Default setting are including in the BODY statement and can include background 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 the active link. We will see more on these when we have looked at links more. Web6.html (1st part) Settings for the entire page are made within the command. In this case I am setting a background color attribute for the entire page.

3. COLOR Let's talk about color - there is 6 digit hexadecimal code that is used to express color. Remember hex is the numbering system that goes from 0 to F. The first two digits stand for red, the next two green and the last two blue. of red, yellow, and blue. THIS IS RED THIS IS GREEN THIS IS BLUE THIS IS WHITE THIS IS BLACK Mixing and matching these results in different colors. For example if 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) 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.

4. Colors 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 colors.html - Information on colors

5. colors.html as seen

6. Other things you can do with FONT include SIZE and FACE (which means font type). FONT 2, 99AA00, HELV FONT 3, 99AA00, TIMES FONT 4, 99AA00, BOOK ANTIQUA 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.

7. Now lets look at Horizontal lines It is interesting - like the BR for break, the horizontal line does not have a 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 width on my horizontal line. And if I want it to be deeper, I can change the thickness by using the SIZE clause. To make the size a solid line, I also need the NOSHADE clause. Notice that the line is centered. However to be safe in a variety of browsers, it is probably better to use ALIGN=CENTER. If I want the line to start at the LEFT, I need to align it to the left. If I want the line to always go across 25% of the screen without worrying about the number of characters, I can use percent to set the width. 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.

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

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

10. Link to a second page of yours This page is going to link to another page of yours Remember that BGCOLOR establishes the back ground color, TEXT establishes the default text color, LINK establishes the color of the link before it is activated, VLINK establishes the color of the link after it has been visited and ALINK establishes the color of the link while it is active - a quick change in the color when the link is clicked on. From this point in my page, I am going to establish a link to another page that I am going to create - this page is called web7.html so the page I want to link to is going to be called web7a.html. Link to web7a This is just some code to get the page down lower. Hopefully this is low enough! Go to the top Web7.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. 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.

11. Web7.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 Link to web7a Word for link Close A Name of html page I want to link or go to

12. This is the page being linked to... This is the page that I am linking to From the web page called web7.html, I linked to the page called web7a.html. These pages are in the same directory, so a complete path does not have to be given. If the pages were in different directories, then the directory name should be included as part of the path. Go to the top of the page 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: This is the top These words would now appear at the top of the page.

13. Web7a.html - as seen on screen

14. Notes on linking to another page

15. Entering a point in another page... This is web9.html This is going to summarize some of the things involved in linking/branching within 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. FIRST 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 points that 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. SECOND Web9.html (1st part) The NAME is first - the word FIRST in large letters will appear on the page.

16. 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". Link to web9a 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. Link to the first point 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) 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 and, Link to web9a will appear on the page as a link that can be clicked.

17. THIRD 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. Go to the top... Bottom of the page! Web9.html (3rd part)

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

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

20. This is web9a This is WEB9A.HTML 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. This is a link to web9 and the area labeled second Web9a.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.

21. Web9a.html - as seen