Web Design Tutorials and Lessons: Inserting Target Links

HOME

Stay at Home and Learn

Web Design Tutorials

HTML Frames - Part Four

Computer Tutorials List

Inserting Target Links

Now that we have our Frameset page working properly, we can turn our attention to the targeting.

In your HTML Editor, click on File > Open
The Open dialogue box appears
Open the web page leftside.html
This is just a normal web page, and should look like this:

The Leftside HTML page

Insert a Hyperlink by clicking on Insert from the menu bar
From the drop down menu, click on Link
From the sub menu click on Target Hyperlink. The dialogue box appears:

The Target Hyperlink dialogue box

Ignore the Target part of that dialogue box. That's for normal hyperlinks. Instead, click the button "Find HTML Page"
The Open dialogue box appears
Locate the web page that you saved earlier called page1.html and click Open
The link that is inserted will look like this:

<A HREF = "page1.html">Link Text Here</A>

Click your cursor after the html part and type a space
Then type TARGET = (it doesn't have to be in capital letters)

<A HREF = "page1.html" TARGET = >Link Text Here</A>

Now is where the NAME from your Frameset document comes into play. So type the NAME of the frame you want to target:

<A HREF = "page1.html" TARGET = frame2>
Link Text Here
</A>

(You can tidy up your code like the one above, making it easier for you to read. This won't effect how it looks in a browser.)

Click File > Save to save your work, and reload your frame document. It should now look like this:

What your Web Page will look like

You can click the link to see if it work, but as your web page called page1.html is also a blank white page, you won't notice any difference. To remedy this, open up page1.html. Type some text in between the two BODY tags. Save page1.html again, and then reload the frames document. Now click your link. You should see the text you typed appear in the right hand side frame.

Insert another two links into the leftside.html page, and the code will look like this:

Insert 3 more hyperlinks

Notice that the TARGET is exactly the same for all three hyperlinks. The difference is with the HREF attribute, which has different web pages for each link.

The only thing left to do is to open up page2.html and page3.html. Type some text into these two pages, save them and then reload your frames page. When you click on each link, page 1, 2 and 3 should appear in the right hand frame.

And that's it for a simple frame document. As an experiment, open up the frameset.html page in your Editor and change Cols to Rows. Save the web page and view it in your browser to see the difference between Cols and Rows.

In the next lesson, we'll see how to contruct a document with frames in Rows AND Columns.

<-- Back One Page Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses