Работа с изображениями

1. Работа с изображениями

2.

Изображения в HTML
В начале Web был просто текстом, что было довольно скучно. К счастью, это
продолжалось не долго - до появления возможности вставлять изображения (и
другие, более интересные, типы контента) в веб-страницы.
Существуют и другие типы мультимедиа, однако логичнее начать со
скромного <img> элемента, используемого для вставки простого изображения в
веб-страницу.
Чтобы разместить изображение на странице, нужно использовать тег <img>.
Это пустой элемент (имеется ввиду, что не содержит текста и закрывающего
тега), который требует минимум один атрибут для использования —
src (произносится эс-ар-си, иногда говорят его полное название, source).
Например, если ваше изображение называется dinosaur.jpg, и оно находится в
той же директории что и ваша HTML страница, вы можете встроить это
изображение как:
Если изображение было в
поддиректории images ,
находящаяся внутри той же
директории, что и HTML
страница:

3.

Изображения в HTML
Вы можете встроить изображение используя абсолютный URL, например:
Но это бессмысленно, так как он просто заставляет браузер делать больше
работы, запрашивая каждый раз IP-адрес от DNS-сервера. Вы почти всегда
будете держать свои изображения для сайта на том же сервере, что и ваш
HTML.
Вот результат того, как будет выглядеть страница:
3

4.

Изображения в HTML
Такие элементы, как <img> и <video>, иногда называются замещаемыми
элементами. Это потому что содержание элемента и размер определяет
внешний ресурс (как изображение или видео файл), а не содержание самого
элемента.
Следующий атрибут, который мы рассмотрим — alt. Его значением должно
быть текстовое описание изображения для использования в ситуациях, когда
изображение не может быть просмотрено / отображено или отрисовка занимает
много времени из-за медленного интернет-соединения.
Чтобы продемонстрировать использование атрибута alt на практике, внесём
изменения в код из предыдущего примера:
4

5.

Изображения в HTML
Итак, alt может быть нам полезен следующим:
• Пользователь с нарушением зрения использует устройство чтения с экрана,
которое может читать вслух описание элементов веб-страницы.
• В случае, если была допущена ошибка в имени файла или пути к нему.
• Браузер не поддерживает формат данного изображения. Некоторые люди до
сих пор используют текстовые браузеры, которые вместо изображений
отображают текст из атрибута alt.
• Если вы хотите добавить возможность найти ваше изображение с помощью
поисковых систем.
• Если пользователи отключили отображение изображений на странице для
уменьшения объёма передаваемых данных и для сокрытия элементов,
отвлекающих внимание.
По существу, главная идея здесь это предоставить нечто полезное, для случая
когда изображения не видны. Это гарантирует что все пользователи не упустят
ничего из содержимого страницы.
Вы вскоре выясните насколько полезным является альтернативный текст, если
изображения не видны.
5

6.

Изображения в HTML. Ширина и высота
Вы можете использовать атрибуты width и height, чтобы указать ширину и
высоту вашего изображения. Ширину и высоту вашего изображение можете
найти различными способами.
Это не приводит к большой разнице в отображении при нормальных
обстоятельствах. Но если изображение не будет показано, например, когда
пользователь только что перешёл на страницу, а оно ещё не успело загрузится,
вы укажите браузеру оставить место для отрисовки изображения
Это хорошая практика, в результате страница загрузится быстрее и более гладко.
Однако, вы не должны изменять размеры ваших изображений используя HTML
атрибуты.
Если вы установите размер изображения слишком большим, то в конечном итоге
вы столкнётесь с изображениями, которые выглядят зернистыми, размытыми
или слишком маленькими, и потратите трафик для загрузки изображения,
которое не будет соответствовать нуждам пользователя.
Конечное изображение может также выглядеть искажённым, если вы не
сохраните правильное соотношение сторон.
Рекомендуется использовать графический редактор для подгонки изображения к
нужному размеру, перед вставкой его на вашу веб-страницу.
6

7.

