Отступы вокруг изображения
Чтобы при обтекании текст не прилегал близко к изображению, можно задать отступы вокруг изображения. Сделать это можно с помощью параметров hspace (отступы слева и справа) и vspace (отступы сверху и снизу) тега
<img>.
В следующем примере продемонстрирован случай, когда текст обтекает изображение, при этом изображение выровнено по левому краю и имеет отступы вокруг, равные 5 пикселам:
<img src="img/1.png" align="left" hspace="5" vspace="5">В городе Стокгольме, на самой обыкновенной улице, в самом обыкновенном доме живет самая обыкновенная шведская семья по фамилии Свантесон. Семья эта состоит из самого обыкновенного папы, самой обыкновенной мамы и трех самых обыкновенных ребят -Боссе, Бетан и Малыша.
Вот результат в браузере:
В городе Стокгольме, на самой обыкновенной улице, в самом обыкновенном доме живет самая обыкновенная шведская семья по фамилии Свантесон. Семья эта состоит из самого обыкновенного папы,
самой обыкновенной мамы и трех самых обыкновенных ребят -Боссе, Бетан и Малыша.
Разбиение изображения на части
Бывают случаи, когда на странице необходимо поместить большое изображение. Но тогда страница будет долго грузиться. Что же делать?
Один из возможных вариантов выхода из положения - разрезать изображение на части и разместить его на странице с помощью таблицы. A чтобы изображение выглядело как целое, необходимо у таблицы удалить границу и все отступы внутри и между ячейками. Т.е. присвоить соответствующим параметрам тега <table> нулевые значения: border="0", cellspacing="0", cellpadding="0".
В следующем примере мы разбили изображение на 4 части. Вот как будет выглядеть таблица:
<table border="0" cellspacing="0" cellpadding="0"> <tr>
<td><img src="img/part1.png"></td> <td><img src="img/part2.png"></td> </tr>
<tr>
<td><img src="img/part3.png"></td> <td><img src="img/part4.png"></td> </tr>
</table>
А вот результат:
Такой прием может пригодиться и в других случаях. Здесь Вы можете видеть пример наложения 2-х изображений с текстовыми вставками.
Свойства страницы - параметры тега body
Цвет текста
Цвет фона
Фоновое изображение
Цвет ссылок
Отступы вокруг контента
Упражнение
Как Вам уже известно, между открывающим тегом <body> и закрывающим тегом </body> помещается тело страницы или само содержимое страницы. Его еще называют словом контент (от англ. content - содержимое).
Параметры тега <body> определяют свойства контента в целом. В этом уроке мы и рассмотрим некоторые из них.
Цвет текста
Цвет текста всего документа определяется параметром text. Ему присваивается либо название цвета, либо шестнадцатеричное значение цвета, как и параметру color тега <font> (см. Урок 2. Форматирование теста):
<body text="#FF0000"> или <body text="red">
В результате использования этого примера весь текст на странице будет красным.
Параметр text не является обязательным. Если его опустить, то текст на странице по умолчанию будет черным. Вы, наверное, уже успели в этом убедиться, выполняя предыдущие упражнения. :)
Цвет фона
Цвет фона страницы определяется параметром bgcolor. Он принимает значениями либо название цвета, либо шестнадцатеричное значение цвета, как и параметр text.
<body bgcolor="#FF0000"> или <body bgcolor="red">
В результате использования этого примера фон страницы будет красным.
Параметр bgcolor не является обязательным. Если его опустить, то фон страницы по умолчанию будет белым. В чем Вы тоже уже убедились, выполняя предыдущие упражнения. :)
Фоновое изображение
С помощью параметра background можно сделать, чтобы у странички был не однотонный фон, а фоном было бы изображение. Для этого параметру background надо присвоить путь к изображению, которое Вы хотите сделать фоновым, так же как параметру src тега <img> (См. Урок 5. Изображения):
<body background="img/fon.png">
Таким способом можно, например, замостить фон странички каким-нибудь узором. Но не стоит злоупотреблять этой возможностью и делать фоном большие изображения, чтобы слишком не утяжелять страницу.
Например,
ну нас есть вот такой фрагмент узора:
Если мы сделаем его фоновым изображением, получится страничка с таким фоном:
Параметр background также не является обязательным. Если его опустить, то фон страницы по умолчанию будет белым.