Inserting Images Into A Website
-
David
-
February 20th, 2012
Inserting images into a website is an important part of making a website. This allows you to create a certain feel with your website such as professionalism, commercial or even comedic.
There are quite a few different attributes when it comes to inserting an image into a website such as the layout, how well it's optimized for search engines. Along with attributes that allow you to speed up the time that your site takes to load. This tutorial covers the basics of inserting images and not the manipulation of those images. I've covered the main attributes below.
Inserting Images
Inserting an image is an important part of making a website. The tag is as follow:
<img src="images/smiley-face.jpg">
This is saying that they file smile-face.jpg is located in the images folder on your website. YOu can place the images anywhere you want on your hosting account but the 'images' folder is pretty much the standard.
The link would appear as: 
The 'Alt' Tag
The alt tag is used to help search engines determine what your image is related to. This is a must when you're doing your search engine optimization which I cover in the search engine optimization section.
The tag is as follow:
<img src="images/smiley-face.jpg" alt="smiley face">
This is telling the search engines that this image is related to smiley faces.
Adding An Image Border
If you'd like to add a border around your image you can accomplish this with a basic attribute in your HTML code.
The tag is as follow:
<img src="images/smiley-face.jpg" border="1">
The larger the number the larger the border. If you don't want a border just don't add the border attribute at all.
The link would appear as:
Specifying Height And Width Of An Image
If you'd like to specify the size of an image you can do this with a specific attribute as well. The theory is that if you specify the size of the image that your page will load quicker. It certainly doesn't hurt but I generally don't do it for my own site.
The tag is as follow:
<img src="images/smiley-face.jpg" height="25" width="25">
The larger the number the larger the border. If you don't want a border just don't add the border attribute at all.
The link would appear as:
Multiple Attributes in One Image Tag
If you'd like to add multiple attributes to an image you can simply separate them with a space.
The tag is as follow:
<img src="images/smiley-face.jpg" border="1" height="30" width="30" alt="smiley face">
The link would appear as:
As you can see it distorted the image a bit because the actual image size is 25 x 25 but for demonstration purposes I changed it to 30 x 30.
Images As Hyperlinks To Other Pages Or Websites
The last thing that I'm going to cover is images as hyperlinks. This will allow you to insert an image into your webpage and enable it to be a clickable link to another page on your website or another website altogether.
The tag is as follow:
<a href="http://www.smileyface.com"><img src="images/smiley-face.jpg"></a>
The link would appear as:
That's about it for the basic image tags and attributes. Be sure to visit our forum at webmaster forum for help with any other sort of questions.