Internal HTML Links

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. bookmark

bookmark

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.

Destination Anchors
Source Anchors
Linking to Internal Anchors on Other Pages or Sites
Practice
Review

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.

Destination Anchors:

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:

a name="bookmark1"

...

/a

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.

Source Anchors:

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:

a href="#bookmark1"

Link Text

/a

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:

a href="http://www.mysite.com/myhomepage.htm#bookmark1"

Link Text

/a

This tag would get the "myhomepage.htm" file from your site, and jump right to the "bookmark1" internal anchor on that page.

Practice:

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.

mypage.htm

html head titleMy First Home Page/title /head body bgcolor="##eeffff" background="bg01.jpg" a name="top"/a h1 align="center"HTML Tips and Tricks/h1 br This is a sentence with spaces between the words. The extra spaces are ignored.br This   sentence    uses   space  codes between    the  words. brbr p    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 /b/i/u/big. brbr hr div align="center" brbr This text is font size="+1"large/font, font size="+2"larger/font, and font size="+3"even larger/font still. brbr This text is font color="#FF0000"red/font, font color="#008000"green/font, font color="#0000FF"blue/font, and font color="#FF00FF"pink/font. /div a href="mypage2.htm" img src="../assets/images/sandaa.jpg" width="267" height="200" border="0" alt="My Dog Sandaa" align="right" hspace="8" /a    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. brbr a href="#top"Return to Top/a brhr brbr Back to the a href="http://www.cafelate.homestead.com/files/html/html_tutor.htm" Cafe LaTe HTML Tutor/a brbr /body /html

Your new page should look like this.

Review:

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.

Now, to learn about one more type of link, let's go to the next lesson...


Previous Lesson			Next Lesson


	[Cafe LaTe Home] [Chat Lounge] [Community Center] [Newspaper] [HTML Tutor]

Last revision: 2002/03/04, Copyright ©