Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

HTML stands for HyperText Markup Language

Part 6: Adding Hyperlinks to your Code

Here is our code so far:


Now we are going to add links to our page

1. The ANCHOR tag: The links are called anchors in HTML. The tag for anchors is <a href="">
a stands for anchor. href stands for home reference. To end an anchor, simply use </a>. 

2. Adding an ANCHOR to Text:  Let's make a link to developing webs on our page.

  • To do this, add the following tag. (Always remember to add the http:// at the beginning to indicate it is out on the web)

<a href="http://www.developingwebs.net">

  • Now we need something for them to click on,
    Let's use the words Developing Webs

<a href="http://www.developingwebs.net">Developing Webs

  • Close the anchor tag with a </a>

<a href="http://www.developingwebs.net">Developing Webs</a>

  • So here is our anchor tag in the html code

  • Save and view your link, try it out!:)

3. Adding an ANCHOR to an image: Anchors can also use images. We use the image source for this.

  • Let's link our picture to porshiana.com. Using the <a href> tag again, right before our picture.

<a href="http://www.porshiana.com"><img src="http://www.porshiana.com/waterimage.jpg" align="right" height="300"></a>

  • Borders- Notice that the image has a border around it. You can eliminate this by adding border="0" to your image tag.

<a href="http://www.porshiana.com"><img src="http://www.porshiana.com/waterimage.jpg" align="right" height="300" border="0"></a>

4. Links to Sound: There is one more kind of link we can do. This is a sound link.

  • To make a sound link, simply add the address of an uploaded sound. Here I will use one at my page. Add this code to your page

<a href="http://www.porshiana.com/sample.mid">This is a sample sound link</a>

  • Here is our code so far:



 

5. Link Colors: One little problem, our links don't show up on this background. Let's change the color of them.

  • Link color is determined for the page in the body tag. Change your body tag to this:

<body background="http://www.porshiana.com/water.jpg" LINK="#ffff00" vlink="#000000">

  • link attribute is for the color of the unvisited link.
  • vlink is for the color of the visited link
  • alink is for the color of the active link.

Sound has many more attributes, when you are ready, lets move on to lesson 7, sounds



"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2024 All Rights Reserved
Privacy and Legal