Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

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

21.12.2015


15:12


9750


пока нет


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

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

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

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

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

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

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

Теперь все изменилось! Вместо тега <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>

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

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



Случайные записи:

  1. Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15
  2. Комментарии в php коде и как закомментировать код. Основы PHP с нуля. Урок №4
  3. Подключение. Основы bootstrap 3 для начинающих. Урок №2
  4. Нам 3 годика! С Днем Рождения StepkinBlog.ru!!!
  5. Бегущая строка на HTML. Основы HTML для начинающих. Урок №9

Последние записи рубрики:

  1. Бесплатный курс по основам HTML
  2. Шпаргалка по HTML на русском языке
  3. Создание простого мини сайта. Практика по пройдённому материалу
  4. Тесты HTML онлайн. Основы HTML для начинающих
  5. Как прописать мета теги. Основы HTML для начинающих. Урок №21

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 231

Уведомление для пользователей AdBlock

Включая adblock (блокировщик рекламы) вы лишаете меня заработка, и тем самым лишаете смысла трудиться над своим сайтом, помогать вам и отвечать на комментарии. Если вы решились отключить adblock для моего блога, спасибо!

Как отключить AdBlock?