Самоучитель по html

Содержание

  1. Введение

  2. Знакомство с html

  3. Теги, обязательные к использованию

  4. Заголовки и абзацы

  5. Непарные теги

  6. Стили текста

  7. Списки

  8. Предварительно форматированный текст

  9. Связь между веб-страницами

  10. Фреймы

  11. Работа с изображениями

  12. Музыка как фон html-документа

  13. Вставка произвольных объектов в html-код

  14. Таблицы

  15. Формы в html

  16. Карты навигации по сайту

  17. Мета-теги

  18. Заключение

  19. Самоучитель по html, скачать бесплатно

Карты навигации по сайту

В главе "Работа с изображениям" многое говорилось о работе с рисунками. Многое, но не всё. Из любого изображения можно сделать навигационную карту. Делается это с помощью тегов .... Вот как это работает:



прямоугольник1
прямоугольник2
прямоугольник3

В результате этого кода получится следующее:

прямоугольник1 прямоугольник2 прямоугольник3

Теперь дадим описание данному коду.

  • . Определяем картинку, которая будет находится на странице в виде карты. Чтобы картинка связывалась с картой (стала картой) необходимо указать на это с помощью атрибута usemap. Название атрибута должно полностью совпадать с названием самой карты и содержать вначале символ "#". Указывается как usemap="#название (имя) карты".
  • . С тега начинается любая карта. Этот тег должен содержать обязательный атрибут name, с помощью которого карте даётся название (имя).
  • прямоугольник1
    прямоугольник2
    прямоугольник3
    Группа тегов, с помощью которых рисунок разделяется на области. Каждая новая геометрическая область карты начинается с тега . В этом теге должна находится ссылка на веб-страницу, к которой будет совершён переход при нажатии на элемент. Атрибут alt определяет надпись, которая будет выведена на экран, в случае отсутствия изображения элемента карты. Атрибут shape указывает на то, какую геометрическую форму будет иметь область рисунка, отмеченная тегом . В html определяются четыре вида области:
    1. Прямоугольник. Значение атрибута shape в этом случае будет равняться rect (от английского rectangle - прямоугольник). Пишется shape="rect".
    2. Окружность (круг). В этом случае значение атрибута shape="circle".
    3. Многоугольник. Значение атрибута shape="poly".
    4. Вся область рисунка. В этом случае значение атрибута shape="default". Используется редко, но, тем не менее, существует.
    С помощью атрибута coords определяются координаты каждого элемента на рисунке.
    • Если элемент - прямоугольник. Его координаты определяются с помощью координат верхнего левого угла и нижнего правого. Вот как это выглядит (разберем на нашем рисунке):

      Мы имеем 2 оси: ОХ и ОY. Точка с координатами (0, 0) находится в левом верхем углу, именно оттуда и идёт отсчёт координат. Я определял координаты углов с помощью программы Paint, но можно также с помощью любой другой. Координаты левого верхнего угла первого (самого верхнего) треугольника получились по оси Х 30 пикселей, по оси Y вышло 52 пикселя, то есть получилась точка с координатами (30, 52). Таким же образом, координаты точки в правом нижнем углу прямоугольника равны (231, 151). Записывается это так: coords="30,52 231,151". С двумя другими прямоугольниками дела обстоят точно также.
    • С кругом дела обстоят иначе. Для начала покажем рисунок.

      Координаты в этом случае описываются с помощью центра окружности (в писелях) и её радиуса (тоже в пикселях). С осями дела обстоят также как и в случае с прямоугольниками. Атрибут coords здесь будет выглядеть так: coords="x,y,R".
    • Многоугольник. Эта структура описывается при помощи координат точек всех углов многоугольника.

      Так будет выглядеть атрибут coords в примере с нашим многоугольником: coords="x1,y1, x2,y2, x3,y3, x4,y4, x5,y5, x6,y6".
  • . Этим тегом заканчивается любая карта.

| следующая>>

© 2011-2012 «Мути в сети»