HTML/Training/Image

From Web Education Community Group
< HTML‎ | Training
Revision as of 14:54, 18 November 2011 by Rworth (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

HTML Images

<body>
<h1><img src="images/logo.png" alt="W3C" width="90" height="53"></h1>
</body>

Image

Images are specified by <img>.

  • The img element can omit end element. This is because It is empty element.
  • The image given by the src attribute is the embedded content.
    SRC stands for source.

[syntax]

 <img src="URL">
  • The images are often save on images folder.
 <img src="images/logo.png">


See also The img element.

Alternative text

You can specify an alternative text for a image.
The value of the alt attribute give an alternative text for a image.

  • The intent is that replacing every image with the text of its alt attribute not change the meaning of the page.
 <img src="images/logo.png" alt="W3C">

Note: One way to think of alternative text is to think about how you would read the page containing the image to someone over the phone, without mentioning that there is an image present. Whatever you say instead of the image is typically a good start for writing the alternative text.


See also Requirements for providing text to act as an alternative for images.


Image size

Images size are specified by the width attribute and the height attribute.

  • The width and height aren't strictly necessary but help to speed the display of your Web page.
 <img src="images/logo.png" alt="W3C" width="90" height="53">


Challenge

try it

1. Let's embed the logo image.

[index.html]

 <h1><img src="images/logo.png" alt="W3C cafe" width="249" height="107"></h1>

Images.png


2. Check your Web browsers.

Image chall01.png


In the next content, you will learn the embedded videos. "Video"