Видео курс HTML и CSS. Таблицы и списки - курсы ITVDN
ITVDN: курсы программирования
Видеокурсы по
программированию

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

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

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

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

      ×

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

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

      ВИДЕОУРОК №4. Таблицы и списки

      Войдите или зарегестрируйтесь для того чтоб продолжить просмотр бесплатного видео
      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
      Вступление. Создание таблицы <table>
      0:02:09
      Пример таблицы. Строки и ячейки
      0:04:38
      Заголовки в ячейках
      0:07:10
      Название таблицы, тег <caption>
      0:08:25
      Пустые ячейки
      0:11:01
      Пример атрибута border
      0:13:14
      Атрибуты тега <table>
      0:14:08
      cellspacing, cellpadding, colspan, rowspan
      0:19:37
      Пример атрибута colspan
      0:21:34
      Пример атрибута rowspan
      0:25:23
      Фон таблицы
      0:28:18
      Выравнивание в ячейках
      0:29:51
      Классная работа
      0:43:26
      Упорядоченные списки
      0:49:06
      Неупорядоченные списки
      0:53:57
      Виды списков
      0:57:22
      Работа с цветом
      ПОКАЗАТЬ ВСЕ
      Титры видеоурока

      Здравствуйте, уважаемые слушатели. Сегодня рассмотрим тему работы с таблицами и списками. Следует сказать, что таблицы часто используются для визуализации каких-то данных. Рассмотрим такой тег как table. Border - его атрибут. Посмотрим данный пример в браузере. Здесь у нас одна строка и одна ячейка. Если используем еще одну ячейку, то данная строка у нас расширится. Здесь показано, как формируются таблицы. Посмотрим, как это работает в реальном примере. Обратите внимание на 14 строку. Здесь мы создаем таблицы. Здесь одна строка и 3 ячейки. Посмотрим дальше. У нее будет 2 строки и 3 ячейки. Запустим. Посмотрим на тег <th>. Он описывает специальный вид заглавных ячеек. Смотрим, как это работает. Создаем одну строку и три ячейки. Запустим. У нас имя и телефон выделены жирным шрифтом. На 13 строке создаем таблицу. На 15 – 17 строках мы используем те <th>, поэтому наш текст выделен жирным. На 27 строке также создаем таблицу. Каждая первая ячейка помечена тегом <th>. Запустим.

      Далее рассмотрим использование тега <caption>. Посмотрим на примерах. Запустим пример.

      Очень важный момент в нашей теме – это создание пустых ячеек. В данном случае нужно использовать тег nbsp;. Видите, здесь мы не используем данный тег. Давайте запустим. Получили довольно неплохое отображение. Это был Chrome. Давайте сменим браузер. Такой результат нам не подходит.

      Теперь запишем символ nbsp; и все отображается хорошо. Отсюда вывод – чтобы не гадать, в каком браузере будет хорошо отображаться пустая ячейка, а в каком нет, следует всегда использовать символы nbsp;.

      Теперь поговорим об атрибуте border. На 12, 25 и 37 строках мы задаем данный атрибут. Запустим и посмотрим. Он задает границы таблицы. Отметим, что он мало используется веб-разработчиками.

      Для того, чтобы не видеть линии таблицы, нужно не указывать атрибут border.

      Рассмотрим еще несколько атрибутов. Давайте рассмотрим их подробнее. Атрибут Cellspacing. Стрелочки – это и есть работа нашего атрибута. Запустим.

      Посмотрим, как это реализовано. В первой таблице Cellspacing = 0, а во второй он равен 10 пикселям.

      Атрибут cellpadding. Желтое – наша ячейка, синее – наш текст. Запустим и посмотрим. Вот второй таблице наш текст расположен на расстоянии 10 пикселей от границ ячеек.

      Атрибут colspan. Используется в таблицах, состоящих из нескольких строк. Большая ячейка состоит из двух маленьких, но мы их объединили в одну.

      Давайте посмотрим, как это работает. На 13й строке мы создаем таблицу. На 16й строке мы записываем объединение двух ячеек. Мы их объединим и границу сотрем. Запустим.

      На 12й строке мы создаем таблицу. Далее создаем первую строку таблицы. Создаем вторую строку. На 18й строке мы задаем ширину и говорим, что туда следует записать telephone. Давайте попробуем представить, что у нас получится. В строке 18 мы указываем, что хотим создать еще одну ячейку шириной в две ячейки. Она занимает ширину двух строк. У нас получается пустое место. Для этого мы создаем еще одну строку. Давайте проверим. Да, все правильно. Telephone у нас занимает 2 ячейки. Давайте удалим 3ю строку. Вот что получится.

      Поговорим теперь, как можно задать фон таблицы.

      На примерах будем смотреть, как это работает.

      На строке мы задаем стиль и цвет фона.

      Во второй таблице мы задаем картинку в качестве фона. Давайте посмотрим.

      Следующий пример указывает нам другой способ задания фона. Да, действительно.

      Следующий пример показывает, как можно выравнивать текст в ячейках. Давайте запусти его. Первый столбец выровнен по левому краю. Давайте посмотрим в код.

      Давайте выполним теперь классную работу. Нам требуется нарисовать таблицу. Давайте поговорим об особенностях выполнения данного задания. Вот мы видим, что эта ячейка состоит из нескольких строк. Я хочу чтобы эти линии исчезли, а также эти, и эта. Давайте попробуем сделать такую таблицу. Какой алгоритм? Первое – мы используем тег table. Мы должны создать строки. Нам нужно 4 строки. Они создаются с помощью тега <tr>. Далее создаем ячейки. Первая ячейка будет большая. Для этого у нас есть специальный атрибут. Создаем ячейку, объединенную ячейку. Мы хотим объединить ячейки всех строк. Используем атрибут rawspan. Мы хотим объединить 4 пустые ячейки. Пустоту мы отображаем с помощью ключа  . Смотрим дальше. Вторая ячейка простая. Далее. Следующая ячейка должна объединять 2 строки. Нам нужен атрибут rawspan. Мы нарисовали большую ячейку, простую маленькую и большую, объединяющую 2 строки. А что нам объединять во второй строке? Нам нужно реализовать всего одну ячейку. Давайте запишем в код и запустим. У нас пока ничего не получается. Почему ? Для таблицы должны быть указаны границы. Укажем border. Все, работает.

      Зададим ширину.

      Это у нас уже реализовано. Дальше нам нужно эта и эта ячейки.

      Находим третью строку, вставляем и запустим.

      Теперь нам осталось объединить вот здесь. Для этого используется атрибут colspan. Мы объединили эту ячейку и эту. Запустим. Все получилось. Здесь объединение строк, здесь тоже, а здесь объединение столбцов.

      Рассмотрим тему Списки. Давайте посмотрим, как их создавать. Для создания упорядоченного списка понадобится тег <ol> - ordered list. Посмотрим, как это записывается.

      Посмотрим теперь на атрибуты, использующиеся при записи списков.

      Посмотрим вышеуказанное на примере на следующем слайде. Следует сказать, что по умолчанию список будет нумероваться римскими цифрами.

      Перейдем к примеру. На строке 23 начинается наш список. И что мы увидим в браузере? Вот здесь мы увидим 1, здесь - 2 и т.д.

      На 30й строке у меня также упорядоченный список, но здесь я указываю, что хочу, чтобы список нумеровался большими буквами и т.д. на 50й строке у меня список будет нумероваться маленькими римскими цифрами. Запустим пример.

      Вот что у нас в окне браузера.

      Следующий вид списков – неупорядоченные списки. что это значит? Сейчас разберемся. Посмотрим, как он создается. В данном случае у нас указываются черные точки перед пунктами. Посмотрим, какие символы что мы еще можем использовать.

      Также мы можем устанавливать маркеры в атрибуте style, указав его свойство list-style-image:url(); .

      Посмотрим, как это будет работать.

      Посмотрим на примерах, как работают неупорядоченные списки. на 25й строке мы создаем такой список. Мы здесь увидим напротив каждого пункта черную точку.

      Далее мы увидим черные круги напротив каждого пункта, а здесь – черные квадраты. Запустим, и посмотрим, что мы увидим в браузере.

      Теперь поговорим о вложенных списках. Такие списки реализованы путем вложения одного списка в другой. При этом, по умолчанию, маркер главного и вложенного списков будут отличаться. Давайте откроем пример и посмотрим. Запустим. У нас здесь ненумерованный список, а далее нумерованный. Давайте посмотрим, как это сделано.

      Поговорим о списке определений. Для него используется такой контейнер как <dl> </dl>. Посмотрим, как такого рода списки выглядят в браузере. Посмотрим на его особенности. Запускаем. Вот у нас «кофе» и далее само определение «черный горячий напиток». Вот так работает этот список. Довольно незамысловато.

      А теперь мы поговорим более дательно о цвете. Давайте поговорим о цветовых палитрах. Это – RGB и CMYK. Вторую используют больше полиграфисты.

      Задавать цвет в разметке можно тремя способами.

      1.

      Указав цвет соответствующей семантической единицей.

      2.

      Указав цвет через его RGB значение насыщенности. Первая цифра – насыщенность цвета Red, вторая – Green, третья – Blue.

      3.

      Указал шестнадцатеричный код цвета. Ставим значек # и записываем шестнадцатеричное представление некоего цвета. Вот перечень цветов в шестнадцатеричном формате.

      Рассмотрим более детально, как задавать цвет в RGB. Цвет в таком формате создается смешиванием трех цветов: красного, зеленого и синего. Т.е. для формирования цвета нам нужно указать насыщенность каждого из цветов.

      Вот представление цвета RGB в шестнадцатеричном формате.

      Посмотрим на примеры. Первый пример покажет, как все вышесказанное использовать в нашей разметке.

      Здесь мы задаем цвет фона.

      Здесь задали какие-то ячейки. Далее.

      На 11 строке мы задали какой-то цвет в шестнадцатеричном формате и т.д.

      Т.е. мы здесь рисуем таблицу и хотим задать цвета для отдельных ячеек. Давайте запустим и посмотрим, что получилось.

      У нас получилась таблица. Здесь цвет. Здесь шестнадцатеричное представление цвета, а здесь десятичное.

      Посмотрим далее. Задаем цвета. Вот что у нас получится. Это таблица, но она невидимая.

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

      Заходите на наш тест-провайдер, проходите тесты. Спасибо за внимание. Всего доброго. До свидания.

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

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

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