Модуль 1.

ВВЕДЕНИЕ В WEB

1.1. Введение в веб-дизайн и разработку

Дата/Класс

Модули / Содержание / Ключевые Кол-во Примечан

Единицы компетенции 6а 7б
понятия часов ие
6б 8а 7а 9б
9а 11б

- Распознавание веб-сайта, веб- 1. Базовые концепции 1 6.09 04.09 05.09 02.09 1 урок на
страницы , URL-адреса, доменного 2. Этап проектирования и разработки модули 1.1
имени, веб-браузера и редактора сайта. и 1.2
кода; 3. Особенности вэб-сайтов..
-Установка различия между
процессом веб-дизайна и веб-
разработки;
- Примеры технологий в форме
формальных языков, используемых в
процессе дизайна, и веб-
разработки;
- Идентификация характеристик
клиентских скриптов;
- Обоснование необходимости
установки редактора кода и браузера
на вашем компьютере или ноутбуке.

1
 1.2. Презентация прототипа сайта, который можно сделать в рамках дисциплины

- Определение понятия "респонсив» 1. Базовые концепции.

веб-дизайн ",гамбургер меню” 2. Структура вэб-сайта.
«слайдер» «стартовая страница» 3. Домашняя страница и второстепенные
- Идентификация основных страницы.
компонентов вэб-страницы: 4. Основные компоненты вэб-страницы:
заголовок, содержание, нижний заголовок, содержание и нижний
колонтитул. колонтитул.
- Аргументация необходимости 5. Важность меню на вэб-странице.
структуры вэб-документа из
включённых компонентов. ,
- Определение правильной
структуры
папки с файлами по типу,
необходимого для разработки сайта.

Модуль 2. Язык маркировки HTML

2.1. Язык разметки HTML. HTML-элементы
- Определение понятия языка 1. Язык разметки HTML. 1 13.09 11.09 12.09 09.09
разметки; 2. HTML-элементы.
- Определение правильной 3. Структура веб-документ.
структуры веб-документа; 4. Атрибуты элементов HTML
- Определение элементов HTML,
отвечающих за определение базовой
структуры веб-документа;
- Распознавание атрибутов
элементов HTML и их отличие от
тегов HTML;
- Создание простого веб-документа с
соблюдением требований его
правильной структуры..

2
 2.2. HTML-элементы, используемые в заголовке веб-документа
• -Нумерация и описание HTML- 1. Заголовок веб-документа - элемент 1 20.09 18.09 19.09 16.09
элементов, которые могут быть HEAD, синтаксис.
использованы в заголовке веб- 2. Элемент TITLE, синтаксис.
документа; 3. Элемент LINK, синтаксис.
-Указание синтаксиса HTML- 4. Элемент META, синтаксис.
элементов, используемых для 5. Элементы STYLE и SCRIPT.
определения заголовка веб-
документа;
- Оценка роли каждого HTML-
элемента, используемого в заголовке
веб-документа;
- Написание и интеграция HTML-
элементов в заголовок веб-
документа
2.3. HTML-элементы, используемые в содержимом веб-страницы, для редактирования и форматирования текста.
- Описание элемента и синтаксиса 1. Элемент BODY, семантика и синтаксис 1 27.09 25.09 26.09 23.09
элемента BODY, используемого для 2. HTML-элементы, используемые для
определения «тела» веб-страницы; форматирования текста: H1, H2, ... H6, P,
- распознавать и указывать элементы BR, PRE, I, EM, B, STRONG, SUP, SUB,
синтаксиса HTML-элементов, SMALL, MARK и т. Д.
которые можно использовать для
форматирования текста на веб-
страницах;
- Внедрение в веб-документ
элементов, определяющих текст, или
элементов, форматирующих части
текста.
2.4. HTML-элементы, используемые в теле веб-страницы для упорядочивания текста с использованием списков данных
• -Расположение списков в текстах; - 1. Понятие списка. 1 04.10 02.10 03.10 30.09
Перечисление и описание HTML- 2. Элемент UL и LI, семантика и синтаксис.
элементов, которые можно 3. Элемент OL и LI, семантика и синтаксис.
использовать для вставки списков 4. Элемент DL, DT, DD, семантика и

3
данных синтаксис.
на веб-странице; 5. Списки включены.
-Указание синтаксиса элементов,
отвечающих за вставку списков
данных в HTML;
- Написание кода для создания
списков HTML;
-Внедрение списков разного типа, в
том числе смешанных, в веб-
документы;
-Выдумывание гипотез относительно
использования типа списка в
определенном контексте.

2.5. HTML-элементы, используемые в теле веб-страницы для реализации изображений и таблиц.

-Распознавание и описание HTML- 1. Элемент IMG, семантика и синтаксис. 1 11.10 09.10 10.10 07.10
элементов, которые можно 2. Таблицы - структурирование данных.
использовать для вставки 3. Элемент TABLE и другие, отвечающие за
изображений и таблиц на веб- определение компонентов таблиц в HTML,
страницу; таких как: CAPTION, TR, TH, TD.
-Указание синтаксиса элементов,
отвечающих за вставку изображений
и таблиц в HTML;
-Идентификация и правильное
использование атрибутов,
необходимых для реализации
изображений и таблиц на веб-
страницах

2.6. Элемент HTML, используемый в теле веб-страницы для реализации ссылок.

• -Название и описание элемента 1. Элемент А, семантика и синтаксис. 1 18.10 16.10 17.10 14.10
HTML, который можно 2. Ссылки на изображения.
использовать для вставки ссылок на 3. Внутренние и внешние ссылки.
веб-страницу; 4. Абсолютные и относительные URL-

4
-Представление синтаксиса адреса.
элемента, отвечающего за вставку
ссылок в HTML;
-Создание и реализация ссылок в
веб-документе; Анализируя
различные типы ссылок,
реализованные в веб-документе, и
выдвигаем гипотезы об их роли.

2.7. HTML-элементы, используемые в теле веб-страницы для реализации форм.

-Описание способов использования 1. Формы - удобные средства сбора данных. 1 25.10 23.10 24.10 21.10
форм как интерактивного 2. Элемент FORM, семантика и синтаксис.
инструмента для сбора данных от 3. Назначение элементов управления в
пользователя; форме.
-Представление синтаксиса 4. Действующие элементы управления
элементов HTML, используемых для HTML-формы: INPUT,
определения форм HTML, а также ТЕКСТ, ЭТИКЕТКА, ВЫБОР, ОПЦИЯ,
элементов управления; ЛЕГЕНДА, ПОЛЕ.
-Создание и внедрение форм на 5. Атрибуты элементов управления.
сайтах.

2.8. HTML-элементы, используемые в теле веб-страницы для реализации фреймов, аудио и видео в HTML.
• -Название и описание синтаксиса 1. Элемент IFRAME, семантика и синтаксис. 1 08.11 06.11 07.11 04.11
HTML-элементов, используемых для 2. Элемент AUDIO, семантика и синтаксис. 09.11
реализации встроенных фреймов; 3. Элемент VIDEO, семантика и синтаксис.
- Представление синтаксиса
элементов, используемых для
реализации аудио и
видеопоследовательностей;
-Реализация iframe, аудио и видео
последовательностей на веб-
5
страницах.

Суммативное оценивание 1 13.11 14.11 11.11

15.11

Модуль 3. ЯЗЫК СТИЛИЗАЦИИ CSS.

3.1. Способы реализации стилей в веб-документах. Базовый синтаксис для определения свойств стиля для элементов HTML
- Определение понятия «стиль»; 1. Определение понятия «стиль». 1 22.11 20.11 28.11 18.11 7а класс
- Выдача гипотез о необходимости 2. Внешний, внутренний и встроенный модули
стилизации элементов стили - способы реализации. 3.1 и 3.2
HTML; 3. Понятие селектора, оператора CSS, объедини
- Рекомендация отделить свойства CSS и его значения. ть за 21
определение стилей от определения 4. Базовый синтаксис, который необходимо ноября
веб-контента; соблюдать при определении свойств стиля
- Указание способов реализации для элементов HTML.
стилей в веб-документах;
- Размещение селектора, его свойств
и значений в операторах CSS;
-Интерпретация простых стилей.
3.2. Типы селекторов CSS. Свойства CSS, используемые для стилизации текста
• -Описание назначения свойств CSS 1. Классификация и описание основных 1 29.11 27.11 28.11 25.11
и селекторов; селекторов, используемых для выбора
-Распознавание селекторов типов элементов в веб-документах.
"id", "class" и свойств CSS; 2. Селекторы идентификаторов и
-Используйте правильные свойства и "Класс".
селекторы CSS при стилизации 3. Свойства CSS, используемые для
различных элементов HTML, стилизации текста в веб-документах.
используемых для форматирования
текста;
- Написание и интерпретация стилей
с использованием селекторов типа
"id" и

6
"Класс";
-Интерпретация стилевых
последовательностей текста, чтобы
понять их предназначение;
-Написание стилей для текстовых
последовательностей в веб-
документе.

3.3. Наследие стилей. Свойства CSS для стиля фона и списка

• -Указание принципов наследования 1. Правила наследования стилей. 1 06.12 04.12 05.12 02.12
стилей в CSS; 2. Свойства CSS для стилизации фона.
-Перечисление свойств стиля, 3. Свойства CSS для оформления
которые могут быть унаследованы нумерованных списков.
от родительских элементов от
родительских элементов;
-Корректное использование свойств
CSS и селекторов для стилизации
фонов и списков HTML;
-Написание стилей для HTML-
элементов с использованием
простых селекторов;
- Интерпретация свойств стиля,
чтобы понять их назначение для
стилизации фона и списков данных.
3.4. Свойства CSS для стилизации внутренних и внешних полей. Высота, ширина элементов – Box-model. Определение стилей границ.
Стилизация таблиц и изображений

-Перечисление свойств 1. "Коробочная" модель. 1 13.12 11.12 12.12 09.12

CSS, используемые в стилизации элементов HTML.
полей, 2. Свойства стиля, используемые для
границ и для определения высоты, стилизации внутренних и внешних полей
ширины HTML-элементов; элементов HTML.
-Распознавание и наименование 3. Свойства CSS, используемые для

7
 свойств стиля, используемых для стилизации высоты, ширины, границ
стилизации изображений и таблиц элементов HTML.
HTML; 4. Стилизуйте таблицы и изображения с
-Использование свойств CSS для помощью CSS
определения стилей изображений,
таблиц, а также границ, полей,
ширины и высоты других элементов.

3.5. Псевдоклассы - стилизация ссылок, псевдоэлементов. Элементы DIV, SPAN

• -Распознавание псевдоклассов и 1. Псевдоклассы и псевдоэлементы в CSS. 1 20.12 18.12 19.12 16.12 1 урок на
псевдоэлементов в CSS; 2. Свойства стиля, используемые вместе с модули
-Правильное использование псевдоклассами и псевдоэлементами. 3.5, 3.6
псевдоклассы и 3. HTML-элементы, используемые при
псевдоэлементы в определении верстке веб-страниц - DIV.
стилей элементов или 4. Стилизация блочных элементов.
части элементов HTML; 5. Полезность блочных элементов.
-Разделение псевдоэлементов
псевдокласса и их синтаксиса;
- Написание и интерпретация
свойств стиля для псевдоэлементов
и псевдоклассов;
-Познавание, интерпретация
и включающие элементы
HTML, который можно
использовать в
определение компонентов типа
блокировать на веб-страницах.
3.6. Свойства стиля для плавающих элементов и для позиционирования элементов
-Разъяснение понятия . Нормальный поток представления 1 10.01 23.12
«нормальный поток» представления элементов на веб-странице.
HTML-элементов на веб-странице; 2. Размещение HTML-элементов с помощью
8
-Распознавание свойств CSS, свойств
используемых при CSS float и position.
позиционировании HTML-элементов 3. Свойство z-index.
на странице и указании для них Показать свойство.
допустимых значений;
- Написание и интерпретация стилей
для правильного позиционирования
элементов на веб-странице;
-Распознавание и интерпретация
свойств CSS и их значений, которые
могут использоваться для изменения
нормального потока
позиционирования элементов.

3.7. Прозрачность элементов HTML, фильтров, преобразований, градиентов

• -Распознавание свойств стиля и 1. Свойства стиля, появляющиеся в CSS3, 1 17.01
написания стилей, отвечающих за отвечающие за: прозрачность элементов,
достижение прозрачности HTML- добавление фильтров, цветовые градиенты
элементов; и 2D преобразования элементов;
-Идентификация свойств стиля и 2. Примеры определения стилей,
написание стилей, отвечающих за обеспечивающих прозрачность, добавления
применение фильтров к элементам фильтров элементов или цветовых
HTML; градиентов.
-Определение понятия градиента и
стилей написания цветовых
градиентов;
-Описание 2D-преобразований на
HTML-элементах и написание
стилей для преобразования
элементов в веб-документе.

3.8. Переходы, анимация в CSS

• -Определение понятий перехода и 1. Переходы. CSS-эффекты перехода. 1 24.01
9
 анимации; Пример.
-Распознавание свойств стиля, 2. Анимации. Создание анимации в CSS.
которые можно использовать для Примеры
определения переходов и анимации;
- Написание стилей для создания
простых переходов и анимации
элементов HTML;
-Интерпретация и оценка
семантического значения стилей,
содержащих определения переходов
и анимаций; Реализуйте переходы и
анимацию на веб-страницах.

3.9. Понятие «responsiv design». MediaQueries

• -Определение понятий «адаптивный веб- 1. Понятия «адаптивный дизайн», «контрольная 1 31.01
дизайн», «контрольная точка», «область точка», «область просмотра».
просмотра»; 2. MediaQueries. Примеры использования
-Распознавание и правильная mediaQuery.
интерпретация медиа-запросов;
- Написание медиа-запросов и интеграция
их в веб-документы для получения
«отзывчивого» контента.

3.10. Flexbox в CSS. «Адаптивный веб-дизайн» и flexbox

• -Определение понятия «flexbox»; 1. Понятие гибких блоков / динамиков. 1 07.02
Идентификация свойств CSS в группе 2. Свойства CSS в группе «flex».
«flex»; 3. MediaQuery и flexbox.
- Написание и интеграция свойств CSS из Пример.
группы «flex» в медиа-запросы для
определения «отзывчивого» контента.

10
 3.11. Пример создания и стилизации сайта
• -Правильный выбор свойств стиля для 1. Создайте веб-документ. 1 14.02
стилизации элементов- 2. Создайте файл CSS.
их HTML из веб-документа; 3. Интегрируйте стили, определенные в веб-
- Написание синтаксически правильных документе.
стилей для HTML-элементов в веб-
документе;
-Интеграция стилей в веб-документ.

1 21.02
Суммативное оценивание

Модуль 4. ЯЗЫК ПРОГРАММИРОВАНИЯ JAVASCRIPT.

4.1. Клиентские скрипты. Введение в язык программирования
JavaScript
• -определение понятия «клиентский» 1. Клиентские скрипты. 1 28.02 1 урок на
скрипт; 2. Введение в язык программирования модули
-Аргументация о необходимости JavaScript. 4.1, 4.2
использования 3. Способы реализации JavaScript в веб-
Язык программирования JavaScript в веб- документе.
документах;
-Описание способов реализации JavaScript
в веб-документах;
-Рекомендация по добавлению
интерактивных элементов и скриптов для
динамической генерации нового контента
на стороне клиента, на веб-страницах.
4.2. Предопределенные объекты JavaScript. Свойства и методы. Консоль JS
- Распознавание и описание основных 1. Основные предопределенные объекты в 1 28.02
объектов, предопределенных в JavaScript; JavaScript, такие как String, Number и т. Д.
- Указать синтаксис свойств и методов 2. Основные свойства предопределенных
предопределенных объектов в JavaScript; объектов в JavaScript и их наиболее
- Написание JavaScript в веб-консоли и распространенные методы.
11
 анализ результатов их интерпретации 3. Консоль JS.
браузером.

4.3. Переменные, типы данных и операторы в JavaScript

Распознавание переменных JavaScript и 1. Переменные в JavaScript. Пример. 1 14.03
описание того, как определять переменные 2. Объявление переменных в JavaScript.
в JavaScript; 3. Типы первичных данных и операторы,
-Различение типов данных и типов которые могут быть к ним применены.
операторов, доступных в 4. Простые способы вывода данных на экран.
JavaScript;
-Использование основных операторов при
работе с данными в JavaScript;
-Аргументация использования тех или
иных операторов в зависимости от
контекста;
- Написание арифметических выражений и Практическое занятие
текстов, в которых используются
переменные и операторы;
-Представление различного
информационного содержания на экране;
-Реализация данных, выражений, значений,
текстов и операторов в скриптах.
4.4. DOM HTML. Доступ и изменение содержимого веб-документа через HTML DOM
Определение понятия HTML DOM и 1. Концепция заморских департаментов 1 21.03
описание утилиты Франции и описание процесса доступа
его; HTML через HTML DOM.
-Распознавание наиболее 2. Способы доступа к содержимому элемента
распространенных объектов HTML DOM, HTML через его идентификатор и выполнение
свойств и методов этих объектов; различных манипуляций с этим содержимым.
Определение необходимости доступа к 3. Отображение данных методами alert (), а
содержимому элементов HTML в веб- также getElementById ().
документе и управления им с помощью
свойств и методов объектов HTML DOM;
-Написание скриптов с использованием
свойств и методов объекта Document и
12
Element.

4.5. Предопределенные функции в JavaScript

Распознавать предопределенные функции в 1. Предопределенные функции верхнего уровня
JavaScript и описывать их область в JavaScript, такие как String, Number, isNaN, 1 28.03
использования; parseInt, parseFloat и т. Д. Примеры
-Перечисление методов, специфичных для использования.
предопределенных объектов в JavaScript; 2. Методы, специфичные для предопределенных
-Использование стандартных функций объектов JavaScript, таких как String и т. Д.
более высокого уровня в сценариях с Анализ суммативного оценивания
соблюдением их синтаксиса;
-Интеграция стандартных функций и
методов JavaScript в простейшие скрипты
для решения некоторых проблем.

4.6. Функции, определяемые программистом в JavaScript. Синтаксис. Поля видимости

переменных
- Определение понятия «поле видимости»; 1. Функции, определенные программистом. 1 04.04
- Формулирование идей относительно 2. Базовый синтаксис, который необходимо
необходимости определения собственных соблюдать при определении собственных
функций в Священных Писаниях; функций в JavaScript.
- Описание синтаксиса определения 3. Поле зрения переменных, определенных и
собственные функции; используемых в коде JavaScript.
- Написание собственных функций,
реализующих различные логические
алгоритмы и их реализация на JavaScript.

4.7. Манипуляции с датой и временем в JavaScript. Условные инструкции JavaScript

-Определение полезности объекта 1. Объект данных. Создание прототипа этого 1 11.04
Данные и их методы; Создание прототипа объекта.
13
на основе объекта Data для использования 2. Методы объекта данных. Манипуляции с
в скрипте; датой и временем в JavaScript.
-Применение методов объекта данных для 3. Третичный оператор и условные инструкции
приема и управления деталями, JavaScript. Синтаксис.
касающимися времени и даты; 4. Примеры использования объекта данных и
-Указание условных инструкций и их условных операторов.
использование при написании скриптов;
-Изучение программного кода с целью
выделения условных инструкций и оценки
их полезности.
4.8. Циклические инструкции в JavaScript
• -Распознавание циклических инструкций 1. Циклические инструкции в JavaScript. 1 18.04
в JavaScript и описание их синтаксиса; 2. Синтаксис циклических инструкций в
- Написание скриптов, содержащих JavaScript. Примеры
циклические инструкции, с соблюдением
их синтаксиса;
-Использовать и реализовать в логике
скриптов циклические инструкции.

4.9. Управляемые события JavaScript

-Определение понятия «событие» 1. События HTML-элемента. 1 02.05
HTML; 2. Способы реагирования на события.
-Различение и объяснение методов 3. Обработка событий с помощью JavaScript.
обработки HTML-событий с помощью Пример.
JavaScript;
- Написание и внедрение JavaScript,
который может обрабатывать наиболее
распространенные события.

4.10. Объект RegExp в JavaScript

-Определение понятия «регулярные 1. Регулярные выражения. Метасимволы. 1 11.05 1 урок на
выражения» и понимание того, для чего Квантификаторы. Примеры регулярных темы 4.10
они могут быть использованы; выражений. и 4.11
-Распознавание регулярных выражений в 2. Проверка данных - необходимость.
коде; 3. Проверка данных из элементов управления на

14
-Корректное написание регулярных стороне клиента с помощью регулярных
выражений с использованием выражений. Пример.
метасимволов и квантификаторов; Анализ суммативного оценивания
-Выпуск гипотез о необходимости
реализации объекта RegExp для проверки
данных;
-Интеграция регулярных выражений в
клиентские скрипты, для проверки
правильности ввода данных в элементы
управления формы.
4.11. Картины на JavaScript
• -определение понятия «картинка»; 1. Картинки в JavaScript. Определение и 1 11.05
-Обнаружение картин в JavaScript; полезность. Пример.
- Написание скриптов для определения 2. Операции с массивами - свойства и методы
массива с элементами на JavaScript; объекта JavaScript Array.
-Доступ к одному или нескольким Пример.
элементам картины;
-Корректное использование в скрипте
методов и свойств объекта Array.

Суммативное оценивание 1 18.05

4.12. Определяйте объекты в JavaScript. Свойства, методы

• -определение понятий «объект», 1. Определение ваших собственных объектов в 1 25.05 1 урок на
«свойство», «метод»; JavaScript - основной синтаксис. темы 4.12
-Проектирование и создание собственных 2. Члены объекта - свойства и методы. Пример , 4.13
объектов на JavaScript; определения.
-Обнаружение и реализация свойств и 3. Доступ к членам объекта. Пример.
методов для объектов, определенных в
JavaScript;
- Доступ через скрипт к членам объекта.

4.13. Пример создания слайдера с помощью JavaScript. Добавить на сайт

15
-Определение понятия «слайдер» и 1. Понятие «слайдер» 25.05
проверка веб-страницы, а также кода для 2. Процесс создания слайдера с помощью
его обнаружения; JavaScript.
-Аргументация о необходимости внедрения 3. Интеграция в HTML, файл CSS и JavaScript.
слайдера на сайте;
-Различение компонентов слайдера;
-Создание простого слайдера с
использованием JavaScript.

Типы сайтов, предлагаемых к разработке

1. Сайт для продвижения мероприятия.

2. Сайт для продвижения услуги населению.
3. Сайт для презентации продукции организации.
4. Сайт для продажи одного или нескольких товаров.
5. Сайт по продаже рекламных площадей.
6. Сайт для информирования клиентов о конкретной компании или кампании.
7. Сайт для улучшения имиджа компании.
8. Сайт для обратной связи с клиентами (гостевая книга) (шаблон).
9. Сайт для информирования сотрудников / клиентов компании.
10. Сайт для предоставления информации, такой как СМИ.
11. Веб-сайт для увеличения аудитории в средней школе или для записи на курсы и т. Д.
12. Сайт для изучения разработки веб-страниц / математики / физики / биологии / химии / языков программирования и т. Д.
13. Сайт с онлайн-рекламой (краткий список объявлений и подробный доступ к ссылкам).
14. Статический сайт типа интернет-магазина (шаблон).
15. Сайт для презентации товаров крестьянского хозяйства.
16. Сайт, посвященный хобби.
17. Сайт-портфолио.

16