<<Темы
Урок 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
.