×
Вы действительно хотите открыть доступ к тестированию по курсу HTML & CSS на 40 дней?
ВИДЕОУРОК №5. Теги div и span
Здравствуйте, уважаемые слушатели.
Мы с вами продолжаем курс лекций по HTML. Сегодня поговорим о тегах div span. Посмотрим на тег div. Давайте посмотрим, как можно сделать такую вот разметку страницы. Вы помните наш предыдущий урок, там мы изучали таблицы, и вы наверно думаете, что такую разметку можно сделать как раз с их помощью. Вот здесь можно создать и объединить их и здесь тоже. Давайте подумаем, какие могут быть недостатки в таком способе создания данной страницы.
Я создаю первую строку, за ней вторую. Создаю в них ячейки. Что, если я захочу создать вот здесь ячейку шире? Верхняя ячейка автоматически расширится до нижней. Если я захочу создать вложенную ячейку. Должен быть какой-то механизм, позволяющий делать такие вещи проще и быстрее. Таким тегом и является тег div.
С его помощью мы легко можем создавать такие страницы без использования таблиц. Тег <div> предназначен для создания слоя.
Давайте посмотрим, как он используется. Обратите внимание, мы указывается открывающийся тег и закрывающийся, а между ними содержимое контейнера.
Открываем первый пример начинаем наше знакомство.
Вот мы видим атрибут <style> , задающий какой-то стиль, background задает фон и т.д. Давайте запустим пример и посмотрим. Здесь мы видим желтую полосу – это и есть наш контейнер. Давайте еще посмотрим примеры.
Здесь мы видим три контейнера. Давайте запустим. Они выводятся в порядке очередности.
Поговорим более детально о данном теге.
Тег <div> более гибкий тега <table>.
Размеры блока задают с помощью свойств <width> и <height>.
Точка с запятой обязательно.
Давайте посмотрим на примерах.
Вот у нас тег <div>. Запустим пример. Вот вывелся такой квадрат. Думаю, понятно, что ширину и высоту мы задали и получили вот такой пример.
Давайте посмотрим дальше. Вот у нас три контейнера. Вот у нас был похожий пример. Только тут мы не задавали ширину и высоту.
Давайте поговорим о вложенности, что мы можем размещать в теге <div>.
Давайте поговорим о позиционировании слоев.
Эти слои расположены друг за другом. При этом мы задали им какие-то размеры: ширину и высоту. Вот здесь мы еще видим отступ. Размер слоя по вертикали определяется содержимым.
Оговорим об обтекании и о свойстве float. Элементы автоматически располагаются по вертикали. Если же нам нужно разместить их по горизонтали, то следует использовать свойство float.
Мы можем наш элемент разместить как с правого края страницы, так и с левого. Свойство может принимать 3 значения.
Давайте посмотрим, как это все работает.
Сразу же запустим данный пример. Вот у нас тег. Этот текст находится в контейнере. В теле <body> у нас есть тег <div>, в котором свойству float присвоено значение right. В данном случае обтекания у нас не видно, но выравнивание мы можем наблюдать. Давайте попробуем изменить. Напишем left. Вот что у нас получится. Обратите внимание. Высота текста указывает, какая должна быть высота нашего элемента. Ширина нашего элемента также может задаваться.
Видите, когда не указываем свойство float или задаем ему значение NULL, результат один и тот же.
Посмотрим дальше. На 9, 10, 11 строках мы указываем тег div, в свойстве указано, что элемент будет находиться справа страницы. Заметим, что наш элемент будет обтекаем. Как только выполнится 10 строка, новый тег будет изображен вот так, потому что желтый обтекаем с левой стороны.
Далее зеленый также обтекаем с левой стороны.
Запустим и посмотрим. Вот наши элементы.
Давайте посмотрим еще пример. Последний на свойство float. Отличие с предыдущим примером – это выравнивание по левой стороне. Давайте предположим, как они будут расположены в нашем браузере. Наши элементы теперь будут обтекаемы справа.
Давайте с вами посмотрим, правильно ли мы предположили.
Посмотрим теперь на свойство clear. Оно отменяет обтекание или запрещает обтекание элемента с указанной стороны.
Посмотрим на наш рисунок. Допустим, мы хотим отменить обтекание вот этого нижнего элемента.
Для этого нам нужно использовать свойство clear. Наиболее используемым его значением является both, которое убирает обтекание с обеих сторон нашего слоя.
Давайте откроем пример. Вот у нас указано три слоя. Вот указано, что этот слой будет обтекаем по правой стороне и будет находиться с у самой крайней границы страницы.
Мы хотим добиться отмены обтекания с двух сторон. Давайте посмотрим, как это будет выглядеть. Обтекание по правой стороне разрешено, поэтому зеленый сразу за желтым и расположился. На третьей строке отменено обтекание. Давайте уберем свойство clear. Вот что у нас получается.
Поговорим теперь о вложенности слоев. С помощью таблиц – это довольно трудоемко.
Вот мы видим три вложенных слоя. Синий, желтый и т.д. давайте посмотрим, как это все реализовать.
Очевидно мы можем нарисовать такой вот один слой, далее следующий, а далее внутри них разместить еще слои.
Для этого нужно нарисовать два базовых слоя и разместить в них еще по два слоя.
Мы указываем ширину, высоту, фон. Вот у нас еще один тег. Все то же самое: ширина, высота, фон. Посмотрим, как это сработает. Видите, высота каждой по 200 пикселей, в сумме выходит 400, и ширина также 400 пикселей. Теперь в каждом из этих элементов разместим квадраты.
Давайте разбираться, как это можно сделать.
Розкоментируем вот эту строку и эту. Что у нас получится. В нашем теге div мы указали еще два таких же тега div. И здесь также. Давайте посмотрим, что получилось.
Вот этот тег отработал, вот этот и т.д.
Изначально мы вывели некую заготовку и в ней разместили еще два тега и вот такое получили.
Свойство padding. Желтым у нас показано содержимое элемента, синим – сам наш элемент. Давайте смотреть, как это реализуется. Запустим и посмотрим. Вот у нас появился такой квадрат. Текст в нем размещен на расстоянии 30 пикселей сверху, слева и справа. Вниз больше потому, что мы так задали размер нашего слоя.
Давайте нажмем F12. У нас появилось такое вот дополнительное меню. Что мы можем увидеть? Знакомую нам разметку. Давайте выберем ее и справа у нас появляется такая вот подсказка, которая укажет мне, где находится мой слой. Зеленым у меня подсвечен отступ – padding. Будем еще изучать свойство margin. Оно отвечает за отступы от границ элемента до границ соседних либо родительских элементов.
Вот представьте себе, что вот это наш слой, стрелками обозначены отступы. Это как раз и есть отступы до соседних или родительских элементов.
Здесь у нас дано два слоя. Первый 200 на 200 пикселей, margin – 0 пикселей. В следующем - margin – 0 пикселей. Запустим и посмотрим. Вот здесь у нас 0 пикселей. Вот это расстояние 30 пикселей, вот это – тоже 30 пикселей.
Вот у нас 200 на 200, padding – 0, margin – 0.
Здесь margin – 30 пикселей.
Познакомимся немного детальней с темой отступов.
Можете заметить, что у нас здесь есть новый параметр auto. Он говорит о том, что отступы следует сделать равными с обеих сторон.
Посмотрим на примере, как это работает.
Если задаем 4 параметра, то порядок будет по часовой стрелке.
Посмотрим на примерах.
На 13 строке у нас указан слой синего цвета. В нем вложен слой, который будет желтым. Ему передано два параметра - 200 пикселей и auto. Вот слой, который нас интересует. Вот у нас 200 пикселей. Нажмем F12 и посмотрим, что нас такое auto. Я выбрал желтый цвет. Тут указан margin 200 пикселей, и с помощью параметра auto указано расстояние 100 пикселей.
Вот здесь у нас осталось по 100 пикселей.
Давайте смотреть следующий пример.
Давайте посмотрим, как это будет выглядеть в браузере.
Здесь у нас передано 4 параметра. По часовой стрелке у нас указано 10, 20, 30 пикселей.
Также можно создать отступы для конкретной стороны с помощью свойств padding-top, padding-bottom и т.д.
Если укажите padding-top, то будет отступ только сверху и т.д.
Вот наш слой. Padding – это отступ от нашего содержимого до границ слоя. В данном случае кругом 40.
Давайте изменим пример и запустим. Сверху, слева и справа у меня стали нули, а снизу у меня 40 пикселей. Попробуем еще раз изменить. Вот 40 пикселей справа.
Рассмотрим теперь следующий тег <span> </span>.
Он применяется для форматирования текста.
В этом теге мы указываем стиль, цвет. Текст внутри этого элемента приобретает все свойства, определенные в открывающемся теге.
Следует отметить, что вот эту рекомендацию относительно аккуратности использования нужно учитывать.
Покупай подпискус доступом ко всем курсам и сервисам
Вопросы и ответы
Онлайн курсы имеют ряд преимуществ перед оффлайн форматом:
- Независимость от локации. Онлайн позволяет учиться где угодно.
- Сохранение денег и времени на дорогу. Вы экономите время и деньги с поездок на курсы и обратно.
- Онлайн курсы дешевле. Нет нужды в помещении и ноутбуках для студентов, поэтому стоимость ниже.
- Удобный темп обучения, постоянный доступ к информации. Обучение в вашем темпе в любом месте 24/7. Также есть доступ к записанным урокам, чего нет в оффлайн формате.
На ITVDN есть 2 формата обучения: Live Online и видео курсы. Цена обучения зависит от выбранного вами способа обучения.
Если вы хотите учиться самостоятельно в формате видео курсов, стоимость обучения составит в среднем 10-15 USD в месяц в зависимости от выбранного вами пакета подписки.
Live Online – это онлайн обучение с тренером в группах вместе с другими студентами. Учеба в данном формате стоит в среднем 6-7 USD за один час.
Зависит от того, сколько внимания программированию вы будете выделять ежедневно, какой именно это язык и какой у вас опыт кодинга. Среднее время на овладение одним языком при условии регулярных занятий хотя бы 2 часа в день:
- новички – от 3 до 6 месяцев;
- те, кто имеет базовые знания другого языка – от 1 до 3 месяцев;
- профессиональные программисты – до 1 месяца.
Самый лучший вариант инвестиции времени – 8 часов ежедневно (20% теории + 80% практики). Больше практики – быстрее овладеете программированием.
Для овладения IT-специальностью нужно выделить не менее 500 часов, из которых около 100 часов – на просмотр видео уроков или посещение онлайн занятий с ментором, а 400 – на выполнение практических заданий по пройденным темам.
В зависимости от того, сколько времени вы готовы выделять на обучение в день, вы сможете пройти программу за 3-8 месяцев. Если у вас есть определенная база знаний по IT, количество необходимого времени будет меньшим.
Также продолжительность обучения зависит от выбранной вами специальности, поскольку набор технологий, которые вы должны изучить, будет разным.
Начинать следует с тех, которые содержат в названии слово “Стартовый”. Такие курсы имеют вводный материал для знакомства с языком или технологией.
Если вы планируете учиться по конкретной специальности в формате видео курсов, перейдите на страницу специальности и прокрутите до заголовка “Видео курсы по специальности …”. Ниже будет список видео курсов, отсортированных в порядке необходимости изучения.
Ещё ниже вы найдете Roadmap по специальности – путеводитель, на котором изображены видео курсы в виде дерева, что также легко сориентирует вас в последовательности прохождения курсов.
Если вы выбираете Live Online обучение с тренером, всё очень просто:
- посещайте все занятия, вовремя выполняйте д/з;
- дополнительно смотрите видео уроки на ITVDN;
- после каждого урока проходите краткое тестирование;
- практикуйтесь в Интерактивном практикуме;
- общайтесь с одногруппниками в ходе решения д/з, задавайте вопросы ментору на уроках и вне их;
- в конце каждого курса сдавайте экзамен на TestProvider (и получайте Сертификаты);
- в конце всего обучения проходите экзамен по специальности и получите диплом.
Мы имеем специальный раздел – “Вакансии”, который помогает нашим студентам искать первую работу в IT. Детальнее о возможностях и о разделе по ссылке.
А для тех, кто учится онлайн с ментором, у нас дополнительно предусмотрена индивидуальная помощь HR-специалиста по подготовке к трудоустройству с первого дня обучения и до получения первого job-оффера. Она включает в себя помощь в оформлении соцсетей, подготовке резюме, проведении пробного собеседования, предоставлении советов по поиску работы и самопрезентации и т. д.
К сожалению, данная услуга ITVDN не предусмотрена, однако вы можете заказать индивидуальную консультацию с нашим ментором. Подробности вы найдете по ссылке.
На ITVDN отсутствуют курсы для детей, поэтому комфортный возраст для начала обучения по нашим материалам – от 14 лет.
Никаких требований к вашему уровню английского мы не выдвигаем, поскольку все учебные материалы идут на русском или украинском языках. При этом базовые знания английского будут полезны для комфортного поиска информации в гугле, чтения документаций в интернете и прочего.
На ITVDN можно пройти полное обучение с нуля до специалиста уровня Trainee/Junior. Если вы уже практикующий разработчик, наши видео курсы помогут углубить ваши знания до уровня Middle.
После окончания действия вашей подписки доступ к видео курсам, к сожалению, будет закрыт. Однако вы сможете пользоваться теми учебными материалами, которые вы скачали на свой девайс во время обучения.
Нет, скидки не суммируются.
Отзывы наших студентов
Отзывы в DOU
4,9/5 - 200 отзывов
Отзывы в Facebook
5,0/5 - 707 отзывов
Отзывы в Google
4,9/5 - 836 отзывов