OPEN COURSE

Adding Images to Your Website

You can add images to your website by using the img element.

An example of this would be:

< img src="images/your-image.jpg" width="500" >

Note that img elements are self-closing.

All img elements must have an alt attribute. The text inside an alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.

I-We-You Do Exercise

Click Open in on your repl.it.

Scroll to top right to create a folder and click the 3 dots to upload your preferred food image from your computer and point to that specific image using the src attribute.

Let's add an alt attribute to our img example above:

Take Home Practice

1. Answer these questions in a document to the best of your ability.
2. How is the img element different from the h1 or p elements?
3. What does img stand for?
4. What does src stand for?
5. What does width stand for?
6. What does alt stand for?
7. When the value to width is changed, what happens to the image?
8. When width="500" is removed, what happens to the image?
9. Let's try to add an image to our existing website from last assignment:

Within the existing main element in the previous assignment, insert an img element before the existing p elements.

Now set the src attribute so that it points to that image from your computer

Finally, don't forget to give your img element a width and an alt attribute with applicable text.

Remember once you are done with your assignment, submit the document with the link of your repl.it code and your full name Submit Here