HTML: Изображения
Для лучшего восприятия текста на странице используют изображения. Они помогают ориентироваться в тексте, разбивать его на составные части, а также создают настроение у читателя.
Картинки на странице не существуют сами по себе. Предварительно они должны быть загружены в директорию на сервере или на специальный хостинг картинок. Для вставки картинки на страницу используется непарный тег <img>, у которого два обязательных атрибута: src и alt.
Атрибут src
В атрибуте src указывается путь к изображению. Это тоже ссылка, как и в теге <a>, только теперь не происходит перенаправление пользователя, а браузер загружает изображение по этому пути, если оно существует. Путь к картинке может быть как относительный, так и абсолютный.
<img src="/images.png">Атрибут alt
Что делать, если картинка в данный момент недоступна? В этом случае браузеры показывают маленькую картинку, обозначающую, что изображение недоступно.
Но как пользователь поймёт, что здесь было? Может изображение критически важное для статьи, и без него теряется смысл написанного? Можно посоветовать пользователю зайти попозже, когда изображение будет доступно, а можно описать ему, что было изображено.
Для этого используется атрибут alt, значением которого является текст. Он будет показан при невозможности загрузить изображение
<img src="https://cdn6.hexlet.io/1P6tmafZTIy5.png" alt="Логотип Code Basics">Помимо функции «рассказать то, что не удалось показать» атрибут alt выполняет важнейшую роль для людей, которые пользуются скринридерами — программами для чтения информации с экрана. Так как изображение невозможно прочитать, то программы читают то, что было указано в атрибуте alt
Размеры изображения
Важной составляющей при работе с изображениями являются его размеры. При скачивании картинки со стороннего ресурса и её вставки на страницу, часто возникает ситуация, что изображение очень большое, и его нужно уменьшить. Для этого существуют атрибуты width и height, которые позволяют установить ширину и высоту для картинки.
<img src="https://cdn6.hexlet.io/1P6tmafZTIy5.png" alt="Логотип Code Basics" width="320" height="240">Картинка будет отображена в размере 320x240 пикселей.
Важно помнить, что использование атрибутов width и height не меняет физический размер картинки — она будет весить столько же, изменится только визуальный размер. Для оптимизации страницы подбирайте картинки нужного размера или уменьшайте их с помощью графического редактора, либо специальных сервисов. Сейчас многие пользуются мобильными телефонами и мобильным интернетом, поэтому вес страницы имеет важное значение
Задание
Вставьте в редактор картинку по адресу https://www.w3.org/2008/site/images/logo-w3c-screen-lg.png и текстом W3C для случаев, если картинка недоступна
HTML: Изображения
Для лучшего восприятия текста на странице используют изображения. Они помогают ориентироваться в тексте, разбивать его на составные части, а также создают настроение у читателя.
Картинки на странице не существуют сами по себе. Предварительно они должны быть загружены в директорию на сервере или на специальный хостинг картинок. Для вставки картинки на страницу используется непарный тег <img>, у которого два обязательных атрибута: src и alt.
Атрибут src
В атрибуте src указывается путь к изображению. Это тоже ссылка, как и в теге <a>, только теперь не происходит перенаправление пользователя, а браузер загружает изображение по этому пути, если оно существует. Путь к картинке может быть как относительный, так и абсолютный.
<img src="/images.png">Атрибут alt
Что делать, если картинка в данный момент недоступна? В этом случае браузеры показывают маленькую картинку, обозначающую, что изображение недоступно.
Но как пользователь поймёт, что здесь было? Может изображение критически важное для статьи, и без него теряется смысл написанного? Можно посоветовать пользователю зайти попозже, когда изображение будет доступно, а можно описать ему, что было изображено.
Для этого используется атрибут alt, значением которого является текст. Он будет показан при невозможности загрузить изображение
<img src="https://cdn6.hexlet.io/1P6tmafZTIy5.png" alt="Логотип Code Basics">Помимо функции «рассказать то, что не удалось показать» атрибут alt выполняет важнейшую роль для людей, которые пользуются скринридерами — программами для чтения информации с экрана. Так как изображение невозможно прочитать, то программы читают то, что было указано в атрибуте alt
Размеры изображения
Важной составляющей при работе с изображениями являются его размеры. При скачивании картинки со стороннего ресурса и её вставки на страницу, часто возникает ситуация, что изображение очень большое, и его нужно уменьшить. Для этого существуют атрибуты width и height, которые позволяют установить ширину и высоту для картинки.
<img src="https://cdn6.hexlet.io/1P6tmafZTIy5.png" alt="Логотип Code Basics" width="320" height="240">Картинка будет отображена в размере 320x240 пикселей.
Важно помнить, что использование атрибутов width и height не меняет физический размер картинки — она будет весить столько же, изменится только визуальный размер. Для оптимизации страницы подбирайте картинки нужного размера или уменьшайте их с помощью графического редактора, либо специальных сервисов. Сейчас многие пользуются мобильными телефонами и мобильным интернетом, поэтому вес страницы имеет важное значение
Задание
Вставьте в редактор картинку по адресу https://www.w3.org/2008/site/images/logo-w3c-screen-lg.png и текстом W3C для случаев, если картинка недоступна
Ваше упражнение проверяется по этим тестам
const { test } = require('tests');
test(({ query, expect }) => {
const element = query(document, 'img');
expect(element).to.have.attr('src', 'https://www.w3.org/2008/site/images/logo-w3c-screen-lg.png');
expect(element).to.have.attr('alt', 'W3C');
});Решение учителя откроется через:
20:00
