Section 4: Hyperlinks
Lesson 4-3: Internal Links
Nice to see you again, today,In the previous two lessons you learned several different ways to add links to other pages.
In this lesson you will learn how to use another kind of link - the internal link.
If you make a long web page which requires a lot of scrolling up and down, internal links can make life easier.
An internal link is a link from one place to another place within the same page.
Internal links are sometimes called bookmark links, because they are similar to actual bookmarks.
Try out the internal links in the list below. You can return here using any of the red
Return to top links.
Internal links make it easy for your users to jump to different parts of your page.
Remember that a hyperlink allows you to jump from one place to another place.
You must set both the source, and the destination of the link.
Because the destination is another place on the same page, you must mark the destination as well as the source.
The anchor A tag is used to mark both the source and the destination.
You can put as many internal links in your page as you like,
but you must give each one a different name. To mark the destination of a link, you use the
NAME attribute of the anchor tag. Here is an example:
If you like you can put some text in the destination anchor to mark it's place on the page.
Section headings on a page are often used as link destinations.
Even if you don't use any text, though, the link destination will still be set at that point on the page.
After marking your destinations with tags like the one above,
you will need to create source links.
A source link anchor tag is created using an ordinary anchor tag with an HREF attribute.
The name of the destination anchor is used as the value of the HREF attribute.
However, for internal links, a pound sign (sharp) # must be placed before the name value.
Here is an example of a tag which would link to the destination anchor above:
If you have a long page, it is a good idea to put a short table of contents,
made up of your section headings, on the top of your page. You can then
use the table of contents headings as links to each section on your page
(the same way this page does).
Linking to Internal Anchors on Other Pages or Sites:
You can also use bookmark links to link to an internal destination anchor
on a different page, and even to one on another site. All you need to do is to add the name
of the destination anchor after the filename in the HREF attribute. For example:
This tag would get the "myhomepage.htm" file from your site, and jump right to the
"bookmark1" internal anchor on that page.
All right, it's time to add an internal link to your practice file. Let's mark the top of your page with a
destination anchor named "top", and then add a Return to top
link at the bottom of your page. Open your first practice file, and add the red text as shown below.
Save your file, and then test the link.
titleMy First Home Page/title
body bgcolor="##eeffff" background="bg01.jpg"
h1 align="center"HTML Tips and Tricks/h1
This is a sentence with spaces
between the words. The extra spaces are ignored.br
This sentence uses
space codes between the
You will find many helpful hints here on how to construct web pages.
Basic home page creation is not difficult. However, once you learn the basics,
you will want to try to do many things which you see on other people's pages on the Internet,
The tips on this page should help beginning web page authors to learn new tricks and techniques./p
This is bbold text/b.br
This is iitalic text/i.br
This is uunderlined text/u.br
This is bigbig text/big.br
This is smallsmall text/small.br
This is supersupscript/sup text.br
This text is biguibbig, bold, italic, and underlined
This text is font size="+1"large/font,
and font size="+3"even larger/font still.
This text is font color="#FF0000"red/font,
font color="#0000FF"blue/font, and
img src="../assets/images/sandaa.jpg" width="267" height="200" border="0" alt="My Dog Sandaa" align="right" hspace="8"
If you use the RIGHT value of the ALIGN
attribute, the image will be aligned to the right margin,
and text will appear to the left of the image starting at
the top of the image. Any text longer than one line flows
down along the left side of the image. This image uses RIGHT
alignment. RIGHT alignment is also used quite often for images.
Click Sandaa's picture to see an enlarged photo.
a href="#top"Return to Top/a
Back to the
Cafe LaTe HTML Tutor/a
Your new page should look like this.
Now, to learn about one more type of link, let's go to the next lesson...
- Internal links are links to other places within the same page.
- Destination anchors are set using the NAME attribute of the anchor tag.
- Source links use an ordinary anchor tag with an HREF attribute, but the HREF value is set to the name of the destination anchor. A pound sign (#) is placed before the destination name.
- You can also link to internal destination anchors on other pages on other websites.
Last revision: 2002/03/04,