Воскресенье, 29.06.2025, 22:27

Меню сайта

Это интересно

Реклама от LiveCLiX

Рамка вокруг изображений

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


Пример 1. Добавление рамки вокруг изображения

<html>
<body text=#00FF00>

<img src="sample.gif" width=50 height=50 border=2> рамка зеленого цвета толщиной 2 пиксела
</body>
</html>

Если изображение является ссылкой, рамка добавляется автоматически, толщина ее 1 пиксел, а цвет рамки совпадает с цветом ссылок.

Чтобы убрать рамку, следует задать параметр border=0.

Пример 2. Удаление рамки вокруг изображения
<a href="sample.html"><img src="sample.gif" width=50 height=50 border=0></a>

 

Отступы вокруг изображения

Для любого изображения можно задать пустые отступы по горизонтали и вертикали с помощью параметров hspace иvspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не наезжал плотно на изображение, необходимо вокруг него добавить пустое пространство.



Пример. Добавление отступов вокруг изображения

<html>
<body>


<img src="sample.gif" width=50 height=50 hspace=10 vspace=10 align=left>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</body>
</html>


Альтернативный текст

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

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

Для создания альтернативного текста используется параметр alt тега IMG.

Пример 1. Добавление альтернативного текста

<a href=index.html><img src=home.gif alt="Возврат на главную страницу"></a>

Текст в параметре alt обязательно должен быть взят в кавычки.

Возможно использовавние переносов в тексте и создание таким образом многострочных подсказок. Лишние пробелы в этом случае надо убрать.


Пример 2. Создание многострочного альтернативного текста

<a href=index.html><img src=home.gif alt="Вернуться
на главную страницу"></a>

Альтернативный текст не поддерживают браузер Mosaic и браузер Opera до 7 версии.

Выравнивание изображений

Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега IMG. В таблице перечислены возможные значение этого параметра и результат его использования.

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

Наиболее популярные параметры - left и right, создающие обтекание текста вокруг изображения. Чтобы текст не прилегал плотно к рисунку, рекомендуется в теге IMG добавить параметр hspace и vspace, задающих расстояние до текста в пикселах.

Пример. Обтекание текста вокруг рисунка

<html>
<body>


<img src="sample.gif" width=50 height=50 hspace=10 vspace=10 align=left>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</body>
</html>



 


 Заработок в Интернете

Поиск
Создать бесплатный сайт с uCoz