Работа с текстом

При написании данной лекции использовались следующие материалы: Дронов В. "HTML5, CSS 3 и Web 2.0. Разработка современных веб-сайтов" (Глава 2); B. Lawson, R. Sharp " Introducing HTML 5".

Не претендуя на оригинальность, мы начнем рассматривать html-теги с самых азов, т.е. с тегов работы с текстовой информацией.

Примечание: тег – базовый элемент языка разметки.

Основные теги работы с текстом

Теги, рассматриваемые в данном разделе, не являются новшеством стандарта HTML5, так что если вашей целью является исключительно знакомство с новыми элементами, можете перейти к следующему разделу настоящей лекции.

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

Точно также, если вы изложите свои мысли на бумаге, просто в виде потока слов, немного найдется желающих их прочитать. Вернее, в зависимости от содержания, желающие могут и быть, но, говоря о современной веб - разработке, стоит понимать, что если глазу нового пользователя не за что "зацепиться", то долго пользователь на странице не останется. Какой толк от сверхинтересного поста, если его все равно никто не читает?

На ум сразу же приходит "Tl;dr" – коммент, который часто встречается в длинных текстах, в которых как раз не за что зацепиться. "Tl;dr" не что иное, как "Too long; didn't read", если подыскивать аналог из российской части Интернета, то это "многа букаф".

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

Абзацы

Для разбиения на абзацы используется парный тег <p>.

Примечание. Парным называется тег, состоящий из двух частей – открывающей и закрывающей. Открывающая часть оформляется следующим образом <...>, закрывающая – </...>.

Тег <p> содержит всего один атрибут align, который отображает тип выравнивая текста и может принимать следующие значения:

Примечание. Атрибутом называется дополнительный параметр тега.

<p> является блочным элементом, это значит, что содержимое тега занимает всю доступную ширину, а высота элемента определяется высотой его содержимого.

Разрыв строк

В случае, если необходимо перенести текст на следующую строку, не начиная при этом новый абзац (например, в случае публикации стихов) используется непарный тег <br>.

Пример:

<p> The Doors. Shaman's Blues.</p>

<p> There will never be <br>
Another one like you<br>
There will never be<br>
Another one who can<br>
Do the things you do....</p>

Заголовки

HTML различает шесть уровней заголовков, которые отличаются размером текста. Заголовок первого уровня отображается шрифтом самого большого размера, заголовок шестого – таким же размером, что и основной текст. Заголовки также, как и абзацы, являются блочными элементами.

Оформляются заголовки, соответственно, следующими парными тегами:

<H1> Заголовок 1го уровня </H1>
<H2> Заголовок 2го уровня </H2>
.....................................
<H6> Заголовок 6го уровня </H6>

Списки

В HTML имеются следующие виды списков:

1. Нумерованный список (<ol>).

• Маркированный список (<ul>).

Каждый пункт списка помещается в парный тег <li>. Таким образом, код создания нумерованного списка будет выглядеть так:

<ol>
<li> Первый элемент нумерованного списка </li>
<li> Второй элемент нумерованного списка </li>
<li> Третий элемент нумерованного списка </li>
</ol>

Маркированный список задается аналогичным образом.

Помимо нумерованного и маркированного списков, также следует отметить тег <dl>, позволяющий создать список определений.

Тег <dl> используется совместно с парными тегами <dt> и <dd>. В тег <dt> помещается термин, в тег <dd> - его определение.

Пример кода создания списка определений представлен ниже:

<dl>

<dt> Термин №1 </dt>
<dd> Определение термина №1</dd>

<dt> Термин №2</dt>
<dd> Определение термина №2</dd>

</dl>

Цитаты

При необходимости выделения цитаты, в html используется парный тег <blockquote>.

К примеру, код описания цитаты Тима Бернерса-Ли будет выглядеть следующим образом:

<blockquote>
<p>Было время, когда люди считали, что Интернет – это другой мир. 
Теперь они понимают, что Интернет – это инструмент, который мы используем в этом мире.</p>
</blockquote>

Горизонтальные линии

Еще одним способом выделения участков текста является проведение горизонтальных линий. Для этого используется непарный тег <hr>, создаваемая при его помощи линия будет проведена во всю ширину родительского элемента .

Вставка специальных символов

Ряд текстовых символов (&, ", <, > и т.д.) не могут быть добавлены в html код "как есть". Поэтому, для вывода их в браузере используется ASCII - код этих символов. В таблице ниже приведен перечень основных символов и их кодов:

Более полный перечень см. в списке источников для самостоятельного изучения.

Работа со шрифтом

Рассмотренные ранее теги используются для изменения вида текста в целом, помимо них также существует ряд тегов, позволяющие изменять непосредственно шрифт отдельных участков текста, а именно:

При помощи парного тега <font> управлять размером шрифта, его гарнитурой и цветом, соответственно при помощи атрибутов color, face и size.

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

Теги работы с текстом, появившиеся в HTML5

Рассмотрим ряд тегов для работы с текстом веб - страницы, которые появились в стандарте HTML5.

<section>

Парный тег, задающий блок (секцию) элементов.

<header>

Парный тег, определяющий начало документа (секции).

<footer>

Парный тег, определяющий окончание документа (секции).

<hgroup>

Парный тег, определяющий группу заголовков.

<time>

Парный тег, определяющий время, или дату.

<nav>

Парный тег, определяющий группу ссылок (навигационное меню).

<mark>

Парный тег, определяющий важную смысловую часть текста.

<aside>

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

<article>

Парный тег. Тег представляет собой компонент страницы, содержащей контент, предназначенный для самостоятельного распространения. Иными словами в тег <article> могут быть помещены: форумный пост, статья, запись блога, комментарий или иной другой независимый элемент содержимого. Аналогично <section> используется для секционирования контента.

Это далеко не полный список тегов, привнесенный стандартом HTML5 в жизни веб - разработчика. Внимательный читатель, наверняка, уже заметил, что эти теги не влияют явно на внешний вид html - документа. Большинство из них являются своего рода "указателями", поясняющими как следует трактовать размещенный в их рамках контент.

Глобальные атрибуты

Как мы уже упоминали, атрибут задает дополнительные параметры тега. Атрибут оформляется следующим образом:

имя атрибута = значение атрибута (к примеру, align = center)

Атрибуты могут быть, как обязательными, так и необязательными.

Ряд атрибутов HTML5 поддерживается большинством элементов и называется глобальными. С их перечнем можно ознакомиться в списке источников для самостоятельного изучения. необходимость их использования будет пояснена нами позже, в рамках лекций о JavaScript и CSS.

Ключевые термины и определения

Тег – элемент языка разметки.

Атрибут – дополнительный параметр тега, содержащий дополнительную информацию для браузера.

Краткие итоги

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

Список материалов для самостоятельного изучения

1. Основы работы с текстом в html

   http://www.inetprofy.ru/component/content/article/8-articles/95-html-.html
2. http://uznaykak.info/uroki-html/izuchaem-html-urok-3-atributy-i-zagolovki.html

3. Вставка специальных символов

   http://design4free.narod.ru/articles/td_1.html

4. Новые теги в HTML5

   http://ab-w.net/HTML5/html5.php

5. Глобальные атрибуты

   http://www.exlab.net/html/attributes.html

6. http://w3pro.ru/book/spravochnik-html-5/globalnye-atributy

7. Тег <article>

   http://html5doctor.com/the-article-element/