LJS International Beginners HTML course
Lesson 3: Linking on webpages.
Linking or joining of pages on the www can be done in several ways.
- Linking from one site to another
- Linking from page to page on the same site
- Linking to enable email usage.
<![CDATA[Lets look at the breakdown of a link tag.
Link tags are known as<a>...</a>or anchor tags.
They must have the attribute of href in them
<a href="..."></a>
href stands for Hypertext REFerence.
The href attribute is used to specify the name or url
for the file where this link points.
A whole link tag from one page on a site to another site page
would go something like this:
<a href="http://www.yourname.com">My other site</a>
Now you have the <a ...which is your anchor...
the href to tell the browser it has to look for someplace to go to,
then you have the url where the link points to
and tells the browser where to look on the www.
The actual url must be in between quote marks
or the browser won't recognize that it's a url.
Now you need to > close the actual part one of the tag
so you can print on your page what the link is
...in this case I have used the name My other site,
but you can also link it to a graphic instead of printed words.
and then tell the browser to close or stop the link (anchor) </a>.
When you are linking to another site's pages
you must have an absolute path,
meaning... that you need the full url of that exact page.
So in reality if I were linking my psped site to my LJS International site
I'd link the two sites like this
<a href="http://ancientartisanstudio.com/ljs">LJS International</a>
On the psped website all you would see is a link line
that says LJS International.
The link using a graphic would need to tell the browser
what graphic to show as the link and where to find that graphic.
This is a sample of a graphic link to another site.<xmp>
<a href="http://ancientartisanstudio.com"><img src="http://ancientartisanstudio.com/ljs/images/lala.jpg"></a>
This would show a pic of me that you could click on,
to go to my LJS International site.
The graphic would have to be uploaded to the psped site
and located on the main directory of the psped site.
I like to organize my directories seperate
so that I can locate easily when I'm looking at the file system of my site.
So I make a directory of Images within the main directory,
just for graphic storage.
In that case the link would have to tell the browser
exactly where to find the lala.jpg file...like this
<a href="http://ancientartisanstudio.com"><img src="http://ancientartisanstudio.com/Images/lala.jpg"></a>
This tells the browser:
first to link to ljsoroka.ca website
and to link the image ( <img src="..."> called lala.jpg
and within that image link exactly where to find
the image file on the psped site.
Then close the anchore or link with the </a> tag.
If you don't close the link with the </a> tag...
everything that you place on your page after the <a href="..."> tag
will link to the anchor specified.
You will notice when this happends,
as all of the text after that tag will be underlined on your web page
and linked to the other site.
Been there done that hehe
Now there are other attributes that you can add to the link tag...
such as... color of the link text etc...
this can be done in the link tag or in the body tag at the beginning of the page.
and they would look something like this
<a href="http://ancientartisanstudio.com" text="#808080" alink="#ffffff" vlink="#000000">My other site</a>
The attributes of text...Alink and Vlink can be placed in the Body tag
at the beginning of your page if you like
so that all links would react the same way.
If you want specific links to be of different colors than the main text
you would place the attributes in the actual link tag.
By the way...alink means active link
or the color of the link text when you click it.
vlink means viewed link or the color of the link text
after that link has been used.
This helps your page visitor distinquish
which links they have alread checked out.
Now there is one other thing that you can do when linking other pages
be it another site or pages on your own site.
And that is to have the link open in a new window
so that the visitor doesn't have to go back to the main page
they were on...but simply X the linked page when they are done viewing.
This is done with a target attribute in a linking.
A target attribute looks like this... target="_blank"
and would be placed in the anchor tag.. like this
<a href="http://ancientartisanstudio.com" target="_blank"><img src="http://ancientartisanstudio.com/Images/lala.jpg"></a>
This would tell the browser to link to ljsoroka.ca site
in a new blank window using the image lala.jpg to show as the link image.
You can also add in attributes to tell the browser the exact size
in pixels of the graphic that you are using to link with.
Doing this helps the page to load faster
as the browser doesn't have to read the size of the image file ...
it is told how big to show it.
The size attribute would be placed within the image part of your anchor tag...
like this
<a href="http://ancientartisanstudio.com" target="_blank"><img src="http://ancientartisanstudio.com/Image/lala.jpg" width="125" hight="225"><a/>
In any tag, be it for linking or otherwise you have many attributes
that you can add to tell the browser specific things.
Many of these attributes can be found on the cheat sheet
that I sent to you, or online if you were to search for html tags :)
There is one more attribute that I use on most every image link
or any image tag for that matter and that is the alt attribute
This tells the browser what the image is ...
so that when your visitor puts thier cursor on the image
it will show a little box of text with a description in it.
Like...picture of lala or link to lala's Web Designs site
or what ever you want it to say.
This is good practice to have in your html design
as it helps those visitors who don't have image capability
know what the image is or the link is :)
This alt attribute looks like this:
alt="my home page"
and is placed within the image tag after the size attribute
and befor you close > the image tag.
Next lets talk about the linking between two pages on the same site.
Linking two pages on your own site is done in the same way
as linking to another site; however, a few changes need to be made
for example in the link or anchor tag
you don't have to have the absolute path...
you can just use the / to have the browser locate the image file.
or the page.
Like this:
<a href="/aboutme.html"><img src="/Images/lala.jpg"></a>
This would tell the browser to look in your own directory
for the page aboutme.html and for the image lala.jpg.
All the same attributes as above in the linking to another site apply
to linking within your own site.
You can also link to another graphic ON YOUR OWN SITE using anchor tags.
For example...if you have a smaller picture
to save loading time and space ( a thumbnail picture)
you can link that to open in a new window
to a larger version to be viewed.
This is accomplished but using the target tag
as we discussed earlier in this lesson.
You would have to have both the thumbnail picture
and the larger version picture
located in your site directories on the web server.
here is an example of such a link...
<a href="http://psped.com/Challenges/lala10-1.gif" target="_blank"><img src="http://psped.com/Challenges/tn_lala10-1.gif" border=0 alt="Larger version"></a>
This tells the browser to link the image lala10-1.gif in a new window
but to use the thumbnail ... tn_lala10-1.gif
to show as the link to click onto.
You can see a sample of this on my psped site page here:
http://psped.com/Challenges/ChallengeTheaterGallery2002.html
Click onto the mask image (called tn_lala10-1.gif )
and it will open in a new window
to the larger version( called lala10-1.gif
Now for linking email :)
I'm sure you have seen on many sites.. a link line of text
that says Send Email or an image for you to click
to email or contact the person.
The anchor tag for email is very different from the page link tags.
It still uses the <a href="..."> tag; however,
the location is much different.
We want to tell the browser to locate the email program
on the visitors system and open it to write an email to you.
So the link would be like this:
<a href="mailto:psped@mail2create.com">Contact Me</a>
This link tells the browser to link to the persons email program on thier system
and open a send mail file to write the email in.
It will also have the Email address that you are sending to
placed already in the to: line of the email :)
that's where the psped mail address would come in..
so it's important to have that in your link.
Then the browser reads to put text on the page that says
Contact Me as the link text and to then close off the anchor
with the </a> tag.
Again here you may use an image
to link to the contact through an email anchor.
You would add in the location of the image
to be used within your site.
<a href="mailto:webmaster@psped.com"><img src="http://psped.com/Images/Mailbox.jpg" width="35" hight="50" alt="Email me image"></a>
This would show a graphic of a mail box that you click on
to send an email to me lol
The email form from the persons system
will automatically open in a new window as it's not on a site
but rather within thier own computer system.
Now here is a nice little trick. :)
The attribute of the email subject line in the email form :)
This attribute tells the browser to place in the form
not only the mail address but also the subject
that you want in the subject line..
so that when the email comes.. you know what it's about.
For example I have a gemstones site where I sell hand made gem jewelry...
I have different areas on this site that a person could email me ..
about differnt things like the store .. or the meditation area etc.
So I have each sections email links showing different subject lines
in the tag .. this way I know when the mail comes to me
that it's for an order or it's for information.
The tag would look like this:
<a href="mailto:psped@mail2create.com?subject="new membership"></a>
The question mark ?subject="what you want in the subject line of the email">
tells the browser to place the words Apply for membership
in the persons email form subject line.
When you have many different areas of your site
with email links for many different reasons
going to the same email address ...
this method helps to keep them straight :)
Now just for your information, there is another area
that you can use linking on your site..
and that is to link from one section of your page
to yet another section of the same page.
This is more advanced linking using a differnent kind of anchor tag..
which I won't cover here.. don't want to confuse you more than I have.
So what have we learned?
Linking to another site using anchor tags..
what they mean..
how to use them and the attributes to control the link.
Linking within your own site page to page in the same manor.
Linking using text and graphics.
Linking for usage of email programs,
with attributes for subject lines.
Any questions?
Ok what I'd like you to do .. is to create a second page
to the one from last week's lesson,
then link the two together either with a text link
or a graphic link.. and to add in an email link that is operational :)
Lesson 4 will cover: Publishing yor html pages :)
]]> |
