Warning:
This wiki has been archived and is now read-only.
Educational materials/Image
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 food and drink images in "menu.html".
[Example]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Menu | W3C cafe</title>
<meta name="description" content="The W3C cafe is .....">
<meta name="keywords" content="W3C cafe, coffee, .....">
</head>
<body>
<h1>W3C cafe's menu</h1>
<ul>
<li><a href="#food">Food</a></li>
<li><a href="#drink">Drink</a></li>
</ul>
<h2 id="food">Food</h2>
<ul>
<li>Sandwich</li>
<li>Cake</li>
</ul>
<h2 id="drink">Drink</h2>
<ul>
<li>Coffee<br><img src="images/coffee.jpg" alt="" width="270" height="194" ></li>
<li>Orange juice</li>
</ul>
</body>
</html>
2. Check your Web browsers.
In the next content, you will learn the embedded videos. "Video"