HTML Tutorials V :: Images

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 (<body>).

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.

6 Responses to HTML Tutorials V :: Images

  1. Isabella08 says:

    Nice Jeff! But, but…. a test!?!

  2. One quick question Jeff, how do you change the pixels (like height and width) to fit your space.. like you know: center top or such? Are there any certain ones that are most used?



    p.s. – A TEST!!!!!!!!! (yikes) Just kidding…

  3. Jeff says:

    Hi Jessica,

    To change the picture to fit your space… I’m not quite sure what you mean, but if you are trying to center the image (or have it run along the left or right site) you have two options.

    The first would be to put a div (div stands for division) tag before the image and a closing tag after it. Set the “align” property of the div tag to either “center”, “left”, or “right”. Your final would look like this (assuming you want to center the image):

    <div align="center"> <img src="myPicture.png" alt="My Picture" /> </div>

    This will work, but the “align” property is deprecated in XHMTL 1.0 and above (meaning its use is strongly discouraged). The preferred method is to use a CSS style. I will go into detail on CSS in a later tutorial, but for now you can do the following with the “style” property to center it:

    <img src="myPicture.png" alt="My Picture" style="margin:auto;" />

    Or have it “float” right or left:

    <img src="myPicture.png" alt="My Picture" style="float:left;" />

    Replacing “left” with right if you want to float right.

    Please note that the methods described work on any element (containing content, of course, such as text, images, etc. I don’t know what will happen if you try this on a title tag :-p)

    I hope this answers your question. If it doesn’t, please ask again in different wording (I needed to write on aligning content anyway…) 😛

  4. Hi Jeff,

    That pretty much answers all my questions… Thanks! Sorry my wording wasn’t clear… One more thing though…. In — The myPicture.png would be the name of your photo then .png correct?

    I seem to have had more questions about this one…. 🙂

    Thank You!


  5. Jeff says:

    Not quite. “myPicture.png” is a place-holder. You would replace “myPicture.png” completely with your file name. Say your picture is “anotherPicture.jpg“. You would not include “.png” because your picture is a “.jpg“.

    It is just like linking to another web page. If you recall from last lesson, you simply type the file name (e.g. “webPage.html“). For a detailed description, please refer to last lesson.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: