Local HTML Links

Section Four - Links:
Lesson 4-2: Local Links

   Hi, As you have seen, basic web page building is not so difficult. If you have made it this far, you have already made tremendous progress. In the last lesson you learned how to create hyperlinks between pages on the Internet. In this lesson you will learn how to make local links; that is, links between different pages on your own site.

   Let's say you want to create a link to another page on your own site named mypage2.htm. Your link might look like this:

       Link 1:

A HREF="http://www.mysite.co.jp/mypage2.htm"

Page 2

/A

On the other hand, the same link might look like this:

Link 2:

A HREF="mypage2.htm"

Page 2

/A

   Link 1 looks like an external link. Link 2 is definitely a local link. This brings us to another important difference, the difference between absolute URLs and relative URLs.

   Link 1 is an example of a link using an absolute URL. An absolute URL uses the complete address, starting with http://... An absolute URL describes the exact location of a page. External links always use absolute URLs. However, this link is a local link, which happens to use an absolute URL. Absolute URLs may be used for local links, but relative URLs are simpler.

   Link 2 is an example of a relative URL. Relative URLs are used for links to other pages on your own site. The location of the HREF destination page is described relative to the current (source) page. If the destination page is a file in the same folder as the page on which the link is used, then all you need for the HREF attribute is the destination file name. For pages on your own site, you may use either absolute URLs or relative URLs.

   Images may be used as links. They can be used instead of text, or together with text, as the source of a link. Here is an example of a link which uses both text and an image as the source of the link:

A HREF="mypage2.htm"

IMG SRC="mygraphic.jpg"

Page 2

/A

Both the IMG tag and the text "Page 2" are put inside the anchor tag container. Clicking either the image or the text will take you to the same destination page.

Shortcut:

Use this button to open a new browser window with a list of all the files on your floppy disk. Be sure to put your floppy disk in the drive before clicking this button.

Practice:

Step 1 - Create a new file:

In order to link two pages locally, you must have two pages on your site to link, so, let's create a new page right now. Open Notepad, and create the following file:

html

head

title

Page 2: My Dog Sandaa

/title

/head

body

h1

My Dog Sandaa

/h1

img src="sandaa01.jpg" height="600" width="800" alt="my dog Sandaa"

/body

/html

Name this file mypage2.htm, and save it in the same folder as your first practice page. The image file sandaa01.jpg must also be placed in the same folder as your web pages. Pop up this window to look at sandaa01.jpg. Copy and save the image to the same folder as your web page. Save your new file and take a look at your page in your browser.

Step 2 - Create a text link back to your home page:

Next, add the red text to create a link back to your home page.

mypage2.htm

html

head

title

Page 2: My Dog Sandaa

/title

/head

body

h1

My Dog Sandaa

/h1

p

a href="mypage.htm"

Home

/a

/p

img src="sandaa01.jpg" height="600" width="800" alt="my dog Sandaa"

/body

/html

Save your file, take a look at it in your browser, and test the link. Your new page should look like this.

Need the
source file?

If you have not done the previous lessons, and are just starting here, use this button to pop up a copy of the file containing all material covered up to this lesson. Then, just save the file to a floppy disk.

Copy source file

Step 3 - Create a local link from your home page to your new page using an image for the link:

In Notepad, close your new file, and open your home page file (your first practice file - mypage.htm). Add the following red text to your file to create a link to your new file. The small photo of Sandaa will be used as a link.

mypage.htm

html head titleMy First Home Page/title /head body bgcolor="##eeffff" background="bg01.jpg" 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. brbrbr hr brbr Back to the a href="http://www.cafelate.homestead.com/files/html/html_tutor.htm" Cafe LaTe HTML Tutor/a brbr /body /html

Save your file and check it in your browser. Make sure the links in both files work.
Your home page should look like this. Your new page should look like this.

Review:

Local links are links to other pages on your own site.
Absolute URLs describe the exact location of a file using the complete address.
Relative URLs describe a file's location in relation to the current page.
Local links can use either absolute or relative URLs.
Images can also be used as links by placing the IMG tag inside an anchor tag container.


Previous Lesson			Next Lesson


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

Last revision: 2002/03/04, Copyright ©