HTML и CSS. Основы вёрстки

Программа курса

Тема 1. Основы разработки веб-ресурсов

  • Что такое верстка?
  • Важность и предназначение верстки в веб.
  • Консорциум W3C. Краткий экскурс в историю создания языка. Как сейчас происходит его доработка и развитие.
  • Браузеры. Актуальные браузеры. Кроссбраузерность.
  • Выбор редактора для написания кода.

Тема 2. Синтаксис HTML и структура HTML-документа

  • Доктайп (Doctype). Почему он так важен?
  • Понятие тега.
  • Каркас документа и Meta-теги.
  • Семантика кода.
  • Правила написания тегов: открытие-закрытие тегов, пустые, вложенные, регистр написания тегов.
  • Пример каркаса веб-страницы.

Тема 3. Работа с текстом

  • Параграфы и заголовки.
  • Форматирование текста.
  • Жирный.
  • Курсив.
  • Подчеркивание.
  • Перечеркнутый текст.
  • Надстрочный и подстрочный текст.
  • Линии.
  • Семантика тегов форматирования.
  • Пример веб-страницы со всеми разобранными типами форматирования.

Тема 4. Атрибуты элементов

  • Использование кавычек.
  • Регистр написания атрибутов.
  • Атрибуты Class, Id, Style, Title.

Тема 5. Списки

  • Маркированные списки.
  • Нумерованные списки.
  • Списки определений.
  • Вложенные списки.
  • Примеры использования на практике вышеизложенных списков.

Тема 6. Ссылки

  • Атрибуты.
  • Якоря.
  • Почтовые и внутренние ссылки.

Тема 7. Изображения, мультимедиа и вставка внешних объектов

  • Мультимедиа в веб: изображения, видео, аудио.
  • Добавление изображений на страницу.
  • Атрибуты изображений: ширина, высота, рамка, alt и title.
  • Форматы изображений.
  • Видео-форматы и их поддержка браузерами.
  • Аудио-форматы и их поддержка браузерами.
  • Вставка внешних объектов с помощью тегов object и embed.
  • Пример вставки видео YouTube.

Тема 8. Таблицы

  • Элементы таблиц.
  • Атрибуты.
  • Назначение таблиц.
  • Табличная верстка на практике.

Тема 9. Работа с формами

  • Поля ввода и их типы.
  • Метки полей.
  • Текстовые поля ввода.
  • Радиокнопки.
  • Чекбоксы.
  • Списки выбора.
  • Текстовая область.
  • Кнопки.
  • Группирование элементов формы.
  • Тег legend.
  • Атрибуты элементов формов.
  • Примеры создания формы.

Тема 10. Основы работы с CSS

  • Что такое CSS?
  • Возможности и предназначение CSS.
  • Подключение CSS к html-документу.
  • Синтаксис и терминология.
  • Наследование, каскадность, приоритетность.
  • ID и CLASS.
  • Селекторы: групповые селекторы, селекторы потомков, псевдоселекторы.
  • Сброс стилей по умолчанию.

Тема 11. Работа с параметрами шрифта

  • Установка шрифта.
  • Размер шрифта.
  • Стиль шрифта.
  • Font-weight.
  • Font-variant.
  • Сокращенная запись.
  • Подключение нестандартных шрифтов.

Тема 12. Работа с текстом

  • Интерлиньяж.
  • Выравнивание.
  • Красная строка.
  • Цвет.
  • Расстояние между словами/буквами.
  • Text-decoration.
  • Text-transform.
  • White-space.

Тема 13. Стилизация ссылок

  • Цвет.
  • Декорирование.
  • Псевдоселекторы.

Тема 14. Курсор

  • Стиль курсора.
  • Виды курсоров.
  • Использование кастомизированного курсора.

Тема 15. Списки

  • Виды маркеров.
  • Кроссбраузерное отображение маркеров.
  • Практика: создание навигации и использованием списков.
  • Горизонтальное меню.
  • Вертикальное меню.
  • Вложенное меню.

Тема 16. Таблицы

  • Границы таблиц.
  • Ширина и высота.
  • Выравнивание: горизонтальное и вертикальное.
  • Отступы.
  • Фон.

Тема 17. Использование изображений в качестве фона

  • Фоновый цвет.
  • Фоновое изображение.
  • Повтор фонового изображения.
  • Позиционирование фона.
  • Фиксация фона.
  • Краткая запись.

Тема 18. Формы

  • Границы.
  • Ширина, высота.
  • Интерлиньяж.
  • Кнопки.

Тема 19. Блочная модель

  • Ширина, высота.
  • Margin, Padding, Border.
  • Outline.

Тема 20. Свойство Display

  • Блочные элементы.
  • Строковые.
  • Блочно-строковые.

Тема 21. Свойство Float

  • Обтекание по сторонам.
  • Понятие потока.
  • Очистка потока.

Тема 22. Позиционирование

  • Абсолютное.
  • Относительное.
  • Фиксированное.
  • Свойство z-index.

Тема 23. Видимость элементов

Тема 24. Выбираем размерность: em, px, pt, %

