Найти в Дзене

УРОК 5. ТАКОЙ ПРЕКРАСНЫЙ ТЕГ <DIV>

Тег <div> - самый простой и часто употребимый блочный тег в веб-проектировании. Он и вправду самый удобный, потому что может заменить почти любой ныне и ранее использовавшийся блочный тег. Что такое блочный тег Блочный тег описывает (или формирует) некий массив информации - текст, изображение и прочее, - т.е. это своего рода контейнер для хранения информации, который можно ставить как угодно относительно других блоков, а также редактировать информацию внутри контейнера как угодно проектировщику сайта. Почти все теги парные, т.е. состоят из открывающего и закрывающего тега: Обычно парные теги ставятся сразу до того, как наполнять их информацией: Теперь мы можем заполнять этот удивительный универсальный контейнер, сформированный тегом <div>. Предлагаю написать внутри любое предложение из 6-10 слов, например, такое: Теперь вы можете открыть папку со своим первым проектным файлом project1.html и дважды кликнуть на него левой кнопкой мыши. Он откроется в том браузере, который предустановлен

Тег <div> - самый простой и часто употребимый блочный тег в веб-проектировании. Он и вправду самый удобный, потому что может заменить почти любой ныне и ранее использовавшийся блочный тег.

Что такое блочный тег

Блочный тег описывает (или формирует) некий массив информации - текст, изображение и прочее, - т.е. это своего рода контейнер для хранения информации, который можно ставить как угодно относительно других блоков, а также редактировать информацию внутри контейнера как угодно проектировщику сайта.

Почти все теги парные, т.е. состоят из открывающего и закрывающего тега:

  • <div> - открывающий тег, который ставится в начале блока (контейнера) информации;
  • </div> - закрывающий тег, который ставится в конце блока (контейнера) информации.

Обычно парные теги ставятся сразу до того, как наполнять их информацией:

Наш уже готовый файл с парным тегом <html>. Ставим курсор между ними и жмём Enter.
Наш уже готовый файл с парным тегом <html>. Ставим курсор между ними и жмём Enter.
Появилась пустая строка 3. Туда и вписываем наш новый блочный тег <div>.
Появилась пустая строка 3. Туда и вписываем наш новый блочный тег <div>.
При наборе появится подсказка Sublime. Жмём на неё, чтобы упростить себе работу!
При наборе появится подсказка Sublime. Жмём на неё, чтобы упростить себе работу!
Мы сформировали первый свой блок! Он - парный. Информацию будем записывать внутри.
Мы сформировали первый свой блок! Он - парный. Информацию будем записывать внутри.

Теперь мы можем заполнять этот удивительный универсальный контейнер, сформированный тегом <div>.

Предлагаю написать внутри любое предложение из 6-10 слов, например, такое:

Внешний вид в Sublime Text 3.
Внешний вид в Sublime Text 3.

Теперь вы можете открыть папку со своим первым проектным файлом project1.html и дважды кликнуть на него левой кнопкой мыши. Он откроется в том браузере, который предустановлен на вашем компьютере. Советую работать с проектами в Google Chrome:

Вот так будет выглядеть ваше предложение, вписанное в контейнер тега <div>.
Вот так будет выглядеть ваше предложение, вписанное в контейнер тега <div>.

Пока это только текст. Однако это уже ваш первый текст!!! Вы научились размещать текстовую информацию для виртуальной вёрстки сайтов.

На следующем уроке мы научимся редактировать внешний вид текста с помощью тегов HTML.

Если вам понравилось, подписывайтесь на мой канал!

PhD Alexander G. Buychik, info@buychik.ru, +79217702472