Книга по MaxSite CMS

Руководство для новичков

HTML — язык разметки. Основа

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

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

Пример просмотра HTML

Сам HTML представляет собой обычный текст, который формируется динамически, как в MaxSite CMS, или фиксированный в html-файлах. В любом случае следует уяснить, что HTML — краеугольный камень Интернета, а значит независимо от своей подготовки, придется выучить некоторые основы 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-тэги имеют какой-то из этих вариантов написания:

<тег>
<тег атрибут1="значение" атрибут2="значение">
<тег атрибут1="значение" атрибут2="значение">...</тег>

Сколько всего тэгов. Справочник 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-тэги можно указывать как заглавными, так и строчными буквами. Но я рекомендую придерживаться какого-то своего стиля оформления. Я, например, предпочитаю строчные буквы в HTML-коде.

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

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

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

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

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

Правильно:

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

Ссылка — тег A

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

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

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

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

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

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

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

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

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

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

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