Урок 11. Работа с изображениями.
Содержание урока:
Фоновые изображения
Встраивание изображений
Размеры изображений
Отделение изображения от текста
Альтернативный текст
Изображение в качестве ссылки
Изображения на web-страницах могут использоваться двумя способами: в качестве фона и в качестве самостоятельного изображения. Рекомендуется использование трех форматов графики: JPEG, GIF и PNG. Именно их поддерживают все браузеры, для остальных форматов могут потребоваться специальные средства. Как правило, все изображения для сайта хранятся в отдельной папке, например, images. А пути к изображениям прописываются также, как в ссылках. Если забыли посмотрите здесь. Во всех последующих примерах пути к изображениям будут прописаны, исходя из того, что картинки находятся в папке images, а страницы в папке site, находящейся на том же уровне. Фоновые изображения Фоновое ихображение заполняет собой все пространство элемента для которого оно задано. Так, указав в теге <body>атрибут background="fon.gif", рисунком fon.gif будет залито все окно браузера. Пример кода:
<html>
<head>
<title>Фоновое изображение</title>
</head>
<body background="../images/fon.gif" bgcolor="pink">
Здесь содержание документа
</body>
</html>
Результат смотрите здесь Задавая фоновый рисунок документа, не забывайте указывать также параметр bgcolor. Это связано с тем, что у пользователя может быть отключена загрузка изображений и вашего красивого фона он не увидит. Тогда браузер и будет использовать параметр bgcolor. Встраивание изображений Для размещения на странице изображений используется тег <img>, имеющий единственный обязательный параметр src, определяющий URL-адрес изображения. Пример кода:
<html>
<head>
<title>Тег img</title>
</head>
<body>
<img src="../images/fish.gif">
Остальное содержимое документа
</body>
</html>
Результат:
Остальное
содержимое документа
Согласитесь, текст рядом с картинкой выглядит не очень красиво. Для того, чтобы наши изображения выглядели так, как нам хочется их надо выровнять. И поможет нам в этом параметрalign. У этого параметра есть несколько значений. Рассмотрим их все на примерах. Пример кода с параметром align="left"
<html>
<head>
<title>Тег img с параметром align="left"</title>
</head>
<body>
<img src="../images/fish.gif" align="left">
Картинка слева, а текст обтекает ее справа и
этот текст может занимать несколько строчек.
</body>
</html>
Результат:
К артинка слева, а текст обтекает ее справа и этот текст может занимать несколько строчек.
Пример кода с параметром align="right"
<html>
<head>
<title>Тег img с параметром align="right"</title>
</head>
<body>
<img src="../images/fish.gif" align="right">
Картинка справа, а текст обтекает ее слева и
этот текст может занимать несколько строчек.
</body>
</html>
Результат:
К артинка справа, а текст обтекает ее слева и этот текст может занимать несколько строчек.
Пример кода с параметром align="top"
<html>
<head>
<title>Тег img с параметром align="top"</title>
</head>
<body>
<img src="../images/fish.gif" align="top">
Верхняя граница изображения выравнивается по самому
высокому элементу текущей строки. Изображение
как бы встраивается в строчку. Если изображение
большое, то и строка раздвигается на эту высоту.
</body>
</html>
Результат:
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. Изображение как бы встраивается в строчку. Если изображение большое, то и строка раздвигается на эту высоту.
Пример кода с параметром align="texttop"
<html>
<head>
<title>Тег img с параметром align="texttop"</title>
</head>
<body>
<img src="../images/fish.gif" align="texttop">
Верхняя граница изображения выравнивается
по самому высокому текстовому элементу
текущей строки (заглавная буква строки).
</body>
</html>
Результат:
Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки (заглавная буква строки).
Пример кода с параметром align="middle"
<html>
<head>
<title>Тег img с параметром align="middle"</title>
</head>
<body>
<img src="../images/fish.gif" align="middle">
<font size=7>Выравнивание</font>
середины изображения по
базовой линии текущей строки.
</body>
</html>
Результат:
Выравнивание середины изображения по базовой линии текущей строки.
* крупный шрифт сделан для наглядности разницы между middle absmiddle Пример кода с параметром align="absmiddle"
<html>
<head>
<title>Тег img с параметром align="absmiddle"</title>
</head>
<body>
<img src="../images/fish.gif" align="absmiddle">
<font size=7>Выравнивание</font>
середины изображения посередине текущей строки.
</body>
</html>
Результат:
Выравнивание середины изображения посередине текущей строки.
Пример кода с параметром align="bottom"
<html>
<head>
<title>Тег img с параметром align="bottom"</title>
</head>
<body>
<img src="../images/fish.gif" align="bottom">
<font size=7>Выравнивание</font>
нижней границы изображения по базовой линии
текущей строки.
</body>
</html>
Результат:
Выравнивание нижней границы изображения по базовой линии текущей строки.
Пример кода с параметром align="absbottom"
<html>
<head>
<title>Тег img с параметром align="absbottom"</title>
</head>
<body>
<img src="../images/fish.gif" align="absbottom">
<font size=7>Выравнивание</font>
нижней границы изображения по нижней границе
текущей строки.
</body>
</html>
Результат:
Выравнивание нижней границы изображения по нижней границе текущей строки.
Если же мы хотим, чтобы текст располагался под картинкой, то необходимо использовать тег <br> с параметром clear, который запрещает обтекание. Обтекание можно запретить с правой стороны (right), с левой стороны (left) и с обеих сторон (all). Пример кода:
<html>
<head>
<title>Запрет обтекания картинки</title>
</head>
<body>
<img src="../images/fish.gif">
<br clear="all"> Остальные элементы документа
</body>
</html>
Результат:
Остальные элементы документа