Inserting Images Into A Website
How To Make A Website >
HTML Code > Inserting
Images Into A Website
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 ImagesInserting 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
www.JustWebTalk.com for help with any other sort of questions.
|
