links, image links and basic layout

Welcome to Lesson 6.  By now you should know how to create a basic page by scratch. If you are still unsure or need some refresher courses, please refer back to the previous lessons.

In this lesson we will learn how to create links, use images as links, and learn about layouts of web pages.

For this lesson you will need to edit lesson.html.

Log into your filemanager.   Check the box by the lesson.html. Click edit using the Advanced HTML Editor.    This will bring up the previous lesson information we put in.

Before we begin adding a link on the site, we will want a paragraph after the image. That way the text wont interfer or be close to the image. <P align="center"> should be placed before the closing body tag </BODY>

Let's go ahead and put a link to my home page.  The URL to my site is http://www.oocities.org/Heartland/Lane/4232/index.html.  The code to add a link is  

 <A HREF="www.oocities.org/Heartland/Lane/4232/inde.html"> Poet's Site </a>

This is how it will appear:   Poet's Site

If you click it, this will go to my main page.  If you want to link to a page that you have created and is located in your filemanager, you can simply put

<A HREF="filename.html"> My Link </A>

This will save you time then putting in the whole URL.  But remember this is only for linking to  html files that are in your filemanager.

*Note* For this tutorial we will put the link to Poet's Site

Now you know how to link, go to your page you're editing and put in a link to my site with the text reading:  Poet's Home Page      You will want to place this somewhere between the <BODY> and </BODY> tags. For this lesson, place it  right above the </BODY> tag.

It will appear like this  Poet's Home Page when you "View" your site.  

Now you know how to turn text into links.   Lets get ready to turn images into links.

On the page you're editing, put your cursor at the beginning of the html code for your image.  <IMG SRC="smiley01.gif">.   We will be adding a few things to that code to turn the smiley face into a link.

We will link to this site:  www.oocities.org/Heartland/Lane/4232/learn.html

Just like linking with text, we will use the code:

<A HREF="www.oocities.org/Heartland/Lane/learn.html">

But we will place this code infront of the Image html code and add the closing </A> tag. This is how it should look

<A HREF="www.oocities.org/Heartland/Lane/learn.html><IMG SRC="smiley01.gif"></a>

This whole code should be together on one line .  

So when a person clicks on the smiley face it will take them to the introduction of this class.

Click on Save located at the bottom and you are done creating the basic site.

And that is how you turn graphics into clickable links.

Your HTML File should read like this so far:

<HTML>

<HEAD>

<TITLE> Poet's Tutorial Page </TITLE>

</HEAD>

<BODY BGCOLOR="#000000" TEXT="#ffffff" LINK="#33FFFF" VLINK="#33FF33">

<CENTER><H2>Poet's Page</H2></CENTER>

<P align="center">

<A HREF="www.oocities.org/Heartland/Lane/learn.html"><IMG SRC="smiley01.gif"></A>

<P ALIGN=center>

<A HREF="www.oocities.org/Heartland/4232/index.html">Poet's

Page</A>

</BODY>

</HTML>

Now that you know the steps into creating a basic web site, I want to go over with you ways to layout your site. Mind you, these are just my personal preferences on layouts.

When looking at web sites I usually look to see if there is a good balance of graphics.  Too many graphics usually take away from what the designer is trying to say or do with their web site.  Too few graphics usually makes the page seem as if the designer really didn't care for this site and didn't want to put the effort into finding graphics for their page. From my knowledge of web browsing and personal experiences,  Looking at graphics are fun, it adds spice to the page and makes one want to see what is in the contect of the page.

Types of graphics that usually make a page look nice is an email graphic, divider graphics or also called internet seperators, and buttons.  You can find many many graphics searching the web.

If you have more then one page on your site, navigation should be made easy for a person to browse your site.  Adding a button to return back to the previous web site is a good idea.  This way the browser can easily go back to where they just came from.  

If you have lots of links on your page, it's a good idea to put them in an orderly fashion. Links that are all over a web site will become lost and browsers usually do not see them. If they are in an orderly fashion then the browser can navigate the links easily.

An important part of web design (in my opinion and many others) is to have original content.  It's fine to have a page just with links to other sites, however if you have pages of your own it will make your browser have more confidence in your site and links.

The beautiful thing about creating web pages is it is up to you how you want to design it, how it will look, and what you would like your content to be.   Remember, this is your site for the everyone to see.

Since we are creating our homestead in the best place possible, GeoCities, lets use some of the tools that GeoCities has to offer.   Proceed to lesson 7 to add an email link, geoguide, and your one and only guestbook for people to sign in.