+7 (812) 703-02-02 info@hse.spbstu.ru

Семестр 1. Основы HTML и CSS

C 8 класса | 13 занятий | Очно или онлайн

Длительность курса: 82 ак. часа (13 занятий по 4 ак. часа + 30 часов домашней работы)

О чём курс

На самом деле не так сложно создать свой сайт. Вы можете создать свой личный сайт на любом бесплатном ресурсе, коих очень много сейчас в сети, выбрать шаблон и заполнить его информацией. Но, что, если вы хотите продать что-нибудь? Что делать, если вы не человек, который просто хочет убить свободное время, а владелец компании? Сайт необходим, как телефон в наши дни: качественный и гибкий сайт, который имеет интересный дизайн и работает без ошибок. Создание такого сайта занимает намного больше времени и сил, чем сайт, созданный на бесплатном ресурсе с помощью стандартных шаблонов.

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

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

Языки HTML (HyperText Markup Language, язык разметки гипертекста) и CSS (Cascading Style Sheets, каскадные таблицы стилей) – это та база, тот фундамент, с которого начинается веб-разработка.

HTML — язык для структурирования и представления содержимого для всемирной паутины, а также основная технология, используемая в Интернете. Это система верстки, которая определяет, как и какие элементы должны располагаться на веб-странице. Информация на сайте, способ ее представления и оформления зависят исключительно от разработчика и тех целей, которые он перед собой ставит.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основная цель CSS — разделение описания логической структуры веб-страницы (которое производится с помощью HTML) от описания внешнего вида этой веб-страницы (которое производится с помощью языка CSS). CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.

Курс доступен в ОНЛАЙН-формате! Уточняйте информацию у специалистов.

Чему научим

  • Знание HTML, в объеме достаточном для создания веб-сайтов.
  • Знание CSS, в объеме достаточном для создания веб-сайтов.
  • Умение верстать страницы сайтов и собирать сайт целиком.
  • Кроссбраузерная адаптивная верстка.

Занятие 1

Основы HTML

  • Понятие тега и атрибута
  • Структура кода страницы
  • Структурные элементы страницы

Разметка текста

  • Заголовки
  • Параграфы
  • Выделение текста

Основы CSS

  • Простые селекторы
  • Цвет фона
  • Типографика

Занятие 2

Списки

  • Нумерованный (упорядоченный) список
  • Маркированный (неупорядоченный) список
  • Список определений
  • Стилевые свойства списков

Занятие 3

Адресация

  • Абсолютный адрес
  • Корневая папка сайта
  • Относительный адрес
  • Ссылки
  • Псевдоклассы состояния

Занятие 4

Изображения

  • Графические форматы
  • Тег img и его атрибуты
  • Группировка изображений и подписей

Селекторы

  • Дочерний селектор
  • Селектор соседа
  • Родственный селектор

Фоновое изображение

Занятие 5

Блочная модель

  • Блочный элемент (блок)
  • Строчный (встроенный) элемент
  • Размеры блочных элементов
  • Границы
  • Поля
  • Оступы
  • Свойство display

Занятие 6

Блочные элементы

  • Обтекание
  • Проблемы обтекания
  • Решения проблем обтекания
  • Использование обтекания

Верстка типовых макетов страниц

  • Разделы страницы
  • Вспомогательные элементы разметки
  • Селектор класса
  • Фиксированный макет
  • Резиновая верстка
  • Комбинированный макет
  • Адаптивный макет

Занятие 7

Мультимедиа и анимация

  • Аудио и видео
  • Анимация перехода

Адаптивная верстка

  • Функция calc()
  • Медиа-запросы (media queries)

Занятие 8

Flexbox CSS

  • Основы
  • Свойства flexbox для контейнера
  • Свойства flexbox для элемента
  • Пример использования flexbox

Занятие 9

CSS Grid Layout

  • Свойства для родительского элемента (контейнера сетки)
  • Свойства для дочерних элементов, (grid элементы)
  • Пример использования css grid layout

Занятие 10

Таблицы

  • Простые таблицы
  • Название таблицы
  • Объединение ячеек
  • Псевдокласс nth-child
  • Группировка разделов таблицы

Занятие 11

Формы

  • Тег form и его атрибуты
  • Элементы формы
  • Список возможных вариантов
  • Подпись для элемента формы
  • Кнопка button
  • Многострочное текстовое поле
  • Список выбора
  • Группировка элементов формы
  • Псевдоклассы для элементов форм
  • Псевдоэлемент ::placeholder

Занятие 12-13

Итоговая работа

Стоимость

24 500 ₽

Социальные скидки для многодетных и других категорий семей.
Скидки по акциям.
Можно оформить налоговый вычет по расходам на обучение - 13%.

Как поступить

Для тех, кто еще не учится в АИШ:

  • Вступительное тестирование

Для уже обучающихся в АИШ:

  • Базовый курс: Компьютер-друг или Основы компьютерной грамотности
Тест № АИШ-001 Основы компьютерной грамотности

Тест на владение практическими навыками работы в ОС MS Windows:

  • Проходной балл:
    • Для курсов Информатика, Начала алгоритмизации и программирования на C#, Начала алгоритмизации и программирования на языке Python и Основы HTML и CSS - 50 баллов
    • Для всех остальных - 40 баллов
  • Длительность: 60 минут
  • Количество попыток: 2

Необходимы знания и навыки для успешного прохождения тестирования:

  • Понятия файла
  • Понятие папки
  • Расширение файлов
  • Работа с файловой системой: копирование, удаление, перемещение, поиск, создание файлов и папок
  • Горячие клавиши
  • Работа с оконными приложениями
  • Работа с мышкой
  • Устройство и принцип работы компьютера
  • Операционная система: что это такое, цели и задачи

Как записаться на занятия

О дате начала набора будет объявлено дополнительно.

Академия информатики для школьников в цифрах

20 лет

успешной работы
в Политехническом университете Петра Великого

10

направлений обучения

83

учебные программы

2 800

школьников
проходят обучение
ежегодно

151

выпускник АИШ
в 2023 году поступил
в Политехнический университет

4

учебные площадки

36

компьютерных классов

Мы используем cookies и рекомендательные технологии для улучшения работы сайта. Продолжая использовать этот сайт, Вы соглашаетесь на использование файлов cookie.