Website Design / HTML

[rfornal]

See you in the morning ...

We'll get those images straight tomorrow and possibly cover linking.

Good night all.

[wldspirit]

Unexpected company......sorry......

Just a guess....but I'm thinking I left something out......the image is in the same folder as internet files and I've experimented with it in several ways......but still no image on the web page, just a box with the image name.........

Til the morning......
Lisa

[rfornal]

E-Mail me the image and index.html file at bob@fornal.org and I'll take a look. I won't move forward until we figure this one out.

[wldspirit]

On my first cup of java.....the image and file is on it's way......
Lisa

[rfornal]

OK Lisa,

AOL apparently encodes your files in some unique way ... I got to see what I needed, but I did not get the index and image files as seperate attachments ...

Like I said, got it ...

Where you see the BOLD items, you need to replace the whole thing ... including the brackets { - } :
{Enter Your Name Here} becomes Bob Fornal
{image name here} becomes b_image.jpg
{short description} becomes Image of Bob

[rfornal]

Finished my first cup almost 2 hours ago ... you're doing great!

Let me know if this works and then I'll cover some basics about Linking after a quick wrap up on images.

[wldspirit]

Yes!!!!!! Got it.........knew it was something I had done wrong with the code in the notepad!!!

Thank you so much!!!

Second cup of coffee.......and wide awake now!!!

Lisa

[rfornal]

Great!

Before I move on to linking, I want to point out that the image file does not have to reside in the same folder as the web-page that uses it.

Often, I create a folder specifically for storing my images. This helps to keep the clutter down and makes locating files simpler.

Also, you can reference images from other sites. For example, my picture located to the left here is actually on my domain (http://bob.fornal.org) in an images folder. This can be good for organization, but many sites do not allow this (called hot linking because it affects the download of the site that hosts the image.

OK, let's move on.

[rfornal]

Linking to Other Pages

There is one way to code a link, but conceptually, there are several types. All that I am going to discuss for the moment are the two simplest types - linking to local pages and linking to external pages.

Let's take a quick look at the HTML code before we get into the details. Here is what it looks like:

   <a href="http://bob.fornal.org">My Site</a>

On the page you get something like this:

   My Site

This is a link that takes you to my page (remember, you are actually seeing http://bob.fornal.org/index.html (index.html is the default file that the system will display if it is not specified).

[rfornal]

Linking to Local Pages

OK, now let's set up an example that will allow us to explore this in a little more depth.

Inside your Internet Files folder, create another folder called, Genealogy (remember that once these files are on the web, they WILL BE case sensitive).

Copy the Index.htm file that you created previously into the new folder.

Edit this new file and change a few things:

1. Remove the <img ... > Tag.
2. Change the background and font colors.
3. Change the header and text.

Save your changes
(basically, we are doing this so that we can see that the pages are different)

[hr]
Now, edit your original Index.htm file and add the following code:

   <a href="Genealogy/Index.htm">Genealogy</a>

An HREF is a Hypertext Reference; simply, something that refers to a web-page address. This HTML Tag places a link to the new Index.htm file.

[hr]
Now, in the Genealogy/Index.htm file add the following code:

   <a href="../Index.htm">Main Page</a>

This HTML tag places a link on the Genealogy page that goes back to the original Index.htm file that you created.

Notice the "../" in the HREF address. This tells you that we need to go up one (1) level in the tree structure.

[hr]
Try these out and then we'll move on to External Links (which are MUCH EASIER).

[wldspirit]

My Genealogy page does not link back to my main page......but everything else worked..........
Lisa

[rfornal]

Check both files ... in the code above I used Index.htm.

You could have named the file .html which would cause it to look for the wrong page.

[wldspirit]

Sent the copy of notepad to you......
My new mantra will be "try, try again"........
and yours will be "patience is a virtue"...............
Lisa

[rfornal]

Try this ...

   <a href="../Index.html">Main Page</a>

Rather than ...

   <a href="../"Index.html">Main Page</a>

Note the lack of a quote (") after the slash (/) on the first example.

"Repetition and patience are two key elements of good design."
    Bob and Lisa, 2006

[wldspirit]

Now it takes me back to the contents of Internet Files...... 8O

Like the quote.....
Lisa