Adding Images to Your Site
One of the earliest media inclusions in the HTML markup was the “Image” tag, which allows you to insert an image as an element within your document. Most popular image formats are supported within HTML, and may be included by just referencing the image location. In this tutorial, you will learn how to add an image to your site.
Our HTML document will include an image and a heading. The image is a standard .jpg file, and is included in the file attachment at the bottom of the tutorial.
<title>Working With Images</title>
<h2>This is a picture of a Smiley Face</h2>
<img src="smiley_face.jpg" alt="Smiley Face" />
The first part of the <img> syntax is the “src” attribute, which defines for the browser where the image is located. This can be either an absolute or relative location; the latter being preferred for most implementation. For our examples here, make sure that the image is located in the same folder as the primary HTML file so that it may be properly located. The “alt” attribute displays pre-defined text when the image fails to load. Generally speaking, you will never see the alternate text unless the browser is not able to locate the image from the location specified. For specialized machines such a screen readers used by those with disabilities, this text will be read as a means of describing what is present, but perhaps not viewable, by the user.
<img src=”file extension will go here” ….>
<alt=”This text will display when the image fails to load”>
<img src=”image file” alt=”alternate image name” />
A Few Last Words
Images make pages far more interesting. What would we do if all our sites were simply text? No matter how many times you format text, its digital media that makes sites interesting apart from the themes applied. Join us next time for additional HTML tutorials.
Download Source Files