One of the most important features of any website is easy navigation. Links are used to navigate around a website and draw upon information from other websites too. Links are pretty straightforward so long as the tags conform to standards. You can attach links to words or images by using the <a href> and </a> tags, otherwise known as anchor tags. Between these tags must be the key word or words that you want linked. For example, to create a link to the homepage of the art4arts8 website, the link would be written as follows:


Link to another website


<a href="http://www.art4arts8.co.uk" target="_blank">art4arts8</a>  

and it would look like this: art4arts8


The target="_blank" code instructs the browser to open the link in a new browser window. If you leave out target="_blank" the link will open in the same window.



<a href="http://www.bbc.co.uk" target="_blank">BBC</a>

&nbsp;

<a href="http://www.google.co.uk" target="_blank">Google</a>

&nbsp;

<a href="http://www.bing.com">Bing</a>

&nbsp;

<a href="http://www.art4arts8.co.uk">art4arts8</a>



The links should look like this Example.


The first two links will open in a new window. The last two links will open in the same window, thus requiring the use of the Back Button to navigate. In the code above the insertion of a &nbsp;, or non-breaking space creates a gap between the links. In your work, now remove these to see the effect.


Navigation


The combination of a list and links is a step towards a navigation feature for your website. You can create in-line links like those above or a vertical list as follows. Below, links have been added to an unordered list. Note that the link destination shows #nogo, this is because do not yet have a page to link to! Copy and paste the code below into your work, save again before refreshing your browser.



<h4>This is an unordered list of links</h4>

<ul>

<li><a href="http://www.bbc.co.uk" target="_blank">BBC</a></li>

<li><a href="http://www.google.co.uk" target="_blank">Google</a></li>

<li><a href="http://www.bing.com">Bing</a></li>

<li><a href="http://www.art4arts8.co.uk">art4arts8</a></li>

</ul>



The result is a vertical list of bulleted links, see this Example.


Link to a section on the same website


You can also link to places within the current webpage. For example, on this page the headings include an id attribute. Such an id would look like this:


<h4 id="tables">HTML Tables</h4>.


The html for the link would be written like this:


<a href="html_tutorial_tables.html#HTML Tables">HTML Tables</a>

and it would look like this: HTML Tables


Email Link


A link to send an email is pretty straightforward. Use the 'mail:to' instruction within an anchor. Ensure the replace any spaces in the subject area with %20.



<a href="mailto:art4arts8@gmail.com? subject=Enquiry%20from%20art4arts8%20website>Contact by email</a>



The result is link which when clicked opens up your email software with the email address and subject line already filled in. See the Example.




>>Next - Images in HTML>>



Summary of HTML Tips so far


Use small letters throughout your HTML code

Save your webpages using the .html file extension.

Refresh your browser to see the changes that you have made.

Ensure HTML tags are in the correct order.

Ensure HTML code is written in US English.

The front page of a website should be saved as 'index.html'.

Use percentage or the em method to define font sizes.

Use <br /> tags to create whitespace.

Use <td></td> tags to create a blank table cell.

Use &nbsp; to create a horizontal space within text.

Use target="_blank" on a link for it to open up in a new window.

Use id= to place a 'marker' to a heading.

Use href=mailto: to create a link to an email address.


Summary of HTML Tags


<a>

Anchor Tag for creating links.

<a href=

Reference to other website or web page

<b>

Bold tag.

<br />

Break tag.

<body>

Designates the body of the web page. Must come after the </html> tag.

<caption>

Adds a caption to a Table.

<h1>

Heading tag number from 1 to 6, with h1 having the largest font.

<html>

Designates the document as a web page.

<i>

Italics tag.

id=

Refers to section within HTML document

mailto:

used to creat a link to an email address.

&nbsp;

Non-breaking space

<p>

Paragraph tag.

style=

Used within the <p> tag to define font type, colour and size.

<table>

Adds a Table to the web page.

<td>

Table data in the table cell.

<th>

Table heading.

<tr>

Defines a Table row.

<u>

Underline tag.