Какие теги позволяют создать параграф. Основные HTML теги форматирования текста — выделение текста жирным и курсивом; параметры размера, цвета и шрифта; абзац и теги заголовков. Блочные элементы оформления текста — заголовки -, абзац

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

Абзац 1

Абзац 2

Каждый абзац начинается с тега

И заканчивается необязательным закрывающим тегом

В любой книге для выделения следующего абзаца используется отступ первой строки, еще называемый «красная строка». Это позволяет читателю легко отыскивать взглядом новую строку и повышает, таким образом, читабельность текста. На веб-странице этот прием обычно не используется, а для разделения абзацев применяется отбивка.

В примере 7.1 показано применение абзацев для создания отступов между строками.

Пример 7.1. Использование абзацев

В одних краях ещё февраль, в других - уже апрель.

Проходит время, вечный счёт: год за год, век за век...

Во всём - его неспешный ход, его кромешный бег.

В году на радость и печаль по двадцать пять недель.

Мне двадцать пять недель февраль, и двадцать пять - апрель.

По двадцать пять недель в туман уходит счёт векам.

Летит мой звонкий балаган куда-то к облакам.

М. Щербаков

Результат данного примера показан на рис. 7.1.

Рис. 7.1. Отступы на веб-странице при использовании абзацев

Как видно из рисунка, при использовании тега

Между абзацами возникают слишком большие отступы. От них можно избавиться, если в местах переноса строк добавлять тег
. В отличие от абзаца, тег переноса строки
не создает дополнительных вертикальных отступов между строками и может применяться практически в любом тексте.

Так, текст примера 7.1 с учетом переноса строк будет преобразован следующим образом (пример 7.2).

Пример 7.2. Тег

В одних садах цветёт миндаль, в других метёт метель.
В одних краях ещё февраль, в других - уже апрель.
Проходит время, вечный счёт: год за год, век за век...
Во всём - его неспешный ход, его кромешный бег.
В году на радость и печаль по двадцать пять недель.
Мне двадцать пять недель февраль, и двадцать пять - апрель.
По двадцать пять недель в туман уходит счёт векам.
Летит мой звонкий балаган куда-то к облакам.

М. Щербаков

Результат примера продемонстрирован на рис. 7.2. Видно, что расстояние между строками текста уменьшилось и он приобрел более компактный вид.

Параграфы и заголовки

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

Тег

Или разбиваем страницу на параграфы (абзацы)

Если помните, то с тегом

Вы уже встречались в этом учебнике, ну что ж, теперь пришла пора изучит его полностью. Итак, тег

Отвечает за создание параграфов на HTML-странице, и он является блочным элементом . Надеюсь, что вы уже запомнили, что такое теги уровня блока. Да, но кроме того, что он создает перед собой и после себя переносы строк в начало - еще он устанавливает сверху и снизу себя небольшие поля (внешние отступы) пустого пространства, благодаря чему и происходит визуальное разделение текста на абзацы. Высота этих полей равна одной пустой строке.

Теперь самое главное - тег

Может содержать только элементы уровня строки (встроенные) и никакие больше. Поэтому, например, он не может содержать другой параграф, так как сам

Является блочным элементом. Ну, мы к этому еще не раз вернемся. Кстати, любой текст без тегов тоже считается встроенным элементом.

Пример параграфов в HTML

Первый параграф.

Второй параграф.

Результат в браузере

Первый параграф.

Второй параграф.

Вообще, закрывающий тег

У тега

Есть один необязательный атрибут align , который устанавливает положение текста внутри блока. то есть можно сделать так, чтобы каждая строка параграфа располагалась по центру страницы или прижималась к правой стороне, а не к левой, как обычно. Только вот незадача - атрибута align нет в строгой версии HTML и, возможно, в скором будущем его перестанут поддерживать современные браузеры. И что же делать? А сделаем мы следующее: в одном из ближайших уроков я вам покажу универсальный способ, с помощью которого можно менять положение содержимого не только внутри параграфов, но и внутри любых блочных элементов HTML-страницы (заголовков, таблиц, списков и т.д.). Но главное его точно понимают и будут понимать все браузеры.

