Add an Image to a Web Page
By Stephen Bucaro
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:
• Image Map Basics
• Text Input Box Basics
• Webpage DOCTYPE Declarations Explained
• HTML noscript Tag
• HTML title Tag
• Changing the Size of an Image on Your Webpage
• HTML SPAN Basics
• HTML Image Basics
• HTML dfn Tag
• HTML abbr and acronym Tag
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
Follow @Stephen Bucaro
General Web Design
