В HTML документы могут быть вставлены изображения.
ТвитнутьКомбинируя изображения и обычный текст Вы можете представлять информацию пользователям максимально эффективно.
Для добавления в HTML документ изображений используется тэг <img>. Атрибут src тэга <img> должен содержать адрес по которому находится картинка, которая должна быть отображена.
Обратите внимание: загрузка картинок занимает время, так что прежде чем размещать на одной странице большое количество картинок подумайте несколько раз.
Пример
<img src="mountimg3.jpg" /> <p><b>Ергаки</b> — горный узел, хребет в Западном Саяне. Представляет собой массив разнонаправленных грив, отрогов в значительной степени обработанных ледником. Альпийский рельеф в центральной части Ергаков на периферии сменяется гольцовым с отдельно расположенными горами и отрогами более плавных очертаний с пенепленом на вершинах.</p>
В атрибуте alt задается альтернативный текст, который будет отображен если браузер пользователя не сможет по каким-либо причинам отобразить картинку.
Роботы поисковых систем, которые анализируют страницы не могут просматривать картинки, поэтому единственный способ "рассказать" им о их содержимом - написать об этом в атрибуте alt.
<img src="boat.gif" alt="На картинке изображена плывущая лодка" />
В HTML можно создавать специальные карты-изображений, которые содержат список областей-ссылок и привязываются к изображениям.
Карты в HTML создаются с помощью тэга <map>, а области-ссылки в них с помощью тэга <area>.
Пример карты-изображения (на кнопки можно щелкать):
Форма и координаты областей-ссылок задаются с помощью атрибутов shape и coords тэга <area>, а место на которое они ссылаются с помощью атрибута href.
Возможные формы областей ссылок:
| Форма | Атрибуты |
|---|---|
| Прямоугольная область-ссылка | shape="rect", coords="x1,y1,x2,y2", где x1,y1 координаты верхнего левого угла прямоугольной области, а x2,y2 координаты нижнего правого угла области. |
| Круглая область-ссылка | shape="circle", coords="x,y,радиус", где x,y координаты центра области. |
| Область-ссылка многоугольник | shape="poly", coords="x1,y1,x2,y2..xz,yz", где x1,y2 координаты первого угла многоугольника, x2,y2 второго и т.д. Если координаты первого и последнего угла не совпадают, браузер автоматически добавит координату последнего угла, чтобы завершить многоугольник. |
После того, как карта создана необходимо привязать ее к какому-нибудь изображению. Для этого необходимо добавить к изображению атрибут usemap="#имя_карты", а к карте добавить атрибут name="имя_карты".
Пример
<img src="figures.gif" usemap="#figuremap" /> <map name="figuremap"> <area shape="rect" coords="3,8,72,75" href="bluesquare.html" target="_blank" /> <area shape="circle" coords="125,50,38" href="greencircle.html" target="_blank" /> <area shape='poly' coords='180,27,210,6,248,30,233,74,190,72' href="redpolygon.html" target="_blank" /> </map>
Задание 1 исправьте ошибки в коде, а затем расставьте цифры на картинках в порядке возрастания.
Пример
<imb source='https://www.wisdomweb.ru/HTML/bere.gif" alto='Цифра /> <imb source='https://www.wisdomweb.ru/HTML/berf.gif" alto='Цифра /> <imb source='https://www.wisdomweb.ru/HTML/bero.gif" alto='Цифра <imb source='https://www.wisdomweb.ru/HTML/bert.gif" alto='Цифра />
Задание 2 отобразите кодовые буквы, а затем расставив их в правильном порядке (позиция буквы указана в черном кружке на картинке) Картинки с кодовыми буквами располагаются по следующим адресам:
Пример
Файл codeword.gif в папке word на нашем сайте Файл esec.gif в папке CSS на нашем сайте Файл codewrd.gif в папке word на нашем сайте Файл secredw.gif в папке HTML на нашем сайте Файл codw.gif в папке JS на нашем сайте Файл awrd.gif в папке CSS на нашем сайте Файл wrdcod.gif в папке word на нашем сайте
Задание 3 создайте карту-изображения по следующим данным:
Пример
<p>Изображение imagemap.gif содержит несколько геометрических фигур разных цветов.</p> <p>Файлы desc1.html, desc2.html, desc3.html содержат описания этих фигур.</p> <p>Свяжите геометрические фигуры с описанием с помощью карты-изображения. </p> <p><b>Обратите внимание:</b> файлы располагаются по следующему адресу: https://www.wisdomweb.ru/editor/. </p>
