|
|
<Предыдущая Следующая>
Добавление
изображений
в HTML
документы
Комбинируя
изображения
и обычный
текст Вы
можете
представлять
информацию
пользователям
максимально
эффективно. Для
добавления
в HTML
документ
изображений
используется
тэг <img>. Атрибут src тэга <img>
должен
содержать
адрес по
которому
находится
картинка,
которая
должна быть
отображена. Обратите
внимание: загрузка
картинок
занимает
время, так
что прежде
чем
размещать
на одной
странице
большое количество
картинок
подумайте
несколько
раз. Пример <img src="mountimg3.jpg" /> <p><b>Ергаки</b> — горный узел, хребет в Западном Саяне. Представляет собой массив разнонаправленных грив, отрогов в значительной степени обработанных ледником.Альпийский рельеф в центральной части Ергаков на периферии сменяется гольцовым сотдельно расположенными горами и отрогами более плавных очертаний с пенепленом навершинах.</p> Атрибут
alt
В
атрибуте alt
задается
альтернативный
текст,
который будет
отображен
если
браузер
пользователя
не сможет по
каким-либо
причинам
отобразить
картинку. Роботы
поисковых
систем,
которые
анализируют
страницы не
могут
просматривать
картинки,
поэтому
единственный
способ
"рассказать"
им о их
содержимом -
написать об
этом в
атрибуте alt. <img src="boat.gif" alt="На картинке изображена плывущая лодка" /> Создание
карт-изображений
В HTML можно
создавать
специальные
карты-изображений,
которые
содержат
список
областей-ссылок
и
привязываются
к
изображениям. Карты
в HTML
создаются с
помощью
тэга <map>, а
области-ссылки
в них с
помощью
тэга <area>. Пример
карты-изображения
(на кнопки
можно щелкать):
Форма
и координаты
областей-ссылок
задаются с
помощью
атрибутов shape и coords тэга <area>, а
место на
которое они
ссылаются с
помощью
атрибута href. Возможные формы областей ссылок:
После
того, как
карта
создана
необходимо
привязать
ее к
какому-нибудь
изображению.
Для этого
необходимо
добавить к
изображению
атрибут 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='http://www.wisdomweb.ru/HTML/bere.gif" alto='Цифра /> <imb source='http://www.wisdomweb.ru/HTML/berf.gif" alto='Цифра /> <imb source='http://www.wisdomweb.ru/HTML/bero.gif" alto='Цифра<imb source='http://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> файлы располагаются по следующему адресу: http://www.wisdomweb.ru/editor/. </p> <Предыдущая Следующая> |
Последние добавления |
|
|