Несмотря на то, что в качестве примера был рассмотрен самый простой случай, который только можно придумать, он наглядно демонстрирует принцип создания навигационных карт. Дальше - дело техники и определения координат, с точки зрения HTML ничего не усложняется.
П
ереизбыток графики вызовет утяжеление html-страницы и, соответственно, увеличит время её загрузки. Кроме того, наличие большого числа изображений будет отвлекать посетителей от главного содержимого сайта (если, конечно, графика не является главным содержимым сайта). Так что, соблюдай меру и используй только там, где это нужно. И будет тебе счастье!
В
уроке про я уже рассказывал о том, как можно использовать картинки в качестве фона html-документа. Сейчас же поговорим о том, как графика используется в «верхнем слое» html-страницы.
Е
сли используются эти атрибуты, то сначала выделит место под графику, подготовит макет документа, отобразит текст и только затем загрузит изображение. При этом он поместит картинку в прямоугольник выделенного размера, даже если реальные ширина и высота картинки больше (сожмёт) или меньше (растянет). В случае, когда эти атрибуты не используются, браузер будет грузить картинку сразу, а вывод идущих за ней текста и остальных элементов задержится.
Ш
ирину и высоту изображений можно указывать как в пикселах (при этом размер картинки будет постоянным вне зависимости от разрешения экрана), так и в процентах (размер картинки будет зависить от разрешения экрана пользователя). Например:
В
случае, если пользователь в настройках браузера отключил показ изображений, то можно вместо картинки вывести альтернативный текст, который бы объяснил, что за графика здесь должна быть. Достигается это путём применения атрибута ALT
:
В
этом случае браузер зарезервирует место на странице под изображение, но вместо самой картинки покажет текст, который ты напишешь в значении атрибута ALT
:
П
овторю, это произойдёт, если пользователь отключил показ графики. Если же нет, то картинка скроет собой альтернативный текст.
.
Тег имеет обязательный атрибут src , значением которого является абсолютный или относительный путь к изображению:
Для тега доступны следующие атрибуты:
Таблица 1. Атрибуты тега
Атрибут
Описание, принимаемое значение
alt
Атрибут alt добавляет альтернативный текст для изображения. Выводится на месте появления изображения до его загрузки или при отключенной графике, а также выводится всплывающей подсказкой при наведении курсора мыши на изображение.
Синтаксис: alt="описание изображения" .
crossorigin
Атрибут crossorigin позволяет загружать изображения с ресурсов другого домена с помощью CORS-запросов. Изображения, загруженные в холст с помощью CORS-запросов, могут быть использованы повторно. Допускаемые значения:
anonymous — Cross-origin запрос выполняется с помощью HTTP-заголовка, при этом учетные данные не передаются. Если сервер не даёт учетные данные серверу, с которого запрашивается контент, то изображение будет испорчено и его использование будет ограничено.
use-credentials — Cross-origin запрос выполняется с передачей учетных данных.
Синтаксис: crossorigin="anonymous" .
height
Атрибут height задает высоту изображения в px .
Синтаксис: height="300" .
ismap
Атрибут ismap указывает на то, что картинка является частью изображения-карты, расположенного на сервере (изображение-карта — изображение с интерактивными областями). При нажатии на изображение-карту координаты передаются на сервер в виде строки запроса URL-адреса. Атрибут ismap допускается только в случае, если элемент является потомком элемента с действительным атрибутом href .
Синтаксис: ismap .
longdesc
URL расширенного описания изображения, дополняющее атрибут alt .
Синтаксис: longdesc="http://www.example.com/description.txt" .
src
Атрибут src задает путь к изображению.
Синтаксис: src="flower.jpg" .
sizes
Задаёт размер изображения в зависимости от параметров отображения. Работает только при заданном атрибуте srcset . Значением атрибута является одна или несколько строк, указанных через запятую.
srcset
Создаёт список источников для изображения, которые будут выбраны, исходя из разрешения экрана. Может использоваться вместе или вместо атрибута src . Значением атрибута является одна или несколько строк, разделенных запятой.
usemap
Атрибут usemap определяет изображение в качестве карты-изображения. Значение обязательно должно начинаться с символа # . Значение ассоциируется со значением атрибута name или id тега и создает связь между элементами и . Атрибут нельзя использовать, если элемент является потомком элемента или .
Синтаксис: usemap="#mymap" .
width
Атрибут width задает ширину изображения в px .
Синтаксис: width="500" .
1.1. Адрес изображения
Адрес изображения может быть указан полностью (абсолютный URL), например:
url(http://anysite.ru/images/anyphoto.png)
Или же через относительный путь от документа
или корневого каталога
сайта:
url(../images/anyphoto.png) — относительный путь от документа,
url(/images/anyphoto.png) — относительный путь от корневого каталога.
Это интерпретируется следующим образом:
../ — означает подняться вверх на один уровень, к корневому каталогу,
images/ — перейти к папке с изображениями,
anyphoto.png — указывает на файл изображения.
1.2. Размеры изображения
Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и height . Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.
1.3. Форматы графических файлов
Формат JPEG
(Joint Photographic Experts Group)
. Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.
Формат GIF
(Graphics Interchange Format)
. Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.
Формат PNG
(Portable Network Graphics)
. Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.
Формат APNG
(Animated Portable Network Graphics)
. Формат изображения, основанный на формате PNG. Позволяет хранить анимацию, а также поддерживает прозрачность.
Формат SVG
(Scalable Vector Graphics)
. SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.
Формат BMP
(Bitmap Picture)
. Представляет собой несжатое (оригинальное) растровое изображение, шаблоном которого является прямоугольная сетка пикселей. Bitmap-файл состоит из заголовка, палитры и графических данных. В заголовке хранится информация о графическом изображении и файле (глубина пикселей, высота, ширина и количество цветов). Палитра указывается только в тех Bitmap-файлах, которые содержат палитровые изображения (8 и менее бит) и состоят не более чем из 256 элементов. Графические данные представляют саму картинку. Глубина цвета в данном формате может быть 1, 2, 4, 8, 16, 24, 32, 48 бит на пиксель.
Формат ICO
(Windows icon)
. Формат хранения значков файлов в Microsoft Windows. Также, Windows icon, используется как иконка на сайтах в интернете. Именно картинка такого формата отображается рядом с адресом сайта или закладкой в браузере. Один ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Размер значка может быть любым, но наиболее употребимы квадратные значки со сторонами 16, 32 и 48 пикселей.
2. Тег
Тег служит для представления графического изображения в виде карты с активными областями. Активные области определяются по изменению вида курсора мыши при наведении. Щелкая мышью на активных областях, пользователь может переходить к связанным документам.
Для тега доступен атрибут name , который задает имя карты. Значение атрибут name для тега должно соответствовать имени в атрибуте usemap элемента :
...
Элемент содержит ряд элементов , определяющих интерактивные области в изображении карты.
3. Тег
Тег описывает только одну активную область в составе карты изображений на стороне клиента. Элемент не имеет закрывающего тега. Если одна активная область перекрывает другую, то будет реализована первая ссылка из списка областей.
Таблица 2. Атрибуты тега
Атрибут
Краткое описание
alt
Задает альтернативный текст для активной области карты.
coords
Определяет позицию области на экране. Координаты задаются в единицах длины и разделяются запятыми:
для круга
— координаты центра и радиус круга;
для прямоугольника
— координаты верхнего левого и правого нижнего углов;
для многоугольника
— координаты вершин многоугольника в нужном порядке, также рекомендуется указывать последние координаты, равные первым, для логического завершения фигуры.
download
Дополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения.
href
Указывает URL-адрес для ссылки. Может быть указан абсолютный или относительный адрес ссылки.
hreflang
Определяет язык связанного веб-документа. Используется только вместе с атрибутом href . Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка.
media
Определяет, для каких типов устройств файл будет оптимизирован. Значением может быть любой медиа-запрос.
rel
Дополняет атрибут href информацией об отношении между текущим и связанным документом. Принимаемые значения:
alternate — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало).
author — ссылка на автора документа.
bookmark — постоянный URL-адрес, используемый для закладок.
help — ссылка на справку.
license — ссылка на информацию об авторских правах на данный веб-документ.
next/prev — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности.
nofollow — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке.
noreferrer — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта.
prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш.
search — указывает, что целевой документ содержит инструмент для поиска.
tag — указывает ключевое слово для текущего документа.
shape
Задает форму активной области на карте и ее координаты. Может принимать следующие значения:
rect — активная область прямоугольной формы;
circle — активная область в форме круга;
poly — активная область в форме многоугольника;
default — активная область занимает всю площадь изображения.
target
Указывает, куда будет загружен документ при переходе по ссылке. Принимает следующие значения:
_self — страница загружается в текущее окно;
_blank — страница открывается в новом окне браузера;
_parent — страница загружается во фрейм-родитель;
_top — страница загружается в полное окно браузера.
type
Указывает MIME-тип файлов ссылки, т.е. расширение файла.
4. Пример создания карты-изображения
1) Размечаем исходное изображение на активные области нужной формы. Координаты областей можно вычислить с помощью программы для обработки фотографий, например, Adobe Photoshop
или Paint
.
Рис. 1. Пример разметки изображения для создания карты
2) Задаем имя карты, добавив его в тег с помощью атрибута name . Это же значение присваиваем атрибуту usemap тега .
Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers">
Рис. 2. Пример создания карты-изображения, при нажатии курсора мыши на цветок осуществляется переход на страницу с описанием
Изображения в HTML
давно завоевали заслуженную популярность
среди создателей сайтов. Они активно
используются в дизайне сайтов, для
наглядного дополнения текстовой
информации, для оформления ссылок и Бог
знает для чего еще.
Важным составляющим
любого изображения является его размер
(объем, вес) в килобайтах, ведь чем он
больше, тем дольше будет загружаться
HTML-страница. Поэтому в интернете
существует три самых распространенных
формата, которые содержат оптимальное
соотношение размер-качество изображения -
это GIF, JPG (JPEG) и PNG.
Тег или
как вставить изображение в HTML?
Для вставки
изображения в HTML страницу используется
тег . Это самый обычный встроенный
(inline, уровня строки)
элемент, то есть он не создает впереди
и после себя переводы строк в начало.
Но вот содержимого у него не может быть,
так как не имеет закрывающего
тега и является пустым
.
У тега есть
два обязательных
атрибута
-
это src, который указывает путь (URL) к
изображению и alt, выводящий альтернативный
текст, когда в браузере отключен показ
изображений. Если src вы вряд ли забудете
указать, ведь без него изображение
просто-напросто не загрузится, то про
alt очень часто забывают даже опытные
вебмастеры.
Атрибут src использует
абсолютно такие же значения адресов,
что и атрибут href тега , только ведут
они к изображениям. Ну и, естественно,
можно указывать как абсолютные, так и
относительные адреса.
Пример вставки
изображений в HTML-страницу
Вставка
изображений в HTML
Такие вот разные
птицы.
Результат в браузере
Изменение размеров
изображений в HTML
По умолчанию все
браузеры показывают изображения в их
натуральные размеры. Но при помощи
атрибутов width и height тега можно
изменить их высоту и ширину. Значения
указываются в числах, которые означают
размеры в пикселях (ставить в конце
чисел буквы px не нужно) или процентах,
в этом случае в конце надо поставить
знак %.
Пример изменения
размеров изображений
Изменение
размеров изображений
Результат в браузере
Не следует
злоупотреблять изменением размеров,
так как при визуальном уменьшении
изображений, их объем в килобайтах не
уменьшается, соответственно они
загружаются столько же времени. А при
увеличении изображений могут появиться
размытости и другие искажения.
Тем не менее, лучше
всегда указывать размеры изображений,
даже если вы их не меняете. В этом случае
браузеры не будут ожидать их полной
загрузки, а выделят под них место и
пойдут загружать страницу дальше, а
изображения загрузят в конце. Это
позволяет пользователям не сидеть в
томительном ожидании и быстрее начать
пользоваться сайтом. Кроме этого, если
браузеры сразу будут знать размеры, то
при загрузке страницы им не придется
по ходу дела подстраиваться под
появляющиеся картинки, что поможет
избежать ненужных скачков и дерганий
окружающих их HTML-элементов.
Выравнивание
изображений
В старых версиях
HTML для выравнивания изображений у тега
имелся уже известный вам атрибут
align, но в современном HTML его нет, поэтому
будем использовать тоже уже знакомый
вам, и, надеюсь, ставший родным style.
style="float:left" -
прижимает изображение к левой стороне
блока, в котором находится изображение,
а весь текст обтекает его справа.
style="float:right"
- прижимает изображение к правой стороне
блока, а текст обтекает его слева.
Пример выравнивания
изображения по левому краю.
Выравнивание
изображений
Первый
параграф.
Текст перед
картинкой.
После картинки.
Последний
параграф.
Результат в браузере
style="clear:left" -
прерывает обтекание изображений
выровненных по левой стороне.
style="clear:right"
- прерывает обтекание изображений
выровненных по правой стороне.
style="clear:both" -
прерывает обтекание изображений
выровненных по обеим сторонам.
Пример прерывания
обтекания изображения
Прерывание
обтекания изображений
Первый
параграф.
Текст перед
картинкой.
После картинки.
Последний параграф.
Результат в браузере
Всплывающий
текст-подсказка у изображений в HTML
Как и у многих
других HTML-тегов, у тега есть
атрибут title, выводящий текстовую подсказку
при наведении курсора мыши на изображение.
title="Любой текст."
Изображения для
фона
Изображения в
качестве фонов используются в HTML не
менее часто, чем просто изменения цвета
фона, которые мы с вами уже проходили.
И это вполне логично, ведь с помощью
изображений можно сделать неоднотонный
и более красочный фон.
Обычно, в качестве
образца для фона применяются небольшие
по размеру и объему (в килобайтах)
рисунки, а все потому, что фоновые
изображения браузеры обрабатывают
иначе, чем обычные рисунки. Они берут
эту маленькую картинку и замащивают
ей, как кирпичиками, весь участок
HTML-страницы или всю ее целиком.
В прошлых версиях
HTML у некоторых тегов существовал
специальный атрибут background, который
позволял делать фоновое изображение.
Но в том-то и дело, что только у некоторых,
причем далеко не у всех, например у
блочного тега
его не было. Сегодня
я вам покажу способ, который можно
применить абсолютно к любым HTML-тегам и
опять мы используем стили (CSS), а точнее
атрибут style. Общий синтаксис такой:
<тег
style="background:url("адрес картинки")">...тег>
Обязательно
заключайте адрес картинки в одинарные
кавычки, как показано. И если вы хотите
сделать фоновый рисунок для всей
страницы, то используйте style внутри тега
.
<тег
style="background:#цвет url("адрес
картинки")">...тег>
Обратите внимание,
что точку с запятой посередине ставить
не надо, так как оба значения относятся
к фону. При такой записи браузер в первую
очередь показывает фон-изображение, а
не цвет. А теперь представьте, что у вас
фоновое изображение - это рисунок
в темных тонах, а цвет текста на странице
вы сделали белым. И все отлично смотрится...
Пока пользователь не отключит в браузере
показ изображений. Тогда у него фон
станет скорее всего белым, как и ваш
цвет текста.
Пример создания
фоновых изображений в HTML
Фоновые
изображения в HTML
Созвездия в
заоблачной дали Раздумьям тщетным
многих обрекли. Одумайся, побереги
рассудок - Мудрейшие и те в тупик
зашли.Омар Хайам.
Таблицы
Чаще всего таблицы
в HTML используются не по их прямому
назначению - отображению табличных
данных, а для создания глобального
каркаса страницы. То есть создается
таблица, растягивается во всю ширину
страницы, а потом в ее левом столбце
делают одно меню, в правом - другое,
в среднем располагают основную информацию
и так далее.
Существует три
вида верстки: табличная, о которой я вам
рассказал выше; слоями (блочная), требующая
среднего уровня знания стилей (CSS) и
комбинированная. По многим параметрам
блочная верстка все же предпочтительней,
поэтому, если верстальщик может сделать
задание, как с помощью таблиц, так и с
помощью блоков, то обычно выбирается
последнее.
Описание
Тег
предназначен для отображения на веб-странице
изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src
. Если необходимо, то рисунок можно сделать ссылкой на другой
файл, поместив тег
в контейнер
.
При этом вокруг изображения отображается рамка, которую можно убрать, добавив
атрибут border="0"
в тег
.
Рисунки также могут применяться в качестве карт-изображений, когда картинка
содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему
виду ничем не отличается от обычного изображения, но при этом оно может быть
разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Синтаксис
Атрибуты
Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
Альтернативный текст для изображения.
Толщина рамки вокруг изображения.
Высота изображения.
Горизонтальный отступ от изображения до окружающего контента.
Говорит браузеру, что картинка является серверной картой-изображением.
Указывает адрес документа, где содержится аннотация к картинке.
Адрес изображения низкого качества.
Путь к графическому файлу.
Вертикальный отступ от изображения до окружающего контента.
Ширина изображения.
Ссылка на тег
, содержащий координаты
для клиентской карты-изображения.
Закрывающий тег
Не требуется.
HTML5
IE
Cr
Op
Sa
Fx
Тег IMG
Lorem ipsum dolor sit amet...
Оценка статьи:
Загрузка...