Html Tutorial - Images

In order for a web image to appear on your website, the image has to already be somewhere on the web. It will need its own URL, or web address, which stands for "uniform resource locator". (http://www.google.com is an example of a URL) You will need to save it as a GIF or JPEG file on your computer, and upload it in the main file for your site. Once it is uploaded, it will have its own URL with .GIF or .JPEG as extensions (or whatever extension you've saved it with). It's best to save your picture as a GIF or JPEG image. Saving your file as a Bitmap file (.bmp), for example, will take a really long time for the image to load in your webpage. However, saving it as a GIF or JPEG file will save considerable time and allow it to be quickly displayed to your visitors. GIF is basically used for images without much graphics or detail, such as cartoon characters. JPEG is generally used for images with loads of graphic and detail, such as pictures of real people or those taken with a digital camera.

How to Create an Image in HTML

The basic html code for making a picture appear on your website is in the following format:

< img src="yourimageurl.gif" >

Whenever you place that code in your html editor, as it appears in the URL it will appear on your webpage. Also note: that whenever you place the code within your html editor, there needs to be No spaces between the angle brackets. They are shown here without spaces so that the browser can read them as text, instead of excuting them as an html code. Anything within closed angle brackets (without spaces) is not seen on the webpage, unless other more advanced code, such as php, is used to reveal them.

How to Resize an Image in HTML

In order to resize a picture in html you would need to use "width=" and "height=" inside your image tag:

< img src="imageurl.gif" width=200 height=300 >

Whenever you place that code into your html editor, if you change the width or height of the image, then that will change the original size of the image as it would appear in your webpage. The image is already a specific width and height by default, but when you add these tags and change the attributes, you can specify how to change its width or height more or less in pixels.

How to Position an Image in HTML Webpage

There are various ways you can position your picture using html: you can center it, align it left, or to the right:

How to Center an Image in HTML:

If you would like to center your image, make sure your image tag is within center tags:

< center >< img src="imageurl.gif" >< /center >

How to Align an Image to Horizontally:

By default, your image will be aligned to the left: like in writing. If you would like to align your image to the right, make sure you use "align=right" inside your image tag following your image URL just as with the width and height specification:

With width/height specification:

< img src="imageurl.gif" width=200 height=300 align=right >

Without width/height specification:

< img src="imageurl.gif" align=right >

In either case, your image will be aligned to the right.

How to Position an Image within an HTML Table Cell:

By default, an image/picture is placed to the left in the cell of a table and in the center vertically.

Positioning an Image to the Top in the Cell

< table width=600 height=600 border=1 >

< tr >< td valign=top >< img src="imageurl.gif" >< /td >< /tr >< /table >

Positioning an Image to the Right in the Cell:

< table width=600 height=600 border=1 >

< tr >< td align=right >< img src="imageurl.gif" >< /td >< /tr >< /table >

Positioning an Image to the Horizontal Center in the Cell:

< table width=600 height=600 border=1 >

< tr >< td align=center >< img src="imageurl.gif" >< /td >< /tr >< /table >

For vertically alignments use 'valign'. For horizontal alignments use 'align'.

How to make an Image Link in HTML

You can even turn your pictures into a link so that when a person clicks on the picture it will take them to another website:

< a href="otherwebsiteurl" >< img src="imageurl.gif" >< /a >

How to name or create a Description of an Image when Mouse Over

Have you ever placed you mouse over a picture and a word came up describing it? To do this you would simply need to use "alt=" within the image tag following the image URL

< img src="imageurl.gif" alt="Description of Image" >

When the person puts his/her mouse over you image, the words "Description of Image" will appear.

How to Make a scrolling or moving Image in HTML

How do you make your image move across the web page? Although this currently only works for Internet Explorer, you can use the following code:

< marquee >< img src="imageurl.gif" >< /marquee >

This will allow your picture to move from right to left in a scrolling manner across your web page.

How to Place a Background Image in HTML

When placing an image or picture as a background, if the picture is smaller than the web page, then by default it will repeat to the right and down until the page is full:

< body background="imageurl.gif" >

If your picture is large enough for the page, then only one will appear. But if you add more text to the page, or more space to the right or down, then from that point you will see your image repeat.

How to Place a Background Image Inside a Table Cell

In order to place an image as a background in a cell, and make the image appear behind text, the same rules for setting the background for the web page apply, but instead you need to specify it to be inside one of the individual cells of the table:

< table width=600 height=600 border=1 >

< tr >< td background="imageurl.gif" >"This text will be over the image"< /td >< /tr >< /table >

This will show your repeating image (depending on size) within that individual table cell.

There you have it! That's the basics of how to do everything in HTML with images. Whenever you're looking to place an image on your site, make sure its first uploaded onto the net, and from there all of the html codes will apply!