Тег div в HTML. Основы HTML для начинающих. Урок №17

Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я расскажу коротко о теге <div> для чего он нужен, как им пользоваться.
Урок будет очень коротким, но очень важным и полезным. Если вы в дальнейшем будете создавать сайты, макеты, шаблоны, то вам придется очень часто видеть тег <div>.

Когда-то, до царя Гороха,

для создания каркаса сайта использовали таблицы HTML:

Теперь все изменилось! Вместо тега <table> для создания каркаса сайта стали использовать тег <div>.

○ тег <div>

тег  <div> - это блочный элемент, внутри которого могут находиться другие теги, содержание веб страницы. Своего рода, это контейнер, который можно легко видоизменять и выводить в любом месте веб страницы с помощью CSS. Без использования CSS тег <div> мало функционален. Но вы не заморачивайтесь и не кидайтесь сразу изучать основы CSS. Познакомьтесь с тегом <div>, пройдите полностью основы HTML и только тогда переходите к изучению CSS, иначе запутаетесь.

Итак, тег <div>, закрывающий тег обязателен.

<div>содержимое</div>

* атрибуты тега <div>

Чтобы выравнивать блок <div> с помощью CSS, используют атрибут align:

align

• Center - выравнивание блока по центру. Пример: align="center".
• Left - выравнивание блока по левому краю (по умолчанию). Пример: align="left".
• Right - выравнивание блока по правому краю. Пример: align="right".

Пример:

<div align="left">блок будет размещен в левой части html страницы</div>
<div align="right">блок будет размещен в правой части html страницы</div>
<div align="center">блок будет размещен по центру html страницы</div>

class

class - имя класса для связки с CSS оформлением. Пример: class="имя".

Пример:

<div class="header"><img src="http://stepkinblog.ru/wp-content/themes/stepkinblog/images/heder.png"></div>

id

id - имя CSS идентификатора. Пример: id="#имя".

Пример:

<div id="#header"><img src="http://stepkinblog.ru/wp-content/themes/stepkinblog/images/heder.png"></div>

title

title – описание блока в виде всплывающей подсказки. Пример: title="описание".

Пример:

<div title="А вот и я!">Пример всплывающей подсказки</div>

[посмотреть все примеры]

Как я и говорил, урок короткий, но, поверьте, очень важный. Удачи, жду вас на следующих своих уроках! Не пропустите.