Учебник HTML - Параграфы и заголовки. Тег абзаца

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

Абзац 1

Абзац 2

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

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

.

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

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

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

Применение абзацев

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

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

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

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

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

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

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

М. Щербаков

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

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

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

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

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

Пример 7.2. Тег

Переносы в тексте

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

М. Щербаков

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

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

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

Тег

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

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

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

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

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

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

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

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

Параграфы в HTML

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

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

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

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

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

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

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

У тега

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

Теги

-

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заголовки в HTML

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

Параграф.

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

Параграф.

Параграф.

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

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

Параграф.

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

Параграф.

Параграф.

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

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

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

    ,

    и

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

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

Чтобы задать ему определённый стиль, надо поместить текст в соответствующий контейнер.

Все теги форматирования можно разделить на три группы:

1. Теги заголовков (h1-h6 ).

2. Теги оформления основного текста ( , , , 

, 
 и т. д.).
3. Теги группировки (

, 

, 

)

Теги заголовков


Превращают обычный текст в заголовок определённого уровня. Тег 

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


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


 должен идти 


, и никак не наоборот.

Чтобы понять, как это работает, впишите в html-файл следующий код:


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


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


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


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


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


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


Выглядеть в браузере это будет вот так:


Теги оформления основного текста


Позволяют форматировать на уровне символов. Рассмотрим, что с помощью них можно делать.


Жирный шрифт


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


Отвечают за жирное начертание теги 
 и .


Верхний и нижний индексы


Могут использоваться в формулах, уравнениях, обозначении некоторых величин.


За создание нижних индексов отвечает тег 
, для верхних используется тег 
.


X1=32 м2


Уменьшение размера


Если нужно сделать текст на единицу меньше установленного по всей странице, то нужно использовать тег 



Обычный текст. Уменьшенный текст.


Подчёркивание


Этот тип выделения можно использовать для обозначения внесённых в документ изменений или просто чтобы акцентировать на тексте внимание.


Обычный текст. Подчёркнутый текст.


Зачёркивание


Зачеркнуть информацию можно, если она уже потеряла свою актуальность. Предназначен для этого тег 
.


Курсив


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


Ввод компьютерного текста


Бывает, что на веб-страницу нужно добавить исходный код программы и результаты её работы. Чтобы визуально разные части текста было легко друг от друга отличить, разработчики HTML и внедрили теги этой группы.


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

   таким образом  a, b, c, вот результат выполнения
программы , а это –  введённый пользователем текст 
отображается примерно так
.

Цитаты и определения


Программный код будет выглядеть 
таким образом 
, переменные обозначаются так: 
 a, b, c
, вот 
результат выполнения программы
, а это – 
введённый пользователем текст
. Сохранение исходного форматирования 
отображается примерно так 

.

 
Цитата в теге blockquote.
Цитата внутри контейнера cite.Короткая цитата с тегом q.Выделенное
определение.Аббревиатура (НПО, ИП).

Общий пример


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


 
Жирный текст можно сделать тегами strong и b. За курсив отвечают em и
i.

Теги sub и sup используются для создания нижних (x1…xn) и
верхних (42=16) индексов. Del зачёркивает, ins - подчёркивает.


Теги code, kbd, var и samp используются редко и нужны для отображения листинга
программ


 abbr нужен для обозначения аббревиатур (HTML). Теги blockquote, cite и q используются для оформления цитат
(Уж небо осенью дышало)


Тег pre сохраняет изначальное форматирование текста, не удаляя пробелы и переносы строк.


Браузер интерпретирует этот код так:




Теги группировки


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


 
Первый абзац


Второй абзац




 
Строка над линией. 
Строка под линией.
списки
изображения
ссылки
таблицы
формы
видео
аудио
Справочник HTML
Справочник CSS
Вёрстка сайта

С заголовком страницы H1 и абзацем P мы частично познакомились в первом уроке о структуре документа html. Теперь рассмотрим теги логической разметки: заголовки, абзацы, списки, видимых элементов элемента Body, и теги физического форматирования подробнее. Для этого слегка изменим нашу страницу-пример или наберем ее заново:

 
В нашей учебной html-странице добавились (отмечены стрелками, однократно): заголовок 2-го уровня - тег H2, два заголовка 3-его уровня - тег H3, еще один абзац - тег P, маркированный список - Ul и несколько тегов физического форматирования. Откроем страницу в браузере:

 

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

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

 
Т
еги физического форматирования

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

 
Теперь обратим внимание на слово «body» во втором абзаце, заключенное в парный тег B, который задает слову полужирное начертание. А фраза «оформлять текст» отображается курсивом - это достигается с помощью тега I. Тег U задает подчеркивание (его нет в нашем примере).

 

 
Кроме этих тегов, выделяющих фрагменты текста, в HTML существуют еще тег Strong - выделяет важный по значению фрагмент (жирное начертание). И тег Em - чуть менее важный (курсив). Поисковые боты обращают более пристальное внимание на эти два тега, указывающие на важные по логическому смыслу фразы. Целесообразно заключать в них ключевые слова , но перебарщивать с этим не стоит. Это же касается и заголовков.

 
Вот еще несколько тегов физического форматирования текста: Q - выделяет цитату в строке. Блочный элемент Blockquote - в этот тег можно помещать несколько абзацев.

 
Тег Code служит для разметки фрагментов кода, его необходимо использовать с переносами строк Br и неразрывными пробелами: для их обозначения используется спец. символ (первый знак - амперсанд
: клавиша 7 с зажатой Shift в английской раскладке). А вот тег Pre отображает программный код, как есть, с пробелами и столько строк, сколько их в коде.

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

 
С
оздание списков html

 
Осталось рассмотреть создание списков, у нас он маркированный, и задан парным тегом Ul, а его элементы, или пункты тегом Li (1-ый скриншот). При помощи атрибута type, как для тега Ul, так и для тега Li, мы можем поменять тип маркера. По умолчанию, т.е. если атрибут не указан, его значение равно «disk» - кружок. Можно задать атрибут type со значением «circle» - окружность. Или так: