Create a Site with HTML


Add Links to a Web Page with HTML TRY This SiteBuilder FREE! - No Credit Card

Links or hyperlinks are those little underlined words on a web page that you click to go to another location.

Hyperlinks are created using the anchor tag.

The anchor tag in its most basic form looks like this: <a></a>

When the anchor tag is used as a hyperlink it looks like this:
<a href=""></a>

The filename of the page your are going to ( or URL) is placed between the quotation marks.

A short description or visible page name ( commonly called link text) is placed between the tags.

If we were going to page 2 it might look like this:
<a href="page2.html">Page 2</a>

You can also place pictures or images between the tags to create buttons on your web page.

We've supplied three buttons for our demo site. The 3 pages we'll create for the site are index.html, about.html and friends.html.

Create beautiful,professional websites
WITHOUT Learning to Code!!

Use this NEXT GENERATION builder
to make blogs, portfolios or
full blown websites in minutes.
No Experience Needed!

Check out these Example websites
created by people just like you,
with no knowledge of HTML coding.

SquareSpaceSquareSpace

Start Your Website Now!SquareSpace


The Home page of your website should always be named index.html. This is by default the page that will open on your website when someone types your URL or domain name into a browser.

Here is what the code looks like with our 3 anchor tags and button images.
<a href="index.html"><img src="images/home.gif"></a><br>
<a href="about.html"><img src="images/about.gif"></a><br>
<a href="friends.html"><img src="images/friends.gif"></a>
<br>

The links will be placed in our left division under the strawberry.

To make it easier to control everything in the left division we'll start out by placing the strawberry image in a paragraph.
Change the code for the strawberry image to look like this:
<div id="left"><p><img src="images/strawberry.jpg">

We'll add the closing tag for the paragraph when we add the next block of code.

Notice the line break tag which is used to break the lines of code and add space. The line break tag looks like this: <br>

This block of code is going to be placed in the left cell under the code for the strawberry. The left cell will then look like this:
<div id="left"><p><img src="images/strawberry.jpg">
<br>

<a href="index.html"><img src="images/home.gif"></a><br>
<a href="about.html"><img src="images/about.gif"></a><br>
<a href="friends.html"><img src="images/friends.gif"></a></p>
<br>
 </div>

Add the code and save the web page. If you look at the page in your browser you will see that the buttons are arranged to the left and display a border. Let's add the code to the style sheet that will fix the alignment and indent problem. Borders will come next.

When you add an id attribute to an element on a web page it is defined in the style sheet by preceeding it's name with a pound sign.


Now we'll add 2 lines of code to the style sheet that will center the buttons and remove the text indent.
#left p {
text-align: center;
text-indent: 0}

Copy the code and paste it into the style sheet. Save the changes.

Now open the web page in your browser or click the refresh button to see your link buttons centered under the strawberry. The border is still there.


Removing Borders

Images as Links
Anytime you use an image as a link it will have a default border. You can add an attribute to the tag border="0" or for more concise code, use the border:none property in your style sheets.

To remove the borders of the links, add this simple block of code to the style sheet:
#left img {
border: none }

Save the changes to the style sheet and refresh the page in your browser.


That completes the body section of our template. Now we'll add some code to the head section and we'll be ready to create our pages.

Head Section

The head section and doctype tag of an HTML document contain information for browsers and search engines.

The head section is a very important part of your HTML page. The most important and the very first tag that should appear is the title tag.
The basic code is:
<title></title>

Your title tag is one of the major tags used by search engines to determine the position of your website. It should contain the major keyword phrases that you want your site to be found for when people search on the net.

Learn as much as you can about keywords and their use in web page content before you start adding text to your web pages.

Add the code for the title tag directly below the opening <head> section tag.

Directly below the title tag add the code for your meta tags. These tags are also used by search engines. The description should contain a brief description of the content of your web page. You should also place your keyword phrases in these tags.

Place your keyword phrases separated by commas in the keywords meta tag.

Here's the code for your meta tags:
<meta name="description" content="">
<meta name="keywords" content="">

When your head section is complete, save all changes and look at the page in your browser.

Code for head section:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>


Take a short quiz on the information you just learned.

That completes Phase I of this tutorial. I recommend that you delete all of your work and start over. Work through the lessons until you see the connection between the tags on your web page and the entries in your style sheet.

When you are comfortable Start Phase II