HTML Basics

Contents

What is HTML?
Basic Layout
Your first HTML document
Text formatting tags
Color and Style
Adding Images
Creating links
Tables
Forms
Lists
Special Characters
Putting your page on the Internet
HTML Links

Adding Images

Adding an image to a page is quite simple with the <IMG> tag. The <IMG> tag includes attributes that specify where to load the image from and how to present the image. The syntax is... 
<img src="filename" width="" height= "" align="" border= "" alt = "">
src
This is the URL (Uniform Resource Locator) where the image is located. Generally, something like http://www.someaddress.com/myimage.gif if it's on a web server. It can also come from your computer which would look something like file://c:/myimages/myimage.jpg.
width
Width of the image in pixels.
height
Height of the image in pixels.
align
Alignment of image in containing area. Values are 'left, middle, right, ...'
border
Specifies what if any box border is displayed around the image.
alt
Specifies alternate text that will appear in place of your image for text-only browsers.
SRC is the only required attribute.
Images are normally either JPEG (Joint Photographic Experts Group) or GIF (Graphic Interchange Format) having extensions .jpg and .gif respectively. Images could cause web pages to take a long time to load if they are very large so take care to cut down on the size of images and/or the quantity of large images, to maintain traffic to your website. Remember that not everyone has high speed network lines, many people still use dial-up modems over telephone lines.

One way to save some time during image loading is to specify the width and height attributes so that the size is reserved for your image and the server doesn't have to figure it out. Just also be sure to specify the exact width and height or the server will have to spend time stretching or condensing your image.

Always specify the ALT attribute just so that those with text-only browsers, or who turn off image loading for faster page processing, can use your pages.

Finally, some browsers will default to displaying image borders so it's good practice to specify border="0" if you don't want a border.

Suppose you want the background of your web page to be an image instead of a color? You can specify that on the <BODY> tag by either the BACKGROUND attribute or the "background-image" style property. Remember that you could also specify the background-image for just about any element with the background-image style property. 

Now for another exercise. Create a web page that looks like the following...

A web page with images

This is a web page that showcases my knowledge of html style and images.

Check out the following image!

This page was created by <put your name here>

You can download this image for use by right-clicking on the image and saving it. Remember where you put it because you will have to tell the server where to get it from in the SRC attribute. You can also use your own image. If you don't have one, images can be created by scanning them in, using an image creation tool like PhotoShop, getting them from a digital camera, or downloading them from the Web. When downloading make sure you observe copyrights.

Try the extra exercise of making the image the background of your web page. Be aware that the text colors may not show up so experiment with different colors. 

Next >>