Страница заданий кружков «Web-дизайн»

Задания ниже – в первую очередь, для самопроверки. Если при чтении материалов и выполнении заданий возникают сложности, желательно задавать вопросы. Связь – любым удобным вам способом.

Задание к 20 сентября: основы

Знать определения и уметь ответить:

  1. Какие инструменты использует веб-дизайнер
  2. Что такое интернет, сервер и клиент
  3. Что такое «Всемирная паутина» World Wide Web, как она устроена, что такое web-страница
  4. Что такое web-браузер, какие его основные функции («что он делает»), какие браузеры наиболее распространенные
  5. Что такое HTML, зачем он нужен, как написать web-страницу и открыть ее в браузере, как сделать ее доступной по сети

Задание к 8 и 11 октября: создание HTML-страницы

Знать определения и уметь ответить:

  1. Как создать шаблон web-страницы и наполнить его содержанием.
  2. Что такое хостинг, как показать созданную web-страницу любому желающему взглянуть на нее.
  3. Что такое HTML-тег и атрибут, какие бывают виды тегов, как устроены парные теги, что такое принцип вложенности.
  4. Как создать 4 главных элемента web-страницы: заголовок, параграф, изображение, ссылка.

Задание от 8 октября: оформление страницы при помощи CSS

Прочитать материал по ссылке и попробовать выполнить следующие задачи:

  1. Создать веб-страницу. Можно скопировать код HTML из примера.
  2. Подключить к странице каскадные листы стилей (CSS). Можно любым из трех доступных способов.
  3. Установить при помощи CSS цвет и фон любых элементов. Можно – всей страницы.
  4. По желанию: установить размер шрифта, начертание шрифта, семейство шрифта или любое другое свойство шрифта.

Задание от 11/15 октября: оформление страницы при помощи CSS

Прочитать материал по ссылке и попробовать выполнить следующие задачи:

  1. Создать веб-страницу. На странице должна быть хотя бы одна ссылка. Можно скопировать код HTML из примеров.
  2. Подключить к странице каскадные листы стилей (CSS). Можно любым из трех доступных способов.
  3. Установить при помощи CSS цвет какого-либо элемента. Выделить элемент среди прочих с помощью класса. Можно копировать примеры из текста.
  4. По желанию: оформить ссылки правилами в LVHA-порядке.

Задание от 18/22 октября: боксовая модель, свойства margin и padding

Прочитать материал по ссылке и попробовать выполнить следующие задачи:

  1. Создать веб-страницу или изменить существующую. На странице должно несколько блоков и хотя бы одно изображение. Можно скопировать код HTML из примеров.
  2. Подключить к странице каскадные листы стилей (CSS). Можно любым из трех доступных способов.
  3. При помощи CSS установить размеры и видимость рамок, внешних и внутренних полей, различный цвет фона отступов и полей. Блоками могут быть любые элементы: заголовок h1, параграф p, header, footer и т.д. Можно использовать примеры из материалов или учебные страницы.
  4. Центрировать какой-либо блок при помощи свойства {margin: 0 auto;}
  5. Установить у изображения свойство скругления рамки border-radius.

Задание от 25/29 октября: создание многостраничного сайта с использованием CSS

Просмотреть видеозапись занятия, доступную в группах Microsoft Teams, памятку и попробовать выполнить следующие задачи:

  1. Придумать и описать тематический сайт, ответив на вопрос «о чем я хочу рассказать посетителям моего сайта» (устно).
  2. Создать веб-страницы тематического сайта или изменить существующие. На странице должно быть меню, связывающее гиперссылками страницы сайта. Можно скопировать код HTML из примеров.
  3. Подключить к страницам единый файл каскадных листов стилей (CSS) при помощи элемента link.
  4. При помощи CSS сделать меню горизонтальным, как показано в примерах.
  5. Создать единый стиль страниц сайта. Как минимум, это одинаковый фон и цвет текста.
  6. Меню сайта должно удовлетворять принципу однообразия: на каждой странице сайта меню состоит из одинакового количества одинаковых названий страниц.

