HTML Educational Materials
- Week 2
  - Hyper Links
    - Hyper Links
    - Link options
  - Embedded contents
    - Image
    - Video

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">

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.

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>

2. Check your Web browsers.

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