Абзац и его атрибуты

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

<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>         
            

Это обязательные теги в разметке нашей Web-страницы и, как бы, составляют ее «скелет». Их мы будем прописывать в каждой новой странице. Повторим, теги <html> и </html> задают начало и конец HTML-кода. Между тегами <body> и </body> содержится основное видимое содержимое Web-страницы, которое выводиться в окне браузера и называется «телом». И служебная часть страницы  - «голова», заключенная в теги <head> и </head>. В этом уроке мы подробно поговорим про абзац и узнаем, какие у него есть атрибуты.



В первом уроке уже говорилось, как задается абзац, с помощью тега <p> и </p>. Поэтому давайте сразу откроем Notepad++ и напишем следующий код:

<html>
  <head>
    <title>Урок №2. Абзац и его атрибуты</title>
  </head>
  <body>
    <p>Сегодня мы рассмотрим, что такое атрибуты.</p>
    <p>И узнаем, какие атрибуты применяются к абзацам.</p>
  </body>
</html> 
            

Сохраним файл под именем page2.html и откроем его в браузере:

Что мы видим? Весь наш текст находиться с левой стороны страницы (по умолчанию, текст всегда выравнивается по левому краю). А если нам нужно разместить текст, скажем, по центру или правому краю? Ничего сложного нет! Для этого у нас есть атрибуты. У большинства тегов есть атрибуты, которые задают дополнительные параметры. Тег <p> имеет всего один атрибут – align, с помощью которого можно выровнять абзац по центру, левому или правому краю и по обоим краям одновременно. Записывается это следующим образом:

<p align=”center”>какой-либо текст</p> - таким способом мы выровняем наш абзац по центру.

Давайте рассмотрим все подробнее на примере, изменим наш код по другому:

<html>
  <head>
    <title>Урок №2. Абзац и его атрибуты</title>
  </head>
  <body>
    <p align="center">Этот текст выровняется по центру</p>
    <p align="left">Этот текст выровняется по левому краю</p>
    <p align="right">Этот текст выровняется по правому краю</p>
    <p align="justify">Этот текст растянется на всю ширину и выровняется по центру. Поэтому нужно написать текст как можно длинее, чтобы был виден эффект!</p>
  </body>
</html>
              

Сохраним файл под тем же именем и посмотрим, что получилось:

Первая строка разместилась по центру, так как мы задали абзацу атрибут align=”center”. Вторая строка расположилась с левой стороны, ей мы задали атрибут - align=”left”. В прочем если бы мы не задали абзацу никакого атрибута, он и так бы разместился по левому краю, поэтому если вам нужно, что бы текст располагался с левой стороны, можно не задавать атрибут вообще. Третья строка выровнялась по правому краю, так как мы задали атрибут - align=”right”. И последняя строка выровнялась по двум краям одновременно, здесь мы задали абзацу атрибут - align=”justify”. Для того чтобы было видно эффект от атрибута - align=”justify”, текст должен быть довольно длинным.

Вот собственно и все, что мы можем применить для редактирования абзацев. Да уж, не густо... Но не переживайте. В дальнейшем мы изучим другие атрибуты, которые придадут жизни вашим Web-страничкам и, вы убедитесь, что язык HTML позволяет форматировать текст не хуже чем во всем известном редакторе Word!