Images and Hyperlinks
We move on from the basics of XHMTL, next we will be learning how to add an image to your web page and how to link pages together, also how to link to an external website. Lets kick off with adding an image, the image you require for this tutorial is below, also save this page as page2.html this is so we can use it again in future.
Download this image
. To download the image right click on it and choose save as and then select save. Remember where you put it, for this tutorial it is probably easier if you create a folder, call it my website and put all your files in that folder. Open notepad and input the next example.
Example 5
| <html> <head> <title>Star picture</title> </head> <body> <p>A picture of a star</p> <img src="star.gif" alt="star.gif" width="50" height="50" border="0" /> </body> </html> |
What does that all mean?
You declare where the image file that you want to add is by using img src, this means image source which, in this example, is the star, this image has demensions of 50 pixels high and wide, we add a border = 0, as sometimes if you don't add this it will put a border around it. Now we know how to add an image to the page, how about setting it to the whole body so we have a wallpaper effect. The image you will require for this example is below, instead of right clicking on it and saving it, simply click on it and save the image it links you to.
Click on this image to see the larger one and save that in the same folder as your other files.
After copying that file copy the example below.
Example 6
|
<html> <head> <title>Star Picture</title> </head> <body background="bubbles.gif"> </body> </html> |
What does that all mean?
As you can see the page now looks like its full of bubbles , you did this by declaring within the body tag that you want the background to be bubbles.gif.
Hyperlinks
In this example we are going to link to internal and external websites and we are going to use different targets, to see this in action check out the two links below, after doing so copy the example below then try it out for yourself. Please note that using the home link will replace the page you are currently viewing.
Example 7
| <html> <head> <title>My Website</title> </head> <body> <p><a href="page2.html" target="self" >Page 2</a></p> <p><a href="http://www.w3.org" target="blank" >W3C.Org</a></p> </body> </html> |
What does that all mean?
First we use the anchor <a> tag, we then tell the browser that it is a href, meaning hyperlink reference, the target is self, this means it will not open a new window it will replace the one currently open. The next hyperlink reference we want is an external link and for this example we have chosen the World Wide Web Consortium, as this is an external website, we make the target blank so it opens in a new window.
 XHTML the basics |
