• Home
• About
• FAQ
• Contact
• Link
• Sitemap

1. HTML intro
2. Web pages and you

1. HTML getting started
2. HTML basics
3. HTML document

1. HTML text formatting 1
2. HTML text formatting 2
3. HTML text formatting 3
4. HTML fonts
5. HTML entities

1. HTML links
2. HTML email links

1. HTML images
2. HTML image maps

1. HTML forms
2. HTML form labels
3. HTML fieldset/legend

1. HTML tables
2. HTML tables concepts

1. HTML frames

1. HTML backgrounds
2. HTML colors
3. HTML color shades
4. HTML color usage

1. HTML stylesheets
2. HTML div/span

1. HTML audio
2. HTML video
3. HTML objects
4. HTML download media

1. HTML head section
2. HTML meta tags
3. HTML scripts
4. HTML declarations
5. HTML document types

1. HTML tag rules
2. HTML things to avoid
3. URL formatting
4. URL encoding/decoding
5. HTML use/access
6. HTML publish work

1. HTML marquees

1. HTML history
2. HTML summary

HTML images

What would the web be without images? Sure, text is great and there is alot you can do with it, but without a graphical component webpages may lack character or look a little plain. Knowing how to display images on webpages is an essential skill for any webpage developer.

This tutorial focuses on:

• The <img> tag
• Image alt
• Image size
• Image borders
• Image alignment

The <img> tag

To place images on a webpage, you will be using the <img> tag.

The <img> tag has a few different attributes, but only one which is required - the src attribute (short for source). The src attribute denotes the location of the image.

Output:

NOTE: The <img> tag has no end tag.

You can try to access an image from a few different places, and depending on which place you access an image from, you will need to give the src attribute different values.

Accessing an image from different places:

• The same directory
  If you try to access an image from the same directory, simply use the name of the image for the src attribute - <img src="aPicture.jpg">

• A different directory
  If you try to access an image from a different directory, start with the root directory (/) and list through the directories until you find the one the image is in. For example, this image:

is located in www.lanodfcode.com/images and we display it from a file located in www.landofcode.com/html-tutorials/. So the <img> tag for this image would look like this:

• A different website
  If you try to access an image from a different website, use the entire url (together with the http:// part) for the src attribute - <img src="http://www.site.com/images/picture.jpeg">

Image alt

Images don't always load. There are several reasons for this:

• Some data was lost in transmission
• You are not reffering to the correct path when trying to display the image
• The user has disabled images on their browser
• The user is using a text only browser

To be prepared for this, you will have to use the alt attribute of the <img> tag. The alt attribute specifies alternative text to be displayed if an image does not load.

Output:

Always use the alt attribute in your images not just because of the issues stated above but also because if you do not use the alt attribute, your pages will not validate with the webpage validator at validator.w3.org.

Image size

A web browser will automatically compute the width and height for an image, but you can set it to have a custom width and height. The width and height of an image can be set using the width and height attributes and assigning them a numeric value which will denote the height and width of an image in pixels.

Output:

Output:

Image borders

You can set a border around an image using the border attribute and giving it a numeric value denoting the thickness of the border.

Output:

NOTE: The border attribute is deprecated

Image alignment

Align an image using the align attribute and setting it to "left" for left alignment or "right" for right alignment.

Output:

Eat fruits every day to get your natural sugars. One particular fruit which is really great is the apple. They say that "an apple a day keeps the doctor away" and they're not kidding!

Don't forget your vegetables either. Eating vegetables every day is very good for your body. Leafy green vegetables like lettuce are particularly good for you. Generally, you should have a balanced diet of vegetables, fruits, and so on.

NOTE: The align attribute is deprecated