logo for free-computer-tutorials.net
leftimage for free-computer-tutorials.net

Webpage Insert Graphics

The webpage insert graphics free tutorial will walk you through inserting and positioning graphics into your webpage. Graphics built into a webpage will help attract your visitors attention and keep them at your page longer.

This tutorial is based on using the CoffeeCup HTML editor. Most HTML editors are similar and the code inserted is the same for all HTML.

CoffeeCup Insert Image

CoffeeCup makes it very easy to insert and position your graphics in your webpage. Click on the graphics button located in the top left of the tool bar. This will open the Insert image window. CoffeeCup Insert Image WindowAt the top of the insert image window click the down arrow for the file selection. This will give you a drop down list of files. When clicked on each file will expand to the files within. Once you select a file folder the image files will display below in the navigation pane. The button to the right of the drop down menu will return the file menu to the desktop. The folder one up button will move the drop down menu of file folders up one level of folders from the current location. To the right of the list of images is a preview of the image selected. In the Alt: text box type the title of the picture you would like displayed when a mouse is placed over the picture. Type the title you would like searched by the search engines in the Title text box. This is usually the same as the alt tag.

CoffeeCup Align Image

Click the down arrow in the align section this will give you a drop down menu of the alignment options. Select from this list to position your image on the webpage. The left & right options will allow text to be wrapped around the image easily. The best way to learn what these options do is to try each one.

The boarder will place a black boarder around your image. Click the up arrow or type a number in the text box to preview what the boarder will look like.

The height and width options will change the size of the image from the original. The height and width is measured in pixels. Highlight and delete the numbers and type a new number to change the size up or down.

The last text box is used to turn the image into a link. Type a web address into this text box and when the image is clicked on it will reroute the user to the web address.

Click on the Thumbnail tab. Check the box that says Create and insert image as thumbnail. This will make the other options available. A thumbnail is a small version of the image. This is most commonly used to save space in a shopping cart as an example. When the image is clicked on it will show the full size image.

The default selections work in most cases. If you would like to change any the prefix is filename will just put the characters typed here in front of the image name in the code. The size can be changed by either retyping the number or using the up and down arrows.

Use the drop down arrow in the quality menu to select a new image quality.

If you don't want to use a thumbnail uncheck the box and return to the General tab. Click the ok button and the code for the image will be inserted into your HTML code. You code will look something like this:

< img src="http://www.free-computer-tutorials.net/image-files/coffeecupworkingscreen.jpg" width="510" height="277" alt="coffeecup" title="Coffeecup" border="7" align="left" / >

That concludes the image tutorial click one of the following links to learn more about adding to your webpage. click one of the following links to learn more about adding to your webpage: create inbound and outbound links, create a form, create a list, create a table and insert a flash video.

footer for Computer Tutorials page