HTML теги, определяющие задний фон страницы и его свойства
Существуют параметры, которые нам позволяют определить HTML фон для сайта.
- Цвет фона HTML страницы определяется CSS атрибутом background-color, который, в свою очередь, размещается внутри тега <body>.
- HTML цвет фона
для отдельных элементов: блока, параграфа или ячейки таблицы
определяется тем же атрибутом, расположенном внутри соответствующих
тегов.
- Фон HTML страницы может быть определен во внешнем .css файле → подробнее CSS уроках.
- HTML картинка - фон определяется с помощью атрибута background-image и картинки.
Содержание страницы
Цвет фона HTML страницы и отдельных элементов
Определяем цвет фона для сайта, страниц и параграфов
Сделаем фон HTML страницы светло-зеленым:
<html>
<head>
<title>HTML фон</title>
</head>
<body style="color:Yellow; background-color:#66cc66">
<h1>Заголовок 1-го уровня</h1>
<p>Первый параграф</p>
<p>Второй параграф</p>
<p style="color:#ffffff">Третий параграф</p>
</body>
</html>
|
Строка style="color:Yellow; background-color:#66cc66" в теге <body> делает цвет фона HTML страницы зеленым, текст – желтым.
Результат:
Посмотреть в новом окне: цвет фона в HTML
Атрибуты style="" со значениями – линейные CSS включения.
Определим цвет фона для параграфов:
<p style="background-color:#ff9900" align="center">Первый параграф</p>
<p style="background-color:#417ed0" align="center">Второй параграф</p>
|
Результат:
Первый параграф
Второй параграф
HTML картинка - фон или изображение в качестве фона
HTML фон - картинка определяется с помощью изображения
Например, у нас есть вот такая картинка:
Напишим следующий код для отдельной страницы:
<html>
<head>
<title>Картинка - фон в HTML</title>
</head>
<body style="background-image:url(../images/primer-img.jpg)">
<p>Какой-то произвольный текст.</p>
</body>
</html>
|
Посмотреть результат в новом окне: HTML фон - картинка
Атрибуты background, background-image, их параметры и значения рассматриваются в уроках CSS. Путь вывода картинки на страницу, то есть → ../images/primer-img.jpg разбирается в одном из следующих уроков.
Исходный код HTML страницы
Исходный код H2O выглядит так:
<strong><big>H</big><sub><small>2</small></sub><big>O</big></strong>
|
Обратите внимание на порядок открытия и закрытия тегов: одна пара вкладывается в другую, то есть тег открытый первым
– закрывается последним, второй – предпоследним.
Исходный код любой web-страницы открывается следующим образом: в меню браузера заходим в View ⇒ Source или
Page Source.
Исходный код доступен только для просмотра, но не для редактирования.
