Показать/Скрыть примеры HTML-кода

JB-CSS Pack — пакет стилей для быстрой верстки от Joomla-book.ru

Пример простого текста с картинками

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.

sampleImageLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

sampleImageSed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.

sampleImageСъешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей.

H1 Заголовок 1 уровня

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.

H2 Заголовок 2 уровня

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.

H3 Заголовок 3 уровня

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.

H4 Заголовок 4 уровня

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.

H5 Заголовок 5 уровня

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.

H6 Заголовок 6 уровня

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.

Тег HR<hr/>
<p style="text-align:left;"> ... </p>

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim. Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.

<p style="text-align:right;"> ... </p>

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim. Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.

<p style="text-align:justify;"> ... </p>

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim. Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.

<p style="text-align:center;"> ... </p>

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.

Длинная цитата. Текст, традиционно отображается как выровненный блок с отступами слева и справа, а также с отбивкой сверху и снизу. Визуальные агенты пользователей обычно генерируют элемент BLOCKQUOTE как блок с отступом.

Вторая длинная цитата.

<pre>первая строка\nвторая строка</pre>
Тег <pre> Первая тестовая строка
               и вторая

Основные теги для форматирования текста <table>

Примеры тегов форматирования контента <table> <caption>
Имя тега<thead> <th> Внешний вид<thead> <th> Код и краткое описание<thead> <th>
Подвал таблицы
<tfoot> <td>
Подвал таблицы
<tfoot> <th>
Подвал таблицы
<tfoot> <td>
Основной набор тегов
Ссылка Это пример обычной ссылки в контенте <a href="javascript:void(0)">текст</a>

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок.

Полужирное выделение Это полужирное b в тексте (b)
Это полужирное в тексте (strong)
<b>полужирное</b>, <strong>полужирное</strong>

Устанавливают жирное начертание шрифта.

Курсив Это курсивный текст (i)
Это курсивный текст (em)
<i>курсив</i>, <em>курсив</em>

Устанавливает курсивное начертание шрифта.

Подчеркивание Это подчеркивание в тексте <u>подчеркнуто</u>

Добавляет подчеркивание к тексту. Этот тег осуждается спецификацией HTML, взамен рекомендуется использовать стили.

Зачеркнутый Это зачеркнутый текст (s)
Это зачеркнутый текст (strike)
<s>зачеркнуто</s> и <strike>зачеркнуто</strike>

Тег <s> отображает текст как перечеркнутый.

Осуждатся спецификацией HTML, взамен рекомендуется использовать стили.

Короткая цитата Это пример цитаты <q>цитата</q>

Тег <q> используется для выделения в тексте цитат.

Дополнительный набор тегов
Нижний индекс Нижний индекс x1, x2 в тексте x<sub>1</sub> и x<sub>2</sub>

Отображает шрифт в виде нижнего индекса.

Верхний индекс Верхний индекс x2, x3 в тексте x<sup>2</sup> и x<sup>3</sup>

Отображает шрифт в виде верхнего индекса.

Удаленный текст Это удаленный текст <del>удалено</del>

Тег <del> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.

Адрес Пример адреса:
г.Москва, ул. Солнечная, сайт ссылка на сайт в теле тега
<address>г.Москва <a href="javascript:void(0)">ссылка</a></address>

Тег <address> предназначен для хранения информации об авторе и может включать в себя любые элементы HTML вроде ссылок, текста, выделений и т.д.

Аббревиатура Это CMS — Это aббревиатура без [title]
Это CMS — Это aббревиатура без [title] в ссылке
Это CMS — Это aббревиатура
Это CMS — Это aббревиатура в ссылке
<abbr title="Content Management System">CMS</abbr>

Тег <abbr> указывает, что последовательность символов является аббревиатурой.

С помощью параметра title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы.

Акроним Слово dos — Это акроним без [title]
Слово dos — Это акроним без [title] в ссылке
Слово dos — Это акроним
Слово dos — Это акроним в ссылки
<acronym>DOS</acronym>

Элемент <acronym> указывает на то, что текст является акронимом.

В отличие от аббревиатуры, акроним — это устоявшееся сокращение, которое применяется как самостоятельное слово.

Увеличение текста Это увеличенный текст
Это вложенный увеличенный текст
<big>текст</big>

Тег <big> увеличивает размер шрифта на единицу по сравнению с обычным текстом.

В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3.

Таким образом, добавление тега <big> увеличивает текст на одну условную единицу.

Сноска Это пример текста сноски или цитаты <cite>сноска</cite>

Тег <cite> помечает текст как цитату или сноску на другой материал.

Код Это пример кода программы <code>код программы</code>

Тег <code> предназначен для отображения одной или нескольких строк текста, который представляет собой программный код.

Новый термин Это пример термина <dfn>термин</dfn>

Как правило, в документе, когда упоминается новый термин, он выделяется курсивом и дается его определение.

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

Сочетание клавиш Это <Ctrl>+<Alt>+<Delete> сочетание клавиш <kbd>Ctrl+Alt+Delete</kbd>

Тег <kbd> используется для обозначения текста, который набирается на клавиатуре или для сочетания клавиш.

Результат кода Это результат кода <samp>результат</samp>

Элемент <samp> используется для отображения текста, который является результатом вывода компьютерной программы или скрипта.

Уменьшение Это уменьшение текста
Это двойное уменьшение текста
<small>результат</small>

Тег <small> уменьшает размер шрифта на единицу по сравнению с обычным текстом.

Текстовый контейнер Это контейнер текста <span>результат</span>

Тег <span> предназначен для определения встроенных элементов документа.

Форматирование Это физическое форматирование текста <tt>Форматирование</tt>

Этот тег относится к группе тегов физического форматирования.

Компьютерные переменные Это переменная $GLOBALS в тексте <var>переменная</var>

Тег <var> используется для выделения переменных компьютерных программ.

Экспериментальные возможности пакета
Внешняя ссылка Это пример внешней ссылки в контенте <a target="_blank" href="http://joomla-book.ru">ссылка</a>

Тег <a>с атрибутом [target="_blank"] или [class="external"] предназначен для создания внешних ссылок.

Всплывающая подсказка CSS Это ссылка с подсказкойПодсказка на css (без JavaScript) в тексте
Это простой текст с подсказкойПодсказка на css (без JavaScript) в тексте
<a class="tooltip" href="javascript:void(0)">текст<span>подсказка</span></a>
<span class="tooltip">текст<span>текст подсказки</span></span>

Добавляем всплывающую подсказку на css (работает без JavaScript)

Вложенный маркированный список <ul><li>...</li> <li>...</li></ul>
Вложенный нумерованный список <ol><li>...</li> <li>...</li></ol>
  1. Элемент 1
  2. Элемент 2
  3. Элемент 3
    1. Элемент 1 вложенный на 2 уровне
    2. Элемент 2 вложенный на 2 уровне
      1. Элемент 1 вложенный на 3 уровне
      2. Элемент 2 вложенный на 3 уровне
    3. Элемент 2 вложенный на 2 уровне
      1. Элемент 1 вложенный на 3 уровне
      2. Элемент 2 вложенный на 3 уровне
  4. Элемент 4
  5. Элемент 5
Смешанный список
  1. Элемент 1
  2. Элемент 2
  3. Элемент 3
    • Элемент 1 вложенный на 2 уровне
    • Элемент 2 вложенный на 2 уровне
      • Элемент 1 вложенный на 3 уровне
      • Элемент 2 вложенный на 3 уровне
    • Элемент 2 вложенный на 2 уровне
      • Элемент 1 вложенный на 3 уровне
      • Элемент 2 вложенный на 3 уровне
  4. Элемент 4
  5. Элемент 5
Список терминов <dl><dt>...</dt><dd>...</dd> </dl>
Формат GIF
Формат графических файлов, широко применяемый при создании сайтов. GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения.
Формат JPEG
Популярный формат графических файлов, широко применяемый при создании сайтов и хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет яркость и оттенки цветов в фотографиях. Данный формат называют сжатием с потерями, поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может исказить деталь в рисунке, особенно содержащий текст или изображение с четкими краями. Формат JPEG не поддерживает прозрачность, когда вы сохраняете фотографию в формате JPEG, прозрачные пиксели заполняются определенным цветом.
Форма <form> ... </form>
Заголовок группы элементов формы

Пример элементов с постоянной шириной и автоочисткой

Элементы выравниваются по ширине класса «form-weight-normal», сейчас она равна 400px.

Автозаполнение реализуется за счет класса «autoclear» и jQuery. При активации элемента добавляется класс «autoclear-normalcolor»

Пример элементов с ошибкой при отправке

Подсветка ошибки ввода происходит с помощью добавления класса «error»

Кросброузерная вставка Flash-объектов
<script type="text/javascript">
    $('#flash').flash({
        swf: './temp/flash.swf',
        width: 320,
        height: 240
    });
</script>
Алтернативный текст

Valid XHTML 1.0 Transitional Правильный CSS!