Tuesday, 27 November 2012

Learn Webdesigning

LESSON 4: LINKS AND IMAGES

Anchored Links
Without Links, the World Wide Web wouldn't be a web at all! To add a link... you will use the <a href="location"> opening tag and </a> closing tag. Whatever appears between these two tags will become underlined and colored, and if you click on the underlined text it will send the browser to the location within the quotes.

Example of a link...

Visit THE REFORMERS: WEB DESIGNING!

Visit <a href="http://www.cuatdtop.blogspot.com/"> THE REFORMERS: WEB DESIGNING </a>! 

Note: Although Links are usually used to send people to other web pages, you may also use it to send email to a specific address by using a location of mailto:user@host.

Example of a Mailto: Link...

Send email to Me!

Send email to <a href="mailto:eidzeiaiti@gmail.com">Me</a>!

In-line Images

You may also add images (pictures) to your web page, as long as the image is in the .gif or .jpg (or .jpeg) file formats. You will not be able to use .bmp format files! The basic tag for in-line images in <img src="location">. It is also recommended to add HEIGHT and WIDTH attributes to the IMG tag, which will allow the image to take proper proportions on a browser that is not currently viewing images. It is also recommended to use the ALT="what picture is" to tell a person what a picture is in case it is still loading or they are not viewing images. (The IMG tag has no closing tag!)

Example of a basic in-line image...



Combining Links and Images

Many times you may want to have an image that is linked, so that if someone clicks the image, they will be taken to another page. This is rather simple- you just need to place the IMG tag within the A HREFtags. (<a href="location_of_link"><img src="location_of_image"></a>) You may also use the ALIGN tags with images!
When an image is also a link, it has a border around it by default. You can control the width of the border - or turn it off completely - by using border=n within the img tag. n is the width of the border (n = 0 for no border).

Example of a linked image...



<a href="http://www.cuatdtop.blogspot.com/"><img src="News.png" align=right border=0></a> 

YOUR FOURTH HTML PAGE !!!

Look for a picture on your computer and save it in the same folder where you have your index.html web page so as to make it possible and easier for the browser to read it. Save it as myImage.png


Add the following to your HTML page ("index.htm"):

<html>
<head><title>My Home Page</title></head>
<center><font color="Blue"><h1>This is a Heading 1</h1></font></center>
<hr>
This is the home page of <a href="mailto:YOUR EMAIL ADDRESS"><img src="myImage.png" border=0><b>YOURNAME</b>.<img src="myImage.png" border=0></a>
<p>Type something about yourself here. Describe briefly who you are and what you do for a living. Remember to use bold and italic text, for emphasis.</p>
</body>
</html>

Save the text file as "index.htm".

YOU WOULD HAVE SOMETHING LIKE THIS

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)