[pcductape] Lesson #3 Learning to Link

  • From: "Debb" <lillearners@xxxxxxx>
  • To: <pcductape@xxxxxxxxxxxxx>
  • Date: Mon, 31 May 2004 22:36:38 -0500


Lesson #3 Learning to Link  
 
INTRODUCTION

In this lesson we are going to learn how to create a 2nd page on your
website, link within your own site, link to an outside site, and add 
your
email to your page so your visitors can email you from your site.   

I assume you all know what linking is?  It is anything on your page 
that
visitors can click on and it will take you to another website or 
another
page within your own site.  You all already have 2 links on your
page.  The bottom line on your site contains the words "GeoCities" and
"Free Home Page" and they are underlined and linked which means you 
can
click on those words and be taken somewhere else.

The code for linking is <a href="thelinkhere">Name of the Link</a>  
Always
use quotes around the link and and always end with </a>  There are
different kinds of links... email link, guestbook link, webpage 
address
link, linking within your own page are some examples.  You can also 
make a
graphic link where your site visitors can click on your graphics or
pictures and be taken somewhere else and we will be doing that when 
we get
to the graphics lesson.

---------------------------------------------------------------------

1.  Email Link

The first link we'll learn is putting your email address on your 
page. 
This will be a link where visitors can simply click on it and an email
screen will pop up for them so they can email you directly from your 
page.
  
 The code to do this is simply:

<center><a href="mailto:lillearners@xxxxxxx";> 
<font face="comic sans ms"
size=4>Email Me!</font></a></center>

Please center this on your page.  You've already learned about font 
face
so you can go ahead and add the font face coding if you like as I have
above.  Simply replace lillearners@xxxxxxx with the email address you
want to have on your page.     And aol email addys are fine here if that 
is where you'd like your website visitors to reach you.
 
 ---------------------------------------------------------------------

2.  Creating a 2nd Page

When you get this right, save your page.  By clicking on Save it will 
take
you back to your file manager site.  We are now going to create a 2nd 
page
within your site.  Now is the time to start thinking to yourself how 
you
are going to want your overall site to be set up.  When I began my 
  Site I made a paper drawing and did mine like a spoke.  Having my
index page as a circle in the middle and then spoking outwards to
different areas - my personal pages, my link pages, my curriculum 
pages,
etc.  Go take a look at my daycare website
http://www.geocities.com/llcare2 - scroll down to 
the
table where you see the drop down menu
  Those are my spokes.  A paper drawing really helps you 
at
this point - make your index page your hub as a circle in the middle 
and
draw lines out to circles around that with different areas you wish to
have on your website.    However and whatever you want, at 
this
point it does help to have some kind of drawing so you can visualize 
how
your site will be set up.

Now you are ready to create your 2nd page.  Go into your File Manager 
and
instead of choosing edit using   HTML editor, choose edit using
Basic HTML Editor.  And then click on the 'new' button. When the new
window comes up look where it says "Filename:" - you will need to 
choose a
html name for this 2nd page.  The file name of your original page is
index.htm so depending on what you want on your second page choose an
appropriate name.  I'm going to choose otherpage.html  

Members in my past sessions have had problems with this - creating a 
2nd page.  Let me try to explain.  Whatever name you give to your 2nd 
page must be followed by .html so..... I choose 'otherpage' and 
hence providerpages.html.  My url is 
http://www.geocities.com/llcare2/ and the url of my 2nd 
page is now 
http://www.geocities.com/llcare2/otherpage.html
Make sense?  Put NO spaces in the name of your 2nd page.

Now click on save which will return you to the file manager page - 
this is the only thing you need to do in BASIC editing ever - when 
you start a new page. From here on out you will edit this new 2nd 
page in HTML editor.   
Now if you want to you can edit your new second page and change the
colors, put a title on, text, whatever you want.  You learned enough 
in
the last lesson to do this.  The only requirement I want to see is a 
title
on that page for now.

 -----------------------------------------------------------------

3.  Linking within your own site

Now I want you to go back into editing your index.htm page.  We are 
going
to learn to link within our own sites.  So now when someone is 
visiting my
main page, they can click on my link and go to my new   
Page.

The code to do this is:

<a href="newfilename.html">Name of Page</a> or in
my case it is <a href="otherpage.html">Other Page</a>.

