HTML: Images
Your text will be better read and received if you use images. They help users navigate the text, break it down into parts, and set the mood for the reader.
The pictures on the page don't come from nowhere. They must first be uploaded to a directory on the server or a special image hosting service. To insert an image into a page, you can use the unpaired <img>, which has two obligatory attributes: src and alt.
src attribute
The src attribute specifies the path to the image. This is also a link, as with the <a> tag, only now the user is not redirected, but rather the browser loads the image from this path if it exists. The path to the picture can be either relative or absolute.
<img src="/images.png">
alt attribute
What should I do if the picture is not available at the moment? In this case, browsers will show a small image indicating that the required image is not available.
But how would the user know what was here? Maybe the image is critical to the article, and without it you'll lose the meaning of what is written? You can advise the user to come back later when the image is available, or you can describe to them what was in the image.
To do this, use the alt attribute, its value is text. It will be shown if the image cannot be loaded
<img src="https://i.imgur.com/g64f8to.png" alt="Logo">
In addition to the function of "telling people what you can't show them" the alt attribute serves a critical role for people who use screen readers - programs that read information from the screen. Since the image cannot be read, programs read what was specified in the alt attribute.
Image size
An important component when working with images is its size. When you download a picture from a third-party resource and paste it to a page, it may be the case that the image is very large, and it needs to be made smaller. To do this, you can change the width and height attributes.
<img src="https://i.imgur.com/g64f8to.png" alt="Logo" width="320" height="240">
The picture will be displayed at 320x240 pixels.
It's important to remember that using the width and height attributes does not change the physical size of the picture - it will be the same size in terms of kilo/megabytes, etc, only the visual size will change. If you want to optimize your page, use images with the right size or reduce them using a graphics editor or special service. Now a lot of people use cell phones and mobile Internet, so the size of the page is important.
Instructions
Paste the image from https://www.w3.org/2008/site/images/logo-w3c-screen-lg.png into the editor with alt text "W3C" for when the image is not available
The exercise doesn't pass checking. What to do? 😶
If you've reached a deadlock it's time to ask your question in the «Discussions». How ask a question correctly:
- Be sure to attach the test output, without it it's almost impossible to figure out what went wrong, even if you show your code. It's complicated for developers to execute code in their heads, but having a mistake before their eyes most probably will be helpful.
In my environment the code works, but not here 🤨
Tests are designed so that they test the solution in different ways and against different data. Often the solution works with one kind of input data but doesn't work with others. Check the «Tests» tab to figure this out, you can find hints at the error output.
My code is different from the teacher's one 🤔
It's fine. 🙆 One task in programming can be solved in many different ways. If your code passed all tests, it complies with the task conditions.
In some rare cases, the solution may be adjusted to the tests, but this can be seen immediately.
I've read the lessons but nothing is clear 🙄
It's hard to make educational materials that will suit everyone. We do our best but there is always something to improve. If you see a material that is not clear to you, describe the problem in “Discussions”. It will be great if you'll write unclear points in the question form. Usually, we need a few days for corrections.
By the way, you can participate in courses improvement. There is a link below to the lessons course code which you can edit right in your browser.
Your exercise will be checked with these tests:
1const { test } = require('tests');
2
3test(({ query, expect }) => {
4 const element = query(document, 'img');
5 expect(element).to.have.attr('src', 'https://www.w3.org/2008/site/images/logo-w3c-screen-lg.png');
6 expect(element).to.have.attr('alt', 'W3C');
7});
8Teacher's solution will be available in:
