HTML LEARNING PATH
2.5 Fun with Images
WHY
The <img> element only has one opening but no closing tag. It contains a src, alt and size attribute. The src attribute specifies the location path and filename of the image. The alt attribute is an "alternative text", which describes the content of the image. This alternative text is used by search engines when the image can not be displayed, for example on a screen reader for the blind.
HOW
Images are defined using an <img> tag. The source file (src), alternative text (alt), and size (width and height) are attributes for the image.
Code sample:
<img src="url" alt="some_text">
GLOSSARY
<img> is the image tag.
(src) is the location source attribute for the image file.
(alt) is the alternative text for an image tag.
(width and height) is the size attributes for the image.
TIPS AND RESOURCES
PRACTICE
Copy an image to your MyWebsite folder on your computer. Edit your web page and add an image tag to a new paragraph container. Make sure that you specify the exact file name, including the file extension in the src attribute.
<!DOCTYPE html>
<html>
<head>
<title>My First Website!</title>
<meta name="description" content="Describe the content of your web page here">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Your Name">
<meta charset="UTF-8">
</head>
<body>
<section>
<h1>This is the heading</h1>
<p><img src="url" alt="some_text"></p>
<p>This is the paragraph content</p>
</section>
</body>
</html>
Save your file.