|
HTML Code miniChapter 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 Dave's Site!
Visit <a href="http://www.davesite.com/">Dave's Site</a>!
If you are just linking to a page in the same directory as your
current page, you don't need the domain, just the page name. If you
have a page called contactme.html, you can use the code <a href="contactme.html">Contact
Me</a>.
Note: Although links are usually used to send people to other web
pages, you may also use links to send email to a specific address by
using a location of mailto:user@host.
Example of a Mailto: Link...
Send email to the Author [Dave]!
Send email to <a href="mailto:webmaster@davesite.com">the Author
[Dave]</a>!
If you want a link to open in a new window, add target="_blank" the
end of the anchor tag, e.g. <a href="http://www.neonlollipops.com/"
target="_blank">NeonLollipops.com</a>.
Example of a link opening in a new window...
Visit NeonLollipops.com.
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
is <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...
<img src="http://www.davesite.com/graphx/davesmll.gif" width="200"
height="50" ALT="Dave's Site">
If your image is in the same directory as your HTML file, just use
the image name. If your file is welcome.jpg, you can use <img src="welcome.jpg">
Then add the appropriate height, width, and alt attributes as
mentioned above.
Combining Links and Images...
Many times you may want to have an image that is linked, so that if
someone clicks the image, the person will be taken to another page.
This is rather simple- you just need to place the IMG tag within the
A HREF tags. (<a href="location_of_link"><img src="location_of_image"></a>)
You may also use the ALIGN tags with images!
Example of a linked image...
<a href="http://www.davesite.com/"><img src="http://www.davesite.com/graphx/davesmll.gif"
align="right"></a>
if you want the image to be linked without the colored link border,
add border="0". Example:
<a href="http://www.davesite.com/"><img src="http://www.davesite.com/graphx/davesmll.gif"
align="right" border="0"></a>
Try it Yourself!
In the Box below, type the following HTML code, then click "Check it
Out!" The HTML document you made will be displayed in your browser.
You may wish to change the words within the tags and the tag
attributes just to try it out.
Try typing this:
<html>
<head><title>Title goes here</title></head>
<body>
<h1 align=right>Body goes here</h1>
<hr>
<h3 align=center>Headings are cool!</h3>
<p><b>I can use text links... Visit <a href="http://www.davesite.com/">Dave's
Site</a>!</b><hr width="50">
and Image Links... <a href="http://www.davesite.com/"><img src="http://www.davesite.com/graphx/davesmll.gif"></a></p>
</body>
</html>
|