Шаблоны для новичков. Урок 1. Основы работы с MaxSite CMS. HTML

Так уж получается, что шаблонов для MaxSite CMS мало. Поэтому, любой, кто решит завести себе сайт, неизбежно столкнется с проблемой создания нового или изменения существующего шаблона. Мои статьи в основном были обращены на верстальщиков и программистов, которым не нужно объяснять элементарные вещи вебмастеринга.

Благодаря небольшому обсуждению (особенно Владимиру Точилину с его дельными советами), я понял (или мне разжевали :) ) что нет смысла больше зазывать (приглашать, просить) спецов, а есть смысл просто научить тех, кто хочет учиться; кто принимает MaxSite CMS и готов на её базе научиться делать шаблоны.

В любом случае новый курс расчитан на полных чайников новичков не только в MaxSite CMS, но и в верстке, и в программировании. Именно по этой причине уроки будут детально расписаны и будет куча объяснялок.

Тест-задание: установить MaxSite CMS

Если вы самостоятельно справились с установкой MaxSite CMS, то нет никаких преград, чтобы осилить и работу с шаблонами. Установка очень простая и всё делается автоматом, нужно только указать некоторые параметры сервера, базы данных и т.п.

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

Считайте, что умение установить MaxSite CMS - является минимальным уровнем подоготовки. :)

Базовые основы работы с MaxSite CMS

Тут я не буду повторяться - нужно научиться работать с админ-панелью. Здесь ничего сложного нет, просто один раз попробовать и дальше уже никаких вопросов не возникнет.

Единственный момент, на который я хочу обратить особое внимание - это обязательное использование невизуального редактора Editor markItUp. В MaxSite CMS по-умолчанию используется визуальный редактор. Достаточно простой, но с присущей для всех визуальных редакторов проблемой - HTML-код форматирования определяется браузером. Поэтому текст, набранный в Опере будет иметь другой HTML-код, чем тот же текст и оформление сделанные в FireFox'е.

Невизуальные редактора не имеют таких проблем, а для оформления текста используется либо HTML-код (что требует некоторых знаний), либо BB-код (простой и эффективный).

Для включения Editor markItUp нужно активировать плагин editor_markitup. Для работы с BB-кодом - плагин bbcode.

Всё, получили готовый редактор.

Можно работать.

Что такое HTML

HTML - это язык разметки текста. Браузер знает этот язык и согласно ему отображает форматированный текст, графику и прочее оформление сайта. Нажмите в браузере Ctrl+U (иходный код страницы) и убедитесь, что здесь присутствует обычный текст.

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. Также в Сети можно найти и справочник в виде отдельного файла (как правило chm - справка windows). Но это уже на любителя.

Виды тэгов

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

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

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

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

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

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

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

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

Блочные тэги

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

• 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>

Практика!

Всё, пока хватит теории, пора перейти к практике. :)

В отличие от других учебников все действия мы будем (пока) делать прямо в админке MaxSite CMS. Делаем новую запись и пишем

Теперь попробуйте разместить произвольный текст внутри html и посмотреть как он отбражается на странице.

Например:

[html]
текст
текст
текст
[/html]

На сайте будет выглядеть в одну строчку:

Почему?

Небольшое пояснение насчет использования <br> в текстовом редакторе MaxSite CMS. Вместо этого тэга используйте bb-код [br]. Это связано с особенностью учета переносов строк (Enter).

Попробуйе поиграть с оформлением текста. Расставьте полужирный текст, курсив. Сделайте заголовки.

Заключение

Сейчас не стоит задача выучить все HTML-тэги. Более того, дальше по ходу обучения, мы увидим, что большинство из них могут вообще не пригодиться. Но запомните, что знание самых простых тэгов здорово облегчит вам жизнь при оформлении текстов статей. Ну и, конечно, знание этих основ необходимо для работы с шаблонами - конечной цели нашего обучения. :)

««« Урок 2