Linking web pages together is really simple. In this article / tutorial I will show you how to hand code a link and how to use dreamweaver to link webpages together.
If you have some understanding of HTML then you know that <a href=> </a> tag is a link tag. You open the link tag by using <a href=> and you close the link with </a>. In the <ahref=> tag you will enter the url that you want the person to end up, when they click on the link. For example:
Then you will type in the text that the viewer will click on to go to the next page. For example:
2.)<ahref=http://www.cdesign8.com>click here to read on
Lastly you must close the tag with a </a>. For example:
3.)<ahref=http://www.cdesign8.com>click here to read on</a>
This is how you create a text link from scratch.
The only thing you will see on the HTML page is click here to read on.
To create an image link to another page then the image file will be where the “click here to read on” is located with in the link tags.
* *Your image must be saved in a location that the internet can pull the image from**
There are many image hosting sites like photobucket but if you have a website then they give you space to host your images. Download your image and reference back to that image by providing the location where it can be found. One important fact I left out is to have image tags around the location. <img src=”thememusiccopy.jpeg/>. For example:
<a href=”https://davisca8.wordpress.com/2009/06/13/theme-music/” target=”_blank”><img src=”thememusiccopy.jpg” width=”400″ height=”200″ border=”0″ /></a>
In this example I have a jpeg image with the width of 400 pixels and height of 200 pixels and no boarder. When you click on this image it will take you to my wordpress blog theme music article.
If you were to do this in Dreamweaver then you would:
1.) Select insert tab then image.
2.) Select your image then OK.
3.) Click on your image in dreamweaver.
4.) In the link area post the url/ web page that you would like the user to go to.
You are finished. If you keep dreamweaver in Code and Design mode you would see what is going on while you make these changes.
Hope this was helpful. If you have any questions leave a comment or drop me an email at Caleb@ cdesign8.com. In addition, my next post will outline the basics of HTML. I will walk through creating a web page from scratch using word pad.
Till then keep creating 🙂
If you enjoyed this tutorial consider signing up for the video tutorials at www.cdesign8.com