#42 Верстка сайта DIV блоками, Блочная верстка слоями тег DIV на HTML
HTML-код
- Опубликовано: 2 июн 2024
- Что такое блочная верстка сайта на практике? Верстка сайта DIV блоками или же блочная верстка слоями DIV это современная верстка сайта то есть способ создать сайт по макету. В этом видео мы начинаем верстку сайта DIV блоками на практике. Что такое блочная верстка сайта и как верстать сайт блоками DIV вы узнаете из этого урока по HTML верстке слоями с помощью DIV. В этом видео уроке я расскажу вам про тег div. Мы будем делать верстку страницы с помощью блока div на html и оформлять стили css. Рассмотрим пример того, как позиционировать элементы. Блочная верстка одна из самых популярных на данный момент и основной элемент в такой верстке это блок div. Верстка div блоками и верстка сайта на html+css тегом div, Верстка сайта DIV блоками, Блочная верстка слоями DIV2.
Навигация по видео:
00:00 Введение в блочную верстку DIV
00:40 Тег DIV на HTML
05:40 Тег DIV на CSS
16:20 Завершение
✔Советую посмотреть:
Плейлист Уроки HTML: • Уроки по HTML
Файлы проекта: yadi.sk/d/uj1f6ewR3TMYFX
Как верстать сайт блоками DIV: • #38 Слои или блоки тег...
Структура сайта: • #7 Структура сайта, Эл...
Как создать красивое меню: • #20 Как сделать красив...
⚡️ Эксклюзив на Boosty - boosty.to/itdoctor
💡 Telegram канал - t.me/itdoctor_official/4
🎥 Курсы на Stepik - stepik.org/users/387773773/teach
💰 Донаты на ЮMoney - sobe.ru/na/itdoctor
ВКонтакте - itdoctorstudio
Яндекс Дзен - zen.yandex.ru/itdoctor
Rutube - rutube.ru/channel/23500045/
#html #html5 #itdoctor #обучение
Курс Frontend разработчик на HTML, CSS и JavaScript: stepik.org/z/113402
как обойти блокировку на сайте ? чистка куки и ВПН не помогают
Дай бог тебе здоровья. Завтра же куплю у тебя курс на степеке. Ты даёшь обратную связь студентам?
@@user-cm1om1oo3p спасибо, стараюсь всем отвечать
Очень полезный урок для новичков. Спасибо, Исмаил! Побольше бы таких видео)
Огромнейшее спасибо за урок!!!
Спасибо, как всегда очень информативно и полезно!
Отличный урок!Спасибо
огромное Спасибо за Ваш труд!
Очень помог разобраться, спасибо
Вы большой молодец,спасибо большое!)
Для новичков самое то - все доступно и понятно, спасибо!
вам спасибо
Спасибо большое!) В качестве первых шагов, лучше не найти.
Большое спасибо!Очень помогли
спасибочки...наконец то поняла)
очень помог для решения задачи. забыл код. спасибо. лайк
отличный урок
Супер, у меня получилось!!!
Вобще молорик спасибо тебе норм провёл урок!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! всё гуд!!!
06.04.2022, Объяснил легко и просто. Ты гений 👍
Спасибо
На всякий случай - название плагина с символами "Special HTML characters", сочетание клавиш Alt+C
Большое спасибо за курс!
Спасибо, очень информативно и полезно
Пожалуйста
Спасибо за видео! Научился много новому
Очень рад что было полезно!
Автор просто нереальный молодец!
спасибо, стараюсь
Доброго времени суток! Исмаил подскажи в данном примере в стоит разделять по секциям (header,section,footer) а уже в них вставлять ( div ) где то я слышал это правильное составление скелета!? И логичнее было бы для меню написать тег ( nav) или это в данном примере не требуется (что первый вопрос, что второй)? Просто почему спрашиваю:!? А для того что бы если даже практиковаться на таких уроках то учится сразу писать правильно!? Ну все спс за видос!
Молодец мужик! вот понимаю видео урок! Спасибо большое!👍👍👍
Спасибо. Рад что понравился
Спасибо очень помог!
Спасибо!
Супер объяснение и пример
Спасибо
spasibo ochen pomoglo
Спасибо! Отличное видео, но красный цвет в бэке ... Меня травмирует :)))
Не досмотрел видео, цвет ужасный
Хех, это для наглядности..Для себя сами цвет выбирайте
Спасибо
Красавчик
день добрый!
Как сделать сайтбар со смещением к центру (не идеально слева)
Исмаил просто здорово. Единственное упущение для футера text-align: сenter А так замечательно. И не совсем понятно почему при задании цвета фона в одном случае используется background а в другом случае background-image. Учусь у вас вкусу. Можно было весь контент между шапкой и футером обернуть в какой нибудь див и задать ему свойство, например тот же border-radius но тогда это было бы некрасиво. А так супер :-)
В одном фон картинка в другом просто цвет,и копирай всегда в углу находится
А почему вместо дивов не используете из HTML5 header, section, aside, footer?
потому что теги header, footer и прочие теги html5 лучше индексируются поисковиками и специально были созданы для создания логической структуры сайта, а по сути это те же div.
Все повторил в точности как на видео, у меня в footer рамка белая появилась. И так во всех браузерах
Большое спасибо за видео. Очень наглядно. Подскажите пожалуйста в какой программе Вы работаете?
В этом уроке в редакторе Brackets ruclips.net/video/X6hRuYBvLmw/видео.html , а сейчас уже давно прешел на VS Code ruclips.net/p/PLuY6eeDuleIMzp2sMA9NSj4UX_pI-jECS
@@ITDoctor Спасибо
Дружище, спасибо! подскажи, как сделать правый и левый сайд бар отдельными блоками с тенью?
Пожалуйста. А в чем проблема, если вы изучаете html css то должны быть в состоянии решить такие задачи самостоятельно. Изучите flexbox если еще не знаете ruclips.net/video/Hf__JLlFxpk/видео.htmlsi=NnUvEIuvkBsKJm09
После нажатия TAB множатся строки, что это за функция, можно ссылку на видео где про это рассказывается? Спасибо
Это плагин Emmet. Вот тут подробно про все возможности ruclips.net/video/4q_1YJqW3Go/видео.html
@@ITDoctor спасибо большое
Йоу!
подскажите пожалуйста название такого плагина для VS Code (по добавлению символов вроде (с)
спасибо)
Конкретно такими не пользовался обычно на сайтах нахожу в таблицах. Но вот что то похожее, может подойдет вам. изучите попробуйте, напишите по желанию здесь, может кому то будет тоже полезно marketplace.visualstudio.com/items?itemName=brunnerh.insert-unicode
@@ITDoctor немного не то представление конечно, но спасибо)
@@ITDoctor планируете ли вы выпустить подобный курс по React.js?
@@alexyaremenko7165 в планах уже давно есть. Но в этом году не успеваю. Может до весны/лета следующего успею, но не обещаю
когда пишу lorem то у меня весь текст на редакторе идет в строчку , а не в столбик, поверил и на брекетсе, vcsode и вебсторме . Что у меня не так?
Спасибо.
не совсем понял в чем проблема.
Вид>Заворачивать строки (Активировать галочку)
Привет всем, а как сделать так , что бы работать с текстовым редактором и браузером одновременно?
Плагин LiveReload в Brackets: ruclips.net/video/lx8or38iOg4/видео.html
LivePreview в Brackets: ruclips.net/video/gWv_qN482Jg/видео.html
Или LiveServer в VS Code
Здравствуйте! Я установил autoprefixer но у меня не добавляет автоматически а только через ctrl + shit + p почему?
в настройках поищите, если нет такой возможности, то просто в конце работы делаете добавление префиксов вручную и всё. Пока пишите код вам все равно эти префиксы не нужны для всех браузеров.
@@ITDoctor Здравствуйте! Я все перепробовал но порылся в гугл и теперь через cmd и запуск от имени администратора и там пишу brackets после чего открывается новое окно и там пишу(( у меня в обычной командной строке всегда пишет что не является внутренней или внешней командой б исполняемой программой короче путаница и не знаю что делать но все же спасибо что ответили.
@@armenmanadaryan2492 может команда для powershell, потому что cmd и powershell это разные вещи и команды там поддерживаются разные.
В конце забыл убрать border :)
Господа и дамы, недавно изобрели html5 и вместо и подобных теперь есть семантические тэги и прочие. Актуальности видео особо не потеряло, но обратите на это внимание
8 видео в этом курсе посвящено как раз этому ruclips.net/video/J5TP3kqlEk8/видео.html
отлично молодец.Но почему у мя контейнер маленький,а у тя большой.Подвал у мя получился больше хотя я не задавал в стиле ему размер..
может немного различаться в разных браузерах, или у вас масштаб больше стоит
@@ITDoctor в общем дело было в разметке..Я не правильно разметил html,документ....Поставил sidebar после containera. И теперь я буду знать...Видос супер Еще раз респект.Редко найдёшь,такое пособие. Перелопатил много.Всё вода. Твой видос зашёл.
9:50, у меня текст не ставится в центр, почему?
Тоже самое
А можно немного или я бы сказал даже намногоувеличить то что Вы печятаете? Спасибо .
можно. это одно из первых видео на моем канале, там я еще не учитывал такое.
как можно написать на несколько строк сразу?
Зависит от редактора кода. Обычно с зажатым ctrl или alt + клик мышью в нескольких местах. подробнее про такие фичи можно узнать в этом видео ruclips.net/video/WJmLcnCk7OU/видео.html там много чего и другого очень полезных мелочей по работе с редактором
Зацените пожалуйста мою вёрстку (1 серия тестовая)
А где скачать плагин?
какой плагин? я все видео не помню по-секундо и про что они. Особенно те которые несколько лет назад были записаны. Подробней напишите. Можно тайминги еще скидывать в формате 01:20 которые будут указывать на конкретный момент в видео и просто детально объяснять и описывать суть вопроса.
А есть ли смысл учить html css, в 2к19?
Это основы веба в любом случае с ними столкнетесь если в веб пойдете поэтому надо знать
Простите , а на чем вы фронт писать будете ?
ясно.
спасибо но очень быстро говорите.Сложно запоминать
Обычно мне пишут что слишком медленно и меня смотрят на скорости 2Х. Но вам могу посоветовать чуть уменьшить скорость. может немного исказиться голос конечно, или смотреть с паузами, пересматривая нужные моменты.