HTML Kit site requirements.

HTML editor / Mini Tutorial
HomeHTML-Kit downloadsAdd-ins that update and extend HTML-Kit's capabilitiesSoftware and authoring support channelsRegister -- download add-ons and support HTML-KitOnline tools for HTML-Kit users
 

Mini Tutorial

 Home > Support > Community > Mini Tutorials > HTML > The IMG Tag Exp...
 
 
 The <img> Tag Explained

This article was written in response to a request for information on the <img> tag. Naturally I'm assuming that you're using HTML-Kit as your HTML editor.

Let's take a look at the <img> tag and displaying images on our web pages.

Getting Started

First we need a place to work. You can use any folder (directory) you wish or create one. We'll refer to our working folder as "MyWebFiles."

Now we need an image. You can use one of yours or you can use one of mine shown here.

flower01.jpg
To download it;
  • right-click on this link to the image (flower01.jpg)
  • select "save target as" (the exact wording may be slightly different on your system but should be similar).
  • save the image to the MyWebFiles folder.

It's worth mentioning here that it is highly recommended that you keep your folder tree on your pc the same as on your web server. This makes it much easier to ensure things will work correctly in both places.

Let's Display an Image

Launch HTML-Kit. Let's create a new HTML document. From the menu select File | New Document. Save this HTML file in your working directory (i.e. MyWebFiles). Name it whatever you like. Can't think of a name? Then just call it "hkimg.html"

Between the <body> and </body> tags type in:

<img src="flower01.jpg" alt="Yellow Flower" width="125" height="125" >

We'll explain what all this means in a little while.

Now click the Preview tab in HTML-Kit. You should see something like this;

screenshot01 (8K)
HTML : Basic image tag
1<html> 
2 <head> 
3   <title>My page title</title> 
4 </head> 
5 <body> 
7  <img height="125" width="125" alt="Flower" src="flower01.jpg" /> 
9 </body> 
10</html> 
   Focus #1, Point to tags for details

Congratulations! You now can display images on your web pages. But wait, there's more...

The Attributes

Inside your <img> tag we used the two required attributes; src and alt.

src tells the browser where the image is located. In our exercise the image and the web page are in the same folder so all we had to do was to type in the name of the image file and its extension, in this case .jpg. We'll talk more about the src attribute in a minute.

The alt attribute stands for "alternative" and is the text that is displayed if the image isn't displayed for some reason, such as the src path is wrong or the user has their browsers image display turned off.

Width and Height

Two other important attributes are width and height.

The main use of these attributes is to reserve space on the web page for the image(s) as the page is rendered, or loaded. Another use is to scale the image (adjust its visual size). Here's an example img tag using the width and height attributes:

flower01.jpg <img src="flower01.jpg" alt="Yellow Flower" width="150" height="100">

Setting these values prevents the image(s) and other elements of the page (e.g. other images) from moving around all over the place while the page is being loaded. The browser "sees" these values and holds that much space on the screen while the page loads.

Having stuff move around can be frustrating for a user. Imagine a user who may be trying to click a thumbnail image link and having to chase it around the page as the page is loading up.

The above width and height settings tell the browser to display this image 150 pixels wide by 100 pixels tall, which in this case is the actual size of the image. However, you can change these values to something else to display the image at a different size. This is called scaling.

Keep in mind that scaling images too much can cause image distortion. Meaning the quality of the image will be degraded. So pay attention to your results.

It's important to understand that changing these values does not change the actual size of the image itself. It only sets the size (or dimensions) used in displaying the image.

Let's explore this issue for a moment. Using a made up example let's say you have an image whose true actual size is 800px X 600px and whose file size is 1meg. You set the width and height attributes to 400px X 300px. Now, how large is the actual image now? 500K you say? No, it's true size is still 800px X 600px and 1meg. We did not change the actual file size, we only changed how it will show on the page.

So why is this so important? Well think about it. Your wasting the users time and and your bandwidth. Why force a rather large file to download to only display it at a fraction of its true size? This could help eat up the bandwidth your web host has allotted you and it forces the end user to wait unnecessarily for the page to load.

Oh, I know what you're thinking. It's only one image, so big deal. But wait! What if you scale the image to display thumbnail images as links. Now imagine if there were 10 of these on a page. The user would have to download 10 megs of pictures just to see a few small images! And what if the user has a dial up connection? Ouch!

I suggest that you resize the image(s) to the size you want to display and create a second image for the thumbnail if necessary. I think it's ok to do some scaling but keep it reasonable, ok?

So remember; Resize your images if necessary, create separate thumbnail images for links, and give them all a width and height!

SRC - going a little deeper

What if your images are kept in a different folder than your web pages? In this case we still have to tell the browser where the file is by providing it with the path to the image file. We have two different methods we can use to accomplish this, we can use a relative path or the absolute path.

Let's pretend you keep all of your web site related files under the folder MyWebFiles. And under MyWebFiles you have these two folders: MyWebPages that holds your HTML files and MyImages that holds all of your image files.

Relative Path

"Relative path" means the file path to where the image is located "relative" to the HTML page. In other words you determine the path to the image with the HTML page as the starting point. Using our example folder structure mentioned above we would modify our src attribute so that our <img> tag looked like this:

<img src="../MyImages/flower.jpg" alt="Yellow Flower" width="125" height="125">

The "../" tells the browser to go up one folder from where the HTML page is located. Then it goes down the folder structure into the "MyImages" folder where our image file is located. If you need to go up two folders then use "../../" and so on.

Let's say you had to go up two folders up from where your web pages are and had to go down several folders deep to get to your image. In this case your relative path would look something like this:

"../../MyImages/Folder/Folder/flower.jpg"

Pro: Easy to type in the path. It works on your local pc and on your web site (assuming you have the same folder structure in both places).

Con: It won't work if you relocate your image or HTML files into different folders or change your folder structure. The browser won't be able to find the image file. It will no longer be located in the same relative position.

Absolute Path

Absolute paths are a different than Relative paths in that it doesn't matter where the image files are located relative to your web pages. This is because you tell the browser exactly where the file is on the web.

Let's say your web site is named "www.mysite.com" and you have two folders set up as we talked about earlier; MyWebPages and MyImages.

To use the absolute path in your HTML page you would change your src attribute in your <img> tag to look like this:

<img src="http://www.mysite.com/MyImages/flower.jpg" alt="Yellow Flower" width="125" height="125">

Pro: It doesn't matter where you move your HTML file, it will find your image file. Unless you move the image file of course.

Con: If working with files on your computer you won't see the images unless you have a "live" internet connection (you're connected to the internet). This is because the browser won't be able to get to the image. Some people use a local file path (e.g. C:\folder1\folder2...) to get things to work on their local computer but forget to change this to the actual URL before uploading their page (e.g. http://www.mysite.com/folder1/folder2/...).

Images as links

When using images as links if you simply plop an image in as a link it will have a border around it by default.

flower01.jpg

This is done on purpose to give the user a visual indication that it's a link. But sometimes this isn't desirable. To prevent the border from displaying use some Style. Styling is getting outside the scope of this article but since I brought it up I'll show you one of the most basic ways to do this.

 

Place the following style declarations between the <head> and </head> tags of your web page (located near the top of your page) to remove the border.

img {border: none;}
 
flower01.jpg
HTML : Image border
1<html> 
2 <head> 
3  <title>My page title</title> 
5  <style type="text/css"> 
6   img {border: none;} 
7  </style> 
9 </head> 
10 <body> 
11 
12  <a href="page.html"><img alt="Flower" src="flower01.jpg" /></a> 
13 
14 </body> 
15</html> 
   Focus #1, Point to tags for details

There is an old attribute called border that has been deprecated. This basically means it shouldn't be used anymore, so we'll just leave that one alone. You can read more about "deprecated" on the W3C web site.

Inline

The <img> tag is an inline element. The differences between block and inline elements is a different discussion, but to sum it up, inline elements are treated like text as far as how and where they are displayed in your document. The anchor tag (<a href= "http://www.mysite.com">My Link</a>) is an example of an inline element. It is kept inline with text.

So this means that you put your images where you want them to show up within in your documents text. Let's play around a little so we can see it in action.

