HTML фон, картинка, исходный код

Цвет фона HTML страницы

Урок 9. HTML фон страницы, цвет фона, картинка

HTML теги, определяющие задний фон страницы и его свойства

Существуют параметры, которые нам позволяют определить HTML фон для сайта.

Содержание страницы

  1. Определяем HTML фон для сайта, для отдельных элементов и его цвет
  2. HTML картинка - фон для сайта или отдельных элементов страницы
  3. Каждая HTML страница как единица сайта имеет свой исходный код

Цвет фона 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 фон страницы

Посмотреть в новом окне: цвет фона в 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-страницы открывается следующим образом: в меню браузера заходим в ViewSource или Page Source.

Исходный код доступен только для просмотра, но не для редактирования.

Исходный код HTML-страницы

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 8. HTML линии   Исходный код, HTML фон, цвет   Урок 10. HTML картинка

    Сохранить в сервисы и закладки