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

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

С заголовком страницы 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» - окружность. Или так:

- мы получим список с маркерами-квадратиками.

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

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



Откроем страницу в браузере, наглядно видим: нумерованный список с вложенным в него маркированным списком, для которого значение «square» атрибута type задает маркеры-квадратики.

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

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

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

  -

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

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

Результат:

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

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

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

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

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

Блок

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

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

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

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

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

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

Категория: . Нет комментариев. Опубликовано: 17.05.2012.

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

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

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



Теперь давайте в документе мы проставим наш тег через каждые четыре-пять строк текста.



И давайте теперь сохраним файл и откроем его в любом браузере.



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

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



Все эти заголовки на сайте будут выглядеть так:



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

Списки в HTML.

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

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

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

Кетчуп
Майонез
Соль
Перец
Укроп
Баклажаны
Помидоры

Вот список составлен и мы приступаем к его форматированию. Нумерованный список в HTML задается с помощью парного тега и теперь на примере мы посмотрим процесс создания нумерованного списка.

Для начала нам нужно заключить все пункты списка в тег .

Задача

Добавить отступ к первой строке каждого абзаца.

Решение

Когда требуется установить абзацный отступ, который ещё называется красной строкой, лучше всего использовать стилевое свойство text-indent . Его значение определяет насколько сдвинуть текст первой строки вправо от исходного положения. Ширина текстового блока при этом не меняется и остается заданной изначально. Величину отступа можно указывать в пикселах, процентах или других доступных единицах (пример 1).

Пример 1. Отступ первой строки

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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