Тема 25. Практическая работа

  • Верстка макетов с фиксированной шириной.
  • Пример верстки двухколоночных макетов с разным расположением элементов.
  • Пример верстки трехколоночных макетов с разным расположением элементов.
  • Верстка макетов с «плавающей» шириной.
  • Пример верстки двухколоночных макетов с разным расположением элементов.
  • Пример верстки трехколоночных макетов с разным расположением элементов.
  • Улучшаем навигацию по сайту.
  • Стилизация меню.
  • Выпадающее меню.
  • Верстка новостной ленты (блога).
  • Верстка информационных блоков.
  • Создание блоков-ссылок.
  • Создание закругленных уголков.
  • Создание тени и иммитация тени.
  • Создание рамок.
  • Форма обратной связи на css.
  • Создание галереи изображений.
  • Презентационная страница.
  • Страница с подробным описанием фото.
  • Создание галереи Lightbox.
  • Верстка каталога организаций или товаров.
  • Фиксированные панели (блоки) на странице.
  • Вертикальное выравнивание.
  • Прижимание футера сайта к низу страницы в не зависимости от высоты контента сайта.

Тема 26. Проблемы старых браузеров

Школа юных программистов

Программа

  • В самом начале разберёмся как устроен компьютер, для этого возьмём отвёртку, раскурочим его и соберём обратно.
  • После этого разберёмся что за программы есть в компьютере и как их использовать.
  • Как только поймём как это всё работает займёмся нашим основным проектом — выберем жанр для игры и напишем сценарий.
  • Разберёмся с анимацией. Как сделать так, чтобы картинки на экране двигались и шевелились.
  • В играх обязательно есть главный персонаж. У нас тоже будет свой. Сначала мы нарисуем его на бумаге, затем отсканируем и немножечко подретушируем при помощи графического редактора.
  • Чтобы наш персонаж мог двигаться по экрану нам потребуется разобраться что такое система координат, а потом объяснить ему (на языке программирования, конечно).
  • Алгоритмы. Это правила по которым работают программы. Объясним компьютеру эти правила.
  • К этому моменту игра должна быть почти готова. Не хватает одной маленькой, но важной детали — звука. Возьмём микрофон и запишем звуки для всех игр. Подправим их на компьютере и добавим в программу.
  • А вот теперь, когда всё готово, пригласим родителей на презентацию.

Инструменты, которые мы будем использовать

Веб-разработка на PHP. Расширенный курс

Программа курса

Тема 1. ООП в PHP

Тема 2. MVC. Основы работы с MVC-фрэймворками

Тема 3. Роутинг. Взаимодейтсвие контроллеров с шаблонами и моделями

Тема 4. Использование виджетов

Тема 5. Подключение модулей

Тема 6. Взаимодействие с базой данных MySQL. Active Record

Тема 7. Связи и Active Record

Тема 8. Операции CRUD

Тема 9. Авторизация

Тема 10. Использование Composer

Веб-разработка на PHP. Базовый курс

Программа курса

Тема 1. Подготовка рабочего места веб-программиста

  • Введение.
  • Общие принципы работы веб-приложений. Базовая структура веб-узлов.
  • Принципы работы с PHP, Apache, MySQL. Установка. Настройка.
  • Основные понятия WWW. Принципы функционирования веб-сервера. Протокол HTTP, взаимодействие сервера и клиента. Понятия Request и Response. Query String. Процесс обработки клиентских запросов на сервере.
  • Инструменты проектирования и администрирования баз данных. Среды разработки программного кода. Установка и настройка.

Тема 2. HTML

  • Использование HTML для создания веб-страниц.

Тема 3. Основы PHP

  • Базовый синтаксис. Смешивание PHP кода и HTML элементов на одной странице.
  • Переменные и типы данных PHP. Константы. Выражения. Комментарии.
  • Использование одинарных и двойных кавычек при работе со строками. PHP-переменные в строковых выражениях.
  • Операторы PHP. Операторы управления.
  • Функции. Назначение, библиотека стандартных функций. Разработка пользовательских функций.
  • Работа с массивами.

Тема 4. Основы SQL

  • Организация хранения информации (данных) в информационных системах. Роль баз данных в современных информационных системах.
  • Назначение SQL. SQL-серверы и клиентские программы. Взаимодействие клиентских программ и SQL-серверов.
  • Использование phpMyAdmin для удаленного управления MySQL- базами данных. Инструмент администрирования баз данных MySQL Workbench.
  • Разработка моделей баз данных. Создание баз данных на сервере. Генерация таблиц в базе данных. Скрипты начального заполнения таблиц базы данных.
  • Управление пользователями на MySQL сервере. Гранты.
  • Операторы DML: INSERT, UPDATE, DELETE, SELECT. Синтаксис операторов INSERT, UPDATE, DELETE.
  • Синтаксис оператора SELECT. Фильтрация данных: предложение WHERE. Сортировка данных.
  • Выбор данных из связанных таблиц. Предложение JOIN, его разновидности.

Тема 5. Работа с базами данных в PHP

  • Функции PHP для работы с базами данных.
  • Формирование формы. Типы элементов формы, особенности их обработки в PHP.
  • Обработка введенных в форме данных. Получение переданных данных из формы. Проверка и контроль данных. Формирование SQL оператора. Выполнение SQL оператора.
  • Возврат в форму при обнаружении ошибок. Обратная передача данных и их повторное отображение. Сообщения об ошибках.

Тема 6. Специальные возможности PHP

  • Передача файлов через формы (upload).
  • Использование cookies и сессий.
  • Переадресация на другие страницы.
  • Работа с файлами.
  • Работа с изображениями.