Изображения в HTML. Заголовок
Как и для ссылок, вы также можете добавить атрибут title для изображений,
чтобы при необходимости предоставить дополнительную информацию. В
нашем примере мы могли бы сделать это так:
Это даёт нам всплывающую
подсказку при наведении курсора
мыши, также как и в ссылках:
Однако это не рекомендуется - title имеет
ряд проблем с доступностью, в основном
из-за того, что поддержка программ чтения
с экрана очень непредсказуема, и
большинство браузеров не будут отображать
её, если вы не наведёте курсор мыши.
Зачастую лучше включить такого рода
вспомогательную информацию в основной
текст статьи, чем прикреплять её к
изображению.
7

8.

Изображения в HTML. Все атрибуты
• alt – Альтернативный текст для изображения.
• border – Толщина рамки вокруг изображения.
• height – Высота изображения.
• hspace – Горизонтальный отступ от изображения до окружающего контента
(в более новых версиях html не поддерживается).
• ismap – Говорит браузеру, что картинка является серверной картойизображением.
• longdesc – Указывает адрес документа, где содержится аннотация к
картинке (браузеры никак не поддерживают атрибут longdesc и не выводят
текст, указанный по ссылке).
• lowsrc – Адрес изображения низкого качества.
• src – Путь к графическому файлу.
• vspace – Вертикальный отступ от изображения до окружающего контента
(в более новых версиях html не поддерживается).
• width – Ширина изображения.
• usemap – Ссылка на тег <map>, содержащий координаты для клиентской
карты-изображения.
Также для этого тега доступны универсальные атрибуты и события.
8

9.

Изображения в HTML. Все атрибуты
Примечание
Атрибут ismap говорит браузеру что рисунок является серверной картойизображением.
Карты-изображения позволяют привязывать ссылки к разным областям одного
изображения. Реализуется в двух различных вариантах — серверном и
клиентском. В случае применения серверного варианта браузер посылает
запрос на сервер для получения адреса выбранной ссылки и ждет ответа с
требуемой информацией. Такой подход требует дополнительного времени на
ожидание результата и отдельные файлы для каждой карты-изображения.
Атрибуты alt и title не могут содержать большой текст для описания
изображения, поэтому атрибут longdesc позволяет указать адрес документа, где
содержится аннотация к картинке.
Атрибут usemap связывает между собой картинку и карту-изображение,
задаваемую с помощью контейнера <map>. В качестве такой связи выступает
имя идентификатора, которое указывается в значении атрибута usemap, и то же
имя, заданное у атрибута name тега <map>.
9

10.

Изображения в HTML. Заголовки под
изображением
Начиная разговор о заголовках, есть множество путей как вы можете добавить
заголовок к своему изображению.
Лучшим решением будет использование элементов HTML5 <figure> и
<figcaption>.
Они были созданы исключительно для этой цели: предоставить семантический
контейнер для рисунков и чётко связать рисунок с заголовком.
10

11.

Изображения в HTML. Заголовки под
изображением
Тег <figure> не является изображением. Он представляет собой независимый
структурный элемент, который:
• Передаёт смысл компактным, интуитивно понятным способом.
• Может использоваться в различных местах страницы.
• Предоставляет ценную информацию, поддерживающую основной текст.
Тег <figure> может быть несколькими изображениями, куском кода, аудио,
видео, уравнением, таблицей, либо чем-то другим.
Элемент <figcaption> говорит браузерам и вспомогательной технологии, что
заголовок описывает содержимое элемента <figure>.
11

12.

Изображения в HTML. Использование в CSS
Вы можете использовать CSS для встраивания изображений в веб-страницы
(или JavaScript, но это совсем другая история). Параметры CSS backgroundimage и другие background-* применяются для контроля размещения фонового
изображения.
Получившееся в конечном итоге изображение можно легко позиционировать и
контролировать, в отличие от его HTML аналога.
Итог: если изображение имеет важность, в контексте содержимого вашей
страницы, вам следует использовать HTML изображения. Если же картинка
является банальной декорацией, используйте фоновые изображения CSS.
12

