МИНИСТЕРСТВО ОБРАЗОВАНИЯ, КУЛЬТУРЫ ИИССЛЕДОВАНИЯ РЕСПУБЛИКИ МОЛДОВА

НАЦИОНАЛЬНЫЙ КУРРИКУЛУМ
КУРРИКУЛУМНАЯ ОБЛАСТЬ
«ТЕХНОЛОГИИ»ДИСЦИПЛИНА ПО ВЫБОРУ

ПРОЕКТИРОВАНИЕ И ВЕБ-РАЗРАБОТКА
VII-XII класс

Кишинев, 2020Утвержден:− Национальным Консилиумом по Куррикулуму, протокол № 25 от 25.06.2020− Приказом Министерства Образования, Культуры и Исследования № 653/2020КООРДИНАТОР:Анджела ПРИСЭКАРУ, главный консультант, Министерство Образования, Культуры иИсследования

РАБОЧАЯ ГРУППА:Наталья ПЛЕШКА, магистр, лектор, Государственный Университет Молдовы
Корина НЕГАРА, доцент, Бельцкий Государственный Университет им. «Алеку Руссо»Состав рабочей группы одобрен Приказом Министерства Образования, Культуры иИсследований № 431/2020.

Куррикулум разработан при поддержке проекта „Tekwill în Fiecare Școală/TwentyTU”, врамках Меморандума о сотрудничестве между Министерством Образования, Культуры иИсследований, Министерством Экономики и Инфраструктуры, Национальной АссоциациейИКТ Компаний и Общественным Учреждением - Центром обучения и инноваций в области
ИКТ - Tekwill по внедрению цифрового образования на национальном уровне,подписанном 14 июня 2018.

ВВЕДЕНИЕ
Данный куррикулум является нормативным и обязательным документом для процесса
преподавания, обучения и оценки дисциплины по выбору «Проектирование и вебразработка». Учебная программа направлена на обучение и развитие навыков учащихся
гимназий (VII-IX класс) и лицеев (X-XII класс).
Дисциплина по выбору разработана с целью:● облегчения доступа учеников к информации, необходимой для начального процесса
обучения с целью концептуализации, проектирования и разработки веб-сайтов;● подготовки учеников к изучению других дисциплин из области веб-а, таких как: вебпрограммирование, разработка веб-приложений, веб-фреймворки и др.;● расширения возможностей доступа учащихся из гимназий и лицеев Республики
Молдова к цифровым ресурсам, то что позволит гибко проводить обучение как в классе,так и вне аудиторий;● обучение под руководством преподавателя или самостоятельное обучение, взависимости от потребностей учеников и возможностей учебного заведения.

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

Целевые группы
Куррикулум дисциплины по выбору «Проектирование и веб-разработка» адресован
преподавателям средних и старших классов, авторам образовательных ресурсов в цифровом
формате, ученикам и другим заинтересованным лицам.

Администрирование учебной дисциплины
Статус

Учебная

дисциплины

область

Факультативный

Технологии

Классы
VII−IX и X-XII(реальный игуманитарный
профиль)Количество

Количество

модулей

часов

4

34

Распределение часов по модулям
№
1.
2.
3.
4.

Темы и модули
Введение в вебЯзык маркировки HTMLЯзык стилизации CSSЯзык программирования JavaScriptВсегоОбщее количество
часов
4
24
33
39
100

Куррикулум дисциплины по выбору составлен таким образом, что учащийся может
выбрать изучение факультативного предмета «Проектирование и веб-разработка» наопределенном уровне своего обучения, не изучая его на предыдущем уровне.
Также, для изучения данной дисциплины по выбору могут быть созданы смешанные
группы, в которые могут входить ученики с разного уровня образования (VII-XII классы). Втаких случаях учебные материалы, задачи и учебные задания будут устанавливаться
индивидуально для каждой возрастной группы, а интеграция преподавания, обучения иоценки будет достигнута путем разработки совместных проектов, группами учащихся разного
возраста.

I. ДИДАКТИЧЕСКАЯ КОНЦЕПЦИЯ ДИСЦИПЛИНЫ ПО ВЫБОРУ
Определение дисциплины «Проектирование и веб-разработка»Дисциплина по выбору «Проектирование и веб-разработка» имеет основной целью
развитие навыков проектирования, верстки, создания и модернизации веб-сайтов, сиспользованием языков разметки, стилизации и написания сценариев.
Дисциплина «Проектирование и веб-разработка» имеет существенный практическийи прикладной характер то, что означает, что ученики будут формировать / развивать навыки
проектирования, верстки, создания и публикации или модернизации веб-сайтов, дляразличных областей, контекстов и групп пользователей. Факультативный предмет предлагает
ученикам возможность открыть для себя одну из составных частей информатики –Проектирование и веб-разработка, и специализироваться в этой узкой области. Кроме того,эта дисциплина повысит интерес учащихся к информатике.
Дисциплина «Проектирование и веб-разработка» способствует профориентации
молодых людей, предлагая им специализацию, которая может стать их будущей профессией.

Статус дисциплины в учебном плане

«Проектирование и веб-разработка» - дисциплина по выбору куррикулумной области
«Технологии».

Формирующее значение дисциплины
Целью обучения дисциплины по выбору «Проектирование и веб-разработка» в общем
образовании является:● изучение веб-технологий как прикладной области, способствующей формированию
навыков разработки веб-сайтов для различных сфер деятельности;

●
●
●
●

создание практических навыков проектирования веб-сайтов;создание практических навыков верстки веб-сайтов;создание практических навыков использования прикладного и системного
программного обеспечения, редакторов кода, необходимых для разработки веб-сайтов;создание практических навыков написания, интерпретации и интеграции кода HTML,CSS и JavaScript.

Стратегические аспекты формирования школьной компетенции

Куррикулум дисциплины по выбору а «Проектирование и веб-разработка» создан всоответствии с моделью проектирования, ориентированной на навыки. Согласно этой модели,ученик находится в центре учебного процесса. Компетенция может быть приобретена илисформирована учениками самостоятельно и не может быть обучена учителем. В этом смысле,дисциплина предлагает учебные материалы и задания, которые поощряют размещение
учащихся в различных учебных ситуациях, включая проекты, побуждая их быть активными
субъектами в собственном обучении и развитии. Рекомендуется, чтобы учебные ситуации
были реальными, разнообразными по контексту, мотивирующими, которые побуждали быучеников искать ответы, творить, применять свои знания или навыки для успешного решения
различных ситуаций. В ситуационной задаче у учеников есть возможность интегрировать своиразрозненные знания и применять их в четко определенном контексте.
Обучение при помощи проектов позволяет учащимся участвовать в исследовательской
деятельности реальных или квазиреальных, сложных, вызывающих задачах и в результате
получать оригинальные продукты. При реализации какого-то проекта ученики учатся искать
необходимую информацию, решать проблемы, проводить исследования, принимать решения,работать индивидуально или совместно, дозировать время, соблюдать временные рамки,создавать конечный продукт, представлять результаты проекта и т. д.
При изучении дисциплины «Проектирование и веб-разработка» рекомендуется
предлагать ученикам реализовать несколько мини-проектов, под руководством
преподавателя, и один проект самостоятельно выполненный учащимися. Первые минипроекты должны быть более простыми, с высокой степенью поддержки со стороны учителя,постепенно сложность проектов должна увеличиваться, а степень поддержки должна
уменьшаться.
Учитель может свободно использовать примеры учебной и оценочной деятельности,рекомендованные данной учебной программой, может их дополнить или может заменить их,так чтобы они обеспечивали учебный процесс, соответствующий существующему школьному
контексту, потребностям и специфике учащихся.

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

2. Принцип фокусирования деятельности/ дидактического подхода на ученике – принятие
активной модели обучения, ориентированной на ученика, имеющую в основе
индивидуальную или групповую деятельность, позволяющую развивать независимость
действий, оригинальность, творческий потенциал, способность работать в команде,сочетая их с индивидуальным ритмом обучения.
3. Принцип функциональности/ социальной полезности учебного процесса, который
предполагает развитие навыков и компетенций, необходимых для органической
интеграции учащихся в информационное общество. Принцип реализуется на основе
решения ситуационных проблем, преодоление которых способствует формированию
навыков самосовершенствования (самообучения).
4. Принцип
междисциплинарной
корреляции,который
включает
всебямеждисциплинарный подход к обучению по всем школьным предметам, сиспользованием цифровых принципов и методов для решения проблем, разработки
проектов, обработки информации, относящейся к разным дисциплинам, ииспользования цифровых образовательных ресурсов.

II. ПРИОРИТЕТНЫЕ КЛЮЧЕВЫЕ КОМПЕТЕНЦИИ ДЛЯДИСЦИПЛИНЫ ПО ВЫБОРУ
1.
2.
3.
4.
5.
6.

Коммуникативные навыки на родном языке;Коммуникативные навыки на иностранных языках;Компетентность в области математики, естественных наук и технологий;Цифровые навыки;Способность научиться учиться;Инициативность и предпринимательские навыки.

III. ПРИОРИТЕТНЫЕ ТРАНС-ДИСЦИПЛИНАРНЫЕ
КОМПЕТЕНТНОСТИ ДИСЦИПЛИНЫ ПО ВЫБОРУ
Транс-дисциплинарные компетенции для учеников гимназии:1. Компетенция использования в реальных ситуациях инструментов с цифровым
действием, проявляя независимость в мышлении и действии.
2. Компетенция критически относиться к своей деятельности, с целью непрерывного
саморазвития и самореализации.
Транс-дисциплинарные компетенции для учеников лицеев:1. Компетенция осознанно выбирать будущую сферу профессиональной
деятельности с целью самореализации.
3. Компетенция организовывать личную деятельность в условиях постоянно
меняющихся технологий, проявляя уверенность в себе и успех.

IV. СПЕЦИФИЧЕСКИЕ КОМПЕТЕНЦИИ ДИСЦИПЛИНЫ ПО ВЫБОРУ
Дисциплина по выбору «Проектирование и веб-разработка» направлена наформирование следующих конкретных навыков:● Использование редакторов кода для создания файлов HTML, CSS и JavaScript илидля редактирования уже существующих файлов, с целью разработки простых сайтовили сайтов средней сложности;● Правильное лексическое, синтаксическое и семантическое написание HTML, CSS,JavaScript кода;● Проектирование, верстка и стилизация простых сайтов и сайтов средней сложности,с использованием языков разметки и стиля для конкретных нужд и интересов
клиентов (физических или юридических лиц). Сайты должны быть совместимы снесколькими веб-браузерами и доступны на разных устройствах;● Разработка веб-сайтов путем добавления кода JavaScript с целью анимации,динамизации, проверки данных и реализации других интерактивных элементов настраницах сайта;● Постепенная модернизация существующих веб-сайтов, за счет внедрения новых
возможностей HTML5 и CSS3.

V. РАСПРЕДЕЛЕНИЕ ТЕМ ПО МОДУЛЯМ И ВРЕМЕННЫМ
ЕДИНИЦАМ
ТемыМодуль № 1. ВВЕДЕНИЕ В ВЕБ
1. Введение в веб-дизайн и веб-разработку
2. Представление прототипа сайта, который может быть разработан врамках данной дисциплины
Всего по модулю
Модуль № 2. ЯЗЫК РАЗМЕТКИ HTML1. Язык разметки HTML. Элементы HTML Элементы HTML,используемые в заголовке веб-документа. Элементы HTML,используемые в содержимом веб-страницы для редактирования иформатирования текста
2. HTML-элементы, используемые в теле веб-страницы дляупорядочивания текста, с помощью списков данных
3. HTML-элементы, используемые в основной части веб-страницы длявключения изображений и таблиц
4. Элемент HTML, используемый в теле веб-страницы для включения
ссылок
5. HTML-элементы, используемые в теле веб-страницы для реализации
форм
6. HTML-элементы, используемые в теле веб-страницы для реализации
i-фреймов, аудио и видео в HTMLВсего по модулю

Кол. часов
1
1
2
1

1
2
1
1
2
8

Модуль № 3. ЯЗЫК СТИЛИЗАЦИИ CSS
1. Способы внедрения стилей в веб-документы. Базовый синтаксис
определения стилей для элементов HTML2. Типы селекторов CSS. Свойства CSS, используемые для стилизации
текста
3. Наследование стилей. Свойства CSS для определения стиля фона исписков
4. Свойства CSS для стилизации внутренних и внешних полей. Высота,ширина элементов – модель «коробки». Определение стилей границ.
Стилизация таблиц и изображений
5. Псевдо-классы - стилизация ссылок, псевдо-элементы. Элементы
DIV, SPAN
6. Свойства стиля для плавающих элементов и свойства дляпозиционирования элементов
7. Прозрачность
HTML-элементов,фильтры,преобразования,градиенты цветов
8. Переходы/ транзиции, анимации в CSS
9. Понятие «адаптивный дизайн». Media Queries
10. Flexbox-ы (блоки «жидкой» формы) в CSS. «Адаптивный вебдизайн» и flexbox
11. Пример создания и стилизации веб-сайта
Всего по модулю
Модуль № 4. ЯЗЫК ПРОГРАММИРОВАНИЯ JAVASCRIPT
1. Клиентские скрипты. Введение в язык программирования JavaScript
2. Предопределенные объекты JavaScript. Свойства и методы. КонсольJavaScript
3. Переменные, типы данных и операторы в JavaScript
4. DOM HTML. Доступ и изменение содержимого веб-документа через
HTML DOM
5. Предопределенные функции в JavaScript
6. Функции, определенные программистом на JavaScript. Синтаксис.
Области видимости переменных
7. Манипуляции с датой и временем в JavaScript. Условные инструкцииJavaScript
8. Циклические инструкции в JavaScript
9. События, управляемые с помощью JavaScript
10. Объект RegExp из JavaScript
11. Массивы в JavaScript
12. Определение объектов в JavaScript. Свойства, методы данных
объектов
13. Пример создания слайдера с помощью JavaScript. Добавление насайтВсего по модулю
Всего

1
1
1
1

1
1
1
1
1
1
1
11
1
1
1
1
1
1
1
1
1
1
1
1
1
13
34

VI. КОМПЕТЕНТНОСТИ, СОДЕРЖАНИЕ, УЧЕБНАЯ ДЕЯТЕЛЬНОСТЬ ПО МОДУЛЯМ
Модуль № 1. ВВЕДЕНИЕ В ВЕБ
1.1. Введение в веб-проектирование и веб-разработку
Подразделения компетенций

-

-

-

-

-

Распознание веб-сайта, вебстраницы, URL-адреса,доменного имени, веббраузера и редактора кода;Выявление различий между
процессом веб-дизайна и вебразработкой;Приведение примеров
технологий в форме
формальных языков,используемых в процессе
дизайна, верстки веб-страниц,а также для вебпрограммирования;Определение основных
характеристик клиентских
скриптов;Обоснование необходимости
установки редактора кода и
веб-браузера на компьютерили ноутбук.

Единицы содержания

Рекомендуемые учебные действия и ресурсы

1. Основные понятия.
2. Этап проектирования иразработки сайта.
3. Основные характеристики
веб-сайтов.
4. Примеры формальных
языков, используемых длясоздания страниц вебсайта.
5. Редакторы кода и веббраузеры.

1. Видео урок 1, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 1-го Урока, наонлайн-платформе.
3. Предлагаются следующие упражнения:● Определение основных элементов веб-браузера;● Перечисление списка функций браузера;● Обнаружение URL и доменного имени сайта;● Определение количества страниц сайта;● Перечисление основных компонентов каждой страницы какого-товеб-сайта;4. Тематическое исследование:● Анализ и определение назначения сайта, на основе содержимого
страниц сайта;5. Пример 1-го задания: Проанализируйте окно веб-браузера и...
● Найдите в окне адресную строку браузера;● Обратите внимание, какие другие функции есть у веб-браузера.
6. Пример 2-го задания: Проанализируйте 2-3 сайта в Интернете и...
● Узнайте URL и доменное имя каждого сайта;● Укажите, из скольких страниц состоит сайт;● Выделите основные составляющие каждой страницы сайта;● Выясните, основываясь на содержании страниц сайта, каково
предназначение сайта (для чего он был разработан - для продажи,предоставления услуг, продвижения, общения и т. д.).

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

-

-

-

-

Определение понятий
«адаптивный веб-дизайн»,«гамбургер-меню»,«слайдер», «стартовая
страница» сайта;Определение основных
компонент веб-страницы:заголовок, контент, нижний
колонтитул;Обоснование необходимости
структурирования вебстраницы из интегрируемых
компонентов;Определение правильной
структуры папок с файлами,необходимых для разработки
сайта, по их типу.

Единицы содержания

1. Основные понятия.
2. Структурирование вебсайта: стартовая страницаи второстепенные
страницы.
3. Основные компоненты
веб-страницы: заголовок,контент, нижний
колонтитул.
4. Важность меню на вебстраницах.

Рекомендуемые учебные действия и ресурсы

1. Видео урок 2, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 2-го Урока, наонлайн-платформе.
3. Предлагаются следующие упражнения:● Идентификация стартовой страницы сайта и ее основных
компонентов;● Распознавание и обнаружение слайдера на сайте (если он есть);● Определение режимов управления слайдером - автоматический илиручной;● Исследование того, насколько правильно «адаптируется» содержимое
сайта, под окно просмотра устройства;● Анализ преобразования верхнего меню в гамбургер-меню ивыделение преимуществ этого преобразования;● Графическое проектирование веб-интерфейса, удобное для доступа
пользователей;● Установление аудитории сайта (кому предназначен сайт).
4. Проект:● Выбор области исследования, для которой будет разработан сайт(индивидуальный проект), с описанием аудитории сайта, спредставлением дизайна его страниц и базовой структуры
родительской папки для веб-проекта.
5. Пример 1-го задания: Зайдите на 2-3 сайта в Интернете ипроанализируйте их, а затем...
● Опишите роль стартовой страницы веб-сайта;● Опишите различия и составные части веб-страницы;● Узнайте, есть ли на анализируемых сайтах слайдеры. Если да сделайте гипотезу о том, как он контролируется: пользователем илиавтоматически. Опишите способ активации слайдера;● Уменьшите ширину окна браузера (окна просмотра) и узнайте,насколько хорошо содержимое каждой страницы сайта соответствует
области просмотра. Проверьте, появляется ли символ, позволяющий
развернуть меню и получить доступ к его опциям. Опишите иаргументируйте преимущества внедрения гамбургер-меню на сайтах,когда содержание его страниц представлено на маленьком экране.
6. Пример 2-го задания: Подумайте о какой-то сфере деятельности или оборганизации, компании, товаре, услуге, деятельности и т. д. длякоторого вы хотите создать сайт. Попробуйте найти ответы наследующие вопросы:● Кому предназначен сайт? Кто войдет в аудиторию сайта?
● Какую комбинацию цвет фона/ цвет текста вы бы хотели
использовать для дизайна сайта?
● Как вы думаете, из скольких страниц должен состоять ваш сайт?
● Что должна содержать каждая страница сайта? Какие будут
основные компоненты страниц сайта?
● Как вы думаете, какова будет структура папок и какие файлы
потребуются для разработки вашего сайта?
● На листе бумаги нарисуйте дизайн страниц вашего сайта.
Модуль № 2. ЯЗЫК РАЗМЕТКИ HTML2.1. Введение в язык разметки HTML. HTML элементы
Подразделения компетенций

-Определение понятия «языкразметки»;Определение правильной
структуры веб-документа;Выявление элементов HTML,отвечающих за определение

Единицы содержания

1.
2.
3.
4.

Рекомендуемые учебные действия и ресурсы

Язык разметки HTML.
1. Видео урок 3, на онлайн платформе.
HTML-элементы.
2. Тест, оценивающий знания, полученные по завершению 3-го Урока, наСтруктура веб-документа.
онлайн-платформе.
Атрибуты
элементов 3. Предлагаются следующие упражнения:● Определение правильной структуры веб-документа;
HTML.

-

-

базовой структуры вебдокумента;Распознавание атрибутов
элементов HTML ивыявление их отличия оттегов HTML;Создание простого вебдокумента, с соблюдениемего правильной структуры.

● Идентификация веб-элементов, ответственных за определение вебдокумента, его заголовка и его содержимого;● Использование редактора кода для создания веб-документа;● Запуск созданного веб-документа в браузере.
4. Примеры заданий:● Создайте веб-документ, с помощью редактора кода, и который имеет
содержание указанное в видеоуроке.
● Сохраните код, создав веб-документ index.html.
● Откройте веб-документ в веб-браузере и посмотрите, как браузер
интерпретирует элементы HTML, определенные в документе.
● Попробуйте удалить из документа некоторые элементы HTML.
Сохраните и посмотрите результат в окне браузера.
● Добавьте в документ несколько новых HTML-элементов. Сохраните ипосмотрите результат интерпретации в окне браузера.
● Создайте еще один веб-документ самостоятельно, следуя
рекомендованной структуре. Сохраните его, а затем откройте вбраузере. Проанализируйте результат.
2.2. HTML-элементы, используемые в заголовке веб-документа

Подразделения компетенций

--Перечисление и описание
HTML-элементов, которые
можно использовать взаголовке веб-документа;Указание синтаксиса HTMLэлементов, используемых дляопределения заголовка вебдокумента;Единицы содержания

Рекомендуемые учебные действия и ресурсы

1. Заголовок веб-документа - 1. Видео урок 4, на онлайн платформе.
элемент HEAD, синтаксис. 2. Тест, оценивающий знания, полученные по завершению 4-го Урока, на
2. Элемент TITLE, синтаксис.
онлайн-платформе.
3. Элемент LINK, синтаксис. 3. Предлагаются следующие упражнения:4. Элемент META, синтаксис.
● Определение расположения заголовка в веб-документе;● Обоснование необходимости определения заголовка веб-документа;5. ЭлементыSTYLEиSCRIPT.
● Написание строк кода HTML, отвечающих за определение заголовка
веб-документа;--Оценка роли каждого HTMLэлемента, используемого взаголовке веб-документа;Написание и интеграция
HTML-элементов в заголовок
веб-документа.

● Анализ результатов интерпретации HTML-кодов из заголовка, вбраузере.
4. Примеры заданий:● Опишите расположение заголовка веб-документа, с учетом основной
структуры веб-документа.
● Перечислите 2-3 HTML-элемента, которые можно использовать взаголовке веб-документа.
● Обосновывайте важность внедрения HTML-элементов в заголовок
веб-документа.
● Напишите элемент HTML, необходимый для указания названия вебдокумента, соблюдая его синтаксис.
● Напишите строку кода HTML, которая добавит иконку/значок сайта,который отобразится на вкладке, рядом с названием сайта.
● Напишите в заголовке веб-документа строки кода, в которых будет
указано имя автора сайта, ключевые слова, используемые на сайте, истроку, которая будет правильно определять область просмотра.
● Внедрите написанные строки кода, в веб-документе (например, в
index.html, определенном в уроке 3). Сохраните его и проанализируйте
результат в окне браузера.
● Проверьте правильность написанного кода с помощью онлайнвалидатора (например, https://validator.w3.org/ ).

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

-Подразделения компетенций

Единицы содержания

Рекомендуемые учебные действия и ресурсы

Описание элемента исинтаксиса элемента BODY,используемого дляопределения «тела» вебстраницы;1. Элемент BODY, семантикаи синтаксис
2. HTML-элементы,используемые дляформатирования текста:1. Видео урок 5, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 5-го Урока,на онлайн-платформе.
3. Предлагаются следующие упражнения:--Распознавание и описание
синтаксиса HTML-элементов,которые можно использоватьдля форматирования текстана веб-страницах;Внедрение в веб-документ
элементов, определяющих
текст, или элементов,форматирующих части
текста.

H1, H2, ... H6, P, BR, PRE,
I, EM, B, STRONG, SUP,
SUB, SMALL, MARK и др.

● Выявление HTML-элемента,отвечающегоза определение
содержимого веб-страницы;● Выявление отличий между заголовком и содержимым веб-страницы –в коде (веб-документе) и визуально (в окне браузера);● Перечисление HTML-элементов, которые можно использовать дляформатирования текста в веб-документе;● Написание
HTML-кода,который
позволит
реализовать
отформатированный текст на веб-странице.
4. Тематическое исследование:● Анализ 2-4 веб-сайтов и выделение заголовков веб-страниц,расположенных на вкладке браузера: название сайта, значок вкладки.
Также, выделите содержимое веб-страниц и основные различия
между этими двумя компонентами – заголовок и тело.
5. Примеры заданий:● Расскажите о месте внедрения HTML-элементов, необходимых длявставки простого или форматированного текста в веб-документ;● Напишите последовательность HTML-кода, которая приведет к вставкена веб-страницу структурированного текста, содержащего заголовки
двух типов и простой текст;● Напишите последовательность кода, которая позволит включить на вебстранице какие-то стихи, состоящие из двух строф;● Напишите код, который содержит по крайней мере 3 элемента
форматирования, из следующих: I, EM, B, STRONG, SUP, SUB,SMALL, MARK;● Сохраните написанный код и проанализируйте результаты егоинтерпретации в окне браузера;● Проверьте правильность написанного вами кода с помощью онлайнвалидатора (например, https://validator.w3.org/ ).

2.4. HTML-элементы, используемые в теле веб-страницы для упорядочивания текста, с помощью списков данных
Подразделения компетенций

-

-

-

-

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

Единицы содержания

Рекомендуемые учебные действия и ресурсы

1. Определение понятия
«список».
2. Элемент UL и LI,семантика и синтаксис.
3. Элемент OL и LI,семантика и синтаксис.
4. Элемент DL, DT, DD,семантика и синтаксис.
5. Смешанные/ включенные
списки.

1. Видео урок 6, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 6-го Урока, наонлайн-платформе.
3. Предлагаются следующие упражнения:● Распознание списков в тексте;● Распознавание типа списка, определенного в веб-документе, поиспользуемому синтаксису;● Написание HTML-кода для определения и внедрения списков в вебдокументе;● Написание HTML-кода для определения смешанных списков.
4. Тематическое исследование:● Проанализируйте и найдите в книгах или на веб-сайтах списки сперечислениями - упорядоченные или неупорядоченные, а также
списки описаний. Объясните необходимость их использования.
5. Примеры заданий:● Проанализировать предложенный текст и найти списки, содержащие
перечисления;● Назовите элементы HTML, используемые для определения
упорядоченных списков, неупорядоченных списков и списков
описаний;● Напишите последовательность кода HTML, которая приведет ксозданию упорядоченного списка;● Напишите последовательность кода HTML, которая приведет ксозданию неупорядоченного списка;● Напишите последовательность кода HTML, которая приведет кгенерации списка описаний;● Напишите последовательность кода HTML, которая приведет ксозданию смешанного списка;● Выделите атрибуты используемых HTML-элементов и укажите ихроль;● Внедрите определенные списки в веб-документе. Проанализируйте
полученные результаты в окне браузера и сформулируйте гипотезы онеобходимости внедрения списков на веб-страницах.
2.5. HTML-элементы, используемые в теле веб-страницы для включения изображений и таблиц
Подразделения компетенций

-

-

-

Единицы содержания

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

Рекомендуемые учебные действия и ресурсы

1. Видео урок 7, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 7-го Урока, наонлайн-платформе.
3. Предлагаются следующие упражнения:● Распознание HTML-элементов, которые можно использовать длявставки изображений в веб-документ;● Распознание HTML-элементов, которые можно использовать длявставки таблиц с данными в веб-документ;● Написание HTML-кода для внедрения изображений, а также длявнедрения таблиц с данными в веб-документах;● Перечисление атрибутов элементов, используемых для вставки
изображений в веб-документы;● Правильное использование атрибутов HTML-элементов дляобъединения двух или более ячеек в таблице по горизонтали и / иливертикали.
4. Тематическое исследование:● Проанализируйте и найдите таблицы с данными в книгах или на вебсайтах. Выделите составные части таблицы: название, заголовок,строки, столбцы и ячейки с данными. Объясните необходимость
использования таблиц для структурирования данных.

5. Примеры заданий:● Назовите HTML-элемент, используемый для вставки изображения на
веб-страницу. Выделите атрибуты, в том числе обязательные;● Назовите элементы HTML, необходимые для определения таблиц.
Выделите предназначение каждого названного элемента;● Выделите атрибуты элементов HTML, используемых для определения
таблиц, и укажите их роль;● Напишите последовательность HTML-кода, необходимую длявнедрения двух изображений в веб-документе;● Напишите последовательность кода HTML, необходимую дляреализации таблицы, содержащей не менее 3 строк и не менее 2столбцов;● Добавьте атрибуты элементам, используемые для определения
таблицы, чтобы объединить 2 ячейки по горизонтали и 2 по вертикали;● Проанализируйте полученные результаты в браузере.
2.6. Элемент HTML, используемый в теле веб-страницы, для включении ссылок
Подразделения компетенций

-

-

-

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

Единицы содержания

1. Элемент А, семантика исинтаксис.
2. Изображения-ссылки.
3. Внутренние и внешние
ссылки.
4. Абсолютные иотносительные URLадреса.

Рекомендуемые учебные действия и ресурсы

1. Видео урок 8, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 8-го Урока, наонлайн-платформе.
3. Предлагаются следующие упражнения:● Распознавание элемента, ответственного за внедрение ссылок в вебдокументах;● Различие и правильное использование атрибутов элемента A;● Написание строк HTML-кода, с соблюдением рекомендованного
синтаксиса, для внедрения ссылок в веб-документах;● Обоснование необходимости включения ссылок в веб-документы.
4. Тематическое исследование:гипотез об их роли в вебдокументе.

● Исследование 2-4 существующих сайтов из веб-среды и выделение
используемых в них компонентов навигации: меню, внутренние,относительные или абсолютные ссылки, на основе URL из адресной
строки браузера. Обоснование необходимости внедрения ссылок.
5. Проект:● Для задачи, анализируемой в выбранном проекте для индивидуальной
работы, предложите решения для навигации по страницам иликомпонентам сайта. Создайте необходимые веб-документы для сайтаи поместите их в соответствующие папки, а потом реализуйте
логически правильные ссылки на них с разных страниц сайта.
Проверьте правильность внедренных ссылок.
6. Примеры заданий:● Назовите HTML-элемент, отвечающий за вставку ссылок в вебдокументы;● Перечислите обязательные атрибуты и укажите синтаксис элементадля вставки ссылок;● Напишите строки кода, которые позволят реализовать две внутренние
ссылки, предварительно пометив место перехода (привязку)глобальным атрибутом id;● Создайте еще два веб-документа, соблюдая рекомендованную для нихструктуру;● Напишите строки кода, которые позволят реализовать двеотносительные ссылки на два ранее созданных веб-документа;● Напишите строку кода HTML, которая позволит реализовать
абсолютную ссылку на ресурс из веб-среды (информация,изображение и т. д.);● Внедрите все написанные строки кода, в файле index.html. Сохраните,запустите в браузере и проанализируйте результат;● Проверьте правильность написанного вами кода с помощью онлайнвалидатора.

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

Единицы содержания

Рекомендуемые учебные действия и ресурсы

Описание возможностей
использования формы вкачестве интерактивного
инструмента для сбора
данных от пользователя;Представление синтаксиса
элементов HTML,используемых дляопределения HTML-форм, атакже элементов управления;Создание и внедрение формна веб-сайтах.

1. Формы - удобные средства
сбора данных.
2. Элемент FORM, семантикаи синтаксис.
3. Назначение элементов
управления, используемыев форме.
4. Элементы управления из
HTML-форм: INPUT,TEXTAREA, LABEL,
SELECT, OPTION,LEGEND, FIELDSET.
5. Атрибуты элементов
управления.

1. Видео урок 9, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 9-го Урока, наонлайн-платформе.
3. Предлагаются следующие упражнения:● Описание контекстов использования HTML-форм в сайтах;● Спецификация элемента HTML, отвечающего за создание формы, атакже элементов HTML, используемых для определения элементов
управления в форме;● Представление синтаксиса HTML-элементов, используемых длясоздания формы, содержащую элементы управления;● Написание HTML-кода, необходимого для определения формы,состоящей из 3-10 элементов управления;● Внедрение HTML-формы в веб-документе.
4. Тематические исследования:● Исследование 2-4 веб-сайтов и нахождение в них HTML-форм.
Объясните назначение каждой найденной формы. Выделите иопишите элементы управления, используемые в этих формах.
5. Примеры заданий:● Опишите полезность форм на веб-сайтах;● Назовите элемент HTML, используемый для определения формы;● Назовите и опишите элементы HTML, используемые дляопределения элементов управления в формах;● Представьте синтаксис элементов FORM, INPUT, TEXTAREA,LABEL, SELECT, OPTION, LEGEND, FIELDSET;● Напишите HTML-код, который приведет к генерации формы,состоящей из 3-10 элементов управления;● Внедрите форму в веб-документе и запустите ее в браузере;●●Проанализируйте полученный результат в окне браузера;Воспользуйтесь
онлайн-валидатором,чтобыпроверить
правильность написанного кода.

2.8. HTML-элементы, используемые в теле веб-страницы для реализации iframe, audio и video в HTMLПодразделения компетенций

-

-

-

Единицы содержания

Распознавание и описание
1. Элемент IFRAME,синтаксиса HTML-элементов,семантика и синтаксис.
используемых для реализации 2. Элемент AUDIO,семантика и синтаксис.
встроенных (in-line) фреймов;3. Элемент VIDEO,
Представление синтаксиса
семантика и синтаксис.
элементов, используемых длявнедрения аудио- ивидеопоследовательностей;Внедрение i-фреймов, аудиои видео на веб-страницах.

Рекомендуемые учебные действия и ресурсы

1. Видео урок 10, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 10-го Урока,на онлайн-платформе.
3. Предлагаются следующие упражнения:● Наименование
иописание
синтаксиса
HTML-элементов,используемых для вставки аудио-последовательностей в вебдокумент;● Наименование
иописание
синтаксиса
HTML-элементов,используемых для вставки видеопоследовательностей в веб-документ;● Наименование иописание синтаксиса элемента HTML,используемого для вставки i-фреймов в веб-документ;● Написание строк кода, необходимых для внедрения аудио, видео и
iframe в веб-документах.
4. Тематическое исследование:● Исследование 1-2 веб-сайтов и поиск в них аудио, видео или iфреймов. Исследование удобства использования этих элементов наданных веб-сайтах.
5. Проект:● Анализируйте сайты, доступные в веб-среде, и имеющие сходство свыбранным вами проектом для индивидуальной работы. Изучите
содержимое веб-страниц этих сайтов, графический дизайн иреализованные компоненты навигации;● Для сайта, выбранного в качестве финального проекта, создайте илипоищите текстовой контент и изображения, а затем отредактируйте
их, чтобы вы могли использовать их для определения страниц вашего
сайта, как описано в Уроке 2. Внедрите компоненты навигации посайту. Убедитесь, что все изображения, указанные в веб-документах,доступны на страницах сайта, ссылки - абсолютные илиотносительные - функциональны, а страницы сайта - имеют
рекомендуемую структуру: верхний колонтитул, основное
содержимое (не обязательно - дополнительное содержимое) и нижний
колонтитул. Проверьте правильность написанного кода с помощью
онлайн-валидатора (например, https://validator.w3.org/).
6. Примеры заданий:● Назовите, а затем опишите синтаксис элементов HTML, используемыхдля вставки аудио-последовательностей в веб-документы;● Назовите, а затем опишите синтаксис элементов HTML, используемыхдля вставки видео в веб-документы;● Назовите, а затем опишите синтаксис HTML-элемента, используемогодля вставки inline фреймов в веб-документы;● Напишите последовательность кода HTML, который позволяет
внедрить аудио, видео и iframe в веб-документ;● Откройте веб-документ в браузере и проанализируйте полученные
результаты.
Модуль № 3. ЯЗЫК СТИЛИЗАЦИИ CSS
3.1. Способы внедрения стилей в веб-документах. Базовый синтаксис определения стилей для элементов HTMLПодразделения компетенций

-Определение понятия
«стиль»;Единицы содержания

1. Определение понятия
«стиль».

Рекомендуемые учебные действия и ресурсы

1. Видео урок 11, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 11-го Урока,на онлайн-платформе.

-

-

-

-

Выдача гипотез онеобходимости стилизации
HTML-элементов;Представление рекомендацийо необходимости разделения
стилей от HTML-кода;Указание способов внедрения
стилей в веб-документах;Определение места
размещения селектора, егосвойств и значений свойств вобъявлениях CSS;Интерпретирование простых
стилей.

2. Внешние, внутренние и
3. Предлагаются следующие упражнения:встроенные стили –● Определение понятия «стиль»;способы их внедрении.
● Перечень методов внедрения стилей в веб-документе;3. Определение понятия
● Назвать HTML-элементы, используемые для внедрения стилей в веб«селектор», «CSSдокументах, и описание их синтаксиса;● Распознание селекторов, объявлений, свойств CSS в ужесвойство» и «значение
свойства».
определенном простом стиле;4. Базовый синтаксис,● Различить внутренние стили от внешних стилей и встроенных;которому необходимо
● Выдача предположений о области применения стилей, в зависимостиот того, где они определены - внутри или вне веб-документа.
следовать при определении
свойств стиля для
4. Тематическое исследование:● Исследование 1-2 сайтов из веб-среды и выявление цветовой
элементов HTML.
комбинации, используемой на сайте, способа представления идоступа к элементам в окне браузера. Описание удобства
использования сайта и его элементов.
5. Примеры заданий:● Опишите, что такое стиль и как он может изменить представление
HTML-элемента на веб-странице;● Опишите известные вам методы, которые можно использовать длявнедрения стилей в веб-документах;● Назовите элементы HTML, которые можно использовать длявключения стилей в веб-документах. Опишите их синтаксис;● Для простого стиля, написанного учителем, выделите селектор,объявление, свойство и его значение;● Напишите простой внешний стиль и создайте связь с ним в вебдокументе. Объясните, к чему (к каким элементам) и как будет
применяться этот стиль;● Напишите простой внутренний и встроенный стиль. Объясните, кчему и как будет применяться эти стили.

3.2. Типы селекторов CSS. Свойства CSS, используемые для стилизации текста
Подразделения компетенций

-

-

-

-

-

Единицы содержания

Описание назначения свойств 1. Классификация и описаниеи селекторов CSS;основных селекторов,используемых для выбора
Распознание селекторов типаid, class, а также разных
элементов из вебдокументов.
свойств CSS;Правильное использование
2. Селекторы типа «id» и«class».
свойств и селекторов CSS при
3. Свойства CSS,стилизации различных
используемые дляэлементов HTML,используемых длястилизации текста в вебдокументах.
форматирования текста;Написание и интерпретация
стилей с использованием
селекторов типа «id» и«class»;Интерпретация
последовательностей стилейдля текста, с целью
понимания ихпредназначения;Написание стилей длятекстовых
последовательностей в вебдокументе.

Рекомендуемые учебные действия и ресурсы

1. Видео урок 12, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 12-го Урока,на онлайн-платформе.
3. Предлагаются следующие упражнения:● Выявление необходимости стилизовать только некоторые элементы
веб-документа с помощью селекторов «id» и «class»;● Сравнение полезности и синтаксиса селекторов типа «id» и «class»;● Распознавание свойств стиля, используемых при стилизации текста;● Написание и интерпретация стилей с использованием селекторов «id»
и «class»;● Написание стилей для стилизации текста в веб-документах;● Анализ результатов, полученных при стилизации HTML-элементов изодного или нескольких веб-документов.
4. Тематическое исследование:● Исследование
последовательности
стилей,предложенная
преподавателем, с целью выделения селекторов типа «id» и «class» иописание области применения этих стилей.
5. Примеры заданий:● Сравните представленные два селектора - «id» и «class»; Представьте
синтаксис и контекст их использования;● Назовите от 3 до 5 CSS-свойств, которые можно использовать длястилизации текста;● Напишите стили для 2-4 элементов HTML из какого-то вебдокумента, используя селекторы типа «tag», «id», «class», а также
используя свойства CSS для стилизации текста;● Внедрите определенные стили во внешнем файле стилей, создайте
связь с ним в веб-документе, а затем запустите документ в браузере.

Проанализируйте полученные результаты. Попробуйте применить
другие значения к используемым свойствам стиля. Обратите
внимание на разницу в окне браузера.
3.3. Наследование стилей. Свойства CSS для определения стиля фона и списков
Подразделения компетенций

-

-

-

-

Единицы содержания

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

Рекомендуемые учебные действия и ресурсы

1. Видео урок 13, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 13-го Урока,на онлайн-платформе.
3. Предлагаются следующие упражнения:● Описание принципов наследования свойств стиля;● Перечисление 2-4 свойств CSS, значения которых могут бытьунаследованы дочерними элементами;● Перечисление свойств стиля, которые можно использовать длястилизации фонов, а также списков HTML. Описание данных свойств;● Спецификация некоторых значений для свойств, которые можно
использовать для стилизации фонов и списков HTML;● Написание и интерпретация стилей для фонов и списков, сприменением принципов наследования.
4. Тематическое исследование:● Исследование
последовательности
стилей,предложенной
преподавателем, с целью выделения свойства стиля, которые будут
унаследованы элементами-потомками и свойств, которые не будут
унаследованы.
5. Примеры заданий:● Укажите основные принципы наследования значений свойств стиля в
CSS;● Назовите 2-4 свойства стиля, значения которых могут бытьунаследованы потомками;● Назовите и опишите свойства стиля, которые можно использовать длястилизации фона элементов HTML, а также для стилизации списков;● Напишите стили для определения фона различных элементов HTML.
Анализируйте результаты интерпретации в окне браузера. Укажите,изменив, другие значения для используемых свойств стиля.
Проанализируйте полученные результаты;● Напишите стили для упорядоченных и неупорядоченных списков.
Анализируйте результаты интерпретации в окне браузера.
3.4. Свойства CSS для стилизации внутренних и внешних полей. Высота, ширина элементов – модель «коробки». Определение стилейдля границ. Стилизация таблиц и изображений
Подразделения компетенций

-

-

-

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

Единицы содержания

Рекомендуемые учебные действия и ресурсы

1. Модель «коробки» (boxmodel) для HTMLэлементов.
2. Свойства стиля,используемые длястилизации внутренних ивнешних полей HTMLэлементов.
3. Свойства CSS,используемые длястилизации высоты,ширины и границ HTMLэлементов.
4. Стилизация таблиц иизображений с помощью
CSS.

1. Видео урок 14, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 14-го Урока,на онлайн-платформе.
3. Предлагаются следующие упражнения:● Классификация свойств стиля, используемых для определения полей
элементов, по их типу (внутренние/ внешние);● Перечисление возможных значений свойств, используемых дляопределения полей и границ HTML-элементов;● Описание процесса стилизации таблиц и HTML-изображений;● Написание стилей для представления различных HTML-элементов,включая изображения и таблицы.
4. Тематическое исследование:● Анализ стилей, представленных преподавателем, с целью выделения
свойств, определяющих внутренние поля, внешние поля и границы
элементов. Идентификация значений этих свойств.
5. Примеры заданий:● Классифицируйте свойства стиля, используемые для добавления
полей элементу, по их типу;● Назовите свойства стиля, которые можно использовать дляопределения внутренних, внешних полей и границ HTML-элементов;● Укажите возможные значения свойств стиля, используемых дляопределения внутренних, внешних полей и границ элементов HTML;● Напишите и внедрите стили, которые лучше всего представляют
изображения и таблицы на веб-страницах.
3.5. Псевдо-классы - стилизация ссылок. Псевдо-элементы. Элементы DIV и SPAN
Подразделения компетенций

-

-

-

-

Распознание псевдо-классов ипсевдо-элементов из CSS;Правильное использование
псевдо-классов и псевдоэлементов для определения
стилей элементов или частей
HTML-элементов;Представление различий
между псевдо-классами ипсевдо-элементами, а также
отличия между ихсинтаксисом;Написание и интерпретация
свойств стиля для псевдоэлементов и псевдо-классов;Распознание, интерпретацияи включение элементов
HTML, которые могут
использоваться дляопределения блочных

Единицы содержания

Рекомендуемые учебные действия и ресурсы

1. Псевдо-классы и псевдоэлементы в CSS.
2. Свойства стиля,используемые вместе спсевдо-классами и псевдоэлементами.
3. HTML-элементы,используемые при верстке
веб-страниц – элемент
DIV.
4. Стилизация блочных
элементов.
5. Полезность блочных
элементов.

1. Видео урок 15, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 15-го Урока,на онлайн-платформе.
3. Предлагаются следующие упражнения:● Идентификация псевдо-классов в стилях CSS;● Описание возможностей использования псевдо-классов в процессе
написания стилей;● Обоснование необходимости стилизации ссылок в веб-документе;● Написание стилей, с использованием псевдо-классов, для стилизации
ссылок, а также для стилизации других элементов в веб-документах;● Название HTML-элемента, используемый для группировки
нескольких элементов HTML и для стилизации всей группы;● Название HTML-элемента, используемого для создания in-line стиля;● Написание стилей для блочных элементов, состоящих из группы
других элементов.
4. Тематическое исследование:● Исследование представленной последовательности HTML-кода,содержащую блоки DIV и стили для этих блоков. Представление
своего личного мнения о необходимости создания блока элементов, азатем стилизации данной группы HTML-элементов.
5. Примеры заданий:компонентов на вебстраницах.

● Назовите 3-4 псевдо-класса и опишите контекст их использования;● Установите взаимосвязь между псевдо-классами и стилизацией
ссылок;● Стилизуйте 2-4 ссылки из какого-то веб-документа;● Назовите элементы HTML, которые можно использовать длястилизации блока HTML-элементов и элемент необходимый для inlineстилизации;● Напишите несколько простых стилей для блока HTML-элементов,сгруппированных с помощью DIV. Откройте веб-документ в браузереи проанализируйте результаты.

3.6. Свойства стиля для плавающих элементов и свойства для позиционирования элементов
Подразделения компетенций

-

-

-

-

Объяснение понятия
«нормальный поток»представления HTMLэлементов на веб-странице;Распознавание свойств CSS,используемых дляпозиционирования HTMLэлементов на странице иуказании для них допустимых
значений;Написание и интерпретация
стилей для правильного
позиционирования элементовна веб-странице;Распознать иинтерпретировать свойства
CSS и их значения, которые

Единицы содержания

Рекомендуемые учебные действия и ресурсы

1. Нормальный поток
представления элементовна веб-странице.
2. Позиционирование HTMLэлементов с помощью
свойств CSS: float и
position.
3. Свойство z-index.
4. Свойство display.

1. Видео урок 16, на онлайн платформе.
2. Тест оценивающий знания, полученные по завершению 16-го Урока, наонлайн-платформе.
3. Предлагаются следующие упражнения:● Определение понятия «плавающий элемент» на веб-странице;● Перечисление свойств, которые могут указать, что элемент является
плавающим, или тех, которые могут отменять плавающий эффект
HTML-элемента;● Описание возможных значений для свойств: FLOAT, CLEAR,POSOTION, Z-INDEX, DISPLAY;● Описание
иаргументация
использования
CSS-свойств
позиционирования HTML-элементов на веб-странице;● Написание стилей, которые приведут к изменению нормального
потока представления элементов на веб-странице;● Объяснение необходимости изменить, в некоторых случаях,нормальный поток представления элементов на веб странице.
4. Тематическое исследование:можно использовать дляизменения нормального
потока позиционирования
элементов.

● Анализ последовательности элементов в веб-документе и ихпредставления в окне браузера, без добавления стилей
позиционирования. А затем анализ представления элементов того же
веб-документа с добавлением свойств стиля, которые могут изменить
нормальный поток представления данных элементов.
5. Примеры заданий:● Перечислите свойства CSS, которые могут изменить нормальный
поток представления элементов на веб-странице;● Опишите необходимость использования свойств стиля, которые
изменят поток представления элементов;● Напишите стили, которые будут размещать набор изображений (6-10)
слева, а затем справа на веб-странице;● Напишите стили, в которых будут использоваться свойства POSITIONи Z-INDEX. Анализируйте результаты интерпретации в окне браузера;● Напишите стили в которых следует использовать свойство DISPLAY,а затем проанализируйте результат.

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

Единицы содержания

Рекомендуемые учебные действия и ресурсы

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

1. Видео урок 17, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 17-го Урока,на онлайн-платформе.
3. Предлагаются следующие упражнения:● Определение свойств стиля, которые можно использовать дляопределения эффекта прозрачности элементов, цветовых
градиентов, применения цветовых фильтров и преобразований
элементов;● Аргументация необходимости внедрения стилей, обеспечивающих
специальные эффекты, такие как: прозрачность элементов, цветовые
градиенты, фильтры, трансформации;--Определение понятия
«градиент» и написание
стилей для цветовых
градиентов;Описание 2D-преобразований
HTML-элементов инаписание стилей дляпреобразования элементов из
веб-документа.

добавления цветовых
фильтров элементам илицветовых градиентов.

● Написание и интерпретация стилей, обеспечивающих эффекты:прозрачности, цветовых градиентов, фильтров, преобразований на
HTML-элементах.
4. Тематическое исследование:● Анализ веб-сайтов из веб-среды и обнаружение элементов сэффектами прозрачности, элементов для которых были применены
фильтры или цветовые градиенты, либо трансформация элементов.
Аргументирование необходимости реализации этих эффектов.
5. Примеры заданий:● Назовите свойства стиля, которые можно использовать для:достижения эффекта прозрачности элемента, для добавления
цветовых фильтров элементам, цветовых градиентов илипреобразований;● Аргументируйте
необходимость
реализации
эффектов:прозрачности элементов, цветовых градиентов, фильтров,преобразований на веб-страницах;● Напишите стили, которые добавят: прозрачность элементам,цветовые градиенты, фильтры, а также некоторые преобразования;● Интерпретируйте стили, которые определяют различные
графические эффекты в элементах HTML, и аргументируйте, какони улучшают внешний вид веб-страницы при их умеренном
использовании.

3.8. Транзиции и анимации в CSSПодразделения компетенций

-Определение понятий
«транзиция» и «анимация»;Распознавание свойств стиля,которые можно использовать

Единицы содержания

Рекомендуемые учебные действия и ресурсы

1. Транзиции. CSS-эффекты
транзиции элементов изодного состояния в другое.
Примеры.

1. Видео урок 18, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 18-го Урока,на онлайн-платформе.
3. Предлагаются следующие упражнения:● Распознание эффектов транзиций на веб-страницах;

-

-

-

для определения транзиций ианимации;Написание стилей длясоздания простых транзицийи анимации HTMLэлементов;Интерпретация и оценка
смысловой ценности стилей,содержащих определения
транзиций и анимаций;Внедрение транзиций ианимаций на веб-страницах.

2. Анимации. Создание
анимации в CSS. Примеры.

● Идентификация свойств стиля, используемых для определения
эффектов транзиций и анимаций в CSS;● Написание стилей, которые приведут к внедрению транзиций
элементов;● Написание стилей, которые приведут к определению анимации CSS;● Интерпретация написанных стилей для определения транзиций ианимаций.
4. Тематическое исследование:● Исследование веб-страниц и обнаружение существующих в нихэффектов транзиции. Аргументация необходимости применения
этого эффекта к элементам веб-страниц.
5. Примеры заданий:● Назовите свойства стиля, которые можно использовать дляопределения транзиции и анимации на веб-страницах;● Расскажите о том, как вы понимаете понятия «транзиция» и«анимация»;● Подчеркните различия между этими двумя понятиями, а также,различия между эффектами, полученными на веб-страницах, при ихвнедрении;● Напишите стили для 2-3 HTML-элементов, для которых выопределите транзиции;● Напишите стили, которые приведут к определению анимации 1-2
HTML-элементов на веб-странице.

3.9. Понятие «адаптивный дизайн» (responsive design). Media QueriesПодразделения компетенций

-Определение понятий
«адаптивный веб-дизайн»,«контрольная точка»,Единицы содержания

Рекомендуемые учебные действия и ресурсы

1. Понятия «адаптивный
1. Видео урок 19, на онлайн платформе.
дизайн» (responsive design), 2. Тест, оценивающий знания, полученные по завершению 19-го Урока,«контрольная точка»на онлайн-платформе.
3. Предлагаются следующие упражнения:--«область просмотра»(viewport);Распознавание и правильная
интерпретация медиазапросов;Написание медиа-запросов иих интеграция в вебдокументы, с целью
получения «отзывчивого»контента.

(breakpoint), «область
просмотра» (viewport).
2. Медиазапросы (Media
Queries). Примеры
использования media
Query.

● Определение понятий «адаптивный дизайн», «контрольная точка»,«область просмотра», «медиа-запрос»;● Интерпретация медиа-запросов с установлением контрольных точек,используемых в написанном коде;● Написание и внедрение медиа-запросов для 2-3 элементов вебдокумента.
4. Тематическое исследование:● Анализ 1-2 сайтов из веб-среды и исследование того насколько
правильно содержимое их страниц адаптируется к экрану устройства
представления. В случае обнаружения каких-либо недостатков объясните их, а если содержание адаптировано правильно –объясните, что было сделано для этого, по вашему мнению.
5. Примеры заданий:● Определите понятия: «адаптивный веб-дизайн», «контрольная точка»,«область просмотра», «медиа-запрос»;● Аргументируйте необходимость адаптации веб-контента к разным
презентационным экранам;● Интерпретируйте последовательность кода CSS, содержащую медиазапросы, и объясните ее назначение;● Напишите 2-3 медиа-запроса для изменения свойств стиля, придостижении определенных значений для 2-3 контрольных точек.

3.10. Flexbox-ы (блоки «жидкой» формы) в CSS. «Адаптивный веб-дизайн» и flexboxПодразделения компетенций

-Определение понятия
«флексбокс» (flexbox);Перечисление свойств CSS изгруппы «flex»;Написание и интегрирование
свойств CSS из группы «flex»Единицы содержания

1. Понятие гибких блоков.
2. Свойства CSS из группы
«flex».
3. Media Query и flexbox.
Примеры.

Рекомендуемые учебные действия и ресурсы

1. Видео урок 20, на онлайн платформе.
2. Тест оценивающий знания, полученные по завершению 20-го Урока, наонлайн-платформе.
3. Предлагаются следующие упражнения:в медиа-запросы, чтобы
определить «адаптивный»контент.

● Перечисление свойств стиля, которые могут быть применены кэлементу-контейнер, типа flexbox, с описанием возможных значенийдля этих свойств;● Написание и внедрение стилей с использованием свойств из группы
«flex».
4. Тематическое исследование:● Анализ какой-то последовательности кода HTML и CSS,содержащее
спецификацию
стилей
наоснове
flexbox.
Интерпретация этих кодов.
5. Примеры заданий:● Назовите свойства стиля из группы «flex», которые должны бытьуказаны для элемента контейнера, чтобы дочерние элементы былицентрированы – по вертикали и горизонтали – в элементеконтейнере;● Напишите стиль, используя свойства из группы «flex» и «media
query», для элемента контейнера, чтобы на большом экране
дочерние элементы отображались горизонтально, а на маленьком
экране - вертикально. Анализируйте результат в окне браузера.
3.11. Пример создания и стилизации веб-сайта

-

-

-

Подразделения компетенций

Единицы содержания

Рекомендуемые учебные действия и ресурсы

Правильный выбор свойствдля стилизации HTMLэлементов в веб-документе;Правильное написание
стилей, соблюдая синтаксис,для HTML-элементов в вебдокументе;Интеграция стилей в вебдокумент.

1. Создание веб-документа.
2. Создание внешнего файла
CSS.
3. Интеграция определенных
стилей, в веб-документе.

1. Видео урок 21, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 21-го Урока,на онлайн-платформе.
3. Предлагаются следующие упражнения:● Определение потребности в разделении стилей от HTML-кода;● Создание веб-документов, в которые используются стили CSS;● Создание внешних файлов стилей.
4. Проект:● Для задачи, выбранной с целью представления в качестве финального
проекта, напишите HTML-код, используя элементы HTML, включая
элементы DIV, которые определяют контент для веб-страниц, ранее
спроектированного сайта. Затем добавьте внешние стили CSS,которые лучше всего представляют элементы в окне браузера, такчтобы весь контент адаптировался к различным экранам
презентации.
5. Примеры заданий:● Аргументируйте необходимость отделения HTML-кода отопределения стилей элементов;● Создайте файл HTML, который содержит несколько групп
элементов, включенных в DIV-ах;● Стилизовать элементы в ранее созданном HTML-файле так, чтобывсе элементы правильно отображались как на большом, так и намаленьком экране;● Интегрируйте стили в веб-документ.
Модуль № 4. ЯЗЫК ПРОГРАММИРОВАНИЯ JAVASCRIPT
4.1. Клиентские скрипты. Введение в язык программирования JavaScriptПодразделения компетенций

-

-

-

Единицы содержания

Определение понятия
1. Клиентские скрипты
«клиентский» (client-side)(client-side scripts).
2. Введение в языкскрипт;Обоснование необходимости
программирования
использования языкаJavaScript.
программирования JavaScript 3. Способы включенияв веб-документах;JavaScript в веб-документе.
Описание методов, внедренияJavaScript в веб-документах;Рекомендуемые учебные действия и ресурсы

1. Видео урок 22, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 22-го Урока,на онлайн-платформе.
3. Предлагаются следующие упражнения:● Определение понятия «клиентский скрипт»;● Обоснование необходимости добавления клиентских скриптов в
веб-документы;● Перечень и описание методов включения JavaScript в вебдокументах;-Рекомендации онеобходимости добавления в
веб-страницах интерактивных
элементов и скриптов длядинамической генерации
нового контента на стороне
клиента.

● Объяснение необходимости отделения клиентских сценариев, от
HTML-кода, во внешних файлах.
4. Тематическое исследование:● Проанализируйте, прочитав статьи и Интернете, о существующих
различиях между клиентскими и серверными сценариями/скриптами.
5. Примеры заданий:● Дайте определение понятию «клиентский сценарий»;● Назовите язык программирования, который можно использовать длянаписания клиентских скриптов;● Опишите два примера возможных действий или содержимого насайте, которые могут быть достигнуты только путем добавления
скриптов;● Расскажите о методах, используемых для внедрения JavaScript в вебдокументах.

4.2. Предопределенные объекты JavaScript. Свойства и методы. Консоль JSПодразделения компетенций

-

-

-

Распознавание и описание
основных предопределенных
объектов из JavaScript;Представление основного
синтаксиса для свойств иметодов предопределенных
объектов в JavaScript;Написание JavaScript в вебконсоли и анализ результатових интерпретации браузером.

Единицы содержания

Рекомендуемые учебные действия и ресурсы

1. Основные
1. Видео урок 23, на онлайн платформе.
предопределенные объекты 2. Тест, оценивающий знания, полученные по завершению 23-го Урока,из JavaScript, такие как:на онлайн-платформе.
String, Number и др.
3. Предлагаются следующие упражнения:2. Основные свойства
● Перечисление предопределенных объектов из JavaScript;предопределенных
● Определение понятия «свойство» и «метод» объекта;объектов из JavaScript и их
● Иллюстрирование различий между «свойством» и «методом»наиболее
объекта;● Описание синтаксиса, необходимого для соблюдения, при доступе краспространенные методы.
3. Консоль JS.
свойствам и методам объекта;● Описание возможностей использования веб-консоли;● Включение простых строк скрипта в консоли JavaScript.

4. Примеры заданий:● Назовите как минимум два предопределенных объекта JavaScript иопишите, для чего они могут быть использованы;● Сделайте сравнительное описание свойств и методов объектаJavaScript, создавая параллели с объектами реального мира;● Проанализируйте консоль JavaScript. Напишите в консоли
несколько математических операций и посмотрите, где будут
представлены результаты.
4.3. Переменные, типы данных и операторы в JavaScriptПодразделения компетенций

-

-

-

-

-

Распознание переменныхJavaScript и описание того,как определять переменные в
JavaScript;Различение типов данных итипов операторов, доступных
в JavaScript;Использование основных
операторов при работе сданными в JavaScript;Обоснование использования
операторов в зависимости отконтекста;Написание арифметических
выражений и текстов, сиспользованием переменныхи операторов;Единицы содержания

1. Переменные в JavaScript.
Примеры.
2. Объявление переменных в
JavaScript.
3. Типы первичных данных иоператоры, которые могут
быть к ним применены.
4. Простые способы вывода
данных на экран.

Рекомендуемые учебные действия и ресурсы

Видео урок 24, на онлайн платформе.
Тест, оценивающий знания, полученные по завершению 24-го Урока,на онлайн-платформе.
3. Предлагаются следующие упражнения:● Определение понятий «переменная» и «оператор»;● Описание метода определения переменных в JavaScript;● Аргументирование необходимости использования операторов иразных типов данных в зависимости от контекста;● Написание элементарных скриптов, с использованием данных иоператоров;● Отображение веб-контента на экране, с использованием
соответствующих методов JavaScript;● Интерпретирование написанных скриптов, с прогнозированием
результатов.
4. Тематическое исследование:● Сравните и проанализируйте, методы объявления переменных в
JavaScript и в других языках программирования, которые вы знаете.
Выделите сходство, но также и различия при объявлении
переменных в разных языках программирования.
1.
2.

-

-

Отображение различного
информационного
содержания на экране;Внедрение данных,выражений, значений,текстов и операторов вскриптах.

5.

Примеры заданий:● Дайте определение понятиям «переменная», «оператор»;● Опишите возможности объявления переменных в JavaScript;● Установите отношения между определенным типом данных иоператорами, которые могут быть использованы с этими данными;● Перечислите 1-4 операторов, соответствующих каждой группе
операторов: арифметических, присваивания, логических, сравнения,конкатенации;● Напишите строки сценария, используя данные, операторы ифункцию typeof() для проверки типа используемых данных;● Напишите скрипт, используя метод alert(), и отобразите результатына экране.

4.4. DOM HTML. Доступ и изменение содержимого веб-документа через HTML DOM---

Подразделения компетенций

Единицы содержания

Рекомендуемые учебные действия и ресурсы

Определение понятия HTMLDOM и описание контекстаего использования;Распознавание наиболее
распространенных объектов
HTML DOM, свойств иметодов этих объектов;Определение необходимости
доступа к содержимому
элементов HTML из вебдокумента и управления им спомощью свойств и методов
объектов HTML DOM;

1. Понятие DOM и описание
процесса доступа к HTMLэлементам через HTMLDOM.
2. Способы доступа ксодержимому HTMLэлемента через егоидентификатор ивыполнение различных
манипуляций с этимсодержимым.
3. Вывод данных методами
alert(), а также при помощи
getElementById().

1. Видео урок 25, на онлайн платформе.
2. Тест оценивающий знания, полученные по завершению 25-го Урока, наонлайн-платформе.
3. Предлагаются следующие упражнения:● Определение понятия HTML DOM;
● Перечисление и описание объектов HTML DOM, свойств и методов
этих объектов;● Оценка необходимости доступа к элементам через HTML DOM ивыполнения различных манипуляций с ними или с их содержимым;● Написание элементарных сценариев для доступа к содержимому
различных HTML-элементов через HTML DOM и управление этимсодержимым.
4. Тематические исследования:● Анализ скрипта, представленный учителем, в котором былпроизведен доступ к нескольким элементам, через HTML DOM, с-Написание сценариев,используя свойства и методы
объекта Document и Element.

целью выполнения над ними манипуляций, таких как: удаление
содержимого, изменение содержимого, добавление содержимого и т.
д. Предложение гипотез о том, что реализует данный скрипт.
5. Примеры заданий:● Определите понятие «HTML DOM», а затем опишите контекст
использования HTML DOM;
● Выделите объекты, свойства и методы основных объектов HTMLDOM;
● Напишите 2-3 сценария, с помощью которых вы получите доступ ксодержимому некоторых элементов HTML из веб-документа ивыполните какие-то манипуляции над ними, используя объекты изHTML DOM.
4.5. Предопределенные функции из JavaScriptПодразделения компетенций

-

-

-

-

Распознание
предопределенных функций
из JavaScript и описание ихобласти использования;Перечисление методов,характерных дляпредопределенных объектов
из JavaScript;Использование в скриптах
стандартных функций
высшего уровня, ссоблюдением их синтаксиса;Внедрение стандартных
функций и методов JavaScriptЕдиницы содержания

Рекомендуемые учебные действия и ресурсы

1. Предопределенные
функции верхнего уровня
из JavaScript: String,Number, isNaN, parseInt,
parseFloat и др. Примеры
использования.
2. Методы, специфичные дляпредопределенных
объектов JavaScript, таких
как String и др.

1. Видео урок 26, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 26-го Урока,на онлайн-платформе.
3. Предлагаются следующие упражнения:● Распознавание
иописание
контекста
использования
предопределенных функций высшего уровня;● Использование предопределенных функций, при написании
клиентских скриптов, для решения простых задач;● Различие в синтаксисе использования функций высшего уровня иметодов предопределенных объектов;● Использование
предопределенных
функций
иметодов
необходимых объектов, для решения различных задач, путем
написания сценариев.
4. Тематическое исследование:в элементарных скриптах длярешения разных задач.

● Исследование и объяснение необходимости использования функцийв программировании. Предопределенные функции и функции,определенные программистом - различия и сходства.
5. Примеры заданий:● Назовите 2–4 предопределенных функций верхнего уровня из
JavaScript;● Опишите синтаксис 2-4 предопределенных функций на ваш выбор
из JavaScript;● Напишите 2–4 примера сценариев, используя предопределенные
функции JavaScript. Выведите результаты на экран.

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

-

-

-

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

Единицы содержания

Рекомендуемые учебные действия и ресурсы

1. Функции, определенные
программистом.
2. Базовый синтаксис,который необходимо
соблюдать приопределении собственных
функций в JavaScript.
3. Область видимости
определенных переменныхи используемых в кодеJavaScript.

1. Видео урок 27, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 27-го Урока,на онлайн-платформе.
3. Предлагаются следующие упражнения:● Представление синтаксиса для определения собственных функций;● Определение понятия «область видимости переменных»;● Формулировка гипотез о необходимости создания собственных
функций;● Написание собственных функций для решения простых задач.
Вызов функций в скрипте;● Объявление и правильное использование переменных в зависимостиот контекста.
4. Тематическое исследование:● Исследование
необходимости
создания
ииспользования
собственных функций в скриптах. Примеры;5. Примеры заданий:● Опишите синтаксис, который необходимо соблюдать при написании
собственных функций на JavaScript;● Аргументируйте необходимость создания собственных функций впроцессе написания скриптов;● Напишите 2–3 функции для решения простых задач или задач
средней сложности, а затем внедрите их в сценарий.
4.7. Манипуляции с датой и временем в JavaScript. Условные инструкции/ операторы в JavaScriptПодразделения компетенций

-

-

-

-

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

Единицы содержания

Рекомендуемые учебные действия и ресурсы

1. Объект Date. Создание
прототипа этого объекта.
2. Методы объекта Date.
Манипуляции с датой ивременем в JavaScript.
3. Тернарный оператор иусловные инструкцииJavaScript. Синтаксис.
4. Примеры использования
объекта Date и условных
операторов.

1. Видео урок 28, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 28-го Урока,на онлайн-платформе.
3. Предлагаются следующие упражнения:● Назвать объект JavaScript, используемого в работе с датой ивременем;● Описание наиболее распространенных методов работы с датой ивременем;● Идентификация и описание синтаксиса условных операторов в
JavaScript;● Включение условных инструкций в логику скриптов;● Сравнение тернарного оператора с условной инструкцией IF.
4. Тематическое исследование:● Анализ других методов объекта Date, которые не были представленына уроке. Высказывание гипотез относительно возможностей ихиспользования.
(https://www.w3schools.com/jsref/jsref_obj_date.asp)
5. Примеры заданий:● Назовите объект JavaScript, который можно использовать при работес датой и временем;● Перечислите и опишите полезность 2-4 методов объекта Date;● Назовите 1-2 условных оператора из JavaScript. Опишите ихсинтаксис;● Объясните, для чего может использоваться тернарный оператор в
JavaScript. Опишите его синтаксис;● Напишите один или два примера сценариев в которых будете
использовать условные операторы. Проанализируйте результаты
выполнения этих скриптов.
4.8. Циклические инструкции в JavaScriptПодразделения компетенций

-

-

-

Распознание циклических
инструкций/ операторов в
JavaScript и описание ихсинтаксиса;Написание скриптов,содержащих циклические
инструкции, с соблюдениемих синтаксиса;Использование и внедрение влогике скриптов циклических
инструкций.

Единицы содержания

Рекомендуемые учебные действия и ресурсы

1. Циклические инструкции/ 1. Видео урок 29, на онлайн платформе.
операторы в JavaScript.
2. Тест, оценивающий знания, полученные по завершению 29-го Урока,2. Синтаксис
циклическихна онлайн-платформе.
инструкций в JavaScript. 3. Предлагаются следующие упражнения:Примеры.
● Распознание циклических операторов из JavaScript;● Описание синтаксиса циклических инструкций из JavaScript;● Обоснование
необходимости
использования
циклических
инструкций в скриптах;● Написание скриптов, содержащих циклы.
4. Примеры заданий:● Назовите циклические операторы из JavaScript, а затем опишите ихсинтаксис;● Объясните необходимость использования циклов в скриптах;● Подчеркните различия между логикой выполнения операторов FOR
и WHILE;● Напишите 2-3 примера сценариев, в которых будут использоваться
циклические инструкции. Проанализируйте результаты ихвыполнения.

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

Единицы содержания

Рекомендуемые учебные действия и ресурсы

Определение понятия HTML«событие»;Выявление различий иобъяснения методов
обработки HTML-событий спомощью JavaScript;Написание и внедрениеJavaScript-ов, которые могут
обрабатывать наиболее
распространенные события.

1. События HTMLэлементов.
2. Способы реагирования насобытия.
3. Обработка событий спомощью JavaScript.
Примеры.

1. Видео урок 30, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 30-го Урока,на онлайн-платформе.
3. Предлагаются следующие упражнения:● Распознание HTML-событий;● Объяснение логики включения событий в веб-документе;● Описание методов реагирования на события через JavaScript;● Написание скриптов, функций, которые могут реагировать на разные
события.
4. Проект:● Реализуйте мини-игру, используя HTML-события и JavaScript.
Например, игра «Я придумал число ...» - сценарий генерирует какое-тослучайное число, и пользователь угадывает это число. Вы можете
использовать поле ввода, в котором пользователь вводит число, или выможете дополнительно использовать <input type = ”range” ... />, чтобы
упростить задачу пользователя. После каждой попытки показывайте
пользователю информативное сообщение о том, угадал ли он номер илинет.
Совет: не используйте большой диапазон для генерации номера.
5. Примеры заданий:● Назовите 2-4 HTML-событий;● Опишите два самых известных подходов, которые можно
использовать для реакции на события с помощью JavaScript;● Напишите 2-3 примера сценариев, в которых можно использовать
события и реагировать на них с помощью JavaScript.

4.10. Объект RegExp из JavaScriptПодразделения компетенций

-

-

-

-

Определение понятия
«регулярное выражение» ипонимание того, для чего онимогут быть использованы;Распознание регулярных
выражений в коде;Правильное написание
регулярных выражений сиспользованием
метасимволов иквантификаторов;Высказывание гипотез онеобходимости
использования объекта
RegExp для проверки данных;Внедрение регулярных
выражений в клиентские
скрипты, для проверки
правильности ввода данных вэлементы управления формы.

Единицы содержания

Рекомендуемые учебные действия и ресурсы

1. Регулярные выражения.
Метасимволы.
Квантификаторы.
Примеры регулярных
выражений.
2. Необходимость проверки
данных.
3. Проверка данных,введенных в элементах
управления, на стороне
клиента с помощью
регулярных выражений.
Примеры.

1. Видео урок 31, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 31-го Урока,на онлайн-платформе.
3. Предлагаются следующие упражнения:● Распознание объекта RegExp;● Описание методов объекта RegExp;● Определение понятия «регулярное выражение» и описание контекстаего использования;● Создание простых регулярных выражений, используя метасимволы иквантификаторы;● Внедрение регулярных выражений в JavaScript.
4. Проект:● Напишите скрипт, который рассчитывает идеальный вес взависимости от роста пользователя. Пользователь вводит свой рост всантиметрах в поле ввода (input), и скрипт вычисляет его вес, как ростминус 100 и отображает это значение на экране с небольшим
текстовым комментарием.
Внедрите регулярные выражения для проверки введенных
пользователем данных.
Вы можете усложнить формулу расчета идеального веса, используя
формулу веса Лоренца, указав рост и пол человека.
5. Примеры заданий:● Определите понятие «регулярное выражение»;● Назовите объект JavaScript, используемый при работе с регулярными
выражениями;● Назовите и опишите наиболее распространенный метод объекта
RegExp, используемый для проверки соответствия текста регулярному
выражению;● Напишите регулярные выражения для простых имен и фамилий,номеров телефонов, характерных для какой-то страны или местностии др .;● Напишите 2–3 примера скриптов для извлечения данных извведенных и проверьте правильность их написания - соответствуют лиониопределенным
регулярным
выражениям.
Отобразите
информационные сообщения на экране – какое-то сообщение вслучае, если ввод соответствует регулярному выражению и другое
сообщение если ввод не соответствует регулярному выражению.
4.11. Массивы данных в JavaScript---Подразделения компетенций

Единицы содержания

Рекомендуемые учебные действия и ресурсы

Определение понятия
«массив данных»;Обнаружение массивов
данных в JavaScript-е;Написание скриптов длясоздания массива сэлементами на JavaScript;Доступ к одному илинескольким элементам
массива;Правильное использование вскрипте методов и свойств
объекта Array.

1. Массивы данных в
JavaScript. Определение
массивов и ихиспользование. Примеры.
2. Операции с массивами свойства и методы объектаJavaScript Array. Примеры.

1. Видео урок 32, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 32-го Урока,на онлайн-платформе.
3. Предлагаются следующие упражнения:● Определение понятия «массив данных»;● Распознание массивов, определенных в скриптах;● Обоснование необходимости определения и использования массивовв скриптах;● Доступ к элементам массива, в том числе в цикле;● Создание скриптов, содержащие операции с данными, хранящиеся вмассивах.
4. Проект:● Напишите сценарий, динамически генерируемый «список покупок».
Пользователь вводит продукт в поле ввода, скрипт принимает

значение и отображает его на экране. Список товаров формируется
динамически.
Задачу можно усложнить, добавив стоимость за единицу товара инеобходимое количество этого товара. Сценарий рассчитает
стоимость продукта (цена за единицу, умноженная на количество) ирассчитает общую стоимость продуктов, которые будут приобретены
(сумма частичных стоимостей). Затем сценарий отобразит все этиданные, облегчая так работу пользователя.
Внедрите регулярные выражения для проверки введенных
пользователем данных.
5. Примеры заданий:● Дайте определение понятию «массив данных»;● Опишите, как производиться доступ к элементам массива;● Найдите в скрипте определение массива данных;● Аргументируйте необходимость использования массивов в скриптах;● Напишите сценарий, который приведет к созданию массива. Добавьте
данные в массив. Удалите последнее значение в массиве. Пройдитесьпо всем элементам массива и отобразите их на экран.
4.12. Определение объектов в JavaScript. Свойства и методы объектов
Подразделения компетенций

-

-

-

Определение понятий
«объект», «свойство»,«метод»;Проектирование и создание
собственных объектов на
JavaScript;Обнаружение, а потом
внедрение свойств и методов

Единицы содержания

Рекомендуемые учебные действия и ресурсы

1. Определение собственных 1. Видео урок 33, на онлайн платформе.
объектов в JavaScript 2. Тест, оценивающий знания, полученные по завершению 33-го Урока,основной синтаксис.
на онлайн-платформе.
2. Члены объекта - свойства и 3. Предлагаются следующие упражнения:методы. Примеры.
● Определение понятия «объект»;● Распознавание объектов, определенных в скрипте;3. Доступ к членам объекта.
Примеры.
● Обоснование необходимости определения и использования объектовв сценариях;● Доступ к членам объекта;-для объектов, определенных в
JavaScript;Доступ через скрипт к членам
(свойствам и методам)объекта.

● Написание скриптов, содержащих созданные объекты.
4. Примеры заданий:● Определите понятие «объект» в JavaScript;● Опишите, как определяются свойства и методы объекта в JavaScript;● Найдите в написанном сценарии место, где был определен объект;● Напишите сценарий, определяющий объект с 4 свойствами и 2методами. Произведите доступ к свойствам и методам объекта, апотом проанализируйте результаты.

4.13. Пример создания слайдера при помощи JavaScript. Его добавление в сайтПодразделения компетенций

--Единицы содержания

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

Рекомендуемые учебные действия и ресурсы

1. Видео урок 34, на онлайн платформе.
2. Тест, оценивающий знания, полученные по завершению 34-го Урока,на онлайн-платформе.
3. Предлагаются следующие упражнения:● Определение понятия «слайдер»;● Описание методов/ возможностей доступа к элементам слайдера;● Аргументирование необходимости внедрения слайдера на веб-сайте.
4. Проект:● Добавление слайдера на сайт.
5. Примеры заданий:● Дайте определение понятию «слайдер»;● Опишите и объясните, как пользователи могут просматривать/получать доступ к слайдам;● Напишите скрипт, который умеет автоматически менять слайды.
Внедрите данный сценарий в веб-документе. Проанализируйте
результат.

VII. МЕТОДОЛОГИЧЕСКИЕ ПРЕДЛОЖЕНИЯ
Дисциплина по выбору «Проектирование и веб-разработка» имеет формирующий
характер и отвечает ожиданиям учащихся, которые хотят, чтобы школа предоставляла более
уместные для повседневной жизни навыки. Рассматриваемая факультативная дисциплина
способствует развитию навыков проектирования и разработки веб-сайтов, навыков, которые
можно применять в том числе и в повседневной жизни. Это достигается путем размещения
учеников в различные учебные ситуации, которые являются практическими, динамичными,привлекательными и учитывают потребности и интересы учеников. Таким образом, могут
быть получены несколько преимуществ. С одной стороны, будет установлена связь между тем,что изучается, и целью, для которой это изучено, что подчеркнет прагматическую часть
обучения. С другой стороны, ученик будет помещен в центр учебного процесса, и таким
образом, он будет активным субъектом в собственном обучении и развитии.
Рекомендуемые методы для использования в дисциплине по выбору «Проектированиеи веб-разработка»: изложение теоретического материала, SINELG, «мозговой штурм»(brainstorming), «обратный мозговой штурм», интервью, направленное чтение, работа накомпьютере – индивидуально и/ или под руководством учителя, упражнения, решение задач,практическая работа, лабораторная работа, тематические исследования, разработка
индивидуальных и/ или групповых проектов, портфолио.
Рекомендуется, чтобы в процессе преподавания, обучения и оценки этой дисциплины
использовалась платформа, предлагаемая «Tekwill in Every School», для доступа к различным
образовательным ресурсам, относящимся к дисциплине по выбору «Проектирование и вебразработка». Каждый урок на платформе содержит видео урок, тест, задания и другие
дидактические материалы. Каждое занятие начинается с формулировки целей, продолжается
отражением содержания урока и заканчивается выводами. Благодаря этой платформе учитель
может использовать метод «перевернутого класса». Учащийся заранее получит доступ к урокуна платформе, просмотрит/ прослушает его, а затем обсудит основные идеи в классе вместе сучителем. Таким образом, время проведённое в классе посвящено дискуссиям, дебатам,практическим занятиям, обмену идеями и проектам. У учеников больше времени для анализа,для применения на практике своих знаний и для взаимодействия с другими учениками, а такжес учителем. Учитель играет роль наставника, поддерживая каждого ученика.
Выбор компьютерных средств, необходимых для реализации куррикулума, остается наусмотрение учебных заведений, преподавателей и учеников. Исходя из специфики
необходимых для формирования и/ или сформированных навыков, рекомендуется
использовать ИТ-инструменты, представленные в таблице 1.
Таблица 1. Компьютерные средства и инструменты, рекомендуемые к использованию

Модуль

Компьютерные средства и инструменты

Введение в Веб● Платформа представленная «Tekwill in Every School»,предмет «Проектирование и веб-разработка»● Веб-браузер «Google Chrome»Язык разметки HTML● Платформа, представленная «Tekwill in Every School»,предмет «Проектирование и веб-разработка»● Веб-браузер «Google Chrome»● Редактор кода «Visual Studio Code»● Веб ресурсы с бесплатными изображениями: pexels.com,
pixabay.com, unsplash.com
Язык стилизации CSS● Платформа, представленная «Tekwill in Every School»,предмет «Проектирование и веб-разработка»● Веб-браузер «Google Chrome»● Редактор кода «Visual Studio Code»● Дополнительные фонты с сайта: fonts.google.com

Язык программированияJavaScript● Платформа, представленная «Tekwill in Every School»,предмет «Проектирование и веб-разработка»● Веб-браузер «Google Chrome»● Редактор кода «Visual Studio Code»

VIII. СТРАТЕГИИ ОЦЕНКИ
Основная цель дидактического оценивания - поддержать учебную деятельность
учеников, прогресс обучения и полученных ими знаний. Другими словами, процесс оценки
может быть формирующим (прогрессивным и непрерывным) и итоговым.
Оценка должна мотивировать учащихся посредством конструктивной, непрерывной
обратной связи, которая позволяет оперативно корректировать учебный процесс, подчеркивая
прогресс и успехи каждого учащегося.
Преподаватель имеет право на свободу выбора дидактического инструмента оценки,диверсификации форм устной, письменной и практической оценки, так чтобы обеспечить
многофункциональный характер оценки и персонализацию этого процесса, в зависимости отпреследуемых целей. На каждом уроке ученикам будет предложено домашнее задание,соответствующее изучаемой теме. В конце каждого модуля будет предложен мини-проект,который предполагает реализацию какого-то продукта. Разработанные продукты будут
оцениваться на основе критериев успеха, установленных и согласованных с учениками,заранее объявленных на доступном языке, то что будет способствовать их мотивации косознанному обучению.
Формирующее оценивание может быть выполнено с помощью компьютерных тестов,доступных на платформе, предлагаемой «Tekwill in Every School». Платформа предлагает
звездочки (badges) за правильное выполнение действий. У преподавателя есть возможность
следить за успеваемостью учеников в изучении факультативного предмета.
В качестве конечного продукта ученики или группы учеников будут самостоятельно
выполнять какой-то проект.
Проект как метод обучения дает ученику возможность творчески применить
полученные знания в новых для него и разнообразных ситуациях. Проект может выполняться
индивидуально или в группах. Его можно выполнять в классе или вне класса, во время урокаили в течение более длительного периода. Проект ставит ученика в сложную ситуацию,которую нельзя решить сразу. Даже если формулировка рабочего задания может бытькороткой, время, необходимое для его решения, относительно больше, и ученики вынуждены

прилагать больше усилий. Результат проекта представляется (после завершения) перед
аудиторией, с презентацией и комментариями к выводам.
Основные характеристики проекта:●подлинность, оригинальность, креативность;●предполагает ситуационную задачу;●является полным и актуальным в связи с поставленными задачами;●стимулирует учеников;●заканчивается каким-то продуктом (презентация, сайт и др.).
Таким образом, при изучении дисциплины по выбору мы рекомендуем каждому
ученику самостоятельно создать веб-сайт средней сложности по какой-то теме или области
деятельности (Приложение 1), выбранной вместе с преподавателем, и представить его вкачестве финального проекта.
Важно чтобы ученики публично представили свои проекты (созданные веб-сайты).
Дополнительно мы рекомендуем по окончании изучения данного факультативного предмета
ученику разработать электронную презентацию. Презентация может содержать:● Определение целей и представление аудитории сайта;● Описание структуры сайта - количество страниц и его графическое оформление;● Определение содержания страниц сайта - HTML-элементы, используемые в вебдокументах: элементы для определения текста, списки, таблицы, формы, блоки
элементов и т.д .;● Описание свойств стилей CSS - для стилизации страниц сайта, так чтобы конечный
продукт был приятен глазу, удобен в использовании и его содержимое адаптировалоськ различным презентационным устройствам;● Последовательности кода JavaScript, реализованные для динамизации элементов исоздания интерактивного сайта;● Выводы.
Оценка проектов осуществляется с использованием критериев оценки. В таблице 2 мыпредлагаем критерии оценки веб-сайта, разработанного учениками.
Таблица 2. Критерии оценки разработанного сайта

№Критерии оценки

Кол. баллов

1Организация и проверка

10● Сайт организован в отдельной папке/ директории
● Изображения помещаются в отдельную папку
● Файлы стилей находятся в отдельной папке
● Файлы со скриптами находятся в отдельной папке
● Все файлы .html, .css и .js – правильно составлены – логически,синтаксически и лексически.

2
2
2
2
2

Требования к сайту

24● Сайт содержит не менее 5 взаимосвязанных страниц/компонентов;42

● На сайте используются семантические структуры,соответствующие элементам сайта;● В файлах сайта написаны соответствующие комментарии к
html, css и js файлам;● На сайте есть таблица;● Сайт содержит форму с 4 или более различными элементами
управления;● Веб-сайт доступен на различных устройствах и в разных
браузерах. Сайт содержит элемент META и атрибут name =”viewport”;● Содержание сайта является оригинальным и соответствует
выбранной теме. Контент семантически и синтаксически
корректно организован;● Содержание сайта является целостным.

2Система навигации

16● Система навигации по сайту интуитивно понятна, ее легко
идентифицировать;● Система навигации функциональна и ее можно правильно
использовать;● Система навигации присутствует на всех страницах и позволяет
доступ ко всем ресурсам сайта;● Сайт содержит как минимум одну внешнюю ссылку;● Сайт содержит внутренние ссылки (якоря);● Прокрутка сведена к минимуму и выполняется только повертикали (выполняется требование адаптации содержимого кразным экранам).

2

Стили

20

● Контраст текста и фона адекватный;● Стандартный размер шрифта обеспечивает удобство причтении;● На сайте используются соответствующие шрифты, максимум 2шрифта;● Были использованы фильтры, трансформации, градиенты;● Были применены разные макеты для разных типов медиа (экран
телефона, экран ПК и др.);● Были стилизованы элементы навигационной системы;● Стилизация охватывает цвета, шрифты, границы, линии, высоту,ширину, фон, позиции элементов.

22Видео, аудио, изображения

10

3

4

5
●
●

Изображения имеют атрибут ALT;Сайт содержит видео (элемент <video>);

4
2
2
6

2

2

4
2
2
2
4

2
2
3
3
6

2
2

●
●
●
6

Сайт содержит аудио (элемент <audio>);Медиа-ресурсы соответствуют тематике сайта;Используемые медиаресурсы защищены авторским правом.

222Интерактивные элементы

20● Сайт содержит как минимум 3 вызова JavaScript, чтоувеличивает интерактивность или функциональность сайта;● Веб-сайт позволяет получать данные от пользователя иобрабатывать их на стороне клиента;● На сайте есть страницы/ компоненты страниц, динамически
генерируемые на стороне клиента;● Сайт содержит анимацию, созданную клиентским скриптом.

5

Всего

100

5
5
5

РЕКОМЕНДУЕМАЯ ЛИТЕРАТУРА
1. PĂUNESCU, D. Proiectarea paginilor web. Craiova: Editura Spirit Romanesc, 2001. 94 p.
2. ПАУЭЛЛ, Т. А. Полное руководство по HTML. Минск: ООО Попурри, 2001. 912 с.
3. NICULESCU, F. R. Proiectarea paginilor Web – HTML, CSS, JavaScript. București: Editura
Fundației România de Mâine, 2007. 333 p.
Онлайн ресурсы:1. 25 Years of Apple.com Website Design History (1994-2019) [онлайн] [был доступен 13июня 2020]. Адрес доступа:https://www.youtube.com/watch?v=ch23l4vX5yg&fbclid=IwAR0aG8WF_l2WxIogov0lI6ig1nqv3mqqKuluQxuwFLYKvBkexusQ8S5y70;
2. Get Started with the Google Fonts API [онлайн] [был доступен 13 июня 2020]. Адрес
доступа: https://developers.google.com/fonts/docs/getting_started;
3. SVG Tutorial [онлайн] [был доступен 13 июня 2020]. Адрес доступа:https://www.w3schools.com/graphics/svg_intro.asp;
4. HTML Tutorial [онлайн] [был доступен 13 июня 2020]. Адрес доступа:https://www.w3schools.com/html/default.asp;
5. CSS Tutorial [онлайн] [был доступен 13 июня 2020]. Адрес доступа:https://www.w3schools.com/css/default.asp;
6. CSS Units [онлайн] [был доступен 13 июня 2020]. Адрес доступа:https://www.w3schools.com/cssref/css_units.asp;
7. CSS hsla() Function [онлайн] [был доступен 13 июня 2020]. Адрес доступа:https://www.w3schools.com/cssref/func_hsla.asp;
8. CSS filter Property [онлайн] [был доступен 13 июня 2020]. Адрес доступа:https://www.w3schools.com/cssref/css3_pr_filter.asp;
9. JavaScript Tutorial [онлайн] [был доступен 13 июня 2020]. Адрес доступа:https://www.w3schools.com/js/default.asp;
10. JavaScript [онлайн] [был доступен 13 iunie 2020]. Адрес доступа:https://devdocs.io/javascript/;
11. JavaScript String Reference [онлайн] [был доступен 13 июня 2020]. Адрес доступа:https://www.w3schools.com/jsref/jsref_obj_string.asp;
12. JavaScript Global Reference [онлайн] [был доступен 13 июня 2020]. Адрес доступа:https://www.w3schools.com/jsref/jsref_obj_global.asp;
13. JavaScript Set Date Methods [онлайн] [был доступен 13 июня 2020]. Адрес доступа:https://www.w3schools.com/js/js_date_methods_set.asp;
14. HTML DOM Events [онлайн] [был доступен 13 июня 2020]. Адрес доступа:https://www.w3schools.com/jsref/dom_obj_event.asp.

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