Newbie's Guide to Web Design - Lesson 5
Retail Sign Shops Network
Members Log-in Join the Retail Sign Shops Network List your Sign Shop Find a Sign Shop Consumer Buyer's Guide
Find a Sign Shop

Newbie's Guide to Web Design

HTML Lesson 9

Hyperlinks

A hyperlink is an active area of a picture or text, that when you click it you are taken to a new web site or page within the current. If you want to create a useful web site then you must have several hyperlinks.

Hyperlinks can be basically created out of anything, which means anything you see on the internet can be a hyperlink, usually they are described out for you, so you know what your looking at. An example is navigation buttons, submit buttons or just plain old text links to another web site or page.

Here are some examples of hyperlinks:

Text links –

Sign Industry

Retail Sign Shops

Web Workx

Visual or Photo links -

Now lets give it a try and start adding these to your pages. First open a new notepad document and enter all the proper tags and then in the body of your page, then type <a href="http;//www.signindustry.com">Sign Industry</a>. Then save and load your page.

Next we will add an image to your page and put a hyperlink on it. In the body type <img src="/your image name here.image extension"> in order to insert an image you need to have one in the same folder that you are going to save your page to.

If you do not have an image, then just open up any paint program example paint brush and create something simple such as a circle with a color. Now that you have your image make sure you save it to the same directory that your html document is saved in so when we use the link tag it can properly reference for it.

Example of html you should have so far:

<html>

<head>

</head>

</body>

<a href="http://www.signindustry.com">Sign Industry</a>

<p>

<img src="/circle.gif">

</body>

</html>

Now lets add a hyperlink to your picture. Type this line in your body <a href=http://www.signindustry.com"><img src="/circle.gif"></a>. Now lets add a few more links follow the example below. Now save your page and reload your browser.

Did you see the border around your image well to remove it just type this after your image tag border=0 then close the tag.

<html>

<head>

</head>

<body>

<a href="http://www.signindustry.com">Sign Industry</a>

<p>

<a href="http://www.signindustry.com"><img src="/circle.gif">

<p>

<a href="http://www.retailsignshops.com">Retail Sign Shops</a>

<p>

<a href="http://www.webworks.com">Web Workx</a>

<p>

<a href="http://www.signindustry.com"><img src="/circle.gif" border=0></a>

<p>

</body>

</html>

Fantastic you're really coming along great. Now lets move on to creating hyperlinks to a new page within your site. Lesson 10 Building a multiple page Website.

SignIndustry.com
RetailSignShops.com



» Home Page
» About Us
» Contact Us

Members Area

» Member Home Page
» Message Boards
» Business Tips
» Newbie's Guide
» How to FTP
» Internet Glossary
» Search the Database
» List your Sign Shop
» Edit Listing

Sponsored by SignIndustry.com

Home Page | Members Area | List your Sign Shop | Find a Sign Shop | Buyer's Guide

Powered by SignIndustry.com