Создание сайтов с нуля

#9. Основы HTML

по всем вопросам пишите на e-mail : webcourse@mail.ru

Графика в HTML

Тег <IMG> используется для вставки в документ изображений. Для этого чаще всего применяются изображения в форматах jpeg и gif. GIF - довольно распространенный формат, но у него есть серьезное ограничение - он подходит лишь для изображений, в которых меньше 256 оттенков. Для изображений фотографического качества больше подходит формат JPEG.

Итак, чтобы понять, как можно вставлять и располагать изображения в документе HTML, рассмотрим атрибуты тега <IMG>:

SRC - обязательный атрибут, указывает путь к файлу с изображением.

Пример: <IMG SRC="1.gif"> (в данном примере в документ будет вставлено изображение, которое находится в файле 1.gif, при этом данный файл должен находиться в одной папке с html-документом).

Основные необязательные атрибуты тега <IMG>:

ALIGN - задает выравнивание изображения относительно краев, а также относительно текста

Возможные значения:

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

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

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

Дополнительные возможные значения:

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

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

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

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

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

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

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

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

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

 

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

BORDER - толщина рамки вокруг изображения.

HEIGHT - высота изображения.

WIDTH - ширина изображения.

HSPACE - горизонтальный отступ от изображения до окружающей информации.

VSPACE - вертикальный отступ от изображения до окружающей информации.

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

К тому же при использовании альтернативного текста, пользователю будет сразу видно, что изображено на картинке, даже до ее загрузки. Да и поисковые системы, изучая ваш сайт, отмечают те слова, которые содержит альтернативный текст.

И еще рекомендуется описывать ширину и высоту изображения (HEIGHT и WIDTH). Если ширина и высота указаны, то документ продолжает загружаться, даже если картинка загружена не полностью. В противном случае, чтобы увидеть продолжение документа, придется дожидаться конца загрузки изображения.

Всего доброго.
Винников Василий.

Создание сайтов, обучение web-дизайну, основы html.