13.

Изображения в HTML. Задний фон
В HTML есть возможность создания заднего фона. Рассмотрим детальнее.
Самый простой способ:
Чтобы добавить задний фон на веб-страницу без использования CSS, мы можем
воспользоваться тэгом div. Тэг div представляет собой блочный элемент и
может быть использован для создания разделов с заданным фоном.
К примеру, Вам нужно выделить какую-то область текста задним фоном, чтобы
он не сливался с установленным для всего документа заднего фона.
13

14.

Изображения в HTML. Задний фон. Свойства
Свойство background-attachment устанавливает, будет ли прокручиваться
фоновое изображение вместе с содержимым элемента.
• fixed делает фоновое изображение элемента неподвижным.
• scroll позволяет перемещаться фону вместе с содержимым.
• inherit наследует значение родителя.
• local фон фиксируется с учётом поведения элемента.
background-repeat определяет, как будет повторяться фоновое изображение.
• no-repeat устанавливает одно фоновое изображение в элементе без его
повторений
• repeat фоновое изображение повторяется по горизонтали и вертикали.
• repeat-x фоновый рисунок повторяется только по горизонтали.
• repeat-y фоновый рисунок повторяется только по вертикали.
• inherit наследует значение родителя.
• space Изображение повторяется столько раз, чтобы полностью заполнить
область.
• round изображение повторяется так, чтобы в области поместилось целое
число рисунков; если это не удаётся сделать, то фоновые рисунки
масштабируются.
14

15.

Изображения в HTML. Задний фон. Свойства
background-size масштабирует фоновое изображение согласно заданным
размерам.
• <значение> задает размер в любых доступных для CSS единицах — пикселы
(px), сантиметры (cm), em и др.
• <проценты> задает размер фоновой картинки в процентах от ширины или
высоты элемента.
• auto если задано одновременно для ширины и высоты (auto auto), размеры
фона остаются исходными; если только для одной стороны картинки (100px
auto), то размер вычисляется автоматически исходя из пропорций картинки.
• cover масштабирует изображение с сохранением пропорций так, чтобы его
ширина или высота равнялась ширине или высоте блока.
• contain масштабирует изображение с сохранением пропорций таким
образом, чтобы картинка целиком поместилась внутрь блока.
15

16.

Задания
Ответьте на вопросы (проверяем память и понимание):
1.
2.
3.
4.
5.
6.
7.
8.
9.
Возможно ли на страницу сайта добавить мультимедийные объекты
(изображения, видео, музыку)?
Назовите тэги для добавления изображения на страницу;
Назовите атрибуты для изображения;
Возможно ли установить изображение из другой папки, находящейся в
одной директории с сайтом?
Возможно ли установить изображение из другого интернет-ресурса?
Возможно ли установить для изображения своё соотношение сторон или
размеры изображения?
Возможно ли добавить в изображение ссылку на другую страницу?
Что произойдёт, если изображение не было найдено при загрузке страницы
и имеет значение атрибута alt?
Есть ли тег(и), который(ые) облегчит создание подписи/заголовка
изображения?

17.

Задания
Выполните практическое задание:
1. Создайте html файлы для трёх-четырёх страниц сайта;
2. Дайте страницам названия, связанные с: едой, транспортом, профессиями,
играми, одеждой, инженерией, напитками, кафе, кино, животными, или
компаниями;
3. Создайте каркас сайта для каждой страницы;
4. Попробуйте сделать панель навигации для перехода по этим страницам;
5. Наполните страницу контентом выбранной стилистики: если это еда, то дайте
описание ресторана или меню в точках фастфуда, если транспорт, то дайте
описание автосалона с указанием доступных марок машин, если кино, то
опишите кинотеатр с афишей или опишите фильм с кадрами и актёрами, и
т.д.
6. Добавьте на страницы изображения, сделайте к ним подписи;
7. Добавьте изображения-ссылки, позволяющие перейти на другую страницу;
8. Добавьте фоновые рисунки на страницы;
17