Hyperlinks, Tables, and Forms - Cognizant E-learning Modules

Learning Objectives

After completing this topic, you should be able to

 insert hyperlinks into a web page

 recognize tags used to create a table in HTML

 recognize the tags that are used to create forms in HTML 1. Hyperlinks

Hyperlinks provide a clickable link between web pages on the Internet.

You can create a hyperlink that's linked to another page within the same site, to a page on another site, or to a section of the current page.

A hyperlink can be represented by text or an image.

Graphic

The product.htm web page contains the following text: "At EarthFarm we sell only organic produce in our farm shop. You can see our complete product list here." The word "here" is a hyperlink.

An external hyperlink links two web pages.

Try It

You want to view the HTML for the external hyperlink.

To complete the task

1. Select View - Source

Using keyboard: The keyboard alternative is Alt+V, C.

The HTML for the external hyperlink displays.

The HTML for the link is displayed. You scroll through it to view the link at the bottom of the page.

Graphic

This code is highlighted: <a href="produce_list.htm">here</a>

36 Code

approach to farming means that in addition to making vegetables,

fruit, meat, and honey available to you, we can offer dairy products including goats cheese and yogurt and also preserves and relishes made in our farm kitchen.</font></p>

<p><font face="Arial, Helvetica, sans-serif" size="2">At EarthFarm we sell only organic produce in our farm shop. You can see our complete produce list <a href="produce_list.htm">here</a>.</font></p>

</td>

</tr>

</table>

</td>

<td height="380" width="160" align="left" valign="top"> <!--

#BeginEditable "info1" -->

<table width="160" border="0" height="600" align="right"

bordercolor="#000000">

<tr>

</tr>

<tr>

<p align="center"><a href="recipes.htm"><img src="assets/eggplant.jpg"

width="133"height="133" border="0"></a>

<p/>

In HTML, you should have the following elements within an external link:

Code

anchor tags

The anchor tags <a> </a> surround the text or image that represents the link on the web page.

hypertext reference attribute

The hypertext reference attribute, or href attribute, identifies the file or Uniform Resource Locator, also known as URL, that the anchor text or image links to.

You place the href attribute within the first anchor tag followed by the equals sign and the page that you want to link to.

file or URL, and

37

You can link to a file, a fully qualified URL, or a partial URL. You can also link to another anchor on the current page. In this case, you link to a page in the same folder as the page with the anchor called "produce_list.htm".

text for the link

The text for this link is the word "here." On the EarthFarm web page, it's underlined and in a different color to the rest of the text. When you move your mouse over it, the pointer changes to a hand so you know it can be clicked.

You can also create hyperlinks using an image as the clickable anchor.

The file that the image links to is homepage.htm. The image is held in the assets folder of the web site and is called "ef_workers.jpg".

Graphic

The sample image-based hyperlink is <a href="homepage.htm"><img src="assets/ef_workers.jpg"

width="130" height="130" border="0"></a></p>

Code

<p align="center"><font size="2"

face="Arial, Helvetica, sans-serif">

<a href="recipes.htm">Visit our recipes page

</a></font></p>

</div>

</td>

</tr>

<tr>

<img src="assets/ef_workers.jpg"

width="130" height="130" border="0"></a></p>

<p align="center"><font size="2"

face="Arial, Helvetica, sans-serif">

<a href="homepage.htm">Details

about our Farm</a></font></p>

38

</td>

You select File - Exit to close the Notepad file that shows the HTML.

Try It

You want to view the hyperlink's target page.

To complete the task

1. Click the here hyperlink

The hyperlink's target page downloads.

The produce_list.htm page contains a number of internal links. You use internal links to jump to other parts of the same document without having to scroll.

Graphic

There are a number of headings at the top of the page that are also hyperlinks. They are "Organic Food", "Organic Vegetables", "Organic Fruit", "Organic Meat", and "Flowers and Herbs".

Try It

You want to move to other parts of the HTML document without having to scroll.

To complete the task

1. Click the Organic Vegetables link

The Organic Vegetables section of the page displays.

You select View - Source to view the HTML code for the produce_list.htm page.

In document Cognizant E-learning Modules (Page 36-39)