Monday, February 21, 2011

-- Chapter 6-- Pictures as Links

By Magesh Kumar   Posted at  2:54 AM   HTML No comments




Often when you visit a website, they will have some buttons that will act as links.
Eg:










1. You already have an image used in your first page so lets now make that a link. We are going to make it link to "Page1.html"
2. The HTML code for an image link looks like this:
<a href="Page1.html"><img src="images/yourpichere.jpg"></a>
If you are linking to another website on the WWW then your link would look like this:
<a href="http://www.elpassobooks.co.uk"><img src="images/yourpichere.jpg"></a>




When the above line of code is run, this is what the user would see: (obviously your picture would be displayed not my "archive" button!)

For now though we are going to link your "index.html" file to your "Page1.html" file.
This is the code that needs to be placed in your "index.html" file
<a href="Page1.html"><img src="images/yourpichere.jpg"></a>
Remember to change the red text to the location of your picture.
If your picture is in its own "Images" folder as discussed in a previous chapter then the above code would be used.
If it is in the same folder as your "index.html" file then the following code would be used:
<a href="Page1.html"><img src="yourpichere.jpg"></a>

Here is what your code should now look like:
<html>
<head>
<title>My Own Home Page </title>
</head>
<body>
<body bgcolor= "yellow">
<font color="Red">
<H1> I am Your-Name and this is my web Page!</H1>
<a href="Page1.html"><img src="images/myimage.gif"></a>
<a href="Page1.html">Click Here for my next page</a>
</font>
</body>
Thats probably the easiest chapter in the book and shouldnt have taken you too long.
Next up is Chapter 7 - Formatting!

About the Author

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.
View all posts by: BT9

0 comments:

Back to top ↑
Connect with Us

What they says

© 2013 MaGeSH 2 help. WP Mythemeshop Converted by BloggerTheme9
Blogger templates. Proudly Powered by Blogger.