Тег новый абзац. Основные тэги (теги) html. Правила и порядок написания тегов

Теги, определяющие абзац, пробел, HTML блок и параграф

Рассмотрим в деталях HTML блоки и параграфы как элементы интернет-страницы.

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

-
, блок

и другие параграфы.
HTML блок определяется тегами

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

Рассмотрим расположенный ниже код:

Результат:

Нам видно, что HTML параграфы имеют отступы по вертикали - такова особенность тегов . HTML блоки

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

Tеги не могут содержать другие или

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

Теги и , в принципе, одно и то же, но W3C консорциумом рекомендовано использовать маленькие буквы. В новой версии HTML как и в современном XHTML использование больших букв при написании тегов запрещено.

Блок

может содержать внутри себя сколько угодно

и и других элементов HTML документа. Он идеально подходит для верстки, но об этом позже - в уроках CSS самоучителя.

HTML пробел из таблицы специальных символов

HTML пробел позволяет увеличить расстояние между словами и символами.

Что касается пробелов между словами, то сколько бы не было их в Блокноте, то есть в исходном коде, на web-странице отобразится только один. Если вам понадобится увеличить растояние - используйте символ пробела из таблицы символов . Вы спросите: Зачем нужны эти закодированные значения обычных символов? - Я отвечу: Они нужны, чтобы отображать, например, такие скобки < > . Другими словами, для вывода на экран тегов , в своем редакторе я пишу: . Теги , как мы помним, преобразуют текст в моноширинный (машинописный).

Способы отображения HTML абзаца

Примеры вывода абзаца.

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

Абзац 1

Абзац 2

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

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

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

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

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

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

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

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

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

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

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

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

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

М. Щербаков

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

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

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

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

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

Пример 7.2. Тег

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

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

М. Щербаков

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

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

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

Тег абзаца или тег параграфа «p» позволяет создать на странице web-документа абзац из текста. Если не использовать тег «p», а просто внести текст без оформления, то получится неструктурированный, оформленный некрасиво текст.

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

XHTML

Заголовок html-страницы Сегодня, я проснулся как всегда рано. Утреннее солнце пробивалось сквозь занавески моего окна. Потянувшись, я пошел на кухню. Заварил себе зеленый чай, положил две ложки сахара и сел в мягкое кресло перед кухонным окном. На дворе стояла осень. Мне нравится это время года, потому что я считаю, что осень - самая романтическая пора года. После того, как допил чай, я взял мобильный и позвонил своей любимой, пожелать ей доброе утро. Как я и думал, она еще спала. Мы мило побеседовали и договорились встретиться сегодня днем, пока светит солнце и на улице тепло. Время пролетело незаметно. И вот мы уже вместе, обедаем в местном кафе: кушаем, болтаем, флиртуем друг с другом. Нам хорошо вместе. Я люблю свою девушку и на меня тоже. Думаем о создании семьи...

Заголовок html-страницы

Сегодня, я проснулся как всегда рано. Утреннее солнце пробивалось сквозь

занавески моего окна. Потянувшись, я пошел на кухню. Заварил себе зеленый чай,

положил две ложки сахара и сел в мягкое кресло перед кухонным окном. На дворе

стояла осень. Мне нравится это время года, потому что я считаю, что осень - самая

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

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

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

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

кафе: кушаем, болтаем, флиртуем друг с другом. Нам хорошо вместе. Я люблю свою

девушку и на меня тоже. Думаем о создании семьи...

Вот в итоге, что у нас получилось:

Текст оформлен некрасиво. Все собрано в кучу, без какой-либо структуры. Следующий пример, показывает применение тега абзаца «p». Этот тег парный, блочный, но внутри себя может содержать только строчные теги. Блочные теги внутри тега «p» недопустимы, включая и сам тег «p»:

XHTML

Заголовок html-страницы

Абзац первый. Для того, чтобы текст на ваших страницах выглядел читабельно используется тег абзаца «p». Этот текст обрамлен в парный тег «p», что позволяет браузеру распознать текст как абзац.

Абзац второй. Это второй абзац, идущий после первого. Этот абзац будет иметь отступ, от первого абзаца. Пример использования абзацев можете просмотреть на рисунке ниже.

Заголовок html-страницы

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

используется тег абзаца «p». Этот текст обрамлен в парный тег «p», что позволяет

Браузеру распознать текст как абзац.

Абзац второй. Это второй абзац, идущий после первого. Этот абзац будет иметь

отступ, от первого абзаца. Пример использования абзацев можете просмотреть на

рисунке ниже.

Вот что у нас получилось, кода мы стали использовать абзац:

Появились две составные части страницы – два абзаца, разделенные отступом. И так бед с каждым новым абзацем. Для нашего первого примера, где тег абзаца не используется можно применить следующее форматирование, используя тег «p»:

XHTML

Заголовок html-страницы

Солнечное утро

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

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

Мы мило побеседовали и договорились встретиться сегодня днем, пока светит солнце и на улице тепло. Время пролетело незаметно. И вот мы уже вместе, обедаем в местном кафе: кушаем, болтаем, флиртуем друг с другом. Нам хорошо вместе. Я люблю свою девушку и на меня тоже. Думаем о создании семьи...

Заголовок html-страницы

Солнечное утро

Как вы уже заметили, я добавил заголовок к тексту. Я использовал всего три параграфа, и этот вариант как всегда оказался лучше, чем тот, что был раньше. Теперь у нас появились смысловые разделения текста (отступы между абзацами). Вообще, правильно будет говорить, не «абзац», а «параграф», так как тег «p» в переводе с английского означает «paragraph». Далее я буду говорить параграф, так что не путайтесь.

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

Тег параграфа, как и все другие html-теги, имеет атрибуты. Сейчас мы рассмотрим, наиболее важные атрибуты тега «p».

id – определяет универсальный идентификатор, используемый при написании свойств в файле каскадных таблиц стилей (обычно style.css). Имя идентификатора используется только один раз в пределах одного документа
class – то же что и id, но может использоваться несколько раз в пределах одного документа
title – подсказка, выводимая в окне браузера при наведении курсора мыши на текст параграфа
style – определяет набор свойств каскадных таблиц стилей
align – определяет выравнивание текста параграфа относительно окна браузера (лево – left , право – right , по центру – center , по ширине — justify)
и др. (элементы JavaScript)

Пример использования атрибутов:

XHTML

Заголовок html-страницы

Если навести курсор мыши на этот текст, то вылезет подсказка!!!

Этот параграф выровнен по левому краю

Этот параграф выровнен по правому краю

Этот параграф выровнен по центру

Этот параграф имеет универсальный идентификатор, который ссылается на свойства прописанные в файле CSS и может использоваться только один раз на странице

Этот параграф имеет класс MAIN-P, может быть назначен несколько раз на странице, в отличие от ID-идентификатора

Этот параграф весь подчеркнутый, т.к. использует каскадные стили, прописанные напрямую этому параграфу с помощью атрибута тега STYLE. В значении атрибута STYLE я прописал, чтобы параграф был весь подчеркнутый: UNDERLINE

Заголовок html-страницы

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

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

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

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

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

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

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

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

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

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

Параграфы в HTML

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

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

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

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

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

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

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

У тега

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

-

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заголовки в HTML

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

Параграф.

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

Параграф.

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

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

Параграф.

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

Параграф.

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

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

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

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

Итак, , способ первый - самый, естественный и простой. Чтобы сделать отступ перед текстом, добавим перед текстом html код пробела - Добавить html код пробела можно в любом html редакторе.

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

HTML отступ текста слева , используем код пробела

В данном примере, перед выбранным нами текстом код пробела - & nbsp ; добавлен четыре раза, в результате, получим нужный нам отступ.

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

Этот способ хорош тем, что он будет гарантированно отработан любым браузером.

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

Одним из вариантов решения этой проблемы, является следующий способ задания отступа.

HTML отступ текста , способ второй - этот способ основан на свойствах тега blockquote. Данный тег задает отступ примерно 40 пикселей слева и справа, для размещенного в нем текста. Кроме того, отступ задается сверху и снизу. Пример html кода использования данного способа приведен ниже:

слева, используем тег blockquote

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

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

HTML отступ текста , способ третий.

Здесь мы воспользуемся свойством параметра text-indent каскадных таблиц стилей CSS.

Если открыть справочник CSS, на странице с описанием свойств text-indent, то мы увидим, что с помощью text-indent, мы можем задавать величину отступа первой строки или первого абзаца, какого-либо блока текста.

Мы рассматриваем, пример с коротки текстовым блоком, поэтому свойства text-indent вполне подходят для нашего случая.

Ниже приведен html код, который формирует отступ текста с использованием text-indent. Из примера видно, что задавая для text-indent разные значения аргументов, мы можем изменять величину отступа текста:

HTML отступ текста , работает стиль CSS - text-indent

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

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

В качестве рабочего примера, сразу рассмотрим html код, который демонстрирует работу данного способа:

слева, используем изображение

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

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

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