• Adding Images To Your Web Pages

    Date: 2011.02.21 | Category: WebDesign | Tags:

    The Basics

    Adding Images To Your Web Pages – The Basics.

    So you have just got into the online adult business but don’t know your ass from your elbow, you have the simplistic stuff relating to HTML down but, you want to find out how you can start adding banners and images to your pages here is a quick guide to help you on your way.

    What Is An Image?

    The answer, is, believe it or not simple, An image is a picture on a page of your website. There are however, many way to display images on your site from the size of it to the overall effect you want the image to have on your HTML page and from borders around the image and many other things.

    However, I don’t want to blind you with information at the moment considering you need to actually know the basics of adding images before you can start using fancy styles and the likes.

    Adding A Basic Image.

    The HTML code to add an image on any HTML based page is a straight forward one however, before you can use this HTML tag you need to know where on your page you want the image to appear.

    Now that you have decided where you want your image to display you need to use the image tag, the HTML coding to place an image on your page should be IMG. Also, you will need to tell your page where you want the image to come from or, in other words, you need to tell it the source of the image you want to use the HTML tag to do this is SRC.

    For example, lets say you have an image called porn.gif (you need to include the extension in your SRC coding) you would display this image on your page using the following code:

    <IMG SRC=”porn.gif”>

    Simple huh?

    Well, actually, maybe not, for example, what do you put if the images you are linking to is NOT in the same location as the page you want it to appear on? That’s not a problem, all you need to do is use the FULL location of the image in your IMG HTML tag like this:

    <IMG SRC=”http://www.domain.com/images/porn.gif”>

    You should now be able to include images on your pages without any problems.

    Image Sizes.

    Ok we can now include an image on our pages but, what if we want to make this image fit the feel of the rest of our page / site, how do you manipulate the graphic to ‘look’ right?

    There are a number of ways images can be manipulated for example, if you want the image to be 100 pixels wide by 100 pixels high you can add the WIDTH and the HEIGHT tag to your HTML coding like this:

    <IMG SRC=”http://www.domain.com/images/porn.gif” WIDTH=”100″ HEIGHT=”100″>

    That will now resize your image into a square that is 100 pixels wide and high.

    Now we have the image on our page in the right size we require what else can we do with it? Read on..

    Borders + Colors.

    In addition to placing the image and resizing the image on our pages we can also add a border and, a border color to the mage to make it stand out if needed for example:

    <IMG SRC=”http://www.domain.com/images/porn.gif” WIDTH=”100″ HEIGHT=”100″ BORDER=”2″ BORDERCOLOR=”FF0000″>

    As you can see we have now added the two tags ‘BORDER’ and ‘BORDERCOLOR’. The first ‘BORDER’ tag tells your HTML what size of border you want around your image and, this can be any size you want to make the image stand out on your page. The second ‘BORDERCOLOR’ tag tells your HTML code what color you want the border to be again, this can be any color you like to match the rest of your sites pages.

    Linking An Image.

    In addition to resizing, adding borders and colors we can also link our image to a specific URL (the most common form of this is with banner advertising) and, if you want to link your image to a URL you would use the following coding:

    <A HREF=”http://www.sponsorsurl.com”><IMG SRC=”http://www.domain.com/images/porn.gif” BORDER=”2″ WIDTH=”100″ HEIGHT=”100″ BORDERCOLOR=”FF0000″>

    This will create an image that is 100×100 pixels in size, with a border size of 2 pixels in the color FF0000 that is linked to http://www.sponsorsurl.com

    Also, the order of the HTML tags we use is not important however, you should try to get used to arranging them in a certain way to make your work easier if it ever comes to editing your images.

    Hopefully this has been of use to you and you can now see that adding banners and images to your sites isn’t as daunting as you first thought.

    Article written by Lee.