If you have not already planned out your proposed web site start by doing it now.
A reference to a file or web page that contains the full address. E.G. The home page is:
http://leeds-uk.com This is a link to another Web site and therefore Absolute linking must be used. The full URL is required.
More examples are below. Linking to another page
This reference does the same job as an absolute reference, but misses out most of the address. Relative linking always omits the http://www.your-sites-name.com/
part of the URL
When referencing a location on the same Web site, it is best to use Relative Linking. The file is found based on the location relative the current file
To link to another file in the same folder as the current document, simply enter the filename.
To link to a file in a sub folder of the current document’s folder, provide the name of the sub folder, then a forward slash /, and then the filename.
To link to a file in the parent folder of the current document’s folder, precede the filename with ../
(where “..” means “up one level in the folder hierarchy”).
More Examples are below Linking to another page
There is a very big advantage in using Relative Linking. It allows you to move or copy your site, say from your local site on your hard drive, on to your hosts server, without changing all of the links, because relative to each other they are in the same location.
This link goes to a file index.htm which is in the same directory as the current page. Note that the default colours of a link are blue underlined text.
Relative Address Code
Direct Address Code
Both Display as: Home
This link goes to a file index.html which is in a directory up one level ( note the ../ in the relative version) from directory html containing this page. Note that the default colours of a link are blue underlined text.
Relative Address Code
<A href="../index.html">Home tutorials4u.com</A>
Direct Address Code
<A href="http://tutorials4u.com/index.html">Home tutorials4u.com</A>
Both Display as: Home tutorials4u.com
Named anchors let you set markers in a document and are often placed at a specific topic or at the top of a document. You can then create links to these named anchors, which quickly take your visitor to the specified position. Also known as a target. The anchor will be displayed on the top line of the page. Each anchor on a page must have a unique name, but the same name can be used on different pages. E.g. I have an anchor named Top on the top line of each page. At regular intervals down the page are links to Top, this allows the user to return to the Top of the page, with easy access to the Page content links, or the Site links
Anchors are invisible, but they are there. There is an anchor immediately above the sub heading above and the declaration that I used follows. The H2 element is also shown for clarity.
<a id="DeclareAnchor"></A> <h2>Declare the Anchor</H2>
Note that Anchor ids:
Place the cursor at the spot where you wish to insert the
anchor. Do this in Design view.
On the Menu bar click the Target button
In the Objects panel click the Anchor button .
If you did not customise the Objects panel as per:
Add Additional Buttons to the Common Category or
Create your own category.
it is in the invisibles section.
Enter a short name with no spaces. Note: Anchor names are case sensitive.
The target marker appears
If an anchor marker doesn't appear at the insertion point location, choose View > Visual Aids > Invisible Elements.
Sample of a Link Declare the Anchor
The code for this is:
Sample of a Link <A href="#DeclareAnchor">Declare the Anchor</A>
The A element is used again but this time is followed by the href attribute with a value "#DeclareAnchor"
Note that a hash is placed before the name.
Select the text (or image see below) which you wish to link from
Click Link icon
Scroll to the anchor
Select the name of the target
In the properties window drag the Point-to-File icon to the anchor. Note a line appears while you drag
Basically the same as linking from text. The same considerations of Absolute or Relative linking must be made.
In the code in place of the text you use the SCR tag with its own link to an image file. In the following examples I will use a a text link and a corresponding image link
<A href="#Top">Top of Page.</A>
<A href="#Top"><IMG src="graphics/top.gif" width="30" height="45" border="0"></A>
This image is top.gif
Note how the actual link is the same in both text and image methods.
In this case a link to an anchor, but links to external sites or to other pages on your own site are the same as a text version.
Links have a typical default appearance, being underlined and a colour depending on the link state. The 4 states are:
The appearance of the link can be altered in CSS for these 4 states and you will learn how to do this in a style sheet.
Probably one of the best features of the web is the ability to link. Linking allows you to click on one spot on a page and be:
Web sites consist of one or more pages.
Pages contain code that allows the user to easily move (navigate) around the site or page.
There are many ways of achieving this, which will learn in this lesson.
Some of the navigation system used on this page is shown below.
The underlined word linking is an example of how a link to another page can be made.
The panel on the left of the pages on this site allow the user to navigate to different pages on the site