Look at how I used the coding to incorporate this onto my main page 
within
my paragraph:

<font face="comic sans ms" size=3>Hi, my name is Debb.  Welcome to my 
webpage help site!  I'm creating this page to teach basic html to a 
group of people so that they may learn to how do their own pages. 
<p>
In this lesson we are learning how to create links.  I've made a 2nd 
page.  Please go visit my <a href="otherpage.html">Other Page</a>.</font>

 So this is what you need to do, create a link on that main page now 
that
will take you to your new 2nd page!

Ok, so save that and go into edit your new 2nd page.  I want you to 
put
somewhere on your new page (between the body tags) a link that will 
take
visitors BACK to your main page.  For ALL of us it will be <a
href="index.html">

Here is what I did on my 2nd page:


<center><font face="comic sans ms" size=4>Return <a
href="index.html">Home</a>!</font></center>

 This is what you need to do!

At this point I want to show you my coding for my entire 2nd page:

<!--Created by Yahoo! GeoCities Home Page Generator-->
<HTML>
<HEAD>
<TITLE>Other Page</TITLE>
</HEAD>


<!--COLOR-->
<BODY BGCOLOR="#0000BB" TEXT="#EEEEEE" LINK="#EEEEEE" VLINK="#EEEEEE">

<!--HEAD1-->
<h1></h1>
<br>

<!--HEAD2-->
<h3></h3>
<p>

<!--LINE1-->

<p>

<!--BODY-->
<blockquote>
<center><font face="comic sans ms" size=6>Provider 
Pages</font></center>
<pre>

 

</pre>
<font face="comic sans ms" size=4>This is my other page!
</font>
<pre>


</pre>
<center><a href="mailto:lillearners@xxxxxxx";> 
<font face="comic sans ms"
size=4>Email Me!</font></a></center>
<pre>


</pre>
<center><font face="comic sans ms" size=4>Return <a
href="index.html">Home</a>!</font></center>
</blockquote>
</BODY>
</HTML>


OK!  Wow if you've made it this far you are really doing great!!  
Please
ask questions on the list if you don't understand any of this so far.

4.  Linking to another website

Now we are going to edit either page and we are going to learn how to 
link to another website!

This is just a little different.  If you noticed when we linked 
within our
own site we are simply using our filename like index.html or
providerpages.html.  Now when we linked to another website we put in
the entire URL instead.  Here is the example of what I've done to 
link my
page to another website:

<font face="comic sans ms" size=4>This page will contain a list of 
links to other other pages.  So please come back soon to see 
what I've added.  Email me if you'd like your page to be listed!
<p>
In the meantime if you haven't been to my <a
href="http://www.geocities.com/llcare2";> 
Little Ones </a> site please go take a look and sign my guestbook and 
tell me
what you think.
</font>

I've placed this on my 2nd page, or my other pages.  You may put 
your link to an outside source wherever you choose.  

Notice the difference in linking to my 2nd page and to a totally 
different
site.   

*Note:    If you'd like visitors to not 
LOSE your site and have this new site open in a new window you would 
add (target="resource window") to your coding like this:

<a href="http://www.geocities.com/llcare2/"; target="resource 
window">Little Ones </a>

That's it!  That, of course, is optional for you to do.


ASSIGNMENT:  
1.  Email addy link on your main index page, I will be emailing you 
from
your site and you will have to answer my email in order to pass.

2.  Creating a 2nd page.  Must have at least a title on that page.  
Optional to put background color, text, email link, etc.

3.  A link on your main page to your 2nd page.
    A link on your 2nd page taking you back 'home' or to the main 
page.

4.  A link on either of your pages to a different website.

--------------------------------------------------------------

That's it!   Some of you will get this quickly. Why don't you go to page 2 and 
put some text there, colors, your
blockquotes.   
Plenty to
keep you busy while we are waiting for the others to complete the
assignment.  You can even go ahead and create a 3rd page or more if 
you
really know what you want to do.  If you have your 'spokes' planned 
out
you can create the pages and name them "Forms" (or whatever) and just 
type
in some text such as 'under construction' or whatever.  You could put 
your
email on each of your pages.  Just play around and use what you've 
learned
to start building.  And feel free to ask questions on what you've 
learned
thus far.

Lesson #4 Adding a Guestbook and Counter to your site


  

Other related posts:

  • » [pcductape] Lesson #3 Learning to Link