Today lets discuss images. We will cover how to insert them into your website, properties pertaining to them that you can set, and also cover image file formats. This should be a relatively easy lesson to grasp.
Images are any graphics, pictures, or any graphical file embedded in your webpage. Like most tags, images are always¹ contained within the body element of the webpage. You create an image using the
<img> tag. Under XHTML specifications, the
<img> tag is required to be closed.
As you may recall from an earlier lesson, tags are closed with a tag bearing the same name, except with a slash before the name.
</body> is and example. Notice that the tag bears the same name as the tag it closes (
The cool thing about the
<img> tag (and many others), is that it can be a self-closing tag. This means that you don’t have to create a closing tag. All you need to do is insert a slash before the closing bracket of the tag. So, the self-closing image tag would look like
<img />. Simple, huh?
Ok, so say you insert the
<img /> tag into your page. You open up the page in your browser and…nothing. Why? Because you haven’t told the
<img> tag which image to display! The solution? the src attribute. The scr attribute stands for source, and it defines where the image is located. Here’s how you use it:
<img src="images/myPicture.png" />
Replace the part in parenthesis with the location of your image (either on your server or the World Wide Web). This defines where your image is located.
So, is that it? Nope, although the image will display in the browser window, you still need one more property. The alt property. The alt stands for alternate text, and is what people will see if they either don’t have images enabled in their web browser, or the image cannot be found. Here’s how it works:
<img src="images/myPicture"alt="My Picture" />
If the image displays properly, no one will see the alt property.
That is all you need to display images. There are, however, two other properties you can set: the
height and the
width properties. These define the height and width of the image in pixels.
As far as image formats go, I will briefly cover the three most used formats: .jpg, .gif, and .png.
JPG (Joint Photographic Experts Group) is the standard format for pictures. It contains a good color palate, among other things.
GIF is the format best suited for graphics (such as sketches, or animations). It has good file compression, but a limited color palate.
PNG is a bit of a blend of the two formats. With a decent (depending on version) color palate and decent compression, many consider this to be the best choice for web graphics.
Well, that wraps up images. If you have any questions, please feel free to comment on this post and I will get back to you ASAP.
Next time, I will write a “test” that will quiz you on everything that I’ve covered so far. I will also give an assignment to create a web page with my specifications. Take care.