Устанавливаем фон страницы

На прошлых уроках мы с вами работали с текстом и знакомились с тегами, позволяющими выполнять простое форматирование текста. Но, наши страницы оставались грустно белыми. Сегодня мы:

  1. попробуем изменить цвет страницы;
  2. научимся устанавливать с качестве фона изображение, а точнее бесшовную текстуру.

Итак, обо всем по порядку.

Цвет страницы.

Цвет страницы задается при помощи атрибута bgcolor. Синтаксис задания фона выглядит так:

<body bgcolor=’#c0c0c0′>

<p>ваш текст</p>

</body>

Подобрать оптимальный фон можно, используя стандартную таблицу цветов HTML.

Самое время попробовать немного изменить уже имеющуюся страничку, задав для нее цвет. Если вам лень искать оттенок, предлагаю попробовать такие:

  • голубой #F0FFFF или #87CEEB;
  • салатовый #98FB98 или #7FFFD4;
  • розовый #FFC0CB или #FF69B4;

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

При желании, Вы можете установить в качестве фона любое изображение, имеющее соответствующий размер (в пикселях). Но, страница, у которой фон задан картинкой большого объема будет загружать довольно долго, что особенно могут ощутить обладатели медленного интернета. Поэтому чаще всего в качестве фона используют маленькие изображения, которые при дублировании создают единый рисунок любого размера. Такие картинки называют”бесшовная текстура”. Именно по такому запросу я вам и предлагаю поискать в интернете красивую картинку, которая станет фоновым рисункам для вашей страницы. Учтите, что пока нем не подходят слишком яркие варианты, ведь текст будет располагаться непосредственно поверх изображение и он должен быть читаем.

Итак, у нас есть некая картинка, назовем ее imeges.jpg (у вас, конечно, может быть совершенно другое имя, и даже другое расширение).

Для подключения картинки в качестве фонового рисунка используется атрибут background.

Синтаксис задания фонового рисунка такой (если файл картинки находится в одной папке с нашим html файликом:

<body background=’images.jpg’>

<p></p>

</body>

Конечно, более логичным будет создать отдельную папку, в которой будут находиться все картинки нашего сайта. Если имя папочки для хранения картинок будет img (именно английскими буквами!), то синтаксис подключения картинки будет:

<body background=’img/images.jpg’>

<p></p>

</body>

Стоит заметить, что фоновый цвет и фоновый рисунок не взаимоисключающие величины. Задавая изображение не поленитесь установить и цветной фон-подложку на тот случай, если у кого-то из посетителей браузер не откроет фоновый рисунок. В таком случае строка будет иметь вид:

<body bgcolor=’#c0c0c0′ background=’images/bg.jpg’>

<p></p>

</body>

А теперь попробуйте реализовать все прочитанной на своей страничке. Удачи!!!




Comments are Closed