Войти
Регистрация

Блочные элементы и выравнивание в HTML

Блочные элементы и выравнивание в HTML

Блоки это те элементы, из которых построено большинство сложных сайтов. Если Вы обратите внимание на мой сайт, то тоже увидите эти блоки. Статья текущая также написана внутри блока.

Сами по себе они представляют контейнеры с содержимым. Блоки всегда занимают всю ширину страницы по умолчанию и каждый новый блок начинается с новой строки.

Блоки это базовые основы HTML без которых создание сайтов не видится возможным.

К блочным элементам относят несколько тегов, но самый основной это парный тег <div>

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

Выравнивание содержимого внутри <div> происходит с помощью атрибута align, который принимает 3 значения:

  • left - выравнивание по левому краю.
  • center - выравнивание по центру.
  • right - выравнивание по правому краю.

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

<div align="center">
  <h1>Заголовок первого уровня</h1>
</div>

Затем с тем же примером выровняем по правому краю и добавим внутрь еще ссылку и картинку. Создание ссылок в HTML мы с Вами проходили в предыдущей статье:

<div align="right">
  <h1>Заголовок первого уровня</h1>
  <a href="index" title="Ссылка">Ссылка на сайт<a>
<br />
  <img src="image.jpg" alt="картинка" />
</div>

Видите разницу в браузере? Посмотрите!

Тег <br />, который Вы заметили, наверное, служит для переноса строки.

Также должен обратить Ваше внимание на блочный тег абзаца <p>

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

Браузер, как только видит тег <p>, сразу добавляет к нему сверху и снизу отступ, отделяя его от остальных элементов:

<p>Первый абзац текста</p>
<p>Второй абзац текста</p>
<p>Третий абзац текста</p>

Также существует блочный элемент <hr />. Он одиночный и применяется для создания горизонтальной линии. Например, чтобы отделить один блок сайта с информацией от другого. Применим его к нашим блокам:

<html>
<head>
</head>
<body>
 <div align="right">
   <h1>Заголовок первого уровня</h1>
   <a href="index" title="Ссылка">ССылка на сайт<a>
   <br />
   <img src="image.jpg" alt="картинка" />
 </div>
  <hr />
  <p>Первый абзац текста</p>
  <p>Второй абзац текста</p>
  <p>Третий абзац текста</p>
</body>
</hmtl>

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

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?