|
Links & Lists |
|
|
by Craig Walker |
Open itsme.htm in notepad, then in your browser, if not already open.
First we will build a link to page 2. Then I think we should build it, page 2 that is.
Add these 8 pictures to your pictures directory.
Very Important! When you make changes to your HTML code page, you must save it before the browser can see the changes. Then you will need to hit the Reload or Refresh button on your browser so it will pick up the new changes. Otherwise it may be looking at an old copy from your browser's cache files, stored browser memory files.
These are the finishing touches for the first page.
The new code is BOLD
|
<HTML>
<HEAD>
<BODY BGCOLOR="#33ffcc" TEXT="#0033ff" LINK="#ff3333" ALINK="#ff3333" VLINK="#ff3333"> <CENTER> <H1>Hi!</H1> <H2><I>Welcome to My Website</I></H2>
<B>My name is Craig and I'm a real swell guy.
</CENTER>
<P>
Please go to my <A HREF="favlinks.htm"><I><B>Favorite Things</B></I></A> page. (click the link)
<P>
</BODY>
|
Click the link under the code to see my page. Use the BACK button to return here.
If you got this far, I'm impressed! Email Me Let me know if it's working.
Now lets make page 2. The easiest way to create page 2 is to SAVE your itsme.htm file. Now SAVE AS favlinks.htm. The neat part about this is, all the preliminary stuff is already on the page, like the HTML, HEAD, TITLE, & BODY tags. The BODY tags are already formatted and it is a good practice to keep some continuity between pages, One way to do this is to keep the same BODY options.
Next you need to delete everything on the favlinks.htm code page between the opening BODY tag and the horizontal rule at the bottom of the page. We will add new content for this page, but we will keep the Email link and the next page link. We will modify the next-page link though.
The new code for favlinks.htm is BOLD. There will be a lot of code this time, but that's how a real page would work.
|
<HTML>
<HEAD>
<BODY BGCOLOR="#33ffcc" TEXT="#0033ff" LINK="#ff3333" ALINK="#ff3333" VLINK="#ff3333"> <CENTER> <H2>My Favorite Things</H2> </CENTER>
<P>
<B>My favorite things are:</B> (some are links)
<IMG ALIGN=RIGHT SRC="pictures/surf.jpg">
<UL>
<UL>
<LI>Motocross
<OL> <LI><A HREF="http://www.padres.com" TARGET=NEW><IMG ALIGN=MIDDLE SRC="pictures/padres.jpg"></A> <LI><A HREF="http://www.chargers.com" TARGET=NEW><IMG ALIGN=MIDDLE SRC="pictures/charger.gif"></A> <LI><A HREF="http://www.gulls.com" TARGET=NEW><IMG ALIGN=MIDDLE SRC="pictures/gulls.jpg"></A> </OL> </UL>
<P>
Please go to my <A HREF="picpage.htm"><I><B>Picture Page</B></I></A>. (click the link)
<P>
</BODY>
|
Click the link under the code to see my page. Use the BACK button to return here.
Some of the links on this page are local. Some are real links to real internet sites and will not be accessible unless you are on-line on the Internet.
That was a lot of code. Now we have a website instead of just a web page. Links are, after all, what makes the Web. You have now learned all you need to know to make a website. Please continue on through the next lesson though. There are certainly more details and tag options to explore, but you now have the basics. Pretty cool, huh? Email Me
The location of the surfing picture on the right side is sort of precarious. There is nothing that holds it there, in relation to the other things like the lists on the page, if the screen resolution of your viewers computer is not as big as yours. Try this experiment. Reduce the size of your browser window while looking at the completed page. Notice how, as the window gets smaller, the surfing picture gets closer and closer to the lists and eventually will cover them. Also notice there is no horizontal scroll bar on the bottom.
Here's another experiment for fun. Copy the <IMG ALIGN=RIGHT SRC="pictures/surf.jpg"> code and insert it between any of the list items so it comes into your page right under the original picture. Now try to insert it right next to the original picture. Now we are having fun.
This happens a lot. You spend hours setting up your page to look just right, and then your friends computer sees it all different and skews everything around. Sometimes when you put text next to a picture, it ends up under or next to a different picture. It's just not fair. That's why we need to build in more control.
I use tables to control my pages with a lot of graphic content. We will address that in the next lesson.
New Tags explained, as used: Also see the Tags Guide for more about these and other tags.
ALINK="#xxxxxx" sets the active link color. I don't really know what this does. I've been told it changes the color of a link when the mouse passes over, but I've never seen it. I set this value anyway because I don't want another browser to interpret it any other way and perhaps screw up my look I created.
VLINK="#xxxxxx" is to change the color to a link you have visited. If you visit a linked object, your browser remembers this and changes the color of the link so you will know you have been there.
I normally set them all to the same color, but I might change colors for different pages. I usually do not like the look of different colored links. I think it looks sloppy. If you have a red background on one page, you wouldn't want red links. They would disappear. On a picure page where the pictures are links, sometimes the colored rings take away from the look I want, or they contrast too much. In this case you can change the color or use the BORDER=0 option in the image tag to turn the colored link border off.
It's all about control.
WIDTH is variable by pixels, i.e. WIDTH=300, or percent, i.e. WIDTH=75%.
Code: <HR>
Result:
Code: <HR WIDTH=300>
Result:
Code: <HR WIDTH=75% SIZE=10>
Result:
Code: <HR NOSHADE WIDTH=400 SIZE=5>
Result:
The Linking object can be text or graphic. It can also be a relative or absolute reference. For the most part a relative reference will be one that is on your website, so you do not need the http://www. stuff. A relative reference can also be several directories up or down from your location. All you need to do is specify the directory path. The directory path uses a forward slash, /, as a separator, "directory/directory/filename.htm".
An absolute reference uses the complete legal path to the web location. As in the relative reference you should, you should enclose your path in "double quotes". Also, don't forget to be very case specific in you directory and file names.
Code:
<A HREF="tagstable.htm">Tags Guide</A> relative reference
Result: Tags Guide click the link
Code:
<A HREF="http://www.cerious.com" TARGET=NEW>Thumbs Plus</A> absolute reference
Result:
Thumbs Plus click the link
Code:
<A HREF="http://www.padres.com" TARGET=NEW><IMG SRC="pictures/padres.jpg"></A> using a picture as a linking object
Result: click the picture
Notice in the picture above, the red ring around the picture. Just like the text link objects that turn red, picture link objects also use the link color to let you know it is a link. The link color is selectable in the BODY tag, remember? If you do not want the colored link ring around your graphics, you specify the BORDER=0 option.
Sample Code: <IMG BORDER=0 SRC="pictures/padres.jpg">
TARGET=NEW If you link to somewhere off your website, your visitors may never come back from surfing. If your link opens a new browser window for the link, then your website remains open and your viewers are still there and more likely to continue viewing your site when they close the other window. To do this you add the TARGET=NEW option to the link tag as shown.
If your website uses frames, like the stationary Table of Contents section on the side of this page, it is annoying to be linked to a site that is not opened in a new window. When you open another website in your frame website, it is limited to the open frame area and that can cramp a website. I'd rather see the full website as it was intended to be viewed.
It's the polite thing to do.
Code:
<A HREF="mailto:cwalker1@cox.net"><B>Email Me</B></A> This is a really neat option. You can put any legitimate email address after the mailto: part. Works just like a regular link except the path is mailto:somebody@some.where.
Result: Email Me click the link
Code: Don't forget to close the list.
Fun Holidays
<UL>
<LI>New Years Day
<LI>Memorial Day
<LI>Labor Day
</UL>
Result:
Fun Holidays
Code: Don't forget to close the list.
Driving Made Easy
<OL>
<LI>Get in the car
<LI>Start the car
<LI>Drive the car
</OL>
Result:
Driving Made Easy
In our web page you can see an example of nested lists, one list inside another list. This is accomplished by starting a new list within a list item. Now you have an outline format style that can have many levels and steps.
For more about Lists and other tags, see the Tags Guide.
Now for a lesson in Table Setting
|
|
by Craig Walker |