HTML-изображения добавляются на веб-страницы с помощью тега . Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.
С помощью HTML-тегов и можно создавать карты-изображения с активными областями.
Вставка изображений в HTML-документ 1. ТегЭлемент представляет изображение и его резервный контент, который добавляется с помощью атрибута alt . Так как элемент является строчным, то рекомендуется располагать его внутри блочного элемента, например,
Или .
Тег имеет обязательный атрибут src , значением которого является абсолютный или относительный путь к изображению:
Для тега доступны следующие атрибуты:
alt | Атрибут alt добавляет альтернативный текст для изображения. Выводится на месте появления изображения до его загрузки или при отключенной графике, а также выводится всплывающей подсказкой при наведении курсора мыши на изображение. Синтаксис: alt="описание изображения" . |
crossorigin | Атрибут crossorigin позволяет загружать изображения с ресурсов другого домена с помощью CORS-запросов. Изображения, загруженные в холст с помощью CORS-запросов, могут быть использованы повторно. Допускаемые значения: anonymous — Cross-origin запрос выполняется с помощью HTTP-заголовка, при этом учетные данные не передаются. Если сервер не даёт учетные данные серверу, с которого запрашивается контент, то изображение будет испорчено и его использование будет ограничено. use-credentials — Cross-origin запрос выполняется с передачей учетных данных. Синтаксис: crossorigin="anonymous" . |
height | Атрибут height задает высоту изображения. Может указываться в px или % . Синтаксис: height: 300px . |
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: 100% . |
Адрес изображения может быть указан полностью (абсолютный URL), например:
url(http://anysite.ru/images/anyphoto.png)
Или же через относительный путь от документа
или корневого каталога
сайта:
url(../images/anyphoto.png) — относительный путь от документа,
url(/images/anyphoto.png) — относительный путь от корневого каталога.
Это интерпретируется следующим образом:
../ — означает подняться вверх на один уровень, к корневому каталогу,
images/ — перейти к папке с изображениями,
anyphoto.png — указывает на файл изображения.
Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов 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. ТегТег описывает только одну активную область в составе карты изображений на стороне клиента. Элемент не имеет закрывающего тега. Если одна активная область перекрывает другую, то будет реализована первая ссылка из списка областей.
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-тип файлов ссылки, т.е. расширение файла. |
1) Размечаем исходное изображение на активные области нужной формы. Координаты областей можно вычислить с помощью программы для обработки фотографий, например, Adobe Photoshop или Paint .
2) Задаем имя карты, добавив его в тег с помощью атрибута name . Это же значение присваиваем атрибуту usemap тега .
Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers">
Рис. 2. Пример создания карты-изображения, при нажатии курсора мыши на цветок осуществляется переход на страницу с описанием
√
√
28. Имеется сервер http://intuit.ru, на котором находятся два документа:
http://intuit.ru/intuit.html и
http://intuit.ru/intuit/detail.html.
√ Подробнее об Университете
29. Как задать фоновое изображение для таблицы?
√ с помощью атрибута BACKGROUND тега 30. Как задать цвет фона для строки таблицы?
√ с помощью атрибута BGCOLOR тега 31. Как объединить несколько ячеек таблицы?
√ с помощью атрибута ROWSPAN
√ с помощью атрибута COLSPAN
32. Как указать выравнивание текста в ячейке таблицы?
√ с помощью атрибута ALIGN
√ с помощью атрибута VALIGN
33. Какая из приведенных гипертекстовых ссылок представляет полную форму записи URL?
√ ссылка
34. Какие атрибуты из перечисленных принадлежат тегу INPUT:
√ type
√ value
35. Какие атрибуты принадлежат тегу ?
√ ALT, ALIGN, USEMAP, HSPACE, VSPACE, BORDER
36. Какие значения атрибута ALIGN используются для определения положения изображения относительно окружающего текста?
√ left
√ right
√ top
√ bottom
37. Какие из приведенных тегов HTML начинают вывод текста с новой строки на странице?
√ P
√ BR
√ H1
38. Какие из приведенных тегов HTML позволяют изменять параметры шрифта?
√ FONT
√ H1
39. Какие из приведенных тегов неверно описывают активное изображение?
√
√
40. Какие из приведенных тегов позволяют создавать списки определений?
√ DT
√ DL
41. Какие из приведенных тегов позволяют создавать элементы с возможностью выбора нескольких вариантов одновременно?
√
√
42. Какие из приведенных тегов являются тегами управления разметкой?
√ √
43. Какие из приведенных тегов являются тегами, управляющими формой отображения текста?
√
√
44. Какие контейнеры используются для задания элементов формы?
√ SELECT
√ TEXTAREA
45. Какие методы можно применять для отправки формы?
√ GET
√ POST
46. Какие теги допускают использование изображений?
√ IMG
√ INPUT
√ TABLE
47. Какие теги используются для создания текстовых полей ввода в форме?
√
√
48. Какие функции можно реализовать с помощью элемента разметки META?
√запрет кэширования документа
√ запрет на хранение документа после пересылки
49. Какой атрибут определяет имя фрейма, в котором будет открыт документ?
√ target
50. Какой атрибут принадлежит тегу ?
√ SHAPE
51. Какой атрибут тега задает вертикальное расстояние между строками текста и изображением?
√ VSPACE
52. Какой атрибут тега задает горизонтальное расстояние между вертикальной границей страницы и изображением?
√ HSPACE
53. Какой атрибут тега указывает файл изображения и путь к нему?
√ SRC
54. Какой атрибут тега BODY позволяет изменять цвет "активных" гиперссылок?
√ ALINK
55. Какой атрибут тега BODY позволяет изменять цвет текста?
√ ТЕХТ
56. Какой атрибут тэга BODY позволяет задать цвет фона страницы?
√ bgcolor
57. Какой атрибут элемента FORM определяет список кодировок для вводимых данных?
√ accept-charset
58. Какой атрибут элемента FRAME определяет ссылку на длинное описание фрейма?
√ longdesc
59. Какой атрибут элемента INPUT отвечает за вид элемента ввода формы?
√ TYPE
60. Какой из перечисленных элементов формы является необходимым для передачи формы на сервер?
√
61. Какой из приведенных примеров задает гипертекстовую ссылку из документа 1.html на другой документ?
62. Какой из приведенных тегов описывает активное изображение?
√
63. Какой из приведенных тегов описывает тело классической модели документа?
√
64. Какой из приведенных тегов позволяет создавать ненумерованные списки?
√ UL
65. Какой из приведенных тегов позволяет создавать нумерованные списки?
√ OL
66. Какой из приведенных тегов создает неотображаемый элемент в форме?
√
67. Какой из приведенных тегов является тегом, характеризующим тип информации?
√
68. Какой из приведенных фрагментов кода выводит таблицу с двумя строками и двумя ячейками в каждой строке?
√ 69. Какой из приведенных фрагментов кода выводит таблицу с одной строкой и тремя ячейками?
√ 70. Какой из приведенных фрагментов кода выводит таблицу с тремя строками?
√ 71. Какой из приведенных фрагментов кода создает переключатель?
√
72. Какой из приведённых ниже фрагментов кода выведет в окне обозревателя изображение размером 100 на 200 пикселей?
√
73. Какой полный URL будет сформирован для ссылки в приведенном фрагменте?
√ http://intuit.ru/doc1.html
74. Какой пример кода определяет вывод вертикальных фреймов?
√
√
75. Какой пример кода определяет вывод горизонтальных фреймов?
√
√
76. Какой тег используется для индексирования документов в поисковых системах?
√META
77. Какой тег позволяет вставить графическое изображение в HTML-документ?
√
78. Какой тег служит для именования документа в World Wide Web?
√TITLE
79. Какой тег служит для определения базового URL для гипертекстовых ссылок документа, заданных в неполной форме?
√ BASE
80. Какой тэг определяет документ HTML?
√ HTML
81. Какой тэг определяет заголовок документа HTML?
√ HEAD
82. Какой тэг определяет тело документа HTML?
√ BODY
83. Какой тэг предназначен для размещения описателей стилей?
√ STYLE
84. Какой тэг служит для размещения кода JavaScript?
√ SCRIPT
85. Какой тэг содержит управляющую информацию, которую браузер использует для правильного отображения и обработки содержания тела документа?
√ META
86. Найдите неверные фрагменты кода:
√
√
87. Найдите ошибочное определение гиперссылки.
√ intuit
88. Найдите ошибочные примеры описания гиперссылки:
89. Отметьте верное утверждение:
√порядок задания атрибутов для тега не имеет значения
90. При задании какого атрибута браузер будет рисовать разделитель между этим фреймом и каждым смежным фреймом?
√
91. С помощью каких атрибутов тега FRAMESET возможно указать кадровую структуру фреймового документа?
√ ROWS
√ COLS
92. С помощью какого атрибута элемента FORM указывается адрес, куда отправлять данные формы?
√ ACTION
93. С помощью какого контейнера задается форма?
√ FORM
94. С помощью какого контейнера задается фреймовая структура документа?
√ FRAMESET
95. С помощью какого элемента можно создавать прокручивающиеся списки в формах?
√ SELECT
96. Укажите вариант, в котором описано значение атрибута cols элемента FRAMESET по умолчанию:
√
97. Укажите вариант, в котором описано значение атрибута rows элемента FRAMESET по умолчанию:
√
98. Укажите варианты, в которых правильно определён обработчик формы:
√
√
99. Укажите верный способ определения карты изображения:
√
√
100. Укажите неверные варианты описания синтаксиса тега SCRIPT.
√ текст программы
√ текст программы
101. Укажите неправильный способ определения карты изображения:
√
102. Укажите ошибочные варианты определения изображения в качестве гиперссылки.
√
√
105. Укажите правильные варианты описания гиперссылки:
√ ссылка
106. Укажите правильный вариант определения изображения в качестве гиперссылки.
√
107. Укажите, что является интерпретатором языка HTML?
√функции интерпретатора разделены между Web-сервером гипертекстовой базы данных и интерфейсом пользователя
108. Установив какой атрибут, можно ссылаться на него как на "target" для ссылок, определенных в других элементах?
√ name
109. Что означает DTD (Document Type Definition)?
√ указывает, что документ соответствует стандарту HTML 4.0, используемый язык английский
110. Что определяет атрибут BACKGROUND у элемента разметки TABLE?
√ фоновое изображение
111. Что определяет атрибут CELLPADDING у элемента разметки TABLE?
√ расстояние от содержимого до границы ячейки
112. Что определяет атрибут CELLSPACING у элемента разметки TABLE?
√ расстояние между ячейками
113. Что является элементами контейнера?
√тег начала элемента разметки
√тег конца элемента разметки
√содержимое контейнера
Тег area
(с англ. область) применяется внутри контейнера < > для создания карты-изображения. Определяет параметры активных зон-ссылок на карте. HTML
: 3.2
| 4
/
XHTML
: 1.0
| 1.1
Определяет клиентскую карту (или другой механизм навигации), который может быть ассоциирован с другими элементами (< >, < >, < >). Карта ассоциируется с элементом с помощью атрибута . Тег map может использоваться без ассоциированного изображения для механизмов общей навигации. Внутри контейнера map можно комбинировать: Если map имеет смешанное содержимое (и теги area, и блочные элементы), браузеры, согласно спецификации HTML 4.01, должны игнорировать элементы area. Если регионы перекрываются, элемент, определяющий регион, который появился раньше в документе, имеет приоритет. Рекомендуется предоставлять текстовую альтернативу графической карте для тех случаев, когда графика недоступна или пользователь не может её получить. Альтернативный текст добавляет значения страницы в глазах поисковых систем. При использовании фигуры poly хорошей практикой считается указывать последние координаты, равные первым, для логического заверщения фигуры. Тег
(от англ. area
- область)
определяет активные области изображения, которые являются ссылками. Рисунок с привязанными к нему активными областями называется в совокупности картой-изображением. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. Элемент задаёт форму области, её размеры, устанавливает адрес документа, на который следует сделать ссылку. всегда располагается в контейнере , который связывает координаты областей с изображением. Несколько областей могут перекрывать друг друга, сверху будет та, которая в коде HTML располагается выше. Закрывающий тег не требуется. Значение role по умолчанию: link
Атрибут alt
устанавливает альтернативный текст для области изображения. Такой текст не отображается в браузере, но поисковые системы его могут прочитать. Синтаксис
Значения
Любая подходящяя текстовая строка. Значение по умолчанию
Атрибут coords
устанавливает координаты области, она также называется «горячая область». Такая область может быть ссылкой на файл или связана с действием, определяемым скриптом. Значения координат представляют собой набор чисел, разделённых запятыми. Если две области перекрываются между собой, приоритет имеет та, которая определена в коде HTML выше. Синтаксис
Значения
Набор координат определяется формой «горячей области», которая задается атрибутом shape . Отсчёт координат обычно ведётся от левого верхнего угла изображения и указывается в пикселях. Для прямоугольника (shape="rect") определяется четыре координаты - X1, Y1, X2, Y2, как показано на рис. 1. Для окружности (shape="circle") определяется три координаты - координаты центра окружности (X, Y) и ее радиус (R), как показано на рис. 2. Для полигона (многоугольника) (shape="poly") последовательно указываются координаты каждой вершины (X1, Y1, X2, Y2, :), как показано на рис. 3. Значение по умолчанию
Атрибут href
задаёт адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущую вкладку браузера, однако это поведение можно изменить с помощью атрибута target . Синтаксис
Значения
В качестве значения принимается полный или относительный путь к файлу, а также указатель на функцию JavaScript. Значение по умолчанию
Атрибут hreflang
указывает язык документа, на который ведёт ссылка активной области изображения. Синтаксис
Значения
Код языка Значение по умолчанию
Атрибут shape
определяет форму «горячей области», координаты которой задаются с помощью атрибута coords . Синтаксис
Значения
Значение по умолчанию
Атрибут target
определяет, как открывать ссылки - в новой вкладке, в текущей вкладке или в окне фрейма. Синтаксис
Значения
В качестве значения используется имя фрейма, заданное атрибутом name элемента . Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных имён используются следующие. Значение по умолчанию
Атрибут type
устанавливает MIME-тип документа, на который ведёт ссылка. Этот атрибут носит рекомендательный характер и может использоваться для стилизации ссылок с заданным типом документа. Атрибут type должен добавляться только при наличии атрибута href . Синтаксис
Значения
Значение по умолчанию
Тег
задает активную область на изображении, которая является ссылкой на веб-документ. Часто можно встретить так называемую "карта изображения" - это картинка с привязанными к ней активными областями. Эта карта ни чем не отличается от изображения, но она разбита на небольшие части, кликая на них можно переходить на другую страницу. Этот тег определяет границы области на изображении. Тег
должен всегда находиться в теге
.
для всех ячеек строки
Пример
accesskey
горячая клавиша (+Alt) для элемента
alt
альтернативный текст. Выводится в виде всплывающей подсказки. Также отображается, если картинки отключены
class
определяет имя используемого класса
coords
координаты фигуры, задающие ссылку
disabled
флаг. Делает элемент недоступным.
href
задает адрес документа (объекта), на который следует перейти
id
уникальный идентификатор
name
уникальное имя элемента.
Отсутствует в спецификации HTML 4.01!
nohref
задает неактивную область
onblur
потеря фокуса элементом
onclick
щелчок на элементе
ondblclick
двойной щелчок на элементе
onfocus
получение фокуса элементом
onkeydown
нажатие клавиши, когда элемент имеет фокус
onkeypress
нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup
освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown
нажатие кнопки мыши, когда элемент имеет фокус
onmousemove
движение указателя мыши, когда элемент имеет фокус
onmouseout
смещение указателя мыши с элемента
onmouseover
помещение указателя мыши на элемент
onmouseup
освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
shape
тип геометрической фигуры
style
задает встроенную таблицу стилей
target
имя окна или фрейма, где будет открыт документ, который указан в href. В качестве аргумента используется имя окна или фрейма.
Зарезервированные имена:
tabindex
порядок обхода элементов с помощью Tab
title
добавляет всплывающую подсказку
alt
type
Атрибуты
Chrome
Internet Explorer
Firefox
Opera
Safari
Да
Да
Да
Да
Да
Safari: Alt + A
Internet Explorer: Alt + A
Opera: Shift + Esc, A
Chrome: Alt + A
Firefox: Shift + Alt + A
- circle
- Браузер интепретирует данную область в виде окружности
- default
- Указывает всю область
- poly
- Браузер интепретирует данную область в виде многогранника
- rect
- Браузер интепретирует данную область в виде прямоугольника. Данное значение является по умолчанию
Любое челое число
- "_blank"
- Документ откроется в новом окне
- "_self"
- Документ откроется в текущей вкладке (стоит по умолчанию)
- "_parent"
- Документ откроется во фрейм-родитель (при отсутствии фрейма - работает как _self)
- "_top"
- Отменяет все фреймы, документ откроется в полном окне браузера (при отсутствии фрейма - работает как _self)