Уроки по теме «HTML5» для начинающих
В каталоге хекслета найдено 47 уроков по теме «HTML5». Уроки по теме «HTML5» есть в курсах: Основы верстки контента, CSS: Transform (трансформация объектов), Основы современной верстки, Основы HTML, CSS и веб-дизайна.
Урок «Знакомство с HTML»
В курсе «Основы HTML, CSS и веб-дизайна»
Познакомиться с HTML и попробовать его в деле.
Урок «Элементы, теги и атрибуты»
В курсе «Основы HTML, CSS и веб-дизайна»
Изучить простую идею HTML и структуру элементов страницы.
Урок «Chrome DevTools»
В курсе «Основы HTML, CSS и веб-дизайна»
Познакомиться с Developer Tools и веб-инспектором, удобным инструментом для анализа и редактирования страницы прямо в браузере.
Урок «Основы CSS»
В курсе «Основы HTML, CSS и веб-дизайна»
Научиться задавать оформление — стили — элементам HTML-страницы.
Урок «Верстальщик vs. веб-дизайнер»
В курсе «Основы HTML, CSS и веб-дизайна»
Познакомиться с курсом и рассмотреть специальности «верстальщик» и «веб-дизайнер» в контексте развития технологий.
Урок «Размещение на GitHub Pages»
В курсе «Основы HTML, CSS и веб-дизайна»
Освежить память по теме хостинга и разместить статичную страницу бесплатно на GitHub Pages.
Урок «div, span и display»
В курсе «Основы HTML, CSS и веб-дизайна»
Познакомиться с принципами, по которым элементы выводятся на страницу и получают определённый размер.
Урок «Каскад»
В курсе «Основы HTML, CSS и веб-дизайна»
Понять принцип, по которому стили собираются в один набор из разных источников.
Урок «Правило близости»
В курсе «Основы HTML, CSS и веб-дизайна»
Рассмотреть один из базовых принципов дизайна: правило близости или grouping/proximity principle.
Урок «Интеграция с соц. сетями и семантический веб»
В курсе «Основы HTML, CSS и веб-дизайна»
Рассмотреть инструменты разметки для лучшей интеграции с социальными сетями.
Урок «Структура страницы»
В курсе «Основы HTML, CSS и веб-дизайна»
Рассмотреть полную структуру целого HTML-документа, видимые и невидимые теги.
Урок «Редакторы кода»
В курсе «Основы современной верстки»
Чтобы сохранять результаты работы, вам потребуется редактор кода. В этом уроке разберем, как установить Visual Studio Code. Это мощный инструмент, который можно использовать не только для верстки, но и для программирования на любом языке.
Урок «Графические редакторы»
В курсе «Основы современной верстки»
На рынке существует несколько основных редакторов. Некоторые из них специфичны только для одной операционной системы, другие имеют возможность установки на любую из них. В этом разделе посмотрим на основные действия при работе верстальщика с онлайн-редактором Figma.
Урок «Emmet»
Изучаем один из самых полезных плагинов для верстальщика — Emmet. Он позволит ускорить разметку HTML-кода и снимет бóльшую часть рутинных действий.
Урок «Основы CSS»
В курсе «Основы современной верстки»
Для визуального оформления веб-страницы создан язык CSS.
Изучаем базовые возможности языка, разбираемся, как их использовать вместе с HTML. Учимся подключать CSS файлы и знакомимся с базовыми типами селекторов.
Урок «Введение»
В курсе «Основы современной верстки»
Курс «Основы современной верстки» является базой для изучения основ верстки сайтов HTML и CSS. В этом уроке мы кратко расскажем о том, что узнаем на курсе и как эти знания можно применять на практике.
Урок «Каскадность в CSS»
В курсе «Основы современной верстки»
Что такое каскадность, и как она работает в CSS? Урок посвящен различиям в приоритетах селекторов и умению использовать это в своих проектах.
Урок «Базовая структура HTML документа»
В курсе «Основы современной верстки»
Любой HTML-документ имеет базовую структуру, состоящую из тегов и служебных элементов. Они нужны браузеру для корректного отображения информации. В данном уроке разберемся с каждой строчкой этой структуры
Урок «Блочная модель»
В курсе «Основы современной верстки»
Какие элементы отвечают за каркас страницы, а какие помогают в процессе ее стилизации или добавления функциональных частей? Знакомимся с блочными и строчными элементами HTML и изучаем влияние стилей на итоговую ширину элементов.
Урок «Chrome DevTools»
В курсе «Основы современной верстки»
При верстке сайта важно вовремя найти ошибки или понять, как правильно преобразовать нужный нам блок. Ранее это делалось преимущественно вручную. Сейчас современные браузеры имеют функцию веб-инспектора. Рассмотрим возможности одного из них – Chrome DevTools.
Урок «Семантический HTML»
В курсе «Основы современной верстки»
Основная цель любой HTML-верстки — передача смысла блоков. В этом уроке мы рассмотрим возможности последнего стандарта HTML5 в области семантики и узнаем о доступности в веб.
Урок «Публикация в интернете»
В курсе «Основы современной верстки»
Чтобы выложить проект в интернет, нужно воспользоваться хостингом — специальным сервером, который будет хранить файлы и предоставит доступ к ним через доменное имя. В этом уроке мы рассмотрим бесплатный хостинг GitHub.
Урок «Введение в HTML»
В курсе «Основы современной верстки»
Урок посвящен HTML верстке с нуля.
Говорим о роли атрибутов и изучаем общую схему описания HTML тегов.
Урок «Формы»
В курсе «Основы верстки контента»
Формы — важный интерактивный элемент веб-страницы. Как и ссылки, формы обеспечивают взаимодействие пользователя и страницы, позволяя отправлять данные. Изучим, как создаются формы, добавляются текстовые поля, поля для выбора, списки и кнопки. Затронем тему доступности форм для людей с ограниченными возможностями
Урок «Таблицы»
В курсе «Основы верстки контента»
Таблицы — страшный сон верстальщика. Для их создания используется много тегов, а небольшие ошибки могут испортить настроение. В этом уроке последовательно, шаг за шагом, изучим создание простых и сложных таблиц, разберемся, откуда могут возникать ошибки и как их не допускать. К концу урока вы сможете смело создавать таблицы и перестать их бояться
Урок «Псевдоклассы»
В курсе «Основы верстки контента»
Продолжаем тему селекторов в CSS и познакомимся с понятием псевдокласса.
Нашли 4 курса по тегу «HTML5»
Основы верстки контента
Доступность
CSS Columns
CSS Units
селекторы
18 часов
Посмотреть
CSS: Transform (трансформация объектов)
CSS Transforms
CSS перспектива
7 часов
Посмотреть
Основы современной верстки
Developer Tools
Верстка
9 часов
Посмотреть
Основы HTML, CSS и веб-дизайна
Developer Tools
Веб-дизайн
5 часов
Посмотреть
Вам могут быть интересны темы: Верстка Трёхмерные объекты CSS Units селекторы Веб-дизайн CSS перспектива CSS Columns вёрстка Анимации GitHub Pages CSS Transforms CSS3 Developer Tools Доступность
Учебники и самоучители
- Главная
Полученный опыт знающие люди записывают в виде учебных материалов, которыми могут воспользоваться все желающие.
Таким образом, учебники и самоучители помогут освоить и усовершенствовать знания и навыки в языках веб-программирования. В этих учебниках по возможности предоставляется вся информация, позволяющая освоить такие технологии, как HTML, CSS, XML и др. Учебники начального уровня представляют собой пошаговые руководства, а в учебниках среднего и продвинутого уровней описываются автономные приемы, уловки и техники хорошего программирования.
Учебник HTML для начинающих
Подробный пошаговый учебник HTML для начинающих веб-мастеров. Предназначен для абсолютных новичков веб-программирования. Если вы совершенно ничего не знаете о методах и средствах представления информации в сети Интернет, то начинать вам следует именно с данного учебника.
Учебник CSS для начинающих
Подробный пошаговый учебник основ языка CSS, предназначенный для тех, кто знаком с основами HTML. Поможет освоить способы и методы унификации внешнего представления информации, подготовленной для вывода при помощи HTML.
Учебник XML для начинающих
Учебник языка разметки XML для начинающих изучать эту интернет-технологию и для всех желающих узнать, что это такое. В учебнике подробно рассказывается что такое XML, из чего он состоит, и как правильно его использовать.
Учебник по XML схемам
XML схема описывает структуру XML документа. В данном учебнике вы узнаете, как создавать XML схемы, почему XML схемы мощнее DTD, и как использовать XML схемы в своих приложениях.
Учебник XPath
XPath – основной элемент в стандарте XSLT. XPath может использоваться для навигации по элементам и атрибутам XML документа. Данный учебник рассказывает о базовых понятиях и синтаксисе языка XPath.
Учебник по XSLT
XSL («расширяемый язык таблиц стилей» от англ. eXtensible Stylesheet Language) — язык преобразования и визуализации для XML. XSLT означает преобразование или трансформация XSL (от англ. XSL Transformations) — язык преобразования XML документов
Учебник HTML5
HTML5 развивает идеи и принципы HTML 4.
01, но при этом имеет и ярко выраженные отличия от него. В данном учебнике мы рассмотрим основные особенности языка HTML5. Для полноценного понимания материалов данного учебника необходимо иметь хотя бы общие знания по языку HTML/XHTML
Учебник HTML5 графики – Canvas
Элемент canvas является частью спецификации HTML5. Он предназначен для динамического, скриптового генерирования 2D фигур и растровых изображений. В этом Учебнике HTML графики рассказывается об особенностях использования элемента canvas для отображения различных графических объектов
Учебник HTML5 графики – SVG
В данном Учебнике HTML графики рассказывается об использовании языка разметки SVG, который является подмножеством расширяемого языка разметки XML. Язык SVG позволяет создавать как статическую, так и анимированную графику для иллюстрации и оформления веб-документов
Учебник Javascript для начинающих
JavaScript — это язык программирования, который активно используется в HTML и при разработке сайтов.
Данный учебник JavaScript поможет освоить азы программирования на нем. Учебник рассчитан на начинающих и позволит изучить JavaScript с нуля
Учебник jQuery для начинающих
jQuery — это небольшая и простая в изучении библиотека JavaScript, в основу которой положен принцип «меньше кода, больше действий». Основная задача jQuery — упростить разработчику использование JavaScript на веб-сайте
Учебник XML DTD
Цель DTD состоит в том, чтобы определить, какие элементы, атрибуты и сущности являются допустимыми в XML документе. При помощи DTD каждый ваш XML файл может нести описание своего собственного формата. DTD может использоваться для проверки корректности получаемых данных.
Учебник XML DOM
DOM или Объектная модель документа (англ. Document Object Model — DOM ) определяет стандарт доступа к документам и управления ими. XML DOM определяет стандартный способ доступа к XML-документам и управления ими. Он представляет XML-документ в виде древовидной структуры
Как встроить видео в HTML5
Реклама
В этом уроке вы узнаете, как встроить видео в документ HTML.
Встраивание видео в HTML-документ
Вставить видео на веб-страницу было непросто, поскольку веб-браузеры не имели единого стандарта для определения встроенных мультимедийных файлов, таких как видео.
В этой главе мы продемонстрируем некоторые из множества способов добавления видео на веб-страницы, начиная с последней версии HTML5 к популярным видео на YouTube.
Использование элемента HTML5 video
Недавно представленный элемент HTML5 к популярным видео на YouTube.
Использование элемента HTML5 video
Недавно представленный элемент HTML5 обеспечивает стандартный способ встраивания видео в веб-страницы. Тем не менее, элемент видео относительно новый, но он работает в большинстве современных веб-браузеров.
В следующем примере видео просто вставляется в HTML-документ с использованием набора элементов управления браузера по умолчанию, причем один источник определяется атрибутом src .
Пример
Попробуйте этот код »mp4"> Ваш браузер не поддерживает элемент видео HTML5.
Видео, использующее набор элементов управления браузера по умолчанию, с альтернативными источниками.
Пример
Попробуйте этот код »Использование элемента object
Элемент используется для встраивания различных типов мультимедийных файлов в документ HTML. Первоначально этот элемент использовался для вставки элементов управления ActiveX, но согласно спецификации объектом может быть любой медиа-объект, такой как видео, аудио, файлы PDF, Flash-анимация или даже изображения.
Следующий фрагмент кода встраивает Flash-видео в веб-страницу.
Пример
Попробуйте этот код » Это видео будет воспроизводиться только браузерами или приложениями, поддерживающими Flash.
Предупреждение: Элемент широко не поддерживается и во многом зависит от типа внедряемого объекта. Другие методы могут быть лучшим выбором во многих случаях. Устройство iPad и iPhone не может отображать Flash-видео.
Использование элемента embed
Элемент используется для встраивания мультимедийного содержимого в документ HTML.
Следующий фрагмент кода встраивает Flash-видео в веб-страницу.
Пример
Попробуйте этот код »Предупреждение: как стандарт в HTML5, но ваше видео может не воспроизводиться из-за отсутствия поддержки браузером Flash или отсутствия подключаемых модулей.
Встраивание видео YouTube
Это самый простой и популярный способ встраивания видеофайлов в веб-страницы. Просто загрузите видео на YouTube и вставьте код HTML, чтобы отобразить это видео на своей веб-странице.
Вот живой пример с объяснением всего процесса:
Шаг 1: Загрузите видео
Перейдите на страницу загрузки видео на YouTube и следуйте инструкциям по загрузке видео.
Шаг 2: Создание HTML-кода для встраивания видео
Когда вы откроете загруженное видео на YouTube, вы увидите что-то вроде следующего рисунка в нижней части видео. Найдите и откройте загруженное видео на YouTube. Теперь найдите кнопку «Поделиться», которая находится чуть ниже видео, как показано на рисунке.
Когда вы нажмете кнопку «Поделиться», откроется панель общего доступа с дополнительными кнопками. Теперь нажмите кнопку «Встроить», он сгенерирует HTML-код для непосредственного встраивания видео на веб-страницы. Просто скопируйте и вставьте этот код в свой HTML-документ, где вы хотите отобразить видео, и все готово. По умолчанию видео встроено в iframe.
Вы можете дополнительно настроить этот код для встраивания, например изменить размер видео, выбрав параметр настройки, указанный чуть ниже поля ввода кода для встраивания.
В следующем примере просто встраивается видео с YouTube. Давайте попробуем:
Пример
Попробуйте этот код »
<голова>
<мета-кодировка="utf-8">
Видео YouTube
<тело>
Предыдущая страница Следующая страница
Как встроить аудио в HTML5
Рекламные объявления
В этом уроке вы узнаете, как вставлять аудио в документ HTML.
Встраивание аудио в HTML-документ
Раньше вставка аудио на веб-страницу была непроста, потому что в веб-браузерах не было единого стандарта для определения встроенных мультимедийных файлов, таких как аудио.
В этой главе мы продемонстрируем некоторые из многих способов встраивания звука на вашу веб-страницу, от использования простой ссылки до использования новейшего HTML5 <аудио> элемент.
Использование элемента HTML5 audio
Недавно представленный элемент HTML5 обеспечивает стандартный способ встраивания звука в веб-страницы. Тем не менее, элемент audio является относительно новым, но он работает в большинстве современных веб-браузеров.
В следующем примере аудио просто вставляется в документ HTML5 с использованием набора элементов управления браузера по умолчанию, причем один источник определяется атрибутом src .
Пример
Попробуйте этот код »Аудио, использующее набор элементов управления браузера по умолчанию, с альтернативными источниками.
Пример
Попробуйте этот код »Трек «ogg» в приведенном выше примере работает в Firefox, Opera и Chrome, в то время как тот же трек в формате «mp3» добавляется, чтобы звук работал в Internet Explorer и Safari.
Связывание аудиофайлов
Вы можете создавать ссылки на свои аудиофайлы и воспроизводить их, отмечая их.
Давайте попробуем следующий пример, чтобы понять, как это в основном работает:
Пример
Попробуйте этот код »Дорожка 1 Дорожка 2
Использование элемента object
Элемент используется для встраивания различных типов мультимедийных файлов в документ HTML. Первоначально этот элемент использовался для вставки элементов управления ActiveX, но согласно спецификации объектом может быть любой медиа-объект, такой как аудио, видео, PDF-файлы, Flash-анимация или даже изображения.
Следующий пример кода встраивает простой аудиофайл в веб-страницу.
Пример
Попробуйте этот код » Предупреждение: Элемент широко не поддерживается и во многом зависит от типа внедряемого объекта. Другие методы, такие как элемент HTML5 или сторонние аудиоплееры HTML5, во многих случаях могут быть лучшим выбором.
Использование элемента embed
Элемент используется для встраивания мультимедийного содержимого в документ HTML.
Следующий фрагмент кода встраивает аудиофайлы в веб-страницу.
Пример
Попробуйте этот код » Предупреждение: Однако элемент очень хорошо поддерживается в современных браузерах и определяется как стандарт в HTML5, но ваше аудио может не воспроизводиться из-за отсутствия поддержка браузером этого формата файла или отсутствие плагинов.