Теги

-

или заголовки HTML-страницы

Заголовки играют очень важную роль в HTML, используя их можно разделить текст страницы на логические части, подчеркивая степень важности каждой, что позволяет посетителям быстрее находить нужную информацию. К тому же поисковики (Яндекс, Google и т.п.) придают больший «вес» тексту в заголовках. Существует их шесть типов, где

самый важный заголовок (первого уровня, верхний), а

наименее значимый (шестого уровня, нижний). Например,

может быть заголовком страницы,

- ее разделов,

- подразделов и т.д.

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

Синтаксис написания заголовков в HTML

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

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

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

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

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

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

У заголовочных тегов есть два необязательных атрибута - это уже знакомый вам устаревший align и атрибут title , выводящий «всплывающую» подсказку при наведении курсора мыши на заголовок. Как и в случае с параграфами, мы не будем использовать align , а скоро выучим другой способ.

Пример использования заголовков в HTML

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

Параграф.

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

Параграф.

Параграф.

Результат в браузере

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

Параграф.

Параграф.

Параграф.

Домашнее задание.

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

1. Откройте в HTML-редакторе страничку из прошлого урока.
2. При помощи заголовков

   ,

   и

   создайте название статьи, двух ее разделов и трех подразделов во втором разделе.

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

Любой текст имеет свою уникальную структуру: книги разделены на части, разделы и главы, газеты и журналы имеет отдельные рубрики и подзаголовки, которые, в свою очередь, включают фрагменты текста, также имеющие собственную структуру: абзацы, отступы и пр.

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

Для создания таких структурных единиц текста, как абзацы, в HTML-документах используется тег

, который разделяет фрагменты текста вертикальным отступом (до и после абзаца добавляется пустая строка).

Примечание: по умолчанию расстояние между абзацами равно 1em (em - это единица измерения равная высоте шрифта), то есть расстояние между абзацами напрямую зависит от размера шрифта.

Для изменения отступов между абзацами, без изменения размера шрифта, можно воспользоваться CSS свойством margin .

Не забывайте про закрывающий тег

Большинство браузеров будут отображать HTML документ корректно, даже если вы забыли про закрывающий тег.

Абзац

Другой абзац

Этот код будет работать в большинстве браузеров, но не полагайтесь на это. Забытый закрывающий тег может привести к непредвиденным результатам или ошибкам.

Красная строка

Что такое красная строка? Согласно определению, это начальная строка абзаца, которую раньше выделяли красным цветом (откуда и пошло название). До того, как было изобретено книгопечатание, книги писали от руки – главу или часть текста, первое слово или букву писали красной краской. Так появилось понятие «писать с красной строки» - это означает начало новой мысли, главы или части.

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

Для добавления красной строки к вашим абзацам нужно воспользоваться CSS свойством text-indent , которое позволяет поставить отступ перед первым предложением:

Попробовать »

В примере, приведенном выше, первая строка каждого абзаца на странице будет начинаться с отступа в 25px. Пример, расположенный ниже, демонстрирует, как можно задать красную строку только для определенного абзаца на странице.

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

Примечание: не обязательно устанавливать отступ размером в 25px, вы можете выбрать оптимальный размер отступа сами, также с помощью свойства text-indent возможно сделать выступающую над остальным текстом строку, для этого нужно задать отрицательное значение для свойства (например: -30px).

Оглавление:

Здравствуйте, уважаемые читатели блога! Сегодня мы поговорим о структурировании текста на web-страницах, об особенностях его отображения и рассмотрим как разбить текст на отдельные логические фрагменты: заголовки, абзацы, списки .

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

Для примера эти строки на web-странице будут отображаться одинаково не смотря на их разное написание:

Добро пожаловать на наш сайт!

Добро
пожаловать на наш сайт!

Добро пожаловать
на наш
сайт!

Исключение составляет тег

, внутри которого все пробелы и переносы отображаются как есть.

Во-вторых, текст занимает ширину окна браузера. Если длинная строка текста шире окна браузера, то в местах пробелов или дефиса автоматически будут вставлены переносы строк. Если в строке нет ни пробелов, ни дефисов, а строка не умещается по ширине окна, то в браузере появится горизонтальная полоса прокрутки.
Теперь перейдем к рассмотрению структурных элементов текста в разметке html.
Абзацы в языке HTML
Обычно, блоки текста разделяют между собой абзацами(параграфами). Это облегчает чтение больших кусков текста. Язык HTML для создания абзаца содержит парный тег 

. Синтаксис создания абзацев следующий:
Это первый абзац.


А это уже второй абзац

Абзацы на html-странице отделяются небольшими отступом от предыдущего и последующего элементов. Тег 
Также является блочным элементом. Что такое блочные элементы я писал в статье « ». Напомню, что блочные элементы
 характеризуются тем, что занимают всю доступную ширину html-страницы, высота элемента определяется его содержимым, и он всегда начинается с новой строки.
Рассмотрим пример применения абзацев на web-странице. Откроем текстовый редактор, наберем HTML-код и сохраним с расширением html:














Сайт об автомобилях.




Классификация автомобилей


Легковой;


Грузовой;


Внедорожник;


Багги;


Пикап;


Спортивный;


Гоночный.





При открытии данного файла будет примерно такая картина:
Пока, что наша страница содержит одни абзацы.
Для выравнивания текста в абзаце тег 
Поддерживает атрибут align.
Он может принимать одно из четырех значений:
left
 — выравнивание текста по левому краю;
center
 — выравнивание текста по центру;
right
 — выравнивание текста по правому краю;
justify
 — выравнивание по ширине, т.е. выравнивание текста одновременно по правому и левому краю. Для этого браузер помещает пробелы между словами.
По умолчанию атрибут align имеет значение left. Пример использования атрибута align:

Этот текст в абзаце на html странице будет выровнен по левому краю!


Этот текст в браузере отобразится по центру страницы!


Этот текст будет выровнен по правому краю!


А этот большой кусок текста браузер выровняет по ширине, т.е. одновременно по правому и левому краю! Для этого web-обозреватель вставит между словами дополнительные пробелы и абзац примет аккуратный вид, удобный для чтения!

И так это отобразится в браузере:

Заголовки в языке HTML
Для выделения разделов текста на web-странице применяются заголовки. В html существует шесть уровней заголовков. Самым верхним уровнем является уровень 1 — тег 
, а самым нижним - уровень 6, тег 
. Теги 
 — 
 являются блочными элементами страницы. Содержимое заголовка первого уровня отображается самым крупным шрифтом жирного начертания, а заголовки последнего шестого уровня - самым мелким.

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














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



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



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



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



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



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






Результат:

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


Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.


Научным языком автомобиль это:


Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.


Классификация автомобилей


Автомобили бывают следующих типов:


Легковой;


Грузовой;


Внедорожник;


Багги;


Пикап;


Спортивный;


Гоночный.

И видим, что на нашей странице кроме абзацев появились выделенные большим жирным шрифтом заголовки:

Теги 
-
, как и тег 
Используют атрибут align для выравнивания текста. При использовании этого атрибута все аналогично как с тегом
Нумерованные и маркированные списки в HTML
Список применяется для того, чтобы сформировать пронумерованный или непронумерованный перечень каких-либо фраз или значений. Список с пронумерованными пунктами называется нумерованным
, а с непронумерованными пунктами — маркированным
.
В маркированных списках пункты помечаются маркерами, которые ставятся левее пунктов списка. Web-браузер отображает список с отступом слева и самостоятельно расставляет необходимые маркеры или нумерацию. Списки и их пункты относятся к блочным элементам Web-страницы.
Любой список в HTML представляет собой набор элементов, каждый из которых помещается внутрь тега 
. Затем все элементы помещаются внутрь тега 
, если нужен маркированный список, или внутрь тега 
, если нужен нумерованный список.













