Содержимое курса
Урок 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 — от нуля до героя

В этом уроке мы рассмотрим локальное хранилище и &lt;iframe&gt; в HTML5.

localStorage Позволяет хранить данные непосредственно в браузере, используя систему «ключ-значение». В отличие от файлов cookie, срок действия этих файлов не истекает автоматически, и они не отправляются на сервер. Распространенные методы:

  • localStorage.setItem(key, value) для хранения данных

  • localStorage.getItem(key) для чтения данных

  • localStorage.removeItem(key) удалить один ключ

  • localStorage.clear() стереть все

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

The &lt;iframe&gt; Тег позволяет встроить другую веб-страницу внутрь вашей страницы. Такие атрибуты, как src, title, width, height, и loading="lazy" Помогите контролировать поведение и доступность. Некоторые сайты блокируют встраивание из соображений безопасности, поэтому не все URL-адреса будут работать внутри iframe.

В совокупности эти функции предоставляют разработчикам инструменты для хранения данных на стороне клиента и встраивания внешнего контента.

Назад
Далее