Цвет фона html тег: Как сделать фон в html: порядок действий

Разное 

Уроки по HTML/Урок №4. Параметры тэга .

Урок №4. Параметры тэга <body>.

Цели работы:
1.Изучение параметров тэга <body>.
2.Закрепление изученного материала на примерах.
3.Повторение ранее изученного материала.

Как уже говорилось на уроке №1, между тэгами <body> …</body> заключается содержательную часть HTML-документа. Большинство тэгов, должно располагаться в данном разделе документа. Тэг <body> имеет ряд параметров, ни один из которых не является обязательным, но может пригодиться для разработки интересно оформленных HTML-страниц. Как Вы уже смогли заметить, если в тэге <body> параметры отсутствуют, то браузер отображает такую страницу белым цветом, текст отображается черным цветом, гиперссылки – синим. Это сделано не просто так. Черный текст на белом фоне считается классикой с точки зрения Web-дизайна (хотя и ужасно заезженной).

Это весьма объяснимо, т.к. наиболее читабельный именно такой вариант. Представьте себе желтый текст на красном фоне, или синий на черном. В первом случае оформление – вырви глаз, раздражающее и тяжело воспринимаемое; во втором – вообще читать невозможно, т.к. буквы почти сливаются с цветом страницы. Пожалуй, становится понятным одно из основных правил оформления Web – страниц: Оформление страницы не должно затруднять восприятие информации, находящейся на ней. Это, однако, не означает то, что надо использовать белый фон документа и черный текст, просто надо всегда думать не только о себе, но и о тех людях, которые, возможно посетят Ваш сайт.

Итак, мы вплотную подошли к первому параметру тэга <body>

bgcolor. Как Вы уже могли догадаться, данный параметр определяет цвет фона HTML – документа (bgcolor, от английского background color задний фон). В языке HTML цвета определяются цифрами в шестнадцатиричном коде. Цветовая гамма базируется на трех основных цветах – красном (Red), зеленом (Green) и синем (Blue) – и обозначается RGB. Для каждого цвета задается шестнадцатиричное значение в пределах от 00 до FF, что соответствует диапазону 0 – 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #. Например, зеленый цвет имеет код #008000. Чтобы не запоминать совокупность цифр или букв, можно воспользоваться таблицей цветов (с их кодами), либо просто называть цвета своими именами (по английски), что менее желательно. Например, запись параметра bgcolor=red внутри тэга <body> эквивалентна записи bgcolor=#FF0000. Если с помощью параметра bgcolor можно определить цвет фона документа, то, естественно, можно определить цвет текста, для этого служит параметр
text. Например, запись text=#0000FF внутри тэга <body> будет задавать текст синего цвета. Заметим, что в данном случае, весь текст HTML-документа станет синим, в отличие от применения тэга <font> (Урок №2), которым выделяются лишь отдельные фрагменты. Выбирая цвета фона документа и текста, не забывайте о читаемости Вашей страницы: как только Вас начинает что-то смущать, раздражать, либо плохо восприниматься, попробуйте подобрать наиболее удачное сочетание цветов.
Здесь главное чувство меры и эстетический вид страницы, о чем говорилось ранее.

Пример 4.1.Действие параметров bgcolor и text.

После выполнения в блокноте, сохраните данный пример как «song.htm» и увидите результат.

Продолжим знакомство с параметрами тэга

. Как известно, во всяком HTML- документе применяются гиперссылки. Существуют несколько параметров, определяющих цвет ссылки.
link – определяет цвет еще не просмотренной ссылки,
alink – определяет цвет активной ссылки (ссылки, которая работает в данный момент),
vlink – определяет цвет уже просмотренной ссылки.
Например: <body link=red alink=yellow vlink=blue>.
Здесь цвет не просмотренной ссылки — красный, активной – желтый, просмотренной – синий. По умолчанию браузеры выводят не посещенную ссылку — синим цветом, посещенную – фиолетовым.

Задание 4.1: Откройте документ «song.htm» и добавьте приведенные выше параметры, определяющие цвет ссылок.

Конечно, необходимо будет создать гиперссылку, в данном документе, вспомните, как это делается (Урок №3). Если гиперссылка не создана, а в тэге <body> указаны ее параметры, то, естественно, Вы не увидите их действия. Для проверки работы гиперссылки, создайте самостоятельно еще один HTML – документ (с применением всех параметров, изученных на данном уроке) и в нем сделайте гиперссылку на первый файл («song.htm»). Если все работает, поздравляю. Поэкспериментируйте с цветами ссылок, текста и фона.

Двинемся дальше. Обратимся теперь к параметрам, задающим границы полей HTML – документа. Таких параметров четыре:

topmargin — устанавливает границу верхнего поля документа в пикселях,
bottommargin — устанавливает границу нижнего поля документа в пикселях,
leftmargin — устанавливает границу левого поля документа в пикселях,
rightmargin — устанавливает границу правого поля документа в пикселях.
Например: <body topmargin=0 bottommargin=0 leftmargin=30 rightmargin=30>.
Здесь верхнее и нижнее поля отсутствуют (равны 0), а правое и левое поле по 30 пикселей.

Задание 4.2:

Откройте документ «song.htm» и добавьте приведенные выше параметры, определяющие границы Вашего документа. Поэкспериментируйте с заданием различных значений границ.

