HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  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

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.

Example:
<img src="animals.jpg" />
Output:
Animals

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:

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:

<img src="/images/sky.jpg">

Image alt

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

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.

Example of image not loading and the text specified with the alt attribute loading instead:
<img src="/images/swac.jpg" alt="Swan" />
Output:
Swan

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.

Example of an image having its natural width and height:
<img src="/images/apple.jpg" alt="Apple" />
Output:
Apple
Example of an image having a set width and height:
<img src="/images/apple.jpg" alt="Apple" width="100" height="110" />
Output:
Apple

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.

Example:
<img src="/images/apple.jpg" alt="Apple" border="1" /> <img src="/images/apple.jpg" alt="Apple" border="3" /> <img src="/images/apple.jpg" alt="Apple" border="5" />
Output:
Apple Apple Apple

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.

Example:
<img src="/images/apple.jpg" alt="Apple" align="left" /> <p>Eat fruits every day to get your natural sugars.......</p> <img src="/images/lettuce.jpg" alt="Lettuce" align="right" /> <p>Don't forget your vegetables either.......</p>
Output:
Apple

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!



Lettuce

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

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information