Основы веб-технологий

В процессе изучения модуля вы познакомитесь с особенностями работы каждого тега. Рассмотрите методы и принципы создания различных макетов веб-страниц с применением и табличной верстки (в случае создания HTML-писем) и float-элементов с их особенностями работы совместно с основным потоком элементов html-документа.

Научитесь создавать эффектные CSS3 анимации и трансформации без использования JavaScript.

Освоите принцип работы с известным плагином для редакторов веб-разработки Emmet, а также научитесь работать с FTP-клиентом при взаимодействии с хостингом.

Часов в программе

18,00 часов

лекции

26,00 часов

практика

1,00 час

самостоятельная

5,00 часов

промежуточная аттестация

50,00 часов

всего

Материально-технические условия реализации программы:

Вид занятий: Изучение теоретического материала
Требуемое ПО:
Web-браузер - любой из перечисленных: Chrome, Safari, Internet Explorer
Для работы с текстовыми материалами Adobe Acrobat Reader DC

Вид занятий: Выполнение практических заданий
Требуемое ПО:
Операционная система:
Windows - 64-битная x86, 32-битная x86; MacOS - 64-битная x86; Linux - 64-битная x86, 64-битная Power8 / Power9

Программное обеспечение:
SublimeText3 и старше
Google Chrome 85+
Adobe Reader

Вид занятий: Самостоятельная работа
Требуемое ПО:
Операционная система:
Windows - 64-битная x86, 32-битная x86; MacOS - 64-битная x86; Linux - 64-битная x86, 64-битная Power8 / Power9

Программное обеспечение:
SublimeText3 и старше
Google Chrome 85+
Adobe Reader

Информационные ресуры

https://cubic-bezier.com/
https://daruse.ru/generator-knopok-online
https://maxzon.ru/button_gen/index.html
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
https://www.cssmatic.com/box-shadow

Образовательные ресуры

Справочник по HTML - http://htmlbook.ru/html
Справочник по HTML - https://webref.ru/html
Справочник всех тегов по HTML5 - https://html5css.ru/tags/default.php

Учебно-методические материалы

Методы, формы и технологии

Обучение происходит в смешанном формате. Модуль реализуется с помощью :
- онлайн лекций на платформе Университета ИТМО
- установочных лекций через видеоконференции Zoom,
- практических заданий с пошаговыми инструкциями,
- мастер-классов и консультаций через видеоконференции Zoom,
- заданий для самостоятельной работы, оцениваемых преподавателем.
Послу установочной лекции слушатели изучают материалы онлайн курса, выполняют практические задания. Регулярно устраиваются мастер-классы и консультации по материалам модуля.

Методические разработки

Обучающие материалы модуля представлены в виде видеолекций, текстовых материалов, пошаговых инструкций, размещенных на платформе Университета ИТМО.

Материалы курса

видео-лекции
текстовые материалы лекций
практические задания в виде пошаговых инструкций
задания для самостоятельной работы

Учебная литература

Сакулин С. А. Основы интернет-технологий: HTML, CSS, JavaScript, XML/С. А. Сакулин. - Москва:Московский государственный технический университет имени Н.Э. Баумана, 2017 - URL: https://e.lanbook.com/book/103525. - ЭБС издательства «Лань». Коллекция «Информатика»
Макфарланд Д. Новая большая книга СЅЅ. — СПб.: Питер, 2016. – 720 с.: ил. - URL: https://www.labirint.ru/books/528885/
Фрейн Б. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.. — СПб.: Питер, 2016. - URL: https://www.labirint.ru/books/550825/
Дакетт Д. HTML и CSS. Разработка и дизайн веб-сайтов/Джон Дакетт. - М: Эксмо, 2013. - 480 с. : ил.- URL: https://www.labirint.ru/books/403789/

Темы

Введение в HTML. Структура страницы. Размещение изображений, списков и таблиц Медиа-файлы. Iframe. Формы Основы каскадных таблиц стилей CSS Макетирование страницы с CSS Адаптивные html-страницы Работа со шрифтами CSS-анимация Подготовка, размещение и поддержка сайта в сети Гибкая работа со страницами сайта