Adding a Link

Playing with Text it's nice but did you see a web page without links?

Linking is the essence of the Web. Links are what make the Web so easy to navigate and use.

With one simple click on a link, the user can move anywhere in your Web site or to any other location on the Internet. Links are what turn the Internet into a worldwide network and you should always remember that this is what visitors to your Web site are looking for.

Add a text link to an image (about.html)
Add a text link to a Web site (about.html)
Build a new Web page (links.html)
Add a text link to a Web site (links.html)

At the end of this chapter your Web pages will look as follows:

Image please!

Let's begin by creating a text link to an image. First you will need an image for this.

Note - The image can be a photograph, cartoon, logo, etc. An image is a file with an extension like .jpg, .tif, .bmp, .png.

Making a place for images

Open Windows Explorer.
Go to drive C, to the justin folder.
Create a new folder called images, which will be a sub-folder (inside) of the justin folder. All the images for your personal Web site will be put into this new images folder (justin\images).

The image of George Washington Elementary School, as well as other materials connected with building your personal Web site, are in the book's Web site in Chapter 4. Instructions for using these materials are on the Web site in the Help menu.

Downloading images from the book's Web site

Surf to the book's Web site
Select Chapter 4
In the content pane, on the right hand side, you will see the images: NYcity.jpg and GWES.jpg
Download the two images to your computer. Instructions for downloading the images are available under the Help link on the left.

Note - If you do not find this C:\justin\images folder, go back to the paragraph with the title Making a place for images and follow the instructions carefully.

Link a text to an image

Viewing an HTML file in the browser

Open Windows Explorer.
Go to the folder justin you created on drive C. The HTML page about.html is located in this folder.
Double click on the about.html file to view it in the browser.

Viewing the source code of the HTML page

create a web page Return to Windows Explorer, highlight the file about.html, right-click with the mouse and choose Open With, and then choose Notepad. Notepad will open.

Add a text link to an image

You are going to create the text George Washington Elementary School a link to the image GWES.jpg. Pay attention that the text George Washington Elementary School is in bold (you put the tag before it and the tag after it), so, you are going to make the bolded text a link.

Put the cursor before George (left of the symbol <) and type

<a href="images/GWES.jpg" title="A special place to learn">

Now, put the cursor after School (right of the symbol >) and type </a>

The following will be displayed:

<a href="images/GWES.jpg" title="A special place to
learn"><b>George Washington Elementary School</b></a>

The value of the href attribute is the resource of the link. In this case, it is an image named GWES.jpg in a images folder.

The value of the title attribute is a toolTip. That's means that when you put the cursor over the link, you will see a small note - that is a toolTip.

Create the text New York a link to the image NYcity.jpg

Put the cursor before New York and type

<a href="images/NYcity.jpg" title="The big apple" target="_blank">

Now, put the cursor after New York and type
</a>

The following will be displayed:
```
<a href="images/NYcity.jpg" title="The Big Apple"
target="_blank">New York</a>
```
The value _blank of the target attribute means that when you click on the link, you will see the resource (the address that is written in the href attribute) in a new window.
Save the changes you made in the about.html file (see figure 4.1).

Figure 4.1: The about.html Web page with two text links.
Go to the browser window and click the Refresh\Reload button to view the changes you made in the about.html file.
Click George Washington Elementary School. What do you see?

Figure 4.2: The image of George Washington Elementary School (GWES.jpg).
Click the browser's Back button.
Click New York. What do you see?
Close the new window with the picture of New York.

The address of the image is a relative address, because it is relative to the location of the HTML page where the link is activated. You activated the link from the about.html page in the justin folder on drive C, and its address is:

C:\justin\about.html

The image GWES.jpg is located on drive C in the justin folder, in the sub-folder images, and its address is:

C:\justin\images\GWES.jpg

Since the folder images is a sub-folder (inside) of the justin folder, which also contains the about.html file, you must write the link as follows:

<a href="images/GWES.jpg" title="A special place to
learn"><b>George Washington Elementary School</b></a>

In fact, this link will work as long as the GWES.jpg image is located in the images folder. The images folder resides within the folder containing the page that activates the link, regardless of the folder's name that could be justin, Alan, Paul or Ashley (that is the meaning of relative address).

Note - Pay attention to the slash symbol. The Windows operating system uses the backslash (\) when displaying file addresses: images\GWES.jpg But on the Internet the forward slash (/) is used: images/GWES.jpg

