Отправляет email-рассылки с помощью сервиса Sendsay

Технологии эффективного Интернета

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Как сделать популярный сайт." на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Март 2006   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Vladimir N Abramov

Статистика

3.524 подписчиков
0 за неделю
←   Все выпуски   →

Основы web-технологий:: N 8


Рассылка: Основы web-технологий :: N 8
Раздел: Введение в HTML-разметку
Тема: Использование графики в HTML. Часть 1.
Раздел посвящен изучению языка гипертекстовой разметки HTML. Рассматриваются основные конструкции языка, приемы разметки и связь с различными программами работающими в Сети.
Основные понятия: Картинка, image, IMG, элемент разметки, JPEG, PNG, GIF, BMP.
Информация о выпуске: В выпуске рассматриваются принципы применения графических образов при HTML-разметке.

Использование графики в HTML

Графические изображения могут нести определенную информацию, да и просто придают Web-странице привлекательный вид. Приведем наиболее распространенные случаи применения изображений:

  • логотип компании на деловой странице;
  • графика для рекламного объявления;
  • различные рисунки;
  • диаграммы и графики;
  • художественные шрифты;
  • подпись автора страницы;
  • применение графической строки в качестве горизонтальной разделительной линии;
  • применение графических маркеров для создания красивых маркированных списков.

Элементом (тегом) НТМL, который заставляет браузер выводить изображение, является <IMG> с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Замыкающего тега не требуется. Многие броузеры "понимают" ограниченное число графических форматов - в основном это только .gif и .jpg. Видеоклипы чаще вставляются с помощью тега <EMBED>.

Пример вставки изображения:

<IMG SRC="image.gif" ALT="моя фотография на отдыхе">

Изображения на Web-странице могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Читатель щелкает на изображении и отправляется на другую страницу или переходит к другому изображению. Для обозначения изображения как гипертекстовой метки используется тот же тег <А>, что и для текста, но между <А> и </А> вставляется тег изображения <IMG>:

<А НREF="адрес_ресурса_или_страницы"><IMG SRC="image.gif"></А>

При этом изображение, используемое в качестве гипертекстовой ссылки, по-умолчанию в большинстве броузеров обводится дополнительной рамкой, если это не запрещает специальный атрибут тега - border.

Атрибуты и их аргументы.

Тег изображения имеет один обязательный атрибут SRC и необязательные: ALT, ALIGN, USEMAP, HSPACE, VSPACE, BORDER, WIDTH, HEIGHT.

Атрибут SRC

Указывает файл изображения и путь к нему; изображение должно быть загружено в браузер и размещено в том месте документа, где расположен тег изображения.

Атрибут ALT

Позволяет указать текст, который будет выводиться вместо изображения браузерами, неспособными представлять графику. В некоторых случаях при недостаточной пропускной способности линий связи пользователи отключают отображение графики. Наличие названий вместо картинок облегчает восприятие Web-страниц в таком режиме.

Атрибут АLIGN

Определяет положение изображения относительно окружающего его текста. Возможные значения аргумента — ["top" | "middle" | "bottom"] (соответственно, "вверху", "посередине", "внизу").

ALIGN="top" выравнивает верх изображения по верхнему краю самого высокого элемента в строке окружающего текста.

ALIGN="middle" выравнивает центр изображения по центральной линии строки окружающего текста.

ALIGN="bottom" выравнивает нижний край изображения по базовой линии строки окружающего текста.

Кроме основных значений атрибута ALIGN="ключевое слово" существует еще ряд аргументов, которые расширяют возможности взаимного размещения графики и текста. Рассмотрим их подробнее.

Дополнительные возможные значения аргумента — ["left" | "right" | "top" | "texttop" | "middle" |"absmiddle" | "baseline" | "bottom" | "absbottom" ].

ALIGN="left" определяет огибаемое текстом изображение. Изображение располагается вдоль левой границы документа, а последующие строки текста огибают его справа.

ALIGN="right" определяет огибаемое текстом изображение. Изображение располагается вдоль правой границы документа, а последующие строки текста огибают его слева.

ALIGN="textop" выравнивает верх изображения по верхнему краю самого высокого текстового символа в строке окружающего текста. Действие этого аргумента в большинстве случаев, но не всегда, подобно действию аргумента ALIGN="top".

ALIGN="absmiddle" выравнивает центр изображения по центру строки окружающего текста.

ALIGN="baseline" выравнивает нижний край изображения по базисной линии строки окружающего текста, то есть производит такое же действие, как и ALIGN="bottom".

ALIGN="absbottom" выравнивает нижний край изображения по нижнему краю строки окружающего текста.

Атрибут USEMAP

Если присутствуют атрибут USEMAP и тег <MAP>, изображение становится чувствительной картой, или "графическим меню". Если щелкнуть кнопкой мыши на активной области изображения, для которого определен атрибут USEMAP, произойдет гипертекстовый переход к информационному ресурсу, установленному для этой области. Более подробно этот вопрос будет рассматриваться в следующем разделе.

Атрибут BORDER

Целочисленное значение аргумента определяет толщину рамки вокруг изображения. Если значение равно нулю, рамка отсутствует. Чтобы не вводить пользователей в заблуждение, не стоит задействовать BORDER=O в изображениях, которые представляют собой часть элемента гиперссылки, поскольку рисунки, применяемые в качестве гиперссылок, обычно выделяются цветной рамкой.

Атрибут НSРАСЕ

Целочисленное значение этого атрибута задает горизонтальное расстояние между ближайшим элементом страницы и изображением, например между изображением и огибающим его текстом.

Атрибут VSPACE

Целочисленное значение этого атрибута задает вертикальное значение отступа до изображения сверху и снизу.

Атрибуты WIDTH и HEIGHT

Рекомендуется всегда использовать эти атрибуты. Оба атрибута задают целочисленные значения размеров изображения по горизонтали и по вертикали соответственно. Их использование позволяет в большинстве клиентских броузеров уменьшить время загрузки страницы с графикой. Браузер сразу отводит рамку для изображения и продолжает загружать текст на страницу. Пока загружается графика, пользователь может начать читать текст. Чтобы определить значения размеров вставляемых на страницу изображений достаточно воспользоваться любой программой просмотра графических файлов, например ACDSee или графическим редактором Corel PhotoPaint или Adobe Photoshop. Откройте файл в графическом редакторе и посмотрите в ее свойствах размер в пикселах. В соответствующих атрибутах тега изображения и следует указать найденные значения для ширины и высоты картинки.

<IMG SRC="image.gif" ALT="изображение" WIDTH=100 HEIGHT=200 HSPACE=2 VSPACE=2 BORDER=1 ALIGN=left>

Спасибо за внимание, встретимся через неделю.

cайт рассылки: web.aho.ru

Трафик без ограничений от $0.8 в месяц. Хостинг - все включено, домен бесплатно.

В избранное