Продолжим наши разговоры о началах html. В этой статье я хочу поговорить о том, как создавать абзацы, списки и заголовки в тексте. А так же, об одиночных тегах <br/> и <hr/>

Продолжим наши разговоры о началах html. В этой статье я хочу поговорить о том, как создавать абзацы, списки и заголовки в тексте. А так же, об одиночных тегах <br /> и <hr />.

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

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

Как всегда, план работы:

1. Абзацы <p></p>
2. Разрывы строк <br />
3. Списки <ul></ul>, <ol></ol> и элементы списков <li></li>
4. Заголовки
5. Горизонтальные линейки <hr />

Абзацы <p></p>

Текст почти всегда состоит из абзацев. Абзац — это элемент текста, несущий законченную мысль.

В html абзац, как можно судить из заголовка, обозначается <p></p>. Буква «p» взята из слова «paragraph», что как-раз обозначает «абзац».

Рассмотрим пример:

<p>
Текст первого абзаца. Он содержит мысль. Но вот мысль закончилась.
</p>
<p>
Вот уже началась другая мысль и мы пишем ее в другом абзаце.
</p>

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

Разрывы строк <br />

Иногда требуется перевести строку, не заканчивая при этом мысль, не закрывая абзац. То есть, просто перейти на новую строку. Для этого есть одиночный тег <br />. Вот пример его применения:

<p>
Ветер весело гуляет<br/>
И кораблик подгоняет<br/>
Он бежит себе в волнах<br/>На поднятых парусах.
</p>

Этот фрагмет стихотворения А.С. Пушкина помог нам проиллюстрировать действие тега <br/>. Я специально последние две строки этого четверостишия разместил в одной строке кода, чтобы показать, что строки переносятся на новую строку не из-за того, что мы расставили переносы строк, а из-за того, что мы расставили теги <br/>. Этот тег совсем простой и не нуждается в подробных пояснениях, поэтому на этом мы закончим его обсуждать.

Списки <ul></ul>, <ol></ ol>и элементы списков <li></li>

Иногда в тексте нужно перечислить что-то. Для этой цели применяются три тега: ul, ol, li. Все эти теги контейнерные, но тег <li></li> всегда содержится в одном из контейнеров <ul></ul> или <ol></ol>, и не имеет смысла вне них. Контейнер ul применяется, когда нам не важен порядок перечисляемых позиций, и мы не хотим акцентировать внимание на порядке, в котором они идут. А тег ol, наоборот, акцентирует внимание на последовательности следования элементов, автоматически нумеруя каждую строку. Рассмотрим пример:

<ul>
   <li>Булка</li>
   <li>Пирожок</li>
   <li>Буханка</li>
   <li>Пирог</li>
</ul>

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

• Булка
• Пирожок
• Буханка
• Пирог

Если мы просто заменим тег ul на тег ol, то получим нумерованый список:

<ol>
   <li>Булка</li>
   <li>Пирожок</li>
   <li>Буханка</li>
   <li>Пирог</li>
</ol>

Теперь это выглядит так:

1. Булка
2. Пирожок
3. Буханка
4. Пирог

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

<ul>
Инструменты:
   <li>Пила</li>
   <li>Отвертки
      <ol>
         <li>Прямая</li>
         <li>Крестовая</li>
      </ol>
   </li>
   <li>Дрель</li>
</ul>

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

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

Заголовки

Конечно, абзацы помогают в структурировании документов. Но для того, чтобы разбить большой текст на меньшие логические части, можно озаглавить каждую из них. Каждая часть может содержать еще подчасти, со своими заголовками нижнего уровня, и так далее. Для задания заголовка, служат теги <hx></hx>, где «x» — число от 1 до 6. Заголовок тем ниже уровнем, чем больше это число. То есть, заголовок самого верхнего уровня будет называться h1, а самого нижнего — h6. По-умолчанию, текст, находящийся в этих заголовках, отображается большим шрифтом с отступами. Этот текст отображается на всю строку, то есть теги hx являются блочными. У тега h1 шрифт самый крупный, а у тега h6 — самый мелкий. Как правило, на странице один, максимум — два тега верхнего уровня h1. С понижением уровня, количество тегов возрастает. Но редко какой веб-мастер сможет разбить текст так, что ему понадобятся заголовки 5 или 6 уровня. Даже 4 уровень применяется редко.

Меньше слов, больше дела!

<h1>Все меньше</h1>
<h2>и меньше</h2>
<h3>и меньше</h3>
<h4>и меньше</h4>
<h5>и меньше</h5>
<h6>и меньше...</h6>

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

Горизонтальные линейки <hr />

Закончить я хочу совсем простой вещью: горизонтальные линейки. Это очень спецэфичное средство для визуального разделения частей. Часто его можно заменить, применив CSS, но иногда этот тег может оказаться полезен. А вот и его синтаксис: <hr/>. Можно заметить, что тег одиночный. Если поместить его на страницу, то мы увидим горизонтальную линию, настолько широкую, на сколько позволяет рястянуться область, в которую она вставлена. Линия имеет ширину 2 пикселя и серый цвет. Но это легко меняется при помощи CSS. Пожалуй, это все, что стоит сказать про этот тег.

• С чего начать изучение html?
• Основы html. Общие правила. Блочные и строчные элементы.
• Основы html 2. Абзацы, списки, заголовки.
• Основы html 3. Таблицы.
• Основы html 4. Ссылки.
• Основы html 5. Формы.
• Основы html 6. Формы (продолжение).
• Основы html 7. textarea.

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