Здравствуйте, читатели блога KABAKIN.RU! Сегодня, специально для тех, кто ждал новый урок Школы HTML и CSS я расскажу об оформлении текста. Данный вопрос я раскрою в двух статьях, так что, если не хотите ничего пропустить, то подписывайтесь на обновления блога или добавляйте его в закладки. Итак, сегодня вы узнаете про формирование абзацев и списков, а так же получите информацию, необходимую для работы со шрифтами.

Формируем абзацы и заголовки с помощью тегов

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

Для создания абзаца применяется тег-контейнер <p> Текст </p>.  С помощью атрибута align текст можно выровнять:

• <p align=”left”> – по левому краю;
• <p align=”right”> – по правому краю;
• <p align=”center”> – по центру.

При разделении текста на разделы применяются теги <div> и </div>.  Перед новым разделом вставляется пустая строка.

Если необходимо выделить текст и вовсе в отдельный блок с увеличенным отступом, то надо использовать теги <blockquote></blockquot>. Ну, а при желании выделить цитату, можно применить теги <cite> и </cite>.

Создание заголовков в тексте

При создании HTML-документа можно использовать заголовки шести уровней, для чего применяются теги <H1-6></H1-6>. Самый крупный заголовок – это <H1>, а <H2>, соответственно, самый маленький:

<H1> Заголовок первого уровня</H1>

<H2> Заголовок второго уровня</H2>

…

<H6> Заголовок шестого уровня</H6>

Заголовки отделяются от основного текста пустыми строками.

Горизонтальная линия, бегущая строка, цвет

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

• noshade (делает плоскую линию, так как изначально линия получается объемной);
• size (задается толщина линии в пикселях);
• width (задается длина линии в пикселях либо процентах).

Так же вы можете сделать бегущую строку с помощью тегов <marquee> и </marquee>, вроде такой: 

Блог Игоря Кабакина: SEO, блоггинг, реклама и PR, бизнес

Тег бегущей строки обладает следующими атрибутами:

• width (задается ширина поля строки в пикселях);
• height (задается высота поля бегущей строки в пикселях);
• direction (направление движения бегущей строки (left и right));
• benavior (способ движения бегущей строк (1) scroll – текст выходит из-за одного края страницы и скрывается за другим, 2) slide – текст строки  перемещается в сторону, определяемую атрибутом direction, где доходит до края страницы и останавливается, alternate – текст строки попеременно движется от одного края страницы к другому и обратно).

И горизонтальная линия и бегущая строка могут быть разного цвета, для чего им помогают атрибуты color (горизонтальная линия) и bgcolor (бегущая строка). Для работы атрибута задается специальный код, обозначающий тот или иной цвет. Соответствия цвета, кода и имени приводятся в таблице:

Соответствие цвета, имени и кода

Редактирование шрифта с помощью HTML

У любого шрифта есть два параметра: размер и гарнитура.

Гарнитура шрифта – это нюансы начертания и оформления шрифта. Так, все шрифты условно делят на три группы: рубленые, рукописные и с засечками. Установлено, что лучшего восприятия текста желательно использовать текст с засечками (Courier, Times).

В любом варианте гарнитуры есть несколько способов начертания: обычный шрифт, курсив и полужирный курсив.

Размер шрифта определяется в своеобразных пунктах. Так, для отображения основного текста чаще всего применяют шрифт размером 12 pt.

Свойства шрифта определяются с помощью тега-контейнера <font> и </font>, который наделяется тем или иным атрибутом (color (цвет), size (размер), face (гарнитура шрифта, либо список допустимых шрифтов). Размер шрифта, обычно, задается относительно размера, установленного в программе просмотра по умолчанию (font size=+4).

Помимо тегов <font> и </font> в работе со шрифтами используются следующие теги:

• <b> Текст </b> –  полужирное начертание;
• <u> Текст </u> – подчеркивание текста;
• <i>Текст </i> – курсивное начертание;
• <s> Текст </s> – зачеркнутый текст;
• <strong> Текст </strong> – усиленное выделение (полужирный шрифт);
• <big> Текст </big> – увеличение шрифта относительно обычного;
• <small> Текст </small> – уменьшение текста относительно обычного;
• <tt> Текст </tt> – пишущая машинка;
• ^Текст – ^{верхний} индекс;
• _Текст – _нижний индекс.

Шрифт во всем документе можно “окрасить” в тот или иной цвет с помощью атрибута text = “цвет” тега <body>.

Остались вопросы?

Этот урок подошел к концу. Если у вас есть вопросы, или какая-то информация требует уточнения, то пишите замечания в комментариях или отправляйте их лично мне (в разделе контакты есть вся информация по этому поводу). И оставайтесь с нами в школе HTML и CSS на блоге Игоря Кабакина!