We'll use flower01.jpg again. Create a new HTML document and save it in the same folder you've been working in. You can name this file whatever you'd like. We'll be working between the <body> and </body> tags again.

Type this in your new HTML document (remember to keep this between the <body> tags):

<p>This is my image <img src="flower01.jpg" alt="Flower"></p>

Now click the Preview tab. Your page should look something like this:

screenshot02 (3K)
HTML : Inline images
1<html> 
2 <head> 
3   <title>My page title</title> 
4 </head> 
5 <body> 
7  <p>This is my image <img alt="Flower" src="flower01.jpg" /></p> 
9  <p>This is <img alt="Flower" src="flower01.jpg" /> my image</p> 
10 
11  <p><img alt="Flower" src="flower01.jpg" /> This is my image</p> 
12 
13 </body> 
14</html> 
   Focus #1, Point to tags for details

Now let's go back and change things a little. Click on the Editor tab and try these different combinations to see where the image shows up:

<p>This is <img src="flower01.jpg" alt="Flower"> my image</p>

<p><img src="flower01.jpg" alt="Flower"> This is my image</p>

Now, add in a lot more text and move the image around inside the text so you can see how the image displays.

There are many ways to control how and where images are displayed on your web page. One of the most common is using Style. We're not going to get into all of that here but I do want you to know you have options available to you.

Closing comments

We've only covered the basics here regarding the <img> tag. Once you feel you've got a handle on these basics I would encourage you to spend some time learning the rest of what's available. I've provided some links below for you to explore. But don't forget that you can use your favorite internet search engine to find lots more.

Many thanks go out to the people in the HTML-Kit community for their assistance in offering suggestions for improvements to this article.

Your feedback is appreciated

I would appreciate your feedback on this tutorial. Was it too simple? Was it too complicated? Was it really good? Did it suck? Was it somewhere in between?

I'd especially appreciate it if you'd let me know if you find errors in what was presented here. Although I'm striving for simplicity I still want it to be accurate.

Have questions? Feel free to post them on the HTML-Kit Support Forums.

Subject: 
Message: 
 
Optional Information:
Name: 
Email: 
Website: 
Rating: 
None  1/5  5/5 
Type: 
Public comment
Private message to the author
 
»  
flower imagehey, well i found this tutorial excelentand was wondering why there aren't more of them. Although my flower didn't show up in my HTML preview using Save Target as..i simply used Save AS instead. Tutorial was very helpful as i am building my own website myself without any HTML or Javascript knowledge. - Donald Drouin
»  
Good helpThanks, great tutorial
»  
your tutorialnice job excellent, it was concise and accurate for all levels of understanding the topic - joey
»  
the img link tutorialthis is great - i wish you'd write a xhtml textbook, or just a book.
»  
The <img> Tag ExplainedVery, Very well presented and as clear as a bell! Thank you from a novice web student who wants, very badly, to learn how to design and build web pages correctly and quickly. Your instructions take a person from one important step to another, while explaining why the steps themselves are important. Thank you again. - Billy Kurch
»  
Beautiful TutorialThis was a really beautiful tutorial. Very easy to follow & great for beginners. I was searching for explanation on how to use % in height & width attributes to scale the image proportionally . Thanks anyways, - Michelle A
»  
Translation in DutchThis tutorial is excellent. Answers lots of questions. Therefore I translated this tutorial into the Dutch language. You can find it here: http://www.xs4all.nl/~sjeef/VVV/Ontwerp/img_label.html - Gerard Schaefers
»  
Timely and helpfulWhen I downloaded the flower into My Pictures HTMLkit couldn't find it. I used "Save as.." to find out which directory HTMLkit was using. Then I moved the picture. I had to change the name. Finally I had to save my source, close and reopen HTMLkit to get HTMLkit to recognize the changes I made.
»  
hello - my name is muza akram from washington. ur tool very good....keep it up! - muza akram
»  
img tutGood beginner tutorial. Explained the components of the tag well, and touched on a couple styling options. One thing I noted: there is no /> ending of the img tag in this tut, which is required for valid xhtml. For the sake of IE, a space between anything else and the /> is needed (...jpg" />, not ...jpg"/> This is true of all non-paired elements (<br />, <hr />) - Jay
»  
Regarding the ALT attributeThe ALT attribute doesn't apply for the Mozilla browsers. Instead, HTML-coders should use the TITLE attribute, which works flawlessly under Mozilla as well as Explorer browsers. :) Thanks for a great website! - Jakob Dam
»  
img srcThanks so much for the tutorial, it helps me in my homework. - Fette Brown
»  
<img> tagVery good - Phillip H. Pitzer
»  
The img tag explainedFairly basic, but that was obviously what was intended, and you were clear about not using deprecated tags, which often gets overlooked. - Phil Taylor
»  
it was really greati like it so much it was so helpful,easy and interesting thank you alot and keep going on - Yaman.Salahie
»  
The <img> tag explainedThis was really good for me. Some parts were cofunsing, but I figured out most of it. I am very new at this and most people dont even understand how little I know. I usually can't even figure out what question I need to ask. Mostly I flounder. - Cara
»  
Nice job!Very useful, especially the parts about sizes and styles. Thank you! - David Ostroske
»  
Well writtenThis is a great tutorial. Clear, concise, perfect for the beginner. Nice job. - SAZ
»  
Thinks for your help,i was unable to link a graphic to link until i read your tutorial,which i did find very easy to understand . - Ben
»  
The img tag explainedMaybe identify what formats the image files can be in.
»  
tutorialI am brand new to HTML, and I was able to learn the lesson successfully.
»  
<img> tagsNice short informative tutorial. Good for newbies like me. Thanks, bob t.
»  
nice simple explanationwhy aren't all tutorials like this one?
»  
educationI find your tutorials easier to understand and use. I am in my 50's and learning computers for the first time and my local college teaches it like I just got out of high school and have been learning computers all my life. - David Good
»  
FeedbackYour mini tutorial the <img> tag explained is great. I am a newbie, and you answered questions that I was left with after reading articles on other sites, in particular your brief explanation of inline and block elements, keep up the good work. - ken
»  
image tagsthanks I found it very helpful. - andy
»  
MrsIf all of your advise and instructions are handled in this manner, you are doing a good job for the novice. You offer short and to the point answers in a step-by-step manner. You kept the article short enough to not lose the reader, but long enough to cover the main points, and then wrapped it up where you could get more help if needed. Good job! - Kristine Kravis
»  
Your img tag tutorialGREAT little tutorial! I thought I knew the img tag quite well, as my fledgling personal site has a lot of photos on it. But I did NOT know it's an inline element, nor really understand how/why my images behave as they do. You explained it so beautifully! I laughed when I clicked for more information and arrived at W3C, which I use a lot, even though most of it, I still don't understand. Wonderful, wonderful job! Keep up the GREAT work! - Carol Whitney
»  
tut evaluationthank you for your simplicity. Im in the very begining stages. I do wish however, that you could have explained why things would apear where they did. ie... why the flower showed up in the upper left corner, the words on the bottom. etc.. but you got me started and im srue i will so learn. - Brian
»  
great tutorial
»  
save your images as RGBcouldn't get it to work on images as it was not said to save as RGB doesnt work CMYK
»  
Simple and easy to use. TY
»  
thanksyour contributions and the html-kit website as a whole is a good learning tool for understanding the processes of website construction.
»  
Great plugins introduction pageWell done! - Bill Sanders
»  
Good tutorialNice, simple and complete - sam1969
»  
img tag explainedI used the ext. jpeg instead of jpg and spent a little while wondering why my preview failed.It was fine after the correction and I completed the tutorial. It was fun and simple enough for me to understand the mechanism of inserting a image. I copied several lines of text to see how the image flowed. I'm feeling very accomplised at the moment! - Philip
»  
If you made more of these I would use them. - Nathen
»  
The <img> tagGreat resource! My question was answered thoroughly. Thanks - Patrick
»  
Nice, who am I to say there is any errors, just learning. - Phillip H. Pitzer
 
 
(C) Mark Cunningham. Read more articles at Mark's Virtual Playground