Read my article HTML5 apps as a learning tool
<Table of Contents>
Get Details on GreenGeeks Secure Hosting Learn HTML5 Today!
>>
- Bob's HTML Course - Take HTML5 Lessons - Twitter - Dave's Blog - Learn on your iPad
Web Hosting HTML Tutorial CSS Tutorial Web Design Tutorial Hosting under

HTML Code MiniChapter 4: Links and Images

FatCow Web Hosting. Free Trial , Free Setup, Free Support -- All risk free!

HTML Tutorial Chapters:  

iPage Hosting $95 Plan on sale today for $1.89/mo
Click Here for More Details!

FatCow Plan for $3.15/mo. only

Get Web Design Basics for iPad

Web Design Basics

I have a new iPad Course: Web Design Basics.   Download your copy now from AppStore.
Web Design Basics covers both HTML and CSS together in one interactive guide.   Get it Now!


HTML Anchored Links...

< back to the previous chapter

iPage Web Hosting. Free Domain Registration, Free Setup, Free Support -- All risk free!

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 <a href="http://www.davesite.com/">Dave's Site!</a>

Visit Dave's Site!

If you are just linking to a page in the same folder as your current page, you don't need the domain, just the page name.

What do I mean? Okay, imagine you're at your main page, example.com/index.shtml and you're linking to example.com/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 <a href="mailto:webmaster@davesite.com">the Author [Dave]!</a>

Send email to the Author [Dave]!

iPage Affordable Web Hosting only $4.50/mo
Get Unlimited Space with iPage Secure Hosting. Learn More.

If you want a link to open in a new window, add target="_blank" at the end of the anchor (<a>) tag.

Example of a link opening in a new window...

<a href="http://dave.kristula.com/" target="_blank">dave.kristula.com</a>

Visit Dave.Kristula.com

Just a warning: Many pop-up blockers will block a _blank link from opening... use with caution!


HTML In-line Images...

Get FREE SHIPPING and SAVE 25% Off Sitewide at Vistaprint! Limited Time Only!

You may also add images (pictures) to your web page, as long as the image is in the .png, .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!)

250 Premium Business Cards for Only $10!

Example of a basic in-line image...

<img src="http://www.davesite.com/graphx/davesmll.gif"
width="200" height="50" alt="Dave's Site">

Dave's 
Site

If your image is in the same folder 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 HTML 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 attributes 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>



(Note: Some web browsers place the border automatically, others do not. It's best to set a border to ensure it always shows the way you want.)

If you want to ensure 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>



HTML Code - Try it Yourself!

In the Box below, type the following HTML code (or copy and paste) 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>This page tests Links and Images</h1>
<hr>
<p><b>Text links are easy...</b> Visit <a href="http://www.davesite.com/">Dave's Site!</a>
<hr width="50">
and Image Links are not that hard... <a href="http://www.davesite.com/">
<img src="http://www.davesite.com/graphx/davesmll.gif" border=0 /></a></p>
</body>
</html>



Get the Latest Phones at TracFone Wireless! View Today's Phone Deals!

FatCow Plan
Hosting CompanySpecial FeaturesHost DetailsDisk Space/
Bandwidth
Domain PricePrice (Click for More)
iPage Expert
Web Hosting
"Best Control Panel Ever"/
Enhanced Security/100% Green
Unlimited/UnlimitedFree (ever year) $8.49/mo $1.89/mo
1&1 Hosting Enhanced Security (SSH)/
Scripting, and IMAP Secure Email
250GB/Unlimited 3 Free (every year) $9.99/mo

65% Off "MooPon" for The Original FatCow-- LegenDairy Hosting!
HTML An Interactive Tutorial
Continue Next Chapter

Get 250 premium quality, color business cards FREE!
Order today! Click here.

Copyright © Dave Kristula. All rights reserved.
URL: http://www.davesite.com/webstation/html/chap04.shtml