Теперь поговорим о фоновых изображениях. Наряду с заданием цвета фона, HTML – страницу можно замостить так называемыми «обоями» или фоновым изображением. Для этого используется параметр background тэга <body>. Параметр background указывает на URL – адрес изображения, которое используется в качестве фонового. В качестве изображения должна использоваться «картинка» сохраненная в формате .Gif или .Jpeg (.jpg). Удобно использовать небольшое изображение (например, 5X5 см.) в качестве фонового, т.к. в этом случае оно застилает всю страницу без видимых швов (если оно удачно подготовлено для этих целей).

Самой удобной программой для подготовки таких «кубиков» (текстуры) служит Photoshop (на худой конец Paint).

Задание 4.3: Откройте программу Paint, сожмите листок до небольших размеров; затем выберите какой либо цвет (лучше светлый) и, взяв на панели инструментов «распылитель», подготовьте равномерно раскрашенный «кубик». (Лучше использовать программу Photoshop и фильтр Texturizer из набора Texture). Сохраните полученную картинку в формате jpg (пусть ее имя будет pict). После этого откройте Вашу страницу «song.htm» и в тэг <body> вставьте background=pict.jpg. Сохранив изменения, вернитесь на страницу и увидите Ваши «обои».

Параметры bgcolor и background могут одновременно присутствовать в тэге <body>, в этом случае доминирующим будет background, а параметр bgcolor будет работать в случае, если пользователь находится в режиме отключения изображений.

Для обращения к следующему занятию Вам необходимо пройти тест

jpg» align=»center»>на главную		о Псковерыбалкамузыкакартауроки

html — Как задать цвет заголовку?

Вопрос задан

Изменён 5 лет 1 месяц назад

Просмотрен 20k раз

Подскажите, какой контейнер или атрибут тега задает цвет заголовку?

  • html
  • css
  • вёрстка

2

Или ещё проще:

<h2>Hello, world!</h2>

Чтобы задать цвет — color.

Как вариант:

.color {
color: red;
background-color: #f5f5f5;
}
<h2>Сегодня воскресенье, сегодня выходной</h2>

Ознакомьтесь, каким образом определяется цвет текста элемента, а также цвет фона элемента.

Обратите внимание на ответ @entithat, на такой способ внесения стилей, это один из способов, он тоже верный. Также можно внести изменения в стили с помощью JavaScript.

html,body{
width:100%;
height:100%;
}
div{
background:red;
width:100px;
height:30px;
}
/*а это на будущее))))  есть теги которым стили не подвласты*/
br{
width:100px;
height:100px;
background:green;
}
<!--вот стили для данного тега прописаны в CSS-->
<div>div1</div>
<br/>
<!--вот стили для данного тега прописаны в CSS-->
<div>div2</div>
<br/>
<!--вот стили для данного тега прописаны на пряму  в HTML атрибутом style-->
<div>div3</div>

<br/>
<!--вот стили для данного тега  можно прописать с помощью JS-->
<!--JS -  'это JavaScript  не путать c JAVA абсолютно два разных языка-->
<div>div4</div>
<script>
document. getElementsByClassName('div')[0].style.background = 'gray';
</script>

Если вам зачем-то нужен именно атрибут или контейнер (обозреватель древний или движок оформления не поддерживает CSS), можете воспользоваться тегом <font>. Однако:

  • сейчас принято разделять структуру документа и его оформление, поэтому настоятельно рекомендуется перейти на стили при первой же возможности (как указано в других ответах),

  • новые стандарты (HTML5 и будущие) не поддерживают теги, подобные <font>. Даже HTML4 поддерживает этот тег только в переходной версии (из-за чего в примере ниже пришлось явно прописать необходимый doctype).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head><title></title></head> <!-- Тег <title> обязателен -->
  <body>
    <h2><font color="maroon">Hello, World!</font></h2>
  </body>
</html>

К слову, <font> позволяет задать цвет не только заголовку, но вообще любому фрагменту текста. Однако он должен быть размещён внутри блочного тега (<hN>, <p> и т. д.). То есть комбинация <h2><font> корректна, а <font><h2> — уже нет (тег заголовка автоматически закроет предшествующий тег).

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как добавить цвет на веб-страницу

Название цвета Шестнадцатеричный код
RGB		 Десятичный код
RGB
Черный 000000 0,0,0
Серебро C0C0C0 192 192 192
Серый 808080 128 128 128
Белый ФФФФФФ 255 255 255
Бордовый 800000 128,0,0
Красный FF0000 255,0,0
Название цвета Шестнадцатеричный код
RGB		 Десятичный код
RGB
Фиолетовый 800080 128,0,128
Фуксия ФФ00ФФ 255,0,255
Зеленый 008000 0,128,0
Лайм 00FF00 0,255,0
Олива 808000 128 128,0
Желтый FFFF00 255 255,0
Название цвета Шестнадцатеричный код
RGB		 Десятичный код
RGB
Военно-морской флот 000080 0,0,128
Синий 0000FF 0,0,255
Бирюзовый 008080 0 128 128
Аква 00FFFF 0 255 255

Браузер
Тип
  • Устарело

Атрибут Значение Пояснение
bgcolor=» » цветовой код или название цвет фона