Содержимое курса
Урок 1
Этот курс — ваш первый шаг в веб-разработке. Мы познакомим вас с основными строительными блоками каждой веб-страницы: HTML-тегами и тем, как они структурируют контент. Вы научитесь форматировать текст, добавляя заголовки и абзацы, создавать списки и таблицы для организации контента, а также добавлять изображения для визуального эффекта. Мы также рассмотрим формы, обеспечивающие интерактивность, и расскажем о роли HTML5 в современном веб-дизайне. По мере продвижения вы увидите, как HTML взаимодействует с CSS и JavaScript, оживляя веб-сайты, включая такие функции, как HTML5 Canvas. К концу этого урока у вас будет прочная основа для продолжения обучения по всему курсу веб-разработки.
0/2
Урок 1
41:21
Тест 1
00:10:00
Урок 2
На этом занятии мы рассмотрим набор HTML-элементов, которые делают веб-страницы интерактивными и динамичными. Вы научитесь создавать формы, позволяющие пользователям вводить и отправлять данные, а также текстовые области для более крупных блоков ввода. Мы также рассмотрим необычный, но исторический тег marquee и выясним, почему он редко используется в современной веб-разработке. Затем мы рассмотрим, как расширить функциональность с помощью тега script и почему тег noscript важен для посетителей, чьи браузеры блокируют или не поддерживают JavaScript. Наконец, мы вернёмся к элементу title в — небольшая, но важная деталь для каждой страницы. Эти концепции стирают разрыв между статическим HTML и интерактивным миром JavaScript, HTML5 Canvas и современными методами веб-разработки.
0/2
Урок 2
35:16
Тест 2
00:15:00
Урок 3
В этом уроке мы расширим наш инструментарий, добавив различные теги HTML и HTML5, которые придают веб-страницам смысл, структуру и медиаэффект. Вы узнаете, как выделяет определение и почему предпочтительнее использовать , чем для важного текста. Мы попрактикуемся в основах верстки с
, и узнаем, как , , and 
также как наглядно отображать код и примеры вывода.

Затем мы переходим к ссылкам и мультимедиа: для навигации, для внешних ресурсов, а также элементы   
элементами и
0/2
Урок 3
35:44
Тест 3
00:20:00
Урок 4
В этом уроке мы рассмотрим дополнительные теги HTML5, которые делают формы, макеты и структурированный контент более эффективными и удобными для пользователя. Вы увидите, как позволяет пользователям загружать файлы, и как и Показывать визуальные индикаторы, такие как выполнение задачи или измеряемые значения. Мы также будем работать с , который предлагает пользователям варианты выбора при заполнении формы. В рамках структуры документа мы изучим семантические элементы
,
, и
— необходимы для организации контента в осмысленные блоки. Мы также рассмотрим
и
, идеально подходит для сочетания изображений или диаграмм с описательными подписями. Наконец, мы попрактикуемся в использовании для маркировки дат и времени в машиночитаемом формате, а также интерактивный
и Теги, позволяющие пользователям разворачивать и сворачивать контент. К концу этого курса вы будете знать, как комбинировать эти теги для создания более насыщенных, семантических и интерактивных веб-страниц HTML5.
0/2
Урок 4
30:49
Тест 4
00:20:00
Урок 5
В этом уроке вы научитесь рисовать и анимировать графику с помощью элемента <canvas> и JavaScript. Мы настроим холст в DOM, получим его контекст 2D-рендеринга и будем визуализировать фигуры, текст и изображения. Вы попрактикуетесь в работе с контурами (moveTo, lineTo, arc), заливками и обводками, цветами и градиентами, соединениями линий и отрисовкой текста. Мы рассмотрим рисование изображений/спрайтов, управление соотношением пикселей устройства для чёткого рендеринга и очистку/перерисовку каждого кадра с помощью requestAnimationFrame для плавной анимации. Вы также познакомитесь с основными функциями взаимодействия с событиями мыши/сенсорного ввода и научитесь сохранять/экспортировать рисунки через toDataURL. К концу урока вы будете знать основной рабочий процесс холста: инициализацию, отрисовку, обновление и анимацию.
0/2
Урок 5
34:10
Тест 5
00:15:00
Урок 6
SVG (масштабируемая векторная графика). SVG — это векторная графика на основе XML, которую вы размещаете на странице с помощью тега <svg>. Он масштабируется чётко при любом размере, доступен/семантичен, а отдельные фигуры (например, <rect>, <circle>, <path>, <text>) — это элементы DOM, которые можно стилизовать с помощью CSS и изменять с помощью JavaScript. Ключевые атрибуты включают viewBox, ширину, высоту, заливку, обводку, ширину обводки. SVG отлично подходит для значков, диаграмм, логотипов и интерактивных диаграмм. Сущности (отображающие зарезервированные символы). Чтобы отобразить символы, которые обычно интерпретирует HTML, используйте сущности: &lt; → < , &gt; → > , &amp; → & , &quot; → " , &apos; → ' , &nbsp; → неразрывный пробел. Работают как именованные, так и числовые сущности (например, ©). (устарело). <center> устарел. Центрирование с помощью CSS: текст с text-align: center;, блоки с margin: 0 auto; или современная вёрстка (Flex/Grid). Перетаскивание HTML5. Включается установкой draggable="true" для элемента и прослушиванием события dragstart. Разрешается перетаскивание, отключение значения по умолчанию в dragover. Используйте API DataTransfer внутри событий для setData во время dragstart и getData в drop. Типичные события: dragstart, dragover, drop, а также dragenter, dragleave, dragend.
0/2
Урок 6
37:12
Тест 6
00:25:00
Урок 7
Хранилище пар «ключ-значение» (только строки) ограничено источником страницы и сохраняется при перезагрузке и перезапуске. Основные методы: setItem(key, value), getItem(key), removeItem(key), clear(), key(index) и свойство length. Храните объекты с помощью JSON.stringify / JSON.parse. Квоты обычно составляют несколько МБ на источник. Оно синхронное (блокирует основной поток), защищено от того же источника, и изменения вызывают событие хранения на других вкладках того же источника (не той вкладки, которая внесла изменение). Используйте sessionStorage для хранения на одной вкладке. Избегайте хранения секретных данных; данные доступны для чтения любым скриптом в том же источнике и могут синхронизироваться в некоторых браузерах. Приватный просмотр может снизить квоты или очистить данные при выходе.
0/2
Урок 7
11:20
Тест 7
00:25:00
Полный курс HTML — от нуля до героя

SVG (масштабируемая векторная графика).
SVG — это векторная графика на основе XML, которую вы размещаете с помощью &amp;lt;svg&amp;gt; на странице. Он масштабируется в любом размере, доступен/семантичен, и отдельные формы (например, &amp;lt;rect&amp;gt;, &amp;lt;circle&amp;gt;, &amp;lt;path&amp;gt;, &amp;lt;text&amp;gt;) — это элементы DOM, которые можно стилизовать с помощью CSS и изменять с помощью JavaScript. Ключевые атрибуты включают: viewBox, width, height, fill, stroke, stroke-width. SVG отлично подходит для значков, диаграмм, логотипов и интерактивных диаграмм.

Сущности (отображающие зарезервированные символы).
Чтобы отобразить символы, которые HTML обычно интерпретирует, используйте сущности:
&amp;amp;lt; → &lt; , &amp;amp;gt; → &gt; , &amp;amp;amp; → &amp; , &amp;amp;quot; → " , &amp;amp;apos; → ' , &amp;amp;nbsp; → неразрывный пробел.
Именованные сущности и числовые сущности (например, &amp;amp;#169;) оба работают.

(устарело).
&amp;lt;center&amp;gt; устарело. Центрируйте с помощью CSS: текст с text-align: center;, блоки с margin: 0 auto;или современная верстка (Flex/Grid).

Перетаскивание HTML5.
Включить, установив draggable="true" на элементе и прослушивание dragstart. Разрешить сброс, запретив дефолт в dragover. Используйте DataTransfer API внутри событий для setData в течение dragstart и getData в dropТипичные события: dragstart, dragover, drop, плюс dragenter, dragleave, dragend.

Назад
Далее