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

Справочник HTML

Оглавление:

  1. С чего начать?
  2. тег <BODY>
  3. Комментарии
  4. Просмотр результата
  5. Создание абзацев
  6. Создание заголовков
  7. Выравнивание текста
  8. Тег <PRE>
  9. Форматирование текста
  10. Атрибуты шрифта
  11. Специальные символы и таблица UNICODE
  12. Тег <HR>
  13. Гиперссылки
  14. Ссылки на объект в текущем документе
  15. Вставка графических изображений
  16. Бегущая строка
  17. Создание списков
  18. Создание таблиц
  19. Фреймы
  20. Встроенный фрейм
  21. Создание форм

CSS

  1. Каскадные таблицы стилей
  2. Способы определения стилей
  3. Определение стилей через классы
  4. Определение стилей через индентификаторы
  5. Позиционирование элементов Web-страницы
  6. Шрифты
  7. Свойства текста
  8. Свойства блоков текста
  9. Цветовое оформление
  10. Создание полей в документе
  11. Абзацный отступ
  1. Корректное отображение Web-страницы
  2. Атрибуты тега <META>

Вставка графических изображений

Что б на вашей странице разместить графический элемент, надо использовать тег <IMG>. Можно использовать рисунки только форматов GIF и JPEG (JPG).

Вставка графического изображения будет выглядеть примерно так:

<IMG src="picture.jpg" width="50%" height="50%" alt="Природа">

Здесь атрибут src="..." - задаёт URL-адрес рисунка. Width - ширина рисунка (указывается либо в процентах, либо в пикселях), height - высота рисунка. Масштабирование может привести к ухудшению качества изображения, поэтому следует задавать размеры, соответствующие размерам графического файла, либо не задавать их вообще. Атрибут alt="..." указывает название вашего рисунка, если он не загрузился в броузере пользователя, так как загрузка рисунков была отключена.

Давайте рассмотрим пример (рис. 16):


      <HTML>
         <HEAD>
            <TITLE>Вставка рисунка</TITLE>
         </HEAD>
         <BODY>
            <IMG src="picture.jpg" alt="Природа">
         </BODY>
      </HTML>

img, src, width, height, jpg, gif, jpeg
рис. 16. Вставка графического изображения.

Картинка также может быть средством задания гиперссылки. Для этого перед тегом <IMG> должен стоять тег <A> с адресом той страницы, которая должна загрузиться после нажатия ссылки.

Например:

<A href="trees.html"><IMG border="0" src="picture.jpg"><A>

Так как вокруг картинки с гиперссылкой рисуется рамка, то что б её убрать, используется атрибут border="..." со значением ноль.

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

Рассмотрим пример:


   <HTML>
      <HEAD>
         <TITLE>Создание гиперссылок в графическом изображении</TITLE>
      </HEAD>
      <BODY>
         <MAP name="map">
            <AREA shape="rect" coords="0, 0, 500, 300" href="A1.html">
            <AREA shape="rect" coords="500, 0, 1000, 300" nohref>
            <AREA shape="rect" coords="0, 300, 500, 600" href="A2.html">
            <AREA shape="rect" coords="500, 300, 1000, 600" href="A3.html">
         </MAP>
         <IMG border="0" src="nature.JPG" usemap="#map">
      </BODY>
   </HTML>

Здесь атрибут usemap="..." в теге <IMG> указывает нам, какой контейнер <MAP>...</MAP> будет использован в качестве указания ссылок, на которые разделён наш рисунок. Так как в теге <MAP> атрибут name="..." имеет значение map, то атрибут usemap="..." в теге <IMG> будет тоже иметь имя map, но с добавлением знака # в начале имени.

Тег <AREA> задаёт информацию о помеченных областях в рисунке. С помощью атрибута shape="..." мы можем помечать области кругами (если используется значение "circle"), ломанными (если используется значение "poly"), или прямоугольниками (если используется значение "rect"). С помощью атрибута coords="..." задаются координаты ключевых точек. Для каждой фигуры формат точек различен (рис. 17):

shape="circle" coords="x, y, R"
shape="poly" coords="x1,y1, x2,y2, ... xn,yn"
shape="rect" coords="x1, y1, x2, y2"

coords, area, shape, circle, rect, poly
рис. 17. Значения параметра coords.

Если части гиперссылок будут пересекаться в рисунке, то броузер выберет ту из них, которая первая описана в теге <MAP>.

Если же мы не хотим данную область изображения делать гиперссылкой, то пишем nohref в теге <AREA>.


Предыдущая страница         Следующая страница

Вы можете свободно использовать фрагменты сайта, с условием размещения ссылки на наш сайт:
<a href="http://tri222.narod.ru"><b>Самоучитель по созданию Web-страниц.</b></a>

Copyright © 2008 "tri222.narod.ru"
Вопросы и свои предложения вы можете отправлять на tri222@yandex.ru

Хостинг от uCoz