Для лучшего восприятия текста на странице используют изображения. Они помогают ориентироваться в тексте, разбивать его на составные части, а также создают настроение у читателя.
Картинки на странице не существуют сами по себе. Предварительно они должны быть загружены в директорию на сервере или на специальный хостинг картинок. Для вставки картинки на страницу используется непарный тег <img>, у которого два обязательных атрибута: src и alt.
В атрибуте src указывается путь к изображению. Это тоже ссылка, как и в теге <a>, только теперь не происходит перенаправление пользователя, а браузер загружает изображение по этому пути, если оно существует. Путь к картинке может быть как относительный, так и абсолютный.
<img src="/images.png">
Что делать, если картинка в данный момент недоступна? В этом случае браузеры показывают маленькую картинку, обозначающую, что изображение недоступно.
Но как пользователь поймёт, что здесь было? Может изображение критически важное для статьи, и без него теряется смысл написанного? Можно посоветовать пользователю зайти попозже, когда изображение будет доступно, а можно описать ему, что было изображено.
Для этого используется атрибут alt, значением которого является текст. Он будет показан при невозможности загрузить изображение
<img src="https://example.com/images.png" alt="Аналитика компании за 2007 год">
Помимо функции «рассказать то, что не удалось показать» атрибут alt выполняет важнейшую роль для людей, которые пользуются скринридерами — программами для чтения информации с экрана. Так как изображение невозможно прочитать, то программы читают то, что было указано в атрибуте alt
Важной составляющей при работе с изображениями являются его размеры. При скачивании картинки со стороннего ресурса и её вставки на страницу, часто возникает ситуация, что изображение очень большое, и его нужно уменьшить. Для этого существуют атрибуты width и height, которые позволяют установить ширину и высоту для картинки.
<img src="https://example.com/images.png" alt="Аналитика компании за 2007 год" width="320" height="240">
Картинка будет отображена в размере 320x240 пикселей.
Важно помнить, что использование атрибутов width и height не меняет физический размер картинки — она будет весить столько же, изменится только визуальный размер. Для оптимизации страницы подбирайте картинки нужного размера или уменьшайте их с помощью графического редактора, либо специальных сервисов. Сейчас многие пользуются мобильными телефонами и мобильным интернетом, поэтому вес страницы имеет важное значение
Вставьте в редактор картинку по адресу https://www.w3.org/2008/site/images/logo-w3c-screen-lg.png и текстом W3C для случаев, если картинка недоступна
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.