Note - For Windows operating system the backslash (\) and the forward slash (/) are the same when reading file addresses.

The target attribute of the <a> tag defines where the content of the link is displayed. If you do not write the target attribute, the link will open in the same window. If the value of the target attribute is _blank, the link will open in a new window.

Link to an Internet address

You are going to create the text book a link to this book's Web site.

Return to the Notepad window with the content of about.html file.

Put the cursor before the text book (left of the letter b) and type

<a href="http://www.bookchamp.net/lookmom.html"
title="That's the best place to start!"
target="_blank">

Put the cursor after the text book (right of the letter k) and type </a>

The following will be displayed:

<a href="http://www.bookchamp.net/lookmom.html" title="That's the best
place to start!" target="_blank">book</a>

Save the changes you made in the about.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made in the about.html file (see figure 4.3).

Figure 4.3: Link to an Internet address.
The text book is a link. When you put the cursor above (over) the link, you will see a toolTip (title attribute) and the resource (href attribute) in the status bar in the lower left side of the browser window.

Any underlined text on the Internet that appears in blue, red or purple is probably a link.

You can check this out by moving the mouse cursor over the text. If the cursor changes its appearance from to , it confirms that this is a link.

A link is defined by means of the open tag <a> and the end tag </a>. The linked element, in our case this is text, appears between the tags. See the next chapter for how to create an image link.

The value of the attribute href of the <a> tag is the address of an HTML page or the address of an image.

Note - Even if you did not denote a particular page on the Web site, but only its name (for example: http://www.bookchamp.net), a page will open. This is the default page as defined in the internet server that stores the Web site that the link is directed to.
Close the browser window displaying the about.html file.
Close the Notepad window displaying the about.html file.

Building a new HTML page named links.html

Create a new page with links to your favorite Web sites

Open Windows Explorer.
Go to justin folder on drive C.
In the right pane, right click with the mouse. From the shortcut menu select New, and then Text Document.
Make sure that the new document, which is now named New Text Document.txt, is highlighted. If not, highlight it.
Change the name of the new document to links.html (note the change in the file name extension name from .txt to .html). A dialog box will appear asking if you wish to change the file name extension. Click Yes.

Viewing an HTML file in the browser

Double click on the links.html file (double or single click depending on your Windows definitions). The browser will open, with the file (which is still empty) in it, but nothing will be displayed because the document (links.html) is empty.

Viewing the source code of the HTML file

Return to Windows Explorer, highlight the file links.html, right-click with the mouse and choose Open With, and then choose Notepad. Notepad will open, but you will see nothing in it because the links.html file is still empty.

Typing the structure of a basic HTML page

In Notepad type:

<html>
 <head>
  <meta http-equiv="content-type"
    content="text/html;charset=iso-8859-1" />
  <title>Links</title>
 </head>
<body>

</body>
</html>

In the File menu, select Save to save the file.

Viewing an HTML file in the browser

Go to the browser window and click the Refresh\Reload button to view the changes you made.
On the browser window heading, you will see the word Links, which you wrote as part of the <title> tag. The content pane will remain empty (white).

Typing the content of the Web page

In Notepad, type the following text after the <body> tag and before the </body> tag. You can copy the text from the book's Web site, in Chapter 4. Instructions for using the text are on the book's Web site under the Help menu.

Links
Links to Web sites of special interest to me.
FirstGov for Kids
It provides links to Federal kids' sites along with
some of the best kids' sites from other organizations
all grouped by subject. Explore, learn and have fun.
BrainPOP
This is the leading producer of educational animated
movies. Original animated movies explain concepts in a
voice and visual style that is accessible, educational
and entertaining for both children and adults.
Free reading
Actually, this is the site that sends e-mail to my
parents every day. I don't read their mail but they
read it every day. Mom says that she's entitled to five
minutes' rest every day and she looks forward to her
daily e-mail session to unwind.
San Diego Zoo
In the San Diego Zoo, you will see some of the world's
rarest wildlife, including giant pandas (one of which 
is Hua Mei, the only American born panda cub in the
U.S.), and koalas. A great place to surf and great
place to visit.

Format the heading of the Web page

Format the text "Links" as a heading level 2 (<h2>).

<h2>Links</h2>

Format the paragraphs

Use the and tags to surround each paragraph (one paragraph for each Web site).

<p>
Links to Web sites of special interest to me.
</p>

<p>
FirstGov for Kids
It provides links to Federal kids' sites along with
some of the best kids' sites from other organizations 
all grouped by subject. Explore, learn and have fun.
</p>
<p>
BrainPOP
This is the leading producer of educational animated
movies. Original animated movies explain concepts in 
a voice and visual style that is accessible, educational 
and entertaining for both children and adults.
</p>
<p>
Free reading
Actually, this is the site that sends e-mail to my 
parents every day. I don't read their mail but they 
read it every day. Mom says that she's entitled to 
five minutes' rest every day and she looks forward 
to her daily e-mail session to unwind.
</p>
<p>
San Diego Zoo
In the San Diego Zoo, you will see some of the world's
rarest wildlife, including giant pandas (one of which 
is Hua Mei, the only American born panda cub in the 
U.S.), and koalas. A great place to surf and great
place to visit.
</p>

Save the changes you made in the links.html file.

Viewing your HTML file in the browser

Go to the browser window and click the Refresh\Reload button to view the changes you made in the links.html file.
Return to the Notepad window where the content of the links.html file is displayed.

Add a line break

Add a line break tag ( tag) following the texts: FirstGov for Kids, BrainPOP, Free Reading and San Diego Zoo.

FirstGov for Kids<br />
BrainPOP<br />
Free reading<br />
San Diego Zoo<br />

The tag denotes a line break. When the browser sees a tag it automatically moves to a new line. In effect, the tag says: "The following element (text, image) will start from the left". In order to force the browser to start a new line where you want, you must use the tag.

Format the header to be a link

Each paragraph has a header: FirstGov for Kids for the 1st, BrainPOP for the 2nd and so on.

You are going to create each header a link to a Web site.

Use the <a> tag and its attributes (href, title and target) to create the link.

Create the text FirstGov for Kids a link to http://www.kids.gov, to be opened in a new window with a toolTip saying: "Explore, learn and have fun".

The following will be displayed:

<a href="http://www.kids.gov" title="Explore, learn and have fun"
target="_blank">FirstGov for Kids</a><br />

Note - You can write the attributes (href, title, target) of the <a> tag in any order you want. For example:

<a href="http://www.kids.gov" title="Explore, learn and have fun"
target="_blank">FirstGov for Kids</a><br />

is the same as:

<a href="http://www.kids.gov" target="_blank" title="Explore, learn
and have fun">FirstGov for Kids</a><br />

Create the text BrainPOP as a link to http://www.brainpop.com, to be opened in a new window with a toolTip saying: "The more you know".
The following will be displayed:
```
<a href="http://www.brainpop.com" title="The more you know"
target="_blank">BrainPOP</a> 
```
Create the text Free reading as a link to http://www.dearreader.com with a toolTip saying: "Take about 5 minutes to read".
The following will be displayed:
```
<a href="http://www.dearreader.com" title="Take about 5 
minutes to read">Free reading</a> 
```
Note - The link to http://www.dearreader.com will open in the same window because you did not use the target attribute. Notice that the default value of the target attribute is _self, which means that even if you do not use/write the target attribute of the <a> tag, the browser acts like you used the value _self.

Create the text San Diego Zoo as a link to http://www.sandiegozoo.com, to be opened in a new window with a toolTip saying: "special Zoo activities".

The following will be displayed:

<a href="http://www.sandiegozoo.com" title="special Zoo
activities" target="_blank">San Diego Zoo</a><br />

Now take a look at the source code of the page that you built:

<h2>Links</h2>
<p>
Links to Web sites of special interest to me.
</p>
<p>
<a href="http://www.kids.gov" title="Explore, learn and 
have fun" target="_blank">FirstGov for Kids</a><br />
It provides links to Federal kids' sites along with
some of the best kids' sites from other organizations 
all grouped by subject. Explore, learn and have fun.
</p>
<p>
<a href="http://www.brainpop.com" title="The more you 
know" target="_blank">BrainPOP</a><br />
 ::
 ::
<a href="http://www.dearreader.com" title="Take about 5 
minutes to read">Free reading</a><br />
 ::
 ::
<a href="http://www.sandiegozoo.com" title="special Zoo 
activities" target="_blank">San Diego Zoo</a><br />

Save the changes you made in the links.html file.

View an HTML file in the browser

Go to the browser window and click the Refresh\Reload button to view the changes you made in the links.html file (see figure 4.4).

Figure 4.4: The links.html file with links.
Close the browser window where the links.html file is displayed.
Close the Notepad window where the links.html file is displayed.

Part I

Part II