Задание от 1 ноября: Понятие «сервер». Клиент-серверная модель. Запуск сервера PHP. Практика

Просмотреть видеозапись занятия, доступную в группах Microsoft Teams и попробовать выполнить следующие задачи:

  1. Описать особенности динамической страницы, которые отличают ее от статической. Применить описание к своей web-странице (сайту, проекту). То есть, ответить на вопрос: какие динамические элементы я бы хотел создать на своей странице? Можно выбрать из примеров: гостевая книга, тест, голосование, простые помощники типа калькулятора (устно).
  2. Создать веб-страницы сайта или изменить существующие. На странице должны быть изображения, являющиеся ссылками. Желательно создать/найти картинки и поместить на страницу как элемент "фирменного" оформления сайта
  3. При помощи CSS настроить положение, внешние и внутренние поля элементов. Желательно - иллюстраций из пункта выше
  4. Для желающих: запустить сервер, открыть в браузере страницу, созданную этой программой-сервером. Можно - на основе любого языка программирования (PHP, JavaScript, Python и т.д.)

Задание от 8/12 ноября: Создание html-форм

Просмотреть видеозапись занятия, доступную в группах Microsoft Teams, а также по этой ссылке и попробовать выполнить следующие задачи:

  1. Описать возможности форм в web-дизайне. Для чего они нужны, какие задачи они позволяют решить? (устно).
  2. Создать веб-страницу сайта или изменить существующую, добавив на нее форму или ее элементы. Желательно создать работающую форму. Можно использовать код из примеров. Примеры: Формы на PHP, Гостевая книга, Простой тест, Солнечная система (коллекция).
    Статья Ваша первая HTML форма.

Задание от 15 ноября: Различные элементы управления

Просмотреть документ, доступный по этой ссылке и попробовать выполнить следующие задачи:

  1. Ответить на вопросы: что такое элементы управления? Зачем использовать элементы управления на html-странице? Как я могу использовать элементы управления на моей личной html-странице? (устно).
  2. Скопировать примеры из текста и вставить на свою html-страницу/сайт. Убедиться, что код работает.
  3. Модифицировать пример, как показано выше. Выбрать любое свойство стиля из доступных по подсказке (Подсказка доступна после того, как набран символ точка, “.”), либо изменить текст/HTML-код.

Задание от 22 ноября: Обобщающее занятие по HTML и CSS

Просмотреть видеозапись занятия, доступную в группах Microsoft Teams и попробовать ответить на вопросы (устно):

  1. Какой шаблон web-страницы необходим, чтобы страница считалась правильной? Как создать составляющие web-страницы – заголовок, параграф, изображение, список, ссылка? Как минимально оформить страницу средствами HTML? // Тема Html документы. Html-теги. Оформление текста. Ссылки, изображения
  2. Что такое CSS. Как оформить элементы web-страницы при помощи CSS: внешними, внутренними, встроенными стилями. Как оформить текст (цвет, свойства шрифта) и фон страницы/блока. // Тема CSS (Каскадные таблицы стилей). CSS: Цвет и фон. Шрифт, текст
  3. Что такое боксовая (блочная) модель и как она устроена. Как и зачем использовать свойства CSS, которые влияют на составляющие блока: контент, внутренние отступы (padding), рамка, внешние отступы (margin). // Тема Боксовая модель. Свойства margin и padding
  4. Когда и зачем создают многостраничный сайт. Как создать меню многостраничного сайта. Как оформить страницы сайта, подключить несколько CSS-файлов к страницам. // Тема Создание многостраничного сайта с использованием css
  5. Что такое сервер и клиент. Когда и зачем нужна web-разработка с применением серверных технологий. // Тема Понятие «сервер». Клиент-серверная модель
  6. Зачем использовать формы и их элементы? Как создать форму и ее элементы. // Тема Создание html-форм
  7. Как и зачем создавать элементы управления на web-странице? Что необходимо для работы элементов управления на web-странице? // Тема Различные элементы управления