<<Темы

Урок 6. Графика в HTML

Фоновые рисунки

Фоновые рисунки вставляются с помощью атрибута background. Фон можно установить у всей страницы (тэг body), у таблицы (table), у отдельной строки либо ячейки в таблице (tr, td). Чтобы фон оставался на месте, а прокручивались только элементы страницы, добавьте в тэг body атрибут bgproperties=fixed.
Совет. Цвет фона лучше установить близким к основному фону рисунка (с помощью атрибута bgcolor).
<body background="fon.jpg" bgproperties=fixed bgcolor=#ff0000>
Используя фоновый рисунок веб-страницы или таблицы можно создавать различные графические эффекты на сайте, например, вертикальные и горизонтальные линии, тени, полоски и многое другое.

Тэг img

Этот тег вставляет в документ изображение. Источник изображения указывается в атрибуте src. Им служит как правило путь относительно текущего документа, но можно использовать вместо пути его URL в Internet'е.
<img src="../banner.gif">
<img src="http://www.rambler.ru/dronban.jpg">
Кроме атрибута src существуют еще несколько атрибутов:
alt - задает текст, который будет изображаться вместо картинки, если она не загрузилась или не отображается. Этот текст также выскакивает в всплывающей подсказке. Атрибутом lowsrc можно указать изображения низкого качества или размера, для быстрой предварительной загрузки
width и height - задают горизонтальный и вертикальный размер картинки, чтобы еще до начала загрузки изображения браузер выделил ему требуемое место
border - задает толщину рамки, которой будет обрисовываться изображение. Если изображение не является ссылкой, то оно по умолчанию не окружается рамкой. Если же это изображение-ссылка, то для толщина рамки будет равна 2. Рамка иногда может портить стиль вашей страницы, тогда используйте border=0
vspace - используется для указания ширины пространства сверху и снизу от изображения в пикселах. Как правило по умолчанию равно 0. Но может быть и иным
align - задает выравнивание изображения относительно текущей строки:

Код HTML Описание Пример
<img src=sample.gif align=texttop> Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<img src=sample.gif align=top> Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<img src=sample.gif align=middle> Выравнивание середины изображения по базовой линии текущей строки. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<img src=sample.gif align=absmiddle> Выравнивание середины изображения по средине текущей строки. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<img src=sample.gif align=baseline> Выравнивание изображения по базовой линии текущей строки. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<img src=sample.gif align=bottom> Выравнивание нижней границы изображения по окружающему тексту. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<img src=sample.gif align=left> Выравнивает изображение по левому краю окна. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<img src=sample.gif align=right> Выравнивает изображение по правому краю окна. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

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


<<Урок 5 ^ наверх ^ Задание №6Урок 7>>