Название

Базовые приемы работы с текстом в HTML. Абзацы, заголовки и перенос строки.

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

Если вставить какой-либо текст в html-документ и не выделять его никакими тэгами, то он отобразиться одной сплошной структурой.

В следующем примере это можно явно увидеть.

27-01-2014 4-37-01

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

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

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

В HTML за создание абзацев отвечает специальный парный тэг, который называется и пишется как:

<p></p>

Между открывающим и закрывающим тэгами располагается сам текст абзаца.

Давайте преобразуем структуру кода из примера выше и заключим абзацы в тэг <p></p>

<p>Базовые приемы работы с текстом в HTML.</p>
<p>Предполагается, что вы уже знаете, как создавать HTML-документы и проверять результат работы кода, который вы написали в браузере.</p>
<p>Если с этим проблемы, предлагаю вам пройти курс "Моя первая HTML-страница".</p>
<p>В этой части приступаем к практике и будем изучать основные тэги HTML. Начнем с тэгов, которые отвечают за оформление текста.</p>

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

27-01-2014 4-52-48

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

Иногда переносы строк нужно сделать внутри абзацев, либо каких-то других элементах. Это делается с помощью специального тэга <br>.

Это одиночный тэг. Посмотрите, как он работает:

<p>Предполагается, что вы уже знаете,<br> как создавать HTML-документы и проверять<br> результат работы кода, который<br> вы написали в браузере.</p>

Посмотрите, как будет выглядеть этот абзац, если внутри него разместить элементы br.

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

Как можно сообщить браузеру, что тот или иной текст является заголовком?

Для этого используются парные элементы:

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Текст в элементе h1 является заголовком самого высокого уровня. В элементе h2 располагается что-то вроде подзаголовка, в h3 подподзаголовка, и.т.д.

Давайте посмотрим, как это можно применить к примеру выше:

<h1>Заголовок самого высокого уровня</h1>
<h2>Подзаголовок</h2>
<p>Базовые приемы работы с текстом в HTML.</p>

27-01-2014 5-15-43

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

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

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

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

Назад Далее