Типовая страница элементов, редактируемых через CKEditor

Типовая страница демонстрирует возможности использования разметки HTML для оформления содержания страниц (контента), публикуемого посредством визуального редактора CKEditor. Контент-менеджеры и редакторы могут использовать страницу в качестве справочника по верстке типовых страниц и страниц новостей.

Типографика

В общем смысле Типографика — это искусство представления текстовой информации. Термин типографика происходит от греческого τύπος — отпечаток + γράφω — пишу). Типографикой определяется выбор гарнитуры, используемой для оформления текста, кегль шрифта, межстрочные расстояния и так далее.

Заголовки

Вы можете использовать все заголовки, доступные в языке <html>, - от <h1> до <h6> - для оформления ваших текстов.

h1 - Заголовок первого уровня

h2 - Заголовок второго уровня

h3 - Заголовок третьего уровня

h4 - Заголовок четвертого уровня

h5 - Заголовок пятого уровня

h6 - Заголовок шестого уровня

Заголовки со второстепенным текстом

Вы можете использовать второстепенный текст вместе с заголовком, для его написания необходимо использовать тег <small>
например <h1>текст заголовка <small>второстепенный текст</small></h1>

h1 - Заголовок первого уровня второстепенный текст

h2 - Заголовок второго уровня второстепенный текст

h3 - Заголовок третьего уровня второстепенный текст

h4 - Заголовок четвертого уровня второстепенный текст

h5 - Заголовок пятого уровня второстепенный текст

h6 - Заголовок шестого уровня второстепенный текст

Оформление основного текста

Для оформления основного текста страницы используется тег <p>. Этот тег устанавливается визуальным редактором по умолчанию на каждый абзац текста, если редактор не предпочтет использовать для абзаца другое оформление, более подходящее ему по смыслу.

Абзацы основного текста обычно разделяются интервалами, а не отступами "красной строки", как это принято в полиграфии.

Лид

<p class="lead">

Лид — это первый абзац статьи, информативный отрывок позволяющий захватить внимание читателя на данном материале. Класс, определяющий лид, нужно назначать на текстовые блоки, определяемые тегом <p>.

Оформление текста внутри абзаца

Для оформления и выделения текста внутри абзаца также используются специальные теги. Их принципиальным отличием является то, что применение таких тегов не вызывает обрыва строк абзаца. Чаще всего для выделения текста используется применение полужирного и курсивного начертаний с использованием тегов <b>, <strong> и, <i>, <em> соответственно.

полужирный <b>
полужирный <strong>
курсивный <em>
курсивный <i>

Текст внутри абзаца выделяют также с использованием тега <del> - для перечеркивания, и тегов, <ins>, <u> для подчеркивания.

~~перечеркивание <del>~~
подчеркивание <u>
подчеркивание <ins>
подчёркивание текста без семантической нагрузки <span class="underline">

При необходимости уменьшить текст внутри абзаца используют тег <small>. Для подсветки (маркирования) - тег <mark>.

уменьшение текста <small>
подсветка текста <mark>
подсветка текста без семантической нагрузки <span class="mark">

Внутри текста могут быть использованы надстрочные и подстрочные индексты (обозначаются тегами <sup>, <sub>). Важно следить за тем, чтобы элементы надстрочных и подстрочных индексов не увеличивали высоту строки, потому что это портит вид текстового блока. Пример: 2³. Еще пример: H₂SO₄. В обоих случаях высота строки от индексов не должна меняться. Если отступ между первой и второй строками увеличился, значит, что-то сделано неправильно.

Ссылки

Как правило на сайтах специально оформляют ссылки лишь для ограниченного числа состояний состояний Просто ссылки, Активные ссылки и ссылки на которые навели мышкой, и Посещенные ссылки (кликните для реализации эффекта оформления).

То есть определяются следующие состояния:

Непосещенная ссылка
- Непосещенная ссылка, на которую навели курсор мыши
- Непосещенная ссылка под фокусом
- Непосещенная активная ссылка

Посещенная ссылка
- Посещенная ссылка, на которую навели курсор мыши
- Посещенная ссылка под фокусом
- Посещенная активная ссылка

Однако для оформления ссылок у нас имеется больше возможностей, чем можно ожидать. Вот расширенный перечень:
<a:link>позволяет специально оформить все ещё непосещенные ссылки
<a:visited>позволяет специально оформить все уже посещенные ссылки (кликните для реализации эффекта оформления)
<a[href^="http"]>позволяет специально оформить все внешние ссылки, то есть ведущие на другие сайты
<a[target="_blank"]>позволяет специально оформить все ссылки, открывающиеся в новом окне браузера
<a[href*="webmotor"]>позволяет специально оформить все ссылки, ведущие на сайты, содержащие в адресе любое слово, например "webmotor"
<a[href$=".pdf"]>позволяет специально оформить все ссылки, ведущие на файлы в формате "pdf"

Проектировщикам и дизайнерам не нужно забывать и о возможностях использования специальных оформлений ссылок для печатающих устройств. Например, конструкция a[href]:after{ content: '('attr(href)')';} позволит после текста ссылки отобразить её адрес при выводе страницы на принтер.

Списки

Список в типографике — способ оформления различного рода перечислений или перечней. Каждый элемент списка начинается с маркера списка или номера-буквы, и весь текст списка не должен выступать влево за них. Списки могут быть нумерованные и ненумерованные, одноуровневые (простые) или многоуровневые.

Пример оформления простого ненумерованного списка:

<ul>
 <li>пункт списка</li>
 <li>пункт списка</li>
</ul>

Длинный пункт списка, который является законченным по смыслу предложением, набирается с заглавной буквы, в конце предложения ставится точка.
Еще один пункт списка, который оканчивается точкой и является законченным по смыслу предложением.
Если пункты списка короткие, не являются самостоятельной законченной конструкцией и грамматически тесно связаны с предшествующей списку вводной фразой, они должны начинаться со строчной буквы и заканчиваться точкой с запятой (в конце последнего пункта — точка).
пункт списка, который связан по смыслу с вводной текстовой частью;
второй пункт для примера;
третий пункт.

Пример оформления простого нумерованного списка:

<ol>
 <li>пункт списка</li>
 <li>пункт списка</li>
</ol>

Длинный пункт списка, который является законченным по смыслу предложением, набирается с заглавной буквы, в конце предложения ставится точка.
Еще один пункт списка, который оканчивается точкой и является законченным по смыслу предложением.
Если пункты списка короткие, не являются самостоятельной законченной конструкцией и грамматически тесно связаны с предшествующей списку вводной фразой, они должны начинаться со строчной буквы и заканчиваться точкой с запятой (в конце последнего пункта — точка).
пункт списка, который связан по смыслу с вводной текстовой частью;
второй пункт для примера;
третий пункт.

Пример оформления многоуровневого ненумерованного списка:

<ul>
 <li>пункт списка</li>
 <li>пункт списка
  <ul>
   <li>подпункт списка</li>
   <li>подпункт списка</li>
  </ul>
 </li>
</ul>

Пункт многоуровневого ненумерованного списка могут иметь разное оформление маркеров для пунктов, находящихся на разных уровнях.
Этот пункт первого уровня содержит подпункты (пункты второго уровня):
- Пункт второго уровня может быть длинным законченным по смыслу предложением, и тогда он набирается с заглавной буквы, в конце предложения ставится точка.
- Коротокие пункты списка второго уровня подчиняются тем же правилам оформления, что и пункты первого уровня, они должны начинаться со строчной буквы и заканчиваться точкой с запятой (в конце последнего пункта — точка).
- пункт списка, который связан по смыслу с вводной текстовой частью;
- второй короткий пункт для примера;
- третий пункт.
Не стоит использовать больше двух уровней в списках. С такими списками неудобно работать: они плохо прочитываются и читатель может запутаться в порядке вложенности пунктов.

Пример оформления многоуровневого нумерованного списка:

<ol>
 <li>пункт списка</li>
 <li>пункт списка
  <ol>
   <li>подпункт списка</li>
   <li>подпункт списка</li>
  </ol>
 </li>
</ol>

Пункты многоуровневого нумерованного списка могут иметь разное оформление номеров-букв для пунктов, находящихся на разных уровнях.
Этот пункт первого уровня содержит подпункты (пункты второго уровня):
1. Пункт второго уровня может быть длинным законченным по смыслу предложением, и тогда он набирается с заглавной буквы, в конце предложения ставится точка.
2. Коротокие пункты списка второго уровня подчиняются тем же правилам оформления, что и пункты первого уровня, они должны начинаться со строчной буквы и заканчиваться точкой с запятой (в конце последнего пункта — точка).
3. пункт списка, который связан по смыслу с вводной текстовой частью;
4. второй короткий пункт для примера;
5. третий пункт.
Не стоит использовать больше двух уровней в списках. С такими списками неудобно работать: они плохо прочитываются и читатель может запутаться в порядке вложенности пунктов.

Базовая таблица

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

создание таблицы без стилей

<table>

такая таблица не имеет классов и по умолчанию растянется на всю ширину блока

заголовочная ячейка внутри шапки таблицы	заголовочная ячейка внутри шапки таблицы	заголовочная ячейка внутри шапки таблицы	заголовочная ячейка внутри шапки таблицы	заголовочная ячейка внутри шапки таблицы
заголовочная ячейка внутри тела таблицы	простая ячейка внутри тела таблицы	простая ячейка внутри тела таблицы	простая ячейка внутри тела таблицы	простая ячейка внутри тела таблицы
заголовочная ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы
Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы

Базовая таблица

данная таблица будет иметь вид стилизованный под цвета сайта

<table class="table"> Добавить класс можно указав его назавние в дополнительных настройках таблицы в визуальном редакторе.

заголовочная ячейка внутри шапки таблицы	заголовочная ячейка внутри шапки таблицы	заголовочная ячейка внутри шапки таблицы	заголовочная ячейка внутри шапки таблицы	заголовочная ячейка внутри шапки таблицы
заголовочная ячейка внутри тела таблицы	простая ячейка внутри тела таблицы	простая ячейка внутри тела таблицы	простая ячейка внутри тела таблицы	простая ячейка внутри тела таблицы
заголовочная ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы
Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы

Таблица с черезстрочным оформлением фона

данная таблица будет иметь вид стилизованный под цвета сайта и иметь полосы на рядах

<table class="table table-striped"> Добавить класс можно указав его назавние в дополнительных настройках таблицы в визуальном редакторе.

заголовочная ячейка внутри шапки таблицы	заголовочная ячейка внутри шапки таблицы	заголовочная ячейка внутри шапки таблицы	заголовочная ячейка внутри шапки таблицы	заголовочная ячейка внутри шапки таблицы
заголовочная ячейка внутри тела таблицы	простая ячейка внутри тела таблицы	простая ячейка внутри тела таблицы	простая ячейка внутри тела таблицы	простая ячейка внутри тела таблицы
заголовочная ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы
Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы

Таблица с подсветкой строк при наведении мышки

<table class="table table-hover"> Добавить класс можно указав его назавние в дополнительных настройках таблицы в визуальном редакторе. Подсветка строки распространяется только на строки группы "боди".

заголовочная ячейка внутри шапки таблицы	заголовочная ячейка внутри шапки таблицы	заголовочная ячейка внутри шапки таблицы	заголовочная ячейка внутри шапки таблицы	заголовочная ячейка внутри шапки таблицы
заголовочная ячейка внутри тела таблицы	простая ячейка внутри тела таблицы	простая ячейка внутри тела таблицы	простая ячейка внутри тела таблицы	простая ячейка внутри тела таблицы
заголовочная ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы
Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы	Простая ячейка внутри тела таблицы

Специальные классы для таблиц можно использовать как по отдельности, так и вместе. То есть при необходимости можно создать таблицу с черезстрочным оформлением и подсветкой строк при наведении мышки.

Сноски

Ссылка¹ на сноску и название сноски нужно заключать в элемент «Сноска» (класс footnote). Таким образом сохраняется связь между ссылкой на сноску и самой сноской².

<a href="#footnote-1" class="footnote">Сноска 1<sup>1</sup></a>

<a href="#footnote-2" class="footnote">Сноска 2<sup>2</sup></a>

<ol class="footnotes">
  <li id="footnote-1">цель сноски 1</li>
  <li id="footnote-2">цель сноски 2</li>
</ol>

А это текст сноски, который помещается в элемент «Сноски» (класс footnotes).
А это текст сноски, который помещается в элемент «Сноски» (класс footnotes).

Шаблон для размещения цитаты

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

<blockquote cite="Источник цитаты">
  <h4>Заголовок цитаты</h4>
  <p>Текст цитаты</p>
  <small>Автор цитаты</small>
</blockquote>

Цитата

Простота — необходимое условие прекрасного.
Цитата не есть выписка. Цитата есть цикада. Неумолкаемость ей свойственна. Вцепившись в воздух, она его не отпускает.

Л. Н. Толстой.

При условии оформления границ цитаты и ссылки на источник, цитирование не является плагиатом. Авторские права на содержание цитаты принадлежат автору цитаты, потому человек, который публикует её, не несёт ответственности за её содержание.

Необязательно использовать все элементы шаблона. Можно оставить только нужное.

<blockquote cite="Источник цитаты">
  <p>Текст цитаты</p>
  <small>Автор цитаты</small>
</blockquote>

Жена — это удобно! Это лучше, чем органайзер.

Дмитрий Чугунов

Оформление элемента важно

<div class="important">
  <h3>Заголовок для элемента важно</h3>
  <p>Текст элемента важно</p>
</div>

Заголовок для элемента важно

Элемент «Важно». (класс important), который используется для выделения особо важной информации. И еще немного специально написанного текста, чтобы получилось несколько строк для наглядности.

Оформление элемента комментарий

<div class="comment">
  <h3>Комментарий</h3>
  <p>Текст элемента комментарий</p>
</div>

Комментарий

Элемент «Комментарий» (класс comment) применяется к пояснительному тексту. И еще немного специально написанного текста, чтобы получилось несколько строк для наглядности.