Webmasters Resources | Building Your Web Site

"HTML BASICS is The EASIEST to use and understand Web Site building course on the Net!"

Previous Lessons
Lesson #1
HTML Reference and Basic HTML

Lesson #2
Adding Text to your Web Site

Lesson #3
Using Colors in HTML

Lesson #4
Web Site Structure

Lesson #5
Adding Graphics to your web site

Lesson #6
Changing Background Color

Lesson #7
Using Graphics for Backgrounds

Lesson #8
Creating Hyperlinks with Text and Graphics

Lesson # 8 : "Creating HTML Hyperlinks With Text and Graphics"

There are a several reasons why you would want to create hyperlinks. There also a few different ways you can link. The easiest way to demonstrate would be to show you link examples.
1) Linking to a Page within your own site
Link Back to Lesson #7: HTML Background Graphics

Source Code
<a href="htmlbackgroundgraphics.html">HTML Background Graphics</a>

2) Linking to External Site
Example: www.externalharddrive.com

Source Code
<a href="http://www.externalharddrive.com">www.externalharddrive.com</a>

3) Linking to a Image
HTML Basics Box

Source Code
<a href="graphics/htmlbasicssmall.jpg"

4) Linking to text file
Text File Link

Source Code
<a href="textlinkexample.txt">Text File Link</a>

5)Linking to Sound Files
4 Examples
1) .wav
2) .mid
3) .mp3
4) .au

Source Code
1) <a href="sounds/musthaveprecious.wav">.wav</a>
2) <a href="sounds/chinese.mid">.mid</a>
3) <a href="sounds/top10-affair.mp3">.mp3</a>
4) <a href="sounds/doorbell.au">.au</a>

6)Linking to A Target
Jump to target

Linking to a target is often used when you want to jump to a specific section of a page.
To do this you insert a "Anchor Tag" where you want them to jump to. Then you create a link to the target.

This is the Anchor
<a NAME="targetlink"> 

This is the Link
Jump to target
<a href="#targetlink">Jump to target</a>

7) Link to Open/Send a Email
Using this link will open the site visitors email program and have your email address ready for them to send.  You can even enter the Email Subject in thier email with this link

The Link
email us

The Source

There are many other linking tricks like... open a new browser window when clicked, hide address in the browser address bar, and many more but...This is HTML Basics so I won't take this any further. There is still a bit more BASIC HTML to learn. That being said... lets look at linking with Images.
< Click The Smiley Image to see linking with a Graphic
The Source
<a href="smileylink.html"><img SRC="graphics/smiley.gif" BORDER=0 height=17 width=17></a>

Lesson #7: "Using Graphics for Backgrounds" < Lesson #8 "Creating Hyperlinks" > Lesson #9 "Get A Web Host"
Webmasters Resources


TARGET - Click Here to jump backup to link example #6