HTML — язык разметки. Классы CSS

Любой сайт в Интернете формируется на основе языка разметки HTML. Просмотр сайтов выполняется через специальную программу — браузер, который знает этот язык и формирует её внешний вид, согласно разметке HTML.

В браузере достаточно нажать Ctrl+U, чтобы увидеть исходный код любой страницы в Интернете.

Сам HTML представляет собой обычный текст, который формируется динамически, как в MaxSite CMS, или фиксированный в html-файлах.

Сразу уточню, что HTML — это не язык программирования.

С помощью HTML можно менять оформление текстов записей. При использовании невизуального редактора MaxSite CMS, вы можете свободно указывать html-код прямо в тексте записи. Поэтому, если вы активировали визуальный редактор, то скорее всего он будет искажать введенный вами html-код. Поэтому мой совет — использовать невизуальный редактор хотя бы на время ознакомления с HTML.

Что такое HTML-тэги

HTML состоит из тэгов. Тэги разные и предназначены под разные задачи. Например, для того, чтобы выделить текст полужирным используется тэг <B> (от слова bold):

<b>Полужирный текст</b>

Тэги бывают парные и одиночные. Примеры одиночных тэгов:

<br> - принудительный перенос строки
<hr> - горизонтальная линия
<img> - картинка

Примеры парных тэгов:

<p>текст</p> - абзац текста
<blockquote>текст</blockquote> - цитата
<pre>текст</pre> - преформатированный текст

Тэги могут иметь различные атрибуты. Например для указания адреса картинки (IMG) используется атрибут SRC:

<img src="адрес">

Сколько всего тэгов. Справочник HTML

Всего в HTML5 (это наш стандарт) более 100 тэгов. Большинство из них вряд ли понадобятся, но иметь какое-то представление всё-таки будет полезным. Приводить все тэги я не буду, просто даю ссылку на русский справочник HTML.

Виды тэгов

Условно все тэги можно разделить на несколько видов по способу своего действия. Есть «управляющие» тэги - с их помощью можно подключить css-стили, указать title страницы и т.п. Есть «блочные» тэги. Есть «строчные».

Поскольку физически HTML - это простой текст, то браузер должен получить в этом тексте управляющие команды - тэги. Поэтому браузер делает некоторые вполне очевидные для нас вещи не очевидными:

• Переносы в тексте не учитываются
• Несколько пробелов подряд превращаются в один
• Табуляция превращается в пробел

То есть, сколько бы мы не жали Enter в html-тексте, браузер упорно будет игнорировать наши попытки.

Единственное исключение - есть некоторые тэги, вроде PRE, которые как раз и предназначены для вывода преформатированного текста: в нем учитываются и переносы, и пробелы, и табуляция.

Что же делать? Правильно! Нужно используя различные тэги, указывать браузеру как мы хотим увидеть наш текст. Скажем для абзацев использовать парный P.

<p>первый абзац</p>
<p>второй абзац</p>
<p>третий абзац</p>
<p>четвертый абзац</p>

В нашем примере тэг P - тэг блочного уровня. Как только браузер встретит его в html-тексте, он начнет вывод с новой строки. Таким образом этот пример можно записать и так:

<p>первый абзац</p><p>второй абзац</p><p>третий абзац</p><p>четвертый абзац</p>

Браузер ориентируется только на теги и игнорирует переносы строк.

Блочные тэги

Такое же действие имеют все тэги блочного уровня. Наиболее употребительными будут тэги:

• P - абзац
• DIV - произвольный (общий) блок
• BLOCKQUOTE - блок цитаты
• H1, H2, H3, H4, H5, H6 - заголовки уровня 1-6
• UL - список (булечкой)
• OL - нумерованный список
• TABLE - таблица

Все эти тэги должны иметь обязательный закрывающий тэг.

Строчные тэги

Строчные тэги не создают новой строки. Обычно строчные тэги используются для визуального выделения в тексте. Примеры:

• B - полужирный текст
• I - курсив
• U - подчеркнутый
• S - зачеркнутый
• Q - цитата в строке
• SMALL - уменьшенный размер шрифта
• BIG - увеличенный размер шрифта
• SPAN - общий (универсальный) элемент
• SUB - нижний индекс
• SUP - верхний индекс

Все эти тэги так же должны иметь закрывающий парный тэг.

Вложенность тэгов

В HTML важно следить за вложенностью парных тэгов. То есть первый открытый тэг должен быть закрыт позже второго вложенного.

Пример неверной вложенности:

<b>текст текст <i>текст</b></i>

Правильный вариант:

<b>текст текст <i>текст</i></b>

Еще обратите внимание, что HTML-тэги можно указывать как заглавными, так и строчными буквами. Обычно используют строчные («маленькие») буквы в HTML-коде.

Строчные и блочные тэги одновременно

Очень простое правило: строчные тэги должны находиться внутри блочных. Блочные только внутри других блочных.

Пример неверной вложенности:

<b><p>текст</p></b>

Здесь блочный P находится внутри строчного B.

Правильно:

<p><b>текст</b></p>

Ссылка — тег A

Тег A (от anchor) используется для создания в тексте ссылок. Ссылка имеет атрибут HREF, в котором указывается адрес ссылки. Ссылка имеет обязательный закрывающий тег и ссылкой может быть обрамлён текст, изображение или блок. Примеры правильных ссылок:

<a href="https://max-3000.com/">Сайт MaxSite CMS</a>
<a href="адрес"><img src="адрес изображения"></a>
<h2><a href="адрес">Заголовок</a></h2>
<a href="адрес"><h2>Заголовок</h2></a>

Ошибочно считается, что A является строчным тегом и по правилам он должен находиться внутри блочного. Однако в HTML5 принято, что A является универсальным элементом, который может оборачивать любые другие элементы: текст, блоки, таблицы, списки и т.д. Главное условие — внутри A не должно быть других ссылок и интерактивных элементов, например кнопок.

Исходя из этого в HTML5 ссылки можно указывать и так:

<a href="адрес ссылки">
	<h1>Заголовок</h1>
	<h3>Подзаголовок</h3>
	<p>Текст</p>  
</a>

Размещение сложного HTML в тексте записи

Если html-код какой-то сложный и содержит вставки скриптов и размещен в несколько строк, то такой код правильно будет обрамить специальной конструкцией (в парсере default):

[html]
здесь размещаем html-код
[/html]

MaxSite CMS определит этот html-код и выведет его без изменений. Если этого не сделать, то система может обработать ваш код как обычный текст.

Глубина изучения HTML

Всё зависит от потребностей. Для обычных пользователей будет достаточно лишь получить общее представление о HTML. Если вы собираетесь менять какие-то части шаблона, то придется чуть больше разобраться какие для этого использовать тэги. Для новичков на текущем этапе будет достаточно лишь приведенной обзорной статьи, но при желании вы можете пройти мой бесплатный курс HTML.

Классы Berry CSS

Тэги могут иметь разные атрибуты, с помощью которых определяется их поведение или отображение. Одним из самых часто используемых атрибутов — это class.

<h2 class="t-red">Заголовок</h2>

В данном примере тэг H2 имеет класс t-red - он меняет цвет текста на красный.

Таким образом с помощью css-классов можно менять оформление текста в очень широких пределах. Названия классов и их количество зависит от используемого шаблона. Скажем в Default-шаблоне используются классы Berry CSS и мы также будем их использовать.

Почему мы за основу берём именно Berry CSS, а не какой-то другой css-фреймворк? Всё дело в том, что Berry CSS — это фреймворк атомарного уровня, где каждый css-класс имеет достаточно узкое назначение, часто совпадающее с его css-свойством. Такой подход позволяет упростить написание кода для HTML.

В «традиционном» варианте для каждого HTML-блока необходимо придумывать уникальный класс и после этого работать с css-файлом. При этом обычно происходит работа не с «голым» CSS, а с препроцессором Sass, которые требует компиляции в css-файл. Как только изменилась html-разметка, опять нужно вносить изменения в sass-файл, запускать компиляцию и цикл повторяется. Это достаточно утомительно.

С «атомарным» подходом всё значительно проще. Классы Berry CSS настраиваются только один раз, да и то, для случаев, если какого-то свойства не хватило (обычно фреймворк сразу перекрывает 90% потребностей). Поэтому работа вебмастера ограничена созданием html-разметки с готовыми для использования классами. Здесь не тратится время на придумывание названий классов (это головная боль...), и не нужно ждать sass-компиляции.

Кроме этого атомарные css-классы делают ваш код семантическим. Сравните:

<h1 class="my-header1">Заголовок</h1>

<h1 class="t-red600 bold t200 mar20-tb">Заголовок</h1>

В первом случае вам придётся обратиться к css/sass-файлу, чтобы понять какие свойства описывает класс .my-header1. Во втором — мы сразу видим, что:

• t-red600 — красный цвет (600 оттенок)
• bold — полужирный
• t200 — размер 200% (2rem)
• mar20-tb — внешние верхний и нижний отступы по 20px

Не стоит рассматривать верстку с помощью атомарных классов Berry с какой-то идеологической точки зрения. Вы всё также можете пользоваться абсолютно любым css-фреймворком. Но для наших задач семантика кода важна ещё и с точки зрения подачи учебного материала: он будет понятен и новичкам, и опытным вебмастерам.