Компьютерные науки

Введение в стандарты Web

Программа посвящена освоению веб-дизайна на основе современных стандартов с самого начала. Охватываются HTML, CSS, базовые принципы JavaScript, информационная архитектура, теория цвета и доступность.
Студентов 6391 Выпускников 553 Для всех
690 ₽ 1 200 ₽
или любая сумма на ваше усмотрение
Вы можете оплатить любую сумму, чтобы поддержать наш проект и авторов программы. Объем услуг не зависит от размера вашей оплаты.
Темы:
Интернет-технологии, Программирование
Объем
36 час.
Длительность
30 дней
Нагрузка в неделю
9 час.
Формат обучения
Дистанционно (самостоятельно)
Описание Эта учебная программа посвящена веб-дизайну и разработке интерфейсов на базе действующих веб-стандартов. В рамках обучения рассматриваются эволюция интернета, информационная архитектура, выбор цветовых схем и типографика. Основной упор сделан на глубокое изучение HTML для семантической разметки и CSS для компоновки, оформления текста, списков, таблиц и форм. Обучение выстроено последовательно с регулярными проверочными блоками для оценки усвоения каждого стандарта. Это отличный старт для веб-разработчиков.
Цели
  • Сформировать целостное понимание современных веб-стандартов.
  • Дать уверенные базовые навыки семантической разметки и стилизации веб-документов.
  • Познакомить с принципами информационной архитектуры, доступности и тестирования веб-страниц.
Чему я научусь?
  • Проектировать информационную архитектуру и каркас веб-сайта.
  • Использовать семантические элементы HTML для разметки контента.
  • Применять CSS для позиционирования, компоновки и оформления элементов.
  • Обеспечивать валидацию и доступность создаваемых веб-страниц.

Авторы

Труфанов Олег Дмитриевич
Труфанов Олег Дмитриевич
Выпускник Новосибирского Государственного Университета, кандидат физико-математических наук.
Чему я научусь?
  • Проектировать информационную архитектуру и каркас веб-сайта.
  • Использовать семантические элементы HTML для разметки контента.
  • Применять CSS для позиционирования, компоновки и оформления элементов.
  • Обеспечивать валидацию и доступность создаваемых веб-страниц.

Учебный план

№ Занятия
Экзамен экстерном Внимание! Экзамен экстерном не обязательный для сдачи. При желании вы можете его пройти, если хотите подтвердить свои знания по данному курсу без его изучения или поверить свои знания по нему. Экзамен экстерном можно сдать только один раз. 90 мин
1 Введение в стандарты Web Кратко обсуждаются преимущества использования стандартов Web, почему они не общеприняты, как должны были бы быть, и... Кратко обсуждаются преимущества использования стандартов Web, почему они не общеприняты, как должны были бы быть, и как курс намерен решить эти проблемы. Рассказывается, как структурирован курс, для кого он предназначен. ещё
2 История Internet и Web, эволюция стандартов Web "Краткий экскурс в историю создания Интернет, World Wide Web (WWW), и ""стандартов Web"". Рассказывается о ""Войнах... "Краткий экскурс в историю создания Интернет, World Wide Web (WWW), и ""стандартов Web"". Рассказывается о ""Войнах браузеров"", а также появлении, развитии и внедрении стандартов Web" ещё
3 Как работает Интернет? Cначала кратко рассматривается реальная коммуникация компьютеров с помощью HTTP и TCP/IP, а затем различные языки, которые... Cначала кратко рассматривается реальная коммуникация компьютеров с помощью HTTP и TCP/IP, а затем различные языки, которые используются для создания Web-страниц, составляющих Интернет ещё
4 Модель стандартов Web - HTML, CSS и JavaScript Рассматривается чуть углубленней каждый из базовых строительных блоков Web - HTML (или XHTML), CSS и JavaScript.... Рассматривается чуть углубленней каждый из базовых строительных блоков Web - HTML (или XHTML), CSS и JavaScript. Что они делают, и как эти три составляющие взаимодействуют друг с другом при создании Web-сайта ещё
5 Стандарты Web — прекрасная мечта, но какова реальность? Анализируется, все ли браузеры Web на 100% совместимы со стандартами. Все ли разработчики Web правильно используют... Анализируется, все ли браузеры Web на 100% совместимы со стандартами. Все ли разработчики Web правильно используют стандарты Web. Создают ли разработчики Web страницы с помощью стандартов Web, и при этом могут быть уверены, что их дизайн будет поддерживаться везде. Как же в реальности обстоят дела? ещё
Стандарты Web — прекрасная мечта, но какова реальность? тест для курса Введение в стандарты Web 60 мин
6 Информационная архитектура - Планирование Web-сайта Рассматриваются начальные этапы планирования Web-сайта, и дисциплина, которую обычно называют Информационная архитектура, или IA (Information Architecture)
7 Что нужно хорошей Web-странице? Исследуются различные страницы Web-сайта. Обдумывается, какие на них должны появиться объекты, рассматриваются такие проблемы, как согласованность,... Исследуются различные страницы Web-сайта. Обдумывается, какие на них должны появиться объекты, рассматриваются такие проблемы, как согласованность, юзабилити, и доступность ещё
8 Теория цвета Рассмотрены основы цвета и три простые цветовые схемы, помогающие при выборе цвета для сайта. В последующих... Рассмотрены основы цвета и три простые цветовые схемы, помогающие при выборе цвета для сайта. В последующих материалах будет рассказано, как упростить этот выбор цветов ещё
9 Создание каркаса сайта Что необходимо знать, приступая к созданию каркаса сайта? Что нужно продумать в первую очередь, приступая к... Что необходимо знать, приступая к созданию каркаса сайта? Что нужно продумать в первую очередь, приступая к разработке сайта? На примере воображаемого сайта автор показывает, как начать делать сайт. Логотип, его влияние на дизайн сайта. Предполагаемая компоновка сайта, ее особенности. Немного слов о рекламе на сайте, как лучше ее разместить. Как осуществить проверку компоновки? ещё
10 Цветовые схемы и макеты дизайна Основная информация о гарнитурах шрифтов. Определение гарнитуры шрифта для заголовков, подзаголовков и основного текста. Некоторые секреты... Основная информация о гарнитурах шрифтов. Определение гарнитуры шрифта для заголовков, подзаголовков и основного текста. Некоторые секреты выравнивания. Советы по подбору различных цветовых комбинаций для Web-сайта. Поэтапное создание макета сайта. Тестирование Web-сайта перед переходом в рабочий режим ещё
11 Полиграфия в Web Ограничения полиграфии в Web (ограниченный выбор шрифтов, переносы слов, кернинг). Рекомендации по реализации полиграфии в Web... Ограничения полиграфии в Web (ограниченный выбор шрифтов, переносы слов, кернинг). Рекомендации по реализации полиграфии в Web (выбор набора шрифтов, длина строки, высота строки, буквицы, капитель, висящая пунктуация, полиграфически-правильная пунктуация) ещё
Полиграфия в Web тест для курса Введение в стандарты Web 60 мин
12 Основы HTML Лекция знакомит с основами языка HTML - что это такое, что он делает, кратко история его... Лекция знакомит с основами языка HTML - что это такое, что он делает, кратко история его появления, и немного о том, как выглядит структура документа HTML ещё
13 Элемент HTML head Рассматривается разметка внутри элемента head. Кратко рассказывается о различных частях этого раздела, и для чего они... Рассматривается разметка внутри элемента head. Кратко рассказывается о различных частях этого раздела, и для чего они предназначены, включая doctype, элемент title, ключевые слова и описание. Дается представление о JavaScript и стилях CSS (как внутренних, так и внешних) и о том, что не следует оставлять в head ещё
14 Выбор правильного doctype для документов HTML Более подробно рассматривается элемент doctype, показаны его функции при проверке кода HTML и порядок выбора doctype... Более подробно рассматривается элемент doctype, показаны его функции при проверке кода HTML и порядок выбора doctype для документа. А также, объявление XML ещё
Выбор правильного doctype для документов HTML тест для курса Введение в стандарты Web 60 мин
15 Разметка текстового контента в HTML "Рассматриваются основы использования HTML для описания значения контента в теле (body) документа. Рассмотрены общие структурные элементы,... "Рассматриваются основы использования HTML для описания значения контента в теле (body) документа. Рассмотрены общие структурные элементы, такие как заголовки и параграфы, вставка цитат и кода ещё
16 Списки HTML Рассмотрены различные типы списков, доступных в HTML, когда и как их нужно использовать, и как применять... Рассмотрены различные типы списков, доступных в HTML, когда и как их нужно использовать, и как применять некоторые базовые стили ещё
17 Изображения в HTML Разговор о вещах, которые делают дизайн Web привлекательным - об изображениях. О том, как добавлять в... Разговор о вещах, которые делают дизайн Web привлекательным - об изображениях. О том, как добавлять в Web-документы визуальную информацию доступным образом (чтобы люди с недостатками зрения могли, тем не менее, использовать информацию сайта). А также, как и когда использовать строковые изображения для применения информационных или фоновых изображений при компоновке страницы ещё
18 Ссылки HTML - давайте создадим сеть Web! Все о ссылках. О том, как создавать ссылки, которые легко понять и использовать в любой рабочей... Все о ссылках. О том, как создавать ссылки, которые легко понять и использовать в любой рабочей среде. О том, как ссылки влияют на популярность в поисковых системах. А также, дается несколько советов, как лучше сформулировать ссылки ещё
Ссылки HTML - давайте создадим сеть Web! тест для курса Введение в стандарты Web 60 мин
19 Таблицы HTML Рассказывается, как правильно использовать таблицы HTML, какие элементы и атрибуты для этого используются. А также, даются... Рассказывается, как правильно использовать таблицы HTML, какие элементы и атрибуты для этого используются. А также, даются некоторые сведения, как с помощью CSS можно улучшить вид таблицы ещё
20 Формы HTML - основы Рассмотрены все основные элементы, которые необходимо знать для создания элегантной, доступной формы с помощью HTML
Формы HTML - основы тест для курса Введение в стандарты Web 60 мин
21 Менее известные семантические элементы Представлены некоторые из малоизвестных и редко используемых семантических элементов HTML. Рассмотрены разметка программного кода, взаимодействие с... Представлены некоторые из малоизвестных и редко используемых семантических элементов HTML. Рассмотрены разметка программного кода, взаимодействие с компьютерами, цитирование и аббревиатуры, демонстрация сделанных в документах изменений и другие. В конце рассматриваются некоторые предложения по новой дополнительной семантике, сделанные в черновом варианте HTML 5 ещё
22 Базовые контейнеры — элементы div и span Дается объяснение, как и когда применять в HTML элементы span и div, которые не используются для... Дается объяснение, как и когда применять в HTML элементы span и div, которые не используются для описания контента, но являются базовым механизмом, позволяющим создать специальную структуру или объединить в группы элементы, где не подходит в действительности никакой другой элемент HTML ещё
Базовые контейнеры — элементы div и span тест для курса Введение в стандарты Web 30 мин
23 Создание страниц с навигационными меню Рассмотрены навигация и меню Web-сайта. Рассказано о различных типах меню, и как создавать их в HTML.... Рассмотрены навигация и меню Web-сайта. Рассказано о различных типах меню, и как создавать их в HTML. Затронута тема юзабилити меню и доступности ещё
Создание страниц с навигационными меню тест для курса Введение в стандарты Web 60 мин
24 Валидация HTML Как лучше всего начать проверку страниц HTML и гарантировать, что эти страницы будут выводиться правильно в... Как лучше всего начать проверку страниц HTML и гарантировать, что эти страницы будут выводиться правильно в различных браузерах, без каких-либо ошибок? Ответом является валидация (проверка на соответствие правилам). О ней и пойдет речь ещё
Валидация HTML тест для курса Введение в стандарты Web 30 мин
25 Основы доступности Рассмотрены вопросы, что такое доступность, почему это важно, как обеспечить доступность сайтов, и какие существуют рекомендации... Рассмотрены вопросы, что такое доступность, почему это важно, как обеспечить доступность сайтов, и какие существуют рекомендации для создания доступных сайтов ещё
Основы доступности тест для курса Введение в стандарты Web 45 мин
26 Тестирование доступности Рассматриваются подходы к оценке доступности Web, как с точки зрения создания формального соответствия, так и с... Рассматриваются подходы к оценке доступности Web, как с точки зрения создания формального соответствия, так и с точки зрения максимизации доступности ещё
Тестирование доступности тест для курса Введение в стандарты Web 30 мин
27 Основы CSS Лекция посвящена основам технологии каскадных таблиц стилей (CSS).
Основы CSS тест для курса Введение в стандарты Web 60 мин
28 Наследование и каскадирование В лекции рассматриваются две фундаментальные концепции CSS - Наследование и каскадирование.
Наследование и каскадирование тест для курса Введение в стандарты Web 60 мин
29 Оформление текста с помощью CSS Эта лекция строится на основе полученных ранее в этом курсе знаний, предоставляя подробное руководство по эффективному... Эта лекция строится на основе полученных ранее в этом курсе знаний, предоставляя подробное руководство по эффективному оформлению текста с помощью CSS. ещё
Оформление текста с помощью CSS тест для курса Введение в стандарты Web 60 мин
30 Модель компоновки CSS - боксы, границы, поля, заполнение В лекции рассказывается о свойствах CSS, которые управляют компоновкой элементов HTML, включая их границы, поля, и... В лекции рассказывается о свойствах CSS, которые управляют компоновкой элементов HTML, включая их границы, поля, и многое другое. ещё
Модель компоновки CSS - боксы, границы, поля, заполнение тест для курса Введение в стандарты Web 60 мин
31 Фоновые изображения CSS В этой лекции рассматриваются основы работы с фоновыми изображениями CSS, включая применение фоновых изображений с помощью... В этой лекции рассматриваются основы работы с фоновыми изображениями CSS, включая применение фоновых изображений с помощью CSS, настройка их размещения, укладка их вертикально или горизонтально, и объединение фоновых изображений с помощью спрайтов CSS для улучшения производительности сайта. ещё
Фоновые изображения CSS тест для курса Введение в стандарты Web 60 мин
32 Оформление списков и ссылок В данной лекции рассматриваются основные приемы оформления списков и ссылок. Показываются основные типы списков: упорядоченные и... В данной лекции рассматриваются основные приемы оформления списков и ссылок. Показываются основные типы списков: упорядоченные и неупорядоченные, вертикальные и горизонтальные, а также вложенные списки. Рассматриваются состояния ссылок, ожидания пользователей относительно ссылок, оформление ссылок с помощью CSS ещё
Оформление списков и ссылок тест для курса Введение в стандарты Web 60 мин
33 Оформление таблиц "В данной лекции рассматриваются различные аспекты оформления таблиц. Показывается структура таблицы, оформление отдельных элементов: таблицы в... "В данной лекции рассматриваются различные аспекты оформления таблиц. Показывается структура таблицы, оформление отдельных элементов: таблицы в целом, заголовка, отдельных ячеек, границ, фона. Также рассматриваются основные дизайнерские приемы по оформлению таблиц: разметка ""зебра"", неравные столбцы, неполные и внутренние сетки. В конце лекции показываются две распространенные ошибки, связанные с оформлением таблиц, а также способы их устранения" ещё
Оформление таблиц тест для курса Введение в стандарты Web 60 мин
34 Проектирование, компоновка и представление форм с помощью CSS Статья о формах HTML познакомила с основами создания и оформления форм. В данной статье будет продолжено... Статья о формах HTML познакомила с основами создания и оформления форм. В данной статье будет продолжено рассмотрение форм с того места, где остановилась предыдущая, предоставляя дополнительные подробности об элементах и стилях форм, и о том, как формы используются в реальных современных Web-приложениях ещё
35 Плавающие элементы и очистка "В данной лекции рассматриваются плавающие элементы и очистка. Объясняется, что это такое и зачем применяется в... "В данной лекции рассматриваются плавающие элементы и очистка. Объясняется, что это такое и зачем применяется в современном web-дизайне. Детально разъясняется, как браузеры воспроизводят HTML/CSS документы, дается определение понятию ""бокс"", объясняется, как располагаются различные типы боксов на странице. Рассматриваются контейнерные плавающие элементы и заключение в оболочку, а также способ центрирования плавающего элемента" ещё
Плавающие элементы и очистка тест для курса Введение в стандарты Web 60 мин
36 Статическое и относительное позиционирование CSS В данной лекции рассматриваются два вида позиционирования элементов на странице: статическое и относительное. Показываются различия двух... В данной лекции рассматриваются два вида позиционирования элементов на странице: статическое и относительное. Показываются различия двух методов, а также варианты применения каждого из них. Показывается отличие в компоновке блочных и строковых боксов при статическом позиционировании. Рассматривается вопрос построения много-столбцовой компоновки с помощью относительного позиционирования. Рассматриваются способы решения проблем, возникающих при работе с браузером Internet Explorer ещё
Статическое и относительное позиционирование CSS тест для курса Введение в стандарты Web 60 мин
37 Абсолютное и фиксированное позиционирование CSS В данной лекции рассматривается абсолютное и фиксированное позиционирование, показываются особенности абсолютно позиционированных элементов в контексте потока... В данной лекции рассматривается абсолютное и фиксированное позиционирование, показываются особенности абсолютно позиционированных элементов в контексте потока документа. Рассматриваются вопросы определения позиции, размеров и расположения в третьем измерении абсолютно позиционированных элементов. Рассматривается понятие контекста стека, а также его разновидности: локального контекста стека. Также рассматриваются особенности элементов с фиксированным позиционированием и возможные варианты применения этих элементов ещё
Абсолютное и фиксированное позиционирование CSS тест для курса Введение в стандарты Web 60 мин
38 Верхние и нижние колонтитулы, столбцы и шаблоны В лекции рассказано как с помощью изложенного материала в предыдущих лекциях создать шаблон всего сайта.
39 Как разместить свой контент в сети Цель приложения состоит в том, чтобы предоставить краткое руководство по размещению Web-сайта в сети
40 Еще немного об элементе head документа "В приложении рассмотрены некоторые, реже используемые, элементы, которые можно добавлять в раздел head документа HTML
41 Распространенные объекты HTML, используемые для оформления текста
42 Глоссарий учебного курса по стандартам Web
Тренировочный экзамен Внимание! Тренировочный экзамен экстерном не обязательный для сдачи. При желании вы можете его пройти, если хотите проверить свои знания курса перед сдачей экзамена. Тренировочный экзамен можно сдавать сколько угодно один раз. 90 мин
Экзамен 60 мин

Какой документ я получу?

Сертификат

Выдаётся автоматически после успешного завершения программы.

Удостоверение о повышении квалификации

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

Стоимость программы

690 ₽ 1 200 ₽
или любая сумма на ваше усмотрение
Вы можете оплатить любую сумму, чтобы поддержать наш проект и авторов программы. Объем услуг не зависит от размера вашей оплаты.
^