Инфоурок Информатика Другие методич. материалыТеория. Web-дизайн. "Рисунки на Web-страницах"

Теория. Web-дизайн. "Рисунки на Web-страницах"

Скачать материал

§1. Рисунки на веб-страницах

1.1. Тег <IMG>

Тег <img> служит для внедрения графики на страницы. На данный момент поддерживаются форматы файлов GIF, JPG, JPEG, PNG

                                    Атрибуты

     src

Обязательный атрибут, указывающий URL рисунка

     align

Выравнивает изображение к одной из сторон документа

left

Выравнивание по левому краю

right

Выравнивание по правому краю

center

Выравнивание по центру

bottom

Выравнивание по нижнему краю

top

Выравнивание по верхнему краю

middle

Выравнивание по середине

     alt

Выводит текст к картинке. Полезно, если браузер не отображает графику на странице

     border

Устанавливает толщину рамки вокруг изображения в пикселах. По умолчанию рамка не используется. При использовании изображения в качестве гиперссылки рекомендуется установить BORDER=0, чтобы подавить цветовую окантовку, которая появится вокруг изображения

     ismap

Сообщает, что изображение является картой-изображением на сервере

     height

Высота картинки в пикселах или процентах. Всегда желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером

     hspace

Определяет размер свободного места в пикселах слева и справа от изображения, улучшает внешний вид страницы, отделяя изображение от текста

     vspace

Определяет размер свободного места в пикселах сверху и снизу от изображения, улучшает внешний вид страницы, отделяя изображение от текста

     width

Ширина картинки в пикселах или процентах. Всегда желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером

 

Пример

185_Steve_Bloom_Lighting_in_lighthouse


Код с использованием тега <img>


<img src="../storm.jpg" alt="Непогода нынче в моде" vspace=10>

1.2. Создание карты изображений

            Создание карты изображения является одной из привлекательнейших возможностей HTML, позволяющей пользователю привязывать ссылки на другие документы к отдельным фрагментам изображений. Щелкая мышью на отдельных частях изображения, пользователь может переходить по ссылке на другие документы и т.п.

            Чтобы включить поддержку карты для изображения, необходимо ввести дополнительный параметр в тэг IMG:

     <IMG SRC="url" USEMAP="url#map_name">

            Параметр USEMAP указывает, в каком месте находится карта описываемого изображения. Карта изображения определяет, какому участку изображения какой URL соответствует. Карта изображения может находиться в том же документе, что и изображение, или в другом документе. Помещение карты в другую страницу позволяет собрать все карты изображений в одном документе (если у вас их несколько в различных документах). Параметр map_name указывает имя карты для изображения, а предшествующий ему URL определяет местонахождение карты. Если данный URL отсутствует, то карта с указанным именем ищется в текущем документе.

Рассмотрим синтаксис определения карты изображения:

<MAP NAME="map_name">

<AREA [SHAPE="shape "] COORDS="x,y,..." [rel="nofollow ugc" target="_blank" href="reference "]

[NOHREF]>

</MAP>

Параметры:

     <MAP NAME="map_name">

Данный тэг определяет начало описания карты с именем map_name.

     <AREA...>

Описывает участок изображения и ставит ему в соответствие URL. Параметры:

     SHAPE

Необязательный параметр, указывающий на форму определяемой области изображения. Может принимать значения:

                                    default - по умолчанию (обычно прямоугольник)

                                    rect - прямоугольник

                                    circle - круг

                                    poly - многоугольник произвольной формы

     COORDS

Координаты в пикселах описываемой области. Для прямоугольника это четыре координаты левого верхнего и правого нижнего углов, для круга - три координаты (две - центр круга, третья - радиус). Для многоугольника это описание каждого угла в двух координатах - соответственно число координат равно удвоенному количеству углов.

Координаты считаются с нуля, поэтому для описания области 100 на 100 используется описание:

<AREA COORDS="0,0,99,99" ...>

rel="nofollow ugc" target="_blank" href="url"

Описание ссылки, действия по которой будут выполняться при щелчке мыши в заданной области.

     NOHREF

Параметр, указывающий, что ссылка отсутствует для данного участка. По умолчанию, если не указан параметр HREF, то считается что действует параметр NOHREF. Также, для всех неописанных участков изображения считается, что используется параметр NOHREF.

Если две описанных области накладываются друг на друга, то используется ссылка, принадлежащая первой из описанных областей.

     </MAP>

Данный тэг завершает описание карты изображения.

 

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Теория. Web-дизайн. "Рисунки на Web-страницах""

Методические разработки к Вашему уроку:

Получите новую специальность за 2 месяца

Педагог-организатор

Получите профессию

Фитнес-тренер

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 678 691 материал в базе

Материал подходит для УМК

Скачать материал

Другие материалы

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 25.01.2020 494
    • DOCX 94.7 кбайт
    • Оцените материал:
  • Настоящий материал опубликован пользователем Нессонова Елена Вячеславовна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    Нессонова Елена Вячеславовна
    Нессонова Елена Вячеславовна
    • На сайте: 7 лет и 7 месяцев
    • Подписчики: 5
    • Всего просмотров: 10760
    • Всего материалов: 15

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Копирайтер

Копирайтер

500/1000 ч.

Подать заявку О курсе

Курс профессиональной переподготовки

Математика и информатика: теория и методика преподавания в профессиональном образовании

Преподаватель математики и информатики

500/1000 ч.

от 8900 руб. от 4450 руб.
Подать заявку О курсе
  • Сейчас обучается 37 человек из 22 регионов
  • Этот курс уже прошли 57 человек

Курс повышения квалификации

Организация преподавания информационных систем и технологий в профессиональном образовании

36 ч. — 180 ч.

от 1700 руб. от 850 руб.
Подать заявку О курсе
  • Сейчас обучается 35 человек из 18 регионов
  • Этот курс уже прошли 79 человек

Курс повышения квалификации

Особенности подготовки к сдаче ОГЭ по информатике и ИКТ в условиях реализации ФГОС ООО

36 ч. — 180 ч.

от 1700 руб. от 850 руб.
Подать заявку О курсе
  • Сейчас обучается 103 человека из 39 регионов
  • Этот курс уже прошли 813 человек

Мини-курс

Вероятность и статистика: формирование общеучебных умений и навыков

3 ч.

780 руб. 390 руб.
Подать заявку О курсе

Мини-курс

Институциональные основы современного инвестирования

3 ч.

780 руб. 390 руб.
Подать заявку О курсе

Мини-курс

Эволюция классической музыки до романтизма

4 ч.

780 руб. 390 руб.
Подать заявку О курсе
Сейчас в эфире

Как научить анализировать и выражать свои мысли в рамках школьного сочинения.Техники и методы

Перейти к трансляции