Menu

Заголовки в HTML и CSS (урок N2)

h1 h2 h3Веб-страницу трудно представить без заголовков. На миллионах сайтов расположены заголовки, они встречаются перед статьёй или в самой статье.

Поисковые системы обращают внимание на заголовки. Поисковые роботы определяют авторитетность того или иного заголовка. Авторитетность заголовка указывает создатель страницы, а робот лишь распознает и заносит полученную авторитетность заголовка в свою поисковую систему.

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

 

Заголовки в HTML

В HTML все заголовки обозначаются буквой “h” / После буквы “h” вводится авторитетность заголовка.

  • Важные заголовки обозначаются единицей или двойкой – <h1>, <h2>
  • Посредственные заголовки имеют наименьшие показатели – <h3>, <h4>, <h5>, <h6>

Чем больше цифра, тем меньше авторитетность заголовка.

Заголовки отличаются размерами: заголовок <h2> будет больше заголовка <h3>.

Пример:

<h2> Это заголовок в HTML </h2>

<h3> Это заголовок в HTML </h3>

Заголовками “h1” и “h2” помечают название статьи и основные разделы статьи.

 

Изменение заголовка при помощи CSS

Любому заголовку можно придать “особый внешний вид”. Изменение внешнего вида осуществляется при помощи языка “CSS”.

Пример:

<html>

<head>

<title> Моя первая страница </title>

<meta charset="UTF-8">

</head>

<body>

<h2> Заголовок H2 </h2>

<h3> Заголовок H3 </h3>

<h4> Заголовок H4 </h4>

</body>

</html>

<style>

h2 {

font-family: verdana;

color: blue;

cursor: pointer;

font-size: 32px;

text-align: center;

}

h3 {

font-family: century gothic;

color: red;

text-shadow: 0 0 4px red;

font-size: 22px;

text-align: right;

}

h4 {

color: green;

font-size: 17px;

text-align: left;

}

</style>

Результат:

 

Индивидуальный CSS для каждого заголовка

Каждому типу заголовков был присвоен особый внешний вид. Значит, что теперь все заголовки H2 будут синим цветом и по центру. Такое же правило к красному правому H3 и к зеленому левому H4.

Если человек не хочет, чтобы все заголовки h2 были синим цветом, то этот человек использует дивы! Дивы присваиваются к конкретному заголовку.

Пример:

<html>

<head>

<title> Моя первая страница </title>

<meta charset="UTF-8">

</head>

<body>

<h2> Заголовок H2 </h2>

<div class="zavlekyxa"> <h2> Заголовок H2 </h2> </div>

</body>

</html>

<style>

h2 {

color: red;

font-size: 55px;

}

.zavlekyxa h2 {

color: gold;

font-size: 30px;

}

</style>

Результат: 

Zagolovok DIV

Название для дива можно подбирать любое: необязательно использовать “zavlekyxa”. Див дает уникальное расположение и внешний вид для любого выбранного элемента.

DIV всегда идет с начальной точкой в CSS.

 

Всем изучающим HTML и CSS рекомендуется начинать обучение со вступительного урока – https://zavlekyxa.ru/sozdanie-pervoj-html-stranitsy/



Подпишитесь!

Укажите свой электронный адрес


Внедрение фона на веб-страницу (Урок №9)... Любая веб-страница наделена фоном, который является либо картинкой, либо каким-то цветом. Фон создается в CSS. Фоном...
Производство подчеркиваний на веб-странице (урок №... Читая различные статьи на сайтах начинаешь обращать внимание на подчеркивания, выделения и цветовые колебания в тексте. ...
Позиционирование текста в HTML и CSS (Урок №8)... Позиционирование текста осуществляется с атрибутом align. Именно этот атрибут определяет в какой стороне будет находится...
Строительство маркированных, нумерованных и картин... Перед просмотром данной статьи рекомендуется изучить начальный урок - https://zavlekyxa.ru/sozdanie-pervoj-html-stra...
Курсивные буквы в HTML и CSS (урок №7)... Курсивный текст - это буквы, созданные в наклонном стиле. Пример: Прекрасно! Это Прекрасно! Курсивные буквы созда...
Создание абзацев в HTML (урок №3)... Абзацы важная составляющая в статье. Каждый крупный информационный ресурс использует абзацы в тексте. Создание аб...
Создание “жирного” текста в HTML (урок... Самый распространенный способ привлечение внимания к тексту - это увеличение толщины и яркости букв. Владельцы сайто...
Создание первой HTML страницы на своем компьютере ... Создать веб-страницу реально на компьютере. Созданная страница не будет видна в интернете, она будет отображаться только...
Влюбиться можно в красоту, но полюбить – лишь только душу! (Уильям Шекспир)