HTML: A Guide to Hard-Coding

 
   

Starting your first page

The Body

Paragraphs

Headings

Images

Fonts

More Fonts

Line Breaks

Links

Colors

Backgrounds

Horizontal Lines

Mailto

Basic Tables

Advanced Tables

Putting your page Online

Frames

Forms

The Head

JavaScript Drop-Down Menu

Cascading Style Sheets

Basic HTML tags

HTML Home

 

 

Dreamweaver Tutorial

Adobe Acrobat

Faculty Resource Center

 

Susan's Homepage

 

Links on the same Page

The final kind of link is an internal link. This is when you link to another point on the same page. For example, you may have a table of contents that displays each section when the title is clicked.

The first thing you need to do is set up some anchors where you want to jump to. For example, if you have some text that says, "Look at me at the Grand Canyon," but your picture of the grand canyon is until almost the bottom of your page, you need to scroll down to just above the picture and put in an anchor:

<A Name="canyon"> There is no closing tag for this, but it is essential that you remember what you name the anchor because you will need that information to create a link.

To make the link you would use this code:

<A HREF="#canyon">A picture of me at the Grand Canyon</A>

The # symbol tells the browser that the link in on the same page. When the text is clicked, the browser will search the page to find the anchor named "canyon".

The nice thing about internal anchors is that they do not need to be in any particular order. You can have the anchor before or after the actual link.

You can have as many or as few elements between the link and the anchor as you want.

You can also have pictures or images as links instead of only text. So, you could have someone click on a picture to take you to a different place, external or internal. All you do is link the image rather than text.

Save your file and reload in the browser.

You probably notice that there is a pink border around the image. This border indicates that the image is linked. If you don't want the border, say so in your image tag:

<img src="images/susan.jpg" border=0>

 

Go on to the next page.