Задания для закрепления материала после просмотра видео-уроков.

Задание к видео №1

1. Создайте html страницу, внесите теги html, head, body. Добавьте все виды заголовков,
параграф любого текста. Вставьте ссылки на 2-3 поисковые системы. Под каждой ссылкой
добавьте изображение с логотипом поисковой системы.

Задание к видео №2

Оформите текст так, как показано на рисунке

Текст:

Вертолёт — винтокрылый летательный аппарат вертикального взлета и посадки, у

которого подъёмная и движущая (пропульсивная[1]) силы на всех этапах полёта
создаются одним или несколькими несущими винтами с приводом от одного или
нескольких двигателей.

Устаревшее название «геликоптер» было заимствовано из французского языка уже в

конце XIX века. Во французском языке, в свою очередь, слово создано из корней греческого
языка.

Авторство слова «вертолёт» (от «вертится» и «летает») принадлежит Н. И. Камову.

Самым ранним документом, в котором употребляется «вертолёт», является Протокол
заседания Технической Комиссии Центрального Совета ОСОАВИАХИМа под
председательством Б. Н. Юрьева, датированный 8 февраля 1929 года. Заседание
Комиссии было посвящено рассмотрению проекта автожира КАСКР-1 инженеров Н. И.
Камова и Н. К. Скржинского. Новое слово прижилось как синоним слова «геликоптер», в
конце 1940-х годов полностью заменив его. Слово «автожир» осталось в русском языке в
своём первоначальном значении.

Не представляется верным утверждение Л. А. Введенской и Н. П. Колесникова, что,

«когда изобрели летательный аппарат, которому не нужен разбег перед взлётом,
поскольку он способен вертикально подняться и полететь с любой площадки, то для его
наименования создали слово „вертолёт“ (вертикально + лететь)»[4], тем более, что
КАСКР-1, являющийся автожиром, не мог подниматься вертикально.

Также существует версия, что слово «вертолёт» придумал и ввёл в русский язык
советский писатель-фантаст А. П. Казанцев[5].

Как оформлять:
Задание к видео №3

1. Используя описанные в уроке css правила создайте три блока на основе span. Задайте
блокам ширину и высоту. Сделайте так, чтобы блоки располагались один под другим.

2. Используя описанные в уроке css правила создайте три блока на основе div и
расположите их в одной строке

3. Ответьте какова ширина блочного элемента, если ее не задают в CSS?

4. Ответьте какова высота блочного элемента, если ее не задают в CSS?

5. Ответьте какова ширина строчного элемента, если ее не задают в CSS?

6. Ответьте какова высота строчного элемента, если ее не задают в CSS?

Задание к видео №4

Постройте фигуры указанные на рисунках ниже. Выполните построение для absolute,

relative
Задание к видео №5

1. Создайте верстку сайта указанную в видеоуроке

2. Добавьте в предыдущую верстку строку содержащую 4 одинаковые по размеру колонки

3. Добавьте в предыдущий пример строку содержащую 3 колонки одинаковой ширины.

Задание к видео №6

1. Закрасьте все первые буквы параграфов красным цветом

2. Используя before добавьте перед всеми параграфами текст Hello.

3. Используя псевдоэлемент after добавьте после каждого параграфа три звездочки,

причем они должны быть на новой строке, по центру, оранжевого цвета.

4. Используя псевдоэлементы сделайте так, как указано на изображении:

5. Используя псевдоэлеметы добавьте всем p на странице открывающуюся и
закрывающую скобку - на рисунке указанны красным цветом

Задание к видео №7

1. Используя семантическую верстку выполните валидную HTML5 верстку статьи о

вертолетах из википедии (Вертолет). Внимание! Вы должны сделать только HTML
верстку, без CSS.

Задание к видео №8
1. Выполните семантическую верстку HTML5 сайта http://lugaprop.com.ua/ . Перед
оптравкой на проверку выполните проверку верстки с помощью онлайн валидатора
https://validator.w3.org/ .

Дополнительное задание: выполните CSS офомление сайта аналогично исходному

варианту.

Дополнительное задание: создайте ссылки на скайп и телефоны - кликабельными.

Задание к видео №9

1. Выполните миграцию исходного сайта lugaprop.com.ua на HTML5 . Перед оптравкой на

проверку выполните проверку верстки с помощью онлайн валидатора
https://validator.w3.org/ .

Задание к видео №10

1. Создайте страницу на которой расположите тег video. В качестве источника видео

укажите любое видео c youtube. Включите отображение элементов управления плейером.

2. Добавьте аудитоплейер. В качестве источника выберите ссылку на произвольный файл

в сети интернет. Включите элементы управления.

3. Добавьте выпадающий список с помощью datalist. Изучите как работает элемент в

разных браузерах.

Задание к видео №11

1. Создайте форму регистрации для сайта. Форма должна содержать поля:

 Имя пользователя
 Логин
 Email
 Пароль
 Повторение пароля
 Выпадающий список стран
 Checkbox - согласние на получение рассылки
 radiobutton позволяющий выбрать пол: ч, м, other
 Выпадающий список год рождения
 Кнопка регистрация

Выполните оформление формы с помощью CSS.

Задание к видео №12

1. Создайте страницу html. Разместите на ней слайдер из 5 изображений. Слайдер должен

перелистываться при нажатии на стрелки с боков слайдера. Также под слайдером должны
располагаться квадратики символизирующие изображения. При клике на квадрате
изображение переключается.