Difference between revisions of "HTML:Hyperlinks"
| Line 48: | Line 48: | ||
You can also anchor tags to navigate to different parts of one webpage. Open up your preffered text editor (e.g. Notepad or PSPad), copy and paste the following code, save it and open it in your web browser for a working example. When you click on a link at the top, it jumps to the heading or paragraph that has been specified in the code. | You can also anchor tags to navigate to different parts of one webpage. Open up your preffered text editor (e.g. Notepad or PSPad), copy and paste the following code, save it and open it in your web browser for a working example. When you click on a link at the top, it jumps to the heading or paragraph that has been specified in the code. | ||
| + | <nowiki> | ||
| + | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | ||
| − | + | <HTML> | |
| + | <HEAD> | ||
| + | <TITLE> | ||
| + | My first Anchor page | ||
| + | </TITLE> | ||
| + | </HEAD> | ||
| + | <BODY> | ||
| + | <UL> | ||
| + | <LI> | ||
| + | <A href="#cats">Cats</A> | ||
| + | </LI> | ||
| + | <LI> | ||
| + | <A href="#dogs">Dogs</A> | ||
| + | </LI> | ||
| + | <LI> | ||
| + | <A href="#dolphins">Dolphins</A> | ||
| + | </LI> | ||
| + | </UL> | ||
| + | <H1>Introduction</H1> | ||
| + | <P> | ||
| + | This is a website created to test Anchors. It is an example on the Wiki. Click links to | ||
| + | navigate to different headings on this page. | ||
| + | </P> | ||
| + | <H1><A name="cats">Cats</A></H1> | ||
| + | <P> | ||
| + | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus diam. Nullam sit | ||
| + | amet erat. Nunc turpis purus, hendrerit vitae, volutpat a, posuere eget, erat. Etiam | ||
| + | risus. Maecenas nec sapien. Maecenas rhoncus elit eu augue. Etiam ut tortor. | ||
| + | </P> | ||
| + | <P> | ||
| + | Nulla condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada | ||
| + | fames ac turpis egestas. Vivamus sit amet leo. Morbi ut pede quis sapien posuere | ||
| + | ultrices. Fusce arcu arcu, consectetuer sed, pretium eu, consequat eu, ante. | ||
| + | Pellentesque suscipit. | ||
| + | </P> | ||
| + | <H1><A name="dogs">Dogs</A></H1> | ||
| + | <P> | ||
| + | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus diam. Nullam sit | ||
| + | amet erat. Nunc turpis purus, hendrerit vitae, volutpat a, posuere eget, erat. Etiam | ||
| + | risus. Maecenas nec sapien. Maecenas rhoncus elit eu augue. Etiam ut tortor. Vestibulum | ||
| + | gravida posuere sem. Sed at mauris. Sed lacinia convallis quam. Aliquam in erat. | ||
| + | </P> | ||
| + | <P> | ||
| + | Nulla condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada | ||
| + | fames ac turpis egestas. Vivamus sit amet leo. Morbi ut pede quis sapien posuere | ||
| + | ultrices. Fusce arcu arcu, consectetuer sed, pretium eu, consequat eu, ante. | ||
| + | </P> | ||
| + | <H1><A name="dolphins">Dolphins</A></H1> | ||
| + | <P> | ||
| + | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus diam. Nullam sit | ||
| + | amet erat. Nunc turpis purus, hendrerit vitae, volutpat a, posuere eget, erat. Etiam | ||
| + | risus. Maecenas nec sapien. Maecenas rhoncus elit eu augue. Etiam ut tortor. | ||
| + | </P> | ||
| + | </BODY> | ||
| + | </HTML></nowiki> | ||
====A Note on Frames==== | ====A Note on Frames==== | ||
Revision as of 11:45, 1 February 2007
Introduction
A Hyperlink is one of the key features that make a web page different from a formatted text document. A hyperlink is a link from one web page to another, or to another file, such as video or sound, or occasionally, a link from one part of a page to another part of the same page. It is the way in which you can connect a series of web pages together and it is the heart of how the World Wide Web works. So far, we have looked at tags which manipulate the way information is displayed in web pages, now we’ll look at a powerful tag which forms the basis of how internet pages are joined together to form the "web."
The Anchor Tag
The ANCHOR tag is a very versatile tag, in that it creates links to other information – web pages, documents, files, images, or any other computer file which is accessible. Like most of the tags we have looked at so far, the anchor tag has both a start and end tag <A></A>.
HREF- linking pages together
In order to link to other pages, you must set the attributes of the anchor tag. The first attribute we’ll look at is the HREF. HINT: HREF stands for Hypertext Reference.
The HREF can be used to connect to many types of data file.
Try the following:
Please visit the <A href="http://www.scit.wlv.ac.uk"> School of Computing and IT </A> for more details
The words "School of Computing and IT" are underlined and in blue to show that this is the hyperlink. When you use the mouse to position the pointer over the hyperlink (but not click it), the mouse pointer will change to a hand, and a left-click of the mouse on the underlined words will cause the web browser to load the page pointed to by the value in the HREF attribute.
Create and save the following two web pages in the same folder.
Web page 1 (Save this as page1.htm):
<H1>Page 1</H1> This is the first web page, it links to the second web page when you click <A href="page2.htm">HERE</A>
When you click on the link in the first page, it loads the second page, and vice versa. This is the simplest example of how to connect web pages together.
HINT: two or more web pages which join together are called a website.
HREF- Linking to other files
You can link to other types of file by changing the value of the HREF attribute to anything that can be opened in a web page. Try the following example:
<H1>Essential Documents</H1> This is a link to an<A href="http://www.scit.wlv.ac.uk/logos/msdnaa2.jpg">image of the MSDNAA logo</A> on SCIT's homepage.
This hyperlink links to an image. What happens when you click on this link is dependant on your browser, operating system and installed software. If you are using a PC, with Internet Explorer, the image will open in your web browser. If you don’t have a viewer for this image installed, it might open in another program, or may ask you where you would like to save the document.
You can use the ANCHOR tag to link to any public file or folder on the Internet.
HREF- Linking to different sections of a page This section has been written by Cara Hughes (0615410).
You can also anchor tags to navigate to different parts of one webpage. Open up your preffered text editor (e.g. Notepad or PSPad), copy and paste the following code, save it and open it in your web browser for a working example. When you click on a link at the top, it jumps to the heading or paragraph that has been specified in the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE> My first Anchor page </TITLE> </HEAD> <BODY> <UL> <LI> <A href="#cats">Cats</A> </LI> <LI> <A href="#dogs">Dogs</A> </LI> <LI> <A href="#dolphins">Dolphins</A> </LI> </UL> <H1>Introduction</H1> <P> This is a website created to test Anchors. It is an example on the Wiki. Click links to navigate to different headings on this page. </P> <H1><A name="cats">Cats</A></H1> <P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus diam. Nullam sit amet erat. Nunc turpis purus, hendrerit vitae, volutpat a, posuere eget, erat. Etiam risus. Maecenas nec sapien. Maecenas rhoncus elit eu augue. Etiam ut tortor. </P> <P> Nulla condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sit amet leo. Morbi ut pede quis sapien posuere ultrices. Fusce arcu arcu, consectetuer sed, pretium eu, consequat eu, ante. Pellentesque suscipit. </P> <H1><A name="dogs">Dogs</A></H1> <P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus diam. Nullam sit amet erat. Nunc turpis purus, hendrerit vitae, volutpat a, posuere eget, erat. Etiam risus. Maecenas nec sapien. Maecenas rhoncus elit eu augue. Etiam ut tortor. Vestibulum gravida posuere sem. Sed at mauris. Sed lacinia convallis quam. Aliquam in erat. </P> <P> Nulla condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sit amet leo. Morbi ut pede quis sapien posuere ultrices. Fusce arcu arcu, consectetuer sed, pretium eu, consequat eu, ante. </P> <H1><A name="dolphins">Dolphins</A></H1> <P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus diam. Nullam sit amet erat. Nunc turpis purus, hendrerit vitae, volutpat a, posuere eget, erat. Etiam risus. Maecenas nec sapien. Maecenas rhoncus elit eu augue. Etiam ut tortor. </P> </BODY> </HTML>
A Note on Frames
If you use frames in your website, you can also use the "target" attribute of the anchor element to set which frame the target page will open in, or whether the link will open in a new window or its parent window.
For example, to get the link to open in a new window try:
<A href="page2.html" target="_BLANK">Page2</A>
or to get the link to open in the frame you specify:
<A href="page2.html" target="YOUR-FRAME-NAME">Page2</A>
TIME TO PRACTICE
Add some hyperlinks to the long text web page created in the previous chapter. Create some links to some relevant web pages that you know.
Ready to move on?
When you're happy with the content of this section, try 05 - Images
