The first version of HTML, suggested by Tim Berners-Lee back in 1990, didn't even have a tag for images, it was designed for presenting formatted text. But adding an image to a webpage makes it much more interesting. There are many different image file formats, each identified by its file extension, and each with its advantages and disadvantages.
However the HTML code to add an image to a webpage is the same for all formats. To add an image to a webpage, use the <img> tag. The basic code is shown below.
<img src="path/filename.ext" />
The img tag's src attribute defines the path to the image file. The difficulty some beginner's have is getting this path right. If you don't get the path right, a box will appear where the image should be, but no image. If you put the image file in the same folder as the html file that you want it to appear on, you eliminate all confusion because you don't need a path, just the image file name, as shown below.
<img src="mypicture.jpg" />
However, it's very common to keep all images in a special folder named, images. If that folder is in the same folder as the html file that you want it to appear on, the path is just the name of that folder, as shown below.
<img src="images/mypicture.jpg" />
However, many times, the images folder is at a higher level in the directory structure than the the html file that you want it to appear on. In that case, you must tell the browser to move up one level by using two dots (..), and then to look down by using a forward slash (/). An example path for this is shown below.
<img src="../images/mypicture.jpg" />
Both of these examples use "relative" paths. In other words, they define the path to the image file relative to the location of the html file that you want it to appear on. If you don't want to fool around with relative paths, you can use an absolute path. An absolute path contains the domain name and domain extension, as shown below.
<img src="http://www.domain.com/images/mypicture.jpg" />
How do you get the absolute path? If you can call up the image file in your browser and display it by itself, you'll see the absolute path in the browser's address bar. All you need to do is copy and paste this address into your image tag.
Another way to get an absolute path is if the image is displayed on another webpage. Call up that webpage in your browser and right-click on the image. In the menu that appears select "View Image Info" (if you're using Firefox) or "Properties" (if you're using Internet Explorer). A dialog box will open displaying the absolute path to the image file.
Adding an image to a webpage makes it much more interesting. But for the image to appear, you have to get its path right. Using the methods described here, you have no problem defining the correct path.
More HTML Code:
• HTML Text Tags Basics
• Web Page Template
• HTML Select List Basics
• When to Use the nofollow Attribute value
• Block and Inline HTML Elements
• Keywords Meta Tag Generator
• The Font Tag
• Code For a Basic 2-Column Fluid Webpage Layout
• Use an Image as a Form Submit Button
• Set Form Controls Tab Order With tabindex Attribute