| Уроки HTML |
| Фон HTML страницы |
В предыдущих уроках уже приводились примеры, в коде которых задавался цвет заднего фона. В этом уроке будет более подробно рассмотрено то, как задать цвет фона html-страницы и как сделать изображение (картинку) задним фоном и задать ей некоторые параметры.
Для начала создадим страницу, которой зададим цвет заднего фона и цвет текста, который будет применяться по умолчанию. (Для выбора подходящего цвета вы можете воспользоваться генератором цветов)
<html>
<head>
<title>Фон HTML страницы</title>
</head>
<body style="color: #E09D0D; background-color: #B5E00D">
<h2>Страница зелёного цвета</h2>
<p>На странице зелёного цвета написан оранжевый текст.</p>
<ins style="font-size: 16px">Подчёркнутый текст размером 16 пикселей</ins>
<br>
<i style="color: #03B8FF"> Наклонный текст светло синего цвета на зелёном фоне</i>
</body>
</html>
Результат можно посмотреть здесь.
Теперь рассмотрим, как установить на задний фон картинку.
Для этого вам нужно создать папку "images" в той же директории (общей папке), в которой у вас находятся html страницы.
После этого в папку "images" загрузите вот такую картинку:
Теперь что бы эта картинка стала задним фоном вашей html страницы, нужно в теге "<body> " в свойстве
‘style = " background-image:" ’ прописать путь к этой картинке (url). Так же зададим заголовку некоторые свойства, котырые рассматривались в предыдущем уроке.
<html>
<head>
<title>Фон HTML страницы</title>
</head>
<body style="color: #E09D0D; background-color: #B5E00D">
<h2>Страница зелёного цвета</h2>
<p>На странице зелёного цвета написан оранжевый текст.</p>
<ins style="font-size: 16px">Подчёркнутый текст размером 16 пикселей</ins>
<br>
<i style="color: #03B8FF"> Наклонный текст светло синего цвета на зелёном фоне</i>
</body>
</html>
Результат работы этого кода можете посмотреть здесь.
Как вы заметили картинки, выбираемая для заднего фона html-страницы, должна быть аккуратно обрезана по краям, что бы после её бесконечного повторения в окне браузера небыли заметны границы и поля. Ну и сама картинка конечно же должна быть какимто повторяющимся узором (как обои) ну или просто нечто монотонным.
Более подробно работа с фоновым изображением рассматривается в уроках по CSS.
| ◄ Предыдущий урок | Содержание | Следующий урок ► |