Маркированный список:



первый пункт.


второй пункт.


третий пункт.
 


Нумерованный список:



первый пункт нумерованного списка.


второй пункт нумерованного списка.


третий пункт нумерованного списка.







И выглядят они примерно так:

В маркированных списках могут применяться различные типы маркеров. Для определения типа маркера в тег 
 добавляется атрибут type,
если мы хотим задать вид маркера для всех элементов списка или добавить это же атрибут в тег 
 если необходимо задать вид маркера для конкретного элемента. Атрибут type может принимать следующие значения:

disc — закрашенная окружность;
circle — окружность;
square — квадрат.
По умолчанию атрибут type равен disc. Пример использования:


Пункт 1


Пункт 2


Пункт 3






Пункт 1


Пункт 2


Пункт 3






Пункт 1


Пункт 2


Пункт 3



Отображение в браузере:

Нумерованный список также поддерживает атрибут type, с помощью которого можно задавать следующие типы маркера:
A — заглавные латинские буквы;
a — строчные латинские буквы;
I — заглавные римские цифры;
i — строчные римские цифры;
1 — арабские цифры.
По умолчанию в нумерованном списке атрибут type устанавливает в качестве маркеров арабские цифры. Кроме атрибута type нумерованный список поддерживает атрибут start
, который задает число с которого будет начинаться список. В спецификации HTML5 для нумерованного списка появился еще атрибут reversed,
который меняет нумерацию на обратный порядок.
Т.е. вместо 1, 2, 3 список будет нумероваться 3, 2, 1. Но атрибут reversed поддерживается еще очень малым количеством браузеров.
Списки можно помещать друг в друга, создавая вложенные списки. Вложенный список
 помещается внутрь элементов 
 внешнего списка:



первый пункт.


второй пункт.



первый пункт вложенного списка.


второй пункт вложенного списка.


третий пункт вложенного списка.






третий пункт.



И в браузере:

В HTML есть еще третий вид списка — , который представляет из себя перечень терминов и их определений. Этот список задается с помощью парного тега 
. Внутри него помещают пары «термин - определение». Термины заключают в парный тег 
, а определения - в парный тег 
:



Термин 1


Определение 1


Термин 2


Определение 2



Отображение в браузере:

На нашей Web-странице есть абзац классификации автомобилей. Сделаем эту классификацию при помощи маркированного списка:


Легковой;


Грузовой;


Внедорожник;


Багги;


Пикап;


Спортивный;


Гоночный.



И посмотрим результат:

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

Для разделения или дополнительного выделения блоков текста в HTML есть одинарный тег HR — горизонтальная линя
. Так это выглядит в коде html:
Первый абзац




Второй абзац

И вот как это отображается:

Горизонтальная линия HTML растягивается по горизонтали на всю ширину Web-страницы и имеет один-два пиксела в толщину, в зависимости от используемого браузера.
С помощью атрибутов можно задавать внешний вид горизонтальной линии. Тег 
 поддерживает следующие атрибуты:

align — определяет выравнивание линии;
color — задает цвет линии;
size — устанавливает толщину линии в пикселях;
width — устанавливает ширину линии в пикселях.
Вставим горизонтальную линию на нашу WEB-страницу. Сделаем ее зеленым цветом, толщиной в 1 пиксель и шириной 320 пикселей:
Сайт об автомобилях.


Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.


Научным языком автомобиль это:


Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.




Классификация автомобилей


Автомобили бывают следующих типов:




Легковой;


Грузовой;


Внедорожник;


Багги;


Пикап;


Спортивный;


Гоночный.



Результат будет примерно таким: