Отделяем заголовки от абзацев или структурирование текста на html странице
Оглавление:
Здравствуйте, уважаемые читатели блога! Сегодня мы поговорим о структурировании текста на web-страницах, об особенностях его отображения и рассмотрим как разбить текст на отдельные логические фрагменты: заголовки, абзацы, списки.
Для работы с текстом в html есть множество тегов, но для начала необходимо поговорить о некоторых особенностях отображения текста в браузере. Во-первых, любое количество пробелов, знаков табуляции и переносов строк, идущих подряд, отображается как один пробел. Т.е. позиционировать текст с помощью пробелов и знаков табуляций не получится.
Для примера эти строки на web-странице будут отображаться одинаково не смотря на их разное написание:
<p>Добро пожаловать на наш сайт!</p>
<p>Добро
пожаловать на наш сайт!</p>
<p>Добро пожаловать
на наш
сайт!</p>
Исключение составляет тег <pre>, внутри которого все пробелы и переносы отображаются как есть.
Во-вторых, текст занимает ширину окна браузера. Если длинная строка текста шире окна браузера, то в местах пробелов или дефиса автоматически будут вставлены переносы строк. Если в строке нет ни пробелов, ни дефисов, а строка не умещается по ширине окна, то в браузере появится горизонтальная полоса прокрутки.
Теперь перейдем к рассмотрению структурных элементов текста в разметке html.
Абзацы в языке HTML
Обычно, блоки текста разделяют между собой абзацами(параграфами). Это облегчает чтение больших кусков текста. Язык HTML для создания абзаца содержит парный тег <p>. Синтаксис создания абзацев следующий:
<p>Это первый абзац.</p>
<p>А это уже второй абзац</p>
Абзацы на html-странице отделяются небольшими отступом от предыдущего и последующего элементов. Тег <p> также является блочным элементом. Что такое блочные элементы я писал в статье «Как создать web-страницу». Напомню, что блочные элементы характеризуются тем, что занимают всю доступную ширину html-страницы, высота элемента определяется его содержимым, и он всегда начинается с новой строки.
Рассмотрим пример применения абзацев на web-странице. Откроем текстовый редактор, наберем HTML-код и сохраним с расширением html:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Сайт об автомобилях.</title>
</head>
<body>
<p>Сайт об автомобилях.</p>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
<p>Научным языком автомобиль это:</p>
<p>Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.</p>
<p>Классификация автомобилей</p>
<p>Автомобили бывают следующих типов:</p>
<p>Легковой;</p>
<p>Грузовой;</p>
<p>Внедорожник;</p>
<p>Багги;</p>
<p>Пикап;</p>
<p>Спортивный;</p>
<p>Гоночный.</p>
</body>
</html>
При открытии данного файла будет примерно такая картина:
Пока, что наша страница содержит одни абзацы.
Для выравнивания текста в абзаце тег <p> поддерживает атрибут align. Он может принимать одно из четырех значений:
- left — выравнивание текста по левому краю;
- center — выравнивание текста по центру;
- right — выравнивание текста по правому краю;
- justify — выравнивание по ширине, т.е. выравнивание текста одновременно по правому и левому краю. Для этого браузер помещает пробелы между словами.
По умолчанию атрибут align имеет значение left. Пример использования атрибута align:
<p align="left">Этот текст в абзаце на html странице будет выровнен по левому краю!</p>
<p align="center">Этот текст в браузере отобразится по центру страницы!</p>
<p align="right">Этот текст будет выровнен по правому краю!</p>
<p align="justify">А этот большой кусок текста браузер выровняет по ширине, т.е. одновременно по правому и левому краю! Для этого web-обозреватель вставит между словами дополнительные пробелы и абзац примет аккуратный вид, удобный для чтения!</p>
И так это отобразится в браузере:
Заголовки в языке HTML
Для выделения разделов текста на web-странице применяются заголовки. В html существует шесть уровней заголовков. Самым верхним уровнем является уровень 1 — тег <h1>, а самым нижним — уровень 6, тег <h6>. Теги <h1> — <h6 являются блочными элементами страницы. Содержимое заголовка первого уровня отображается самым крупным шрифтом жирного начертания, а заголовки последнего шестого уровня — самым мелким.
Синтаксис создания заголовков:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовки html</title>
</head>
<body>
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
</body>
</html>
Результат:
Также заголовки играют важную роль при раскрутке сайта, так как поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка.
Добавим заголовки в нашу страницу:
<h1>Сайт об автомобилях.</h1>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
<p>Научным языком автомобиль это:</p>
<p>Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.</p>
<h2>Классификация автомобилей</h2>
<p>Автомобили бывают следующих типов:</p>
<p>Легковой;</p>
<p>Грузовой;</p>
<p>Внедорожник;</p>
<p>Багги;</p>
<p>Пикап;</p>
<p>Спортивный;</p>
<p>Гоночный.</p>
И видим, что на нашей странице кроме абзацев появились выделенные большим жирным шрифтом заголовки:
Теги <h1>-<h6>, как и тег <p>, используют атрибут align для выравнивания текста. При использовании этого атрибута все аналогично как с тегом <p>.
Нумерованные и маркированные списки в HTML
Список применяется для того, чтобы сформировать пронумерованный или непронумерованный перечень каких-либо фраз или значений. Список с пронумерованными пунктами называется нумерованным, а с непронумерованными пунктами — маркированным.
В маркированных списках пункты помечаются маркерами, которые ставятся левее пунктов списка. Web-браузер отображает список с отступом слева и самостоятельно расставляет необходимые маркеры или нумерацию. Списки и их пункты относятся к блочным элементам Web-страницы.
Любой список в HTML представляет собой набор элементов, каждый из которых помещается внутрь тега <li>. Затем все элементы помещаются внутрь тега <ul>, если нужен маркированный список, или внутрь тега <ol>, если нужен нумерованный список.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовки html</title>
</head>
<body>
Маркированный список:
<ul>
<li>первый пункт.</li>
<li>второй пункт.</li>
<li>третий пункт.</li> </ul>
Нумерованный список:
<ol>
<li>первый пункт нумерованного списка.</li>
<li>второй пункт нумерованного списка.</li>
<li>третий пункт нумерованного списка.</li>
</ol>
</body>
</html>
И выглядят они примерно так:
В маркированных списках могут применяться различные типы маркеров. Для определения типа маркера в тег <ul> добавляется атрибут type, если мы хотим задать вид маркера для всех элементов списка или добавить это же атрибут в тег <li> если необходимо задать вид маркера для конкретного элемента. Атрибут type может принимать следующие значения:
- disc — закрашенная окружность;
- circle — окружность;
- square — квадрат.
По умолчанию атрибут type равен disc. Пример использования:
<ul type="circle">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
<ul type="square">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
<ul>
<li type="circle">Пункт 1</li>
<li type="square">Пункт 2</li>
<li type="disc">Пункт 3</li>
</ul>
Отображение в браузере:
Нумерованный список также поддерживает атрибут type, с помощью которого можно задавать следующие типы маркера:
- A — заглавные латинские буквы;
- a — строчные латинские буквы;
- I — заглавные римские цифры;
- i — строчные римские цифры;
- 1 — арабские цифры.
По умолчанию в нумерованном списке атрибут type устанавливает в качестве маркеров арабские цифры. Кроме атрибута type нумерованный список поддерживает атрибут start, который задает число с которого будет начинаться список. В спецификации HTML5 для нумерованного списка появился еще атрибут reversed, который меняет нумерацию на обратный порядок. Т.е. вместо 1, 2, 3 список будет нумероваться 3, 2, 1. Но атрибут reversed поддерживается еще очень малым количеством браузеров.
Списки можно помещать друг в друга, создавая вложенные списки. Вложенный список помещается внутрь элементов <li> внешнего списка:
<ul>
<li>первый пункт.</li>
<li>второй пункт.
<ul>
<li>первый пункт вложенного списка.</li>
<li>второй пункт вложенного списка.</li>
<li>третий пункт вложенного списка.</li>
</ul>
</li>
<li>третий пункт.</li>
</ul>
И в браузере:
В HTML есть еще третий вид списка — список определений, который представляет из себя перечень терминов и их определений. Этот список задается с помощью парного тега <dl>. Внутри него помещают пары «термин — определение». Термины заключают в парный тег <dt>, а определения — в парный тег <dd>:
<dl>
<dt>Термин 1</dt>
<dd>Определение 1</dd>
<dt>Термин 2</dt>
<dd>Определение 2</dd>
</dl>
Отображение в браузере:
На нашей Web-странице есть абзац классификации автомобилей. Сделаем эту классификацию при помощи маркированного списка:
<ul>
<li>Легковой;</li>
<li>Грузовой;</li>
<li>Внедорожник;</li>
<li>Багги;</li>
<li>Пикап;</li>
<li>Спортивный;</li>
<li>Гоночный.</li>
</ul>
И посмотрим результат:
Горизонтальные линии
Для разделения или дополнительного выделения блоков текста в HTML есть одинарный тег HR — горизонтальная линя. Так это выглядит в коде html:
<p>Первый абзац</p>
<hr>
<p>Второй абзац</p>
И вот как это отображается:
Горизонтальная линия HTML растягивается по горизонтали на всю ширину Web-страницы и имеет один-два пиксела в толщину, в зависимости от используемого браузера.
С помощью атрибутов можно задавать внешний вид горизонтальной линии. Тег <hr> поддерживает следующие атрибуты:
- align — определяет выравнивание линии;
- color — задает цвет линии;
- size — устанавливает толщину линии в пикселях;
- width — устанавливает ширину линии в пикселях.
Вставим горизонтальную линию на нашу WEB-страницу. Сделаем ее зеленым цветом, толщиной в 1 пиксель и шириной 320 пикселей:
<h1>Сайт об автомобилях.</h1>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
<p>Научным языком автомобиль это:</p>
<p>Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.</p>
<hr color="green" size="1" width="320" align="left">
<h2>Классификация автомобилей</h2>
<p>Автомобили бывают следующих типов:</p>
<ul>
<li>Легковой;</li>
<li>Грузовой;</li>
<li>Внедорожник;</li>
<li>Багги;</li>
<li>Пикап;</li>
<li>Спортивный;</li>
<li>Гоночный.</li>
</ul>
Результат будет примерно таким:
Комментарии html
В html есть возможность вставлять комментарии. Комментарий — это часть html-кода, которая не отображается в WEB-браузере. Текст комментария размещается между открывающим тегом <!-- и закрывающим -->. Пример:
<!-- Это пример, он не отображается web-браузером -->
Комментариями можно помечать какие-то участки кода, чтобы в будущем можно было легче разобраться в нем.
На этом все и, как обычно, подведу итог поста. В данной статье мы рассмотрели основные html-элементы для разделения текста страницы на логические части. Напомню все эти элементы:
-
Абзацы — выделяются с помощью парного тега <p>;
- Заголовки. Существует шесть уровней заголовков, которые можно создать на странице с помощью парных тегов <h1>-<h6>;
- На веб-странице можно создать маркированный или нумерованный список фраз. Для создания маркированного списка применяется парный тег <ul>, а для нумерованного <ol>. Для выделения каждого пункта применяется парный тег <li>;
- Для отделения блоков текста можно применять горизонтальную линию с помощью одинарного тега <hr>.
Остальные материалы о тегах html ищите в рубрике HTML и CSS и подписывайтесь на обновления моего блога. До встречи в следующих постах!
Оставить комментарий