HTML - Image tag
Here you learn how to code image tags.
How to code an image tag.
There are 2 parts to an image tag:The first is the opening tag "<img src=>". The "img src" stands for "image source".
The second part is the location of the image in quotes (almost always a relative link) - "/firefoxicon.jpg".
It has no closing tag. When coding images you will definitely want to put in attributes like border, alt, and size. Scroll down this page and learn about the different attributes.
Relative link vs absolute paths
If you read this paragraph on the hyperlink page then you can skip this paragraph.When you code an absolute link you write out the full path to the destination page. When you code a relative link you write out the path to the file relative to the current file. For example, look at the directory tree to the right. Assuming you were inserting an image to go on the front page of your site (index.php) and you wanted to code a link to screenshot1.jpg - which is in the same directory. With an abolsute link you would write the destination as "http://www.webpageblueprint.com/screenshot1.jpg" but with a relative link you would write the destination as "/screenshot1.jpg". Whenever you have just a slash and a filename that means the files you are linking to and from are in the same directory. You can look at some examples below to see how to code relative links in different directories.
The benefit to coding relative paths is that if you have an HTML or PHP file that has links to images (or any files for that matter) that in the same directory and you move BOTH the HTML/PHP file and the images to a different directory then the relative location of those files is still the same (because they both are in the same directory). So there is no need to recode the paths to the images. If you had absolute paths to the images then you would have to re-code the location of the images. Note though, that if you move the images to a different directory but you don't move the HTML/PHP file then you will have to re-code the relative paths to the images beause the relative locations of one to the other has changed.
Show Image
This is the code to simply show an image on a page.|
<html> <head> <title>HTML tutorial</title> </head> <body> <br> <img src="firefoxicon.jpg"> <br> </body> </html> |
||
 |
||
Show image - lower directory
This is how to a code an image that is 2 directories lower.|
<html> <head> <title>HTML tutorial</title> </head> <body> <br> <img src="vbulletin/graphics/firefoxicon.jpg"> <br> </body> </html> |
||
Show image - higher directory
This is how to a code an image that is 2 directories higher.|
<html> <head> <title>HTML tutorial</title> </head> <body> <br> <img src="../../firefoxicon.jpg"> <br> </body> </html> |
||
Link to image file - same browser window
This is how to show an image on your page that is a clickable hyperlink where the new page comes up in the same browser window (it doesn't pop-up in a new window). You can click on the Firefox icon in the example below to see it work. Whenever you code an image as a link you will want to put a "border=0" attribute on the image because HTML puts a border on clickable images by default even though it doesn't put a border on non-clickable images by default. I show you 2 examples below. The first one doesn't have a "border=0" attribute and the second one does.|
<html> <head> <title>HTML tutorial</title> </head> <body> <br> <a href="http://www.webpageblueprint.com"><img src="firefoxicon.jpg"> <br> <a href="http://www.webpageblueprint.com"><img src="firefoxicon.jpg" border=0> <br> </body> </html> |
||
|
|
||
Link to image file - different browser window
This is how to show an image on your page that is a clickable hyperlink to a page that opens in a new window. Click on the Firefox icon below to see.|
<html> <head> <title>HTML tutorial</title> </head> <body> <br> <a href="http://www.webpageblueprint.com" target="blank"><img src="firefoxicon.jpg" border=0> <br> </body> </html> |
||
|
|
||
E-mail Link
This shows you how to create a clickable image that pops up an e-mail. Click on the image in the example below to see.|
<html> <head> <title>HTML tutorial</title> </head> <body> <br> <a href="mailto:help@xyzcompany.com"><img src="iconemail.gif" border="0"> <br> </body> </html> |
||
 |
||
Attribute - alt
The "alt" attribute ("alternate text") is used so that the text in the alt tag will show on the page if the image doesn't load. It is recommended to put an "alt" attribute for all your images because it will help your SEO (especially on Google Images searches) which can get you more traffic. Alt tags also help the display of your page in text-only browsers. The alt tag also makes the text show when you mouseover the image. Put your mouse over the Firefox icon below to see the pop-up text.|
<html> <head> <title>HTML tutorial</title> </head> <body> <br> <img src="firefoxicon.jpg" alt="firefox"> <br> </body> </html> |
||
|
|
||
Attribute - title
The title attribute is used simply to describe the element and is almost never used with images because it doesn't really add anything. But some webmasters will add in a title attribute by default on all images just to add keywords to their pages. One legitimate use for title and alt tags is that it makes it easier for people with disibilities understand what is on the page so expect the practice of using alt and title tags on images by default to become more popular.|
<html> <head> <title>HTML tutorial</title> </head> <body> <br> <a href="http://www.webpageblueprint.com" target="blank"><img src="firefoxicon.jpg" title="firefox"> <br> </body> </html> |
||
Attribute - size
The "size" attribute is used so that the browser will set aside the defined space specifically for the image to be shown. Although the size attribute isn't required, Internet Explorer will not load any of the other information on a page until it knows where the image will go. This means if you have a page with a large image (or a lot of images) that don't have size attributes then the text on the page won't load until the images do. Some users will end up leaving your page because they don't want to wait for it to load. But if you have size attributes on your images then Internet Explorer will load the rest of the page and will just leave a blank space where the images will go until they load.Another thing, if you the width or height stated in the size attributes are different than what the image actually is then the image will appear distorted on the page. The second example below shows a distored image.
|
<html> <head> <title>HTML tutorial</title> </head> <body> <br> <img src="firefoxicon.jpg" width="43" height="42"><br><br> <img src="firefoxicon.jpg" width="123" height="42"> <br> </body> </html> |
||
|
|
||
Attribute - align
The align attribute will set the alignment within a page or another element like a table cell.|
<html> <head> <title>HTML tutorial</title> </head> <body> <br> <img src="firefoxicon.jpg" align=right> </body> </html> |
||
|
|
||
Attribute - border
The border attribute places a border around your image. You will definitely want to put a "border=0" by default any of your clickable images because clickable images with borders look really bad. But only put borders on images if there is a specific need to. You can also format the border further (the border color, etc) by using CSS.|
<html> <head> <title>HTML tutorial</title> </head> <body> <br> <img src="firefoxicon.jpg" border=0> <img src="firefoxicon.jpg" border=1> <img src="firefoxicon.jpg" border=2> <img src="firefoxicon.jpg" border=3> <br> </body> </html> |
||
|
|
||
Bookmark this page:
|
