Видео курс HTML и CSS. Урок теги div и span - онлайн обучение программированию ITVDN
ITVDN: курсы программирования
Видеокурсы по
программированию

    Выбери свою IT специальность

    Начать бесплатно

    Выбери свою IT специальность

    Начать бесплатно

      ×

      Вы открыли доступ к тесту! Пройти тест

      Вы действительно хотите открыть доступ к тестированию по курсу HTML & CSS на 40 дней?

      ВИДЕОУРОК №5. Теги div и span

      Войдите или зарегестрируйтесь для того чтоб продолжить просмотр бесплатного видео
      HTML&CSS — это “must have” для каждого, кто хочет стать веб-разработчиком и создавать сайты и веб-приложения. На курсе вы получите исчерпывающие знания по верстке страниц на языке разметки HTML (основные теги, работа с изображениями, файлами, таблицами), по работе с каскадными таблицами стилей CSS (выравнивание, шрифты, фоны, цвета и многое другое). А так же сможете применить полученные знания на практике.
      Читать дальше...
      Изучив данный видео курс, вы получите исчерпывающие знания по верстке страниц на языке разметки HTML (основные теги, работа с изображениями, списками, таблицами) и по работе с каскадными таблицами стилей CSS (выравнивание, шрифты, фоны, цвета, селекторы и многое другое). На последнем уроке будет наглядно продемонстрирован поэтапный процесс верстки веб-страницы. Успешно обработав и усвоив все обучающие материалы, вы будете владеть базовым инструментарием создания сайтов, который станет отличным фундаментом для дальнейшего продвижения в сфере веб-разработки.
      Читать дальше...
      В этом видео уроке рассматриваются особенности работы с изображениями в языке HTML. На уроке будет подробно рассмотрена процедура вставки изображения в разметку с помощью тега img, а также атрибуты этого тега. Будут рассмотрены основные форматы изображений, которые поддерживаются современными браузерами, а также возможность добавления анимации на страницу. Вы научитесь создавать подсказки пользователю при наведении на конкретное изображение, а также научитесь задавать размеры изображений, создавать карты изображений и многое другое. После просмотра видео урока Вы сможете уверенно управлять изображениями на Ваших страницах.
      Читать дальше...
      На этом видео уроке Вы познакомитесь с HTML тегами, способными размещать таблицы и списки на Ваших страницах. На уроке будет подробно рассмотрен тег table. Вы разберетесь с особенностями его применения, научитесь создавать таблицы с различной размерностью и разнообразным содержимым, научитесь задавать фон и размер отдельно взятых ячеек. Вторая часть урока будет посвящена спискам. Вы узнаете, как создавать упорядоченные списки, неупорядоченные списки, вложенные списки и списки определений. Видео урок имеет большое количество практических примеров, изучив которые вы сможете уверенно работать со списками и таблицами, разрабатывая Ваши собственные сайты.
      Читать дальше...
      На этом видео уроке Вы познакомитесь с понятием слоя в языке HTML, научитесь создавать слои с помощью тега div, после чего научитесь переопределять их размеры, создавать сложенные вложенные слои, позиционировать их, задавать им обтекание и различные отступы. Все это богатство возможностей будет рассмотрено в контексте атрибутов тега div. Кроме того, в уроке будут рассмотрены особенности применения тега span для форматирования и создания уникального стиля для любого фрагмента текста на странице. Видео урок, в простой и доступной форме, познакомит Вас с основой современной верстки страниц, что поможет Вам тут же начать делать первые самостоятельные шаги на этом поле.
      Читать дальше...
      На этом видео уроке Вы познакомитесь со специальным языком для описания внешнего вида веб-страницы - CSS (Cascading Style Sheets). На уроке будут рассмотрены основные способы интеграции CSS в создаваемую веб-страницу, а также семантика CSS и особенности применения стилей. На практических примерах будут продемонстрированы наиболее часто используемые селекторы для задания стиля определенным частям документа, продемонстрирован приоритет между различными подходами при задании стилей и многое другое. Этот урок позволит наполнить Вашу страницу красками и придать ей желаемого Вами вида.
      Читать дальше...
      На этом видео уроке Вы познакомитесь с понятием метатегов, рассмотрите их типы и предназначение. Познакомитесь с тегом meta и его атрибутами. Значительная часть времени урока будет уделена верстке. Вы рассмотрите понятие «резиновой», фиксированной и смешанной верстки. На примерах рассмотрите тему позиционирования элементов, познакомившись с таким свойством как position и его параметрами. Посмотрите как можно задавать уровень прозрачности элементам и задавать скругление для углов рамки элементов. Данный видео урок, позволит Вам расширить Ваши познания в верстке веб-страниц и вывести их на качественно новый уровень.
      Читать дальше...
      На данном видео уроке Вы познакомитесь с формами в HTML и рассмотрите особенности применения тега form. Рассмотрите и сравните методы запроса к серверу, научитесь создавать элементы формы: различные кнопки, поля для ввода информации, выпадающие списки. Научитесь группировать и создавать скрытые и многострочные поля. Познакомитесь с уже устаревшими атрибутами; атрибутами, что позволяют задавать состояние элемента, деактивировать элементы, делать их недоступными для записи. Все этот будет представлено Вам в виде примеров с детальным пояснением каждой строки в разметке. Этот урок дополнит копилку Ваших знаний, после чего Вам будет по силам самостоятельная верстка полноценной веб-страницы.
      Читать дальше...
      На данном видео уроке Вы познакомитесь с алгоритмом создания веб-страницы. Вам будет дан ответ на «вечный» вопрос, с чего же начать создание веб-страницы? Пошагово будет продемонстрировано ее создание, рассказана каждая строчка кода и продемонстрирована ее работа в браузере. Этот урок представляет собой консолидацию всего материала, который был изложен Вам в предыдущих семи уроках. Прослушав урок и взяв его пример за основу, Вы смело можете начать делать свои собственные веб-сайты.
      Читать дальше...
      ПОКАЗАТЬ ВСЕ
      основные темы, рассматриваемые на уроке
      0:00:00
      Вступление
      0:04:40
      Пример тега <div> и его преимущества
      0:08:46
      Размер слоя
      0:11:25
      Вложенность
      0:14:44
      Обтекание элементов, свойство float
      0:24:24
      Свойство clear
      0:28:21
      Вложенность слоев
      0:33:52
      Отступы, свойство padding
      0:36:55
      Свойство margin
      0:41:41
      Примеры свойств margin и padding
      0:49:10
      Тег <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>.

      Он применяется для форматирования текста.

      В этом теге мы указываем стиль, цвет. Текст внутри этого элемента приобретает все свойства, определенные в открывающемся теге.

      Следует отметить, что вот эту рекомендацию относительно аккуратности использования нужно учитывать.

      Студенты также смотрят
      HTML5 & CSS3 Углубленный
      ПОДРОБНЕЕ
      HTML5 и CSS3 Базовый
      ПОДРОБНЕЕ
      HTML5 и CSS3 Стартовый
      ПОДРОБНЕЕ
      Пакеты подписки с доступом ко всем курсам и сервисам

      Пакеты подписки с доступом ко всем курсам и сервисам

      Стартовый
      • Все видеокурсы на 3 месяца
      • Тестирование по 10 курсам
      • Проверка 5 домашних заданий
      • Консультация с тренером 30 мин
      49.99 $
      35.00 $
      Подписка
      Базовый
      • Все видеокурсы на 6 месяцев
      • Тестирование по 16 курсам
      • Проверка 10 домашних заданий
      • Консультация с тренером 60 мин
      89.99 $
      54.00 $
      Подписка
      Премиум
      • Все видеокурсы на 12 месяцев
      • Тестирование по 24 курсам
      • Проверка 20 домашних заданий
      • Консультация с тренером 120 мин
      169.99 $
      85.00 $
      Подписка
      комментарии и обсуждения
      Notification success
      Мы используем cookie-файлы, чтобы сделать взаимодействие с нашими веб-сайтами и услугами простым и значимым.