HTML — язык гипертекстовой разметки, позволяющий создавать веб-страницы, добавляя на них визуальные элементы, такие как заголовки, таблицы, списки, а также интерактивные элементы: ссылки, кнопки, поля редактирования и многие другие. Без базовых знаний HTML невозможно эффективно заниматься разработкой или модернизацией уже существующих веб-сайтов. Веб-форма — один из самых известных и самых используемых инструментов интернет-сайтов, который позволяет передавать различные данные от пользователя на сервер для дальнейшей обработки. Именно изучение HTML-формы и её элементов управления занимает ключевое место в овладении языком разметки HTML. Основным преимуществом HTML по сравнению с другими языками веб-программирования, является его простота в изучении. Даже начальные знания этого языка позволят вам правильно и креативно оформить структуру самого обычного текста, сделав его с одной стороны более привлекательным для посетителей сайта и в тоже время читабельным для программ экранного доступа.
Целевая аудитория
Настоящий курс разработан с учётом особенностей людей с глубоким нарушением зрения, желающих сделать первые шаги по пути к разработке новых сайтов и модернизации уже существующих. Он будет полезен школьникам старших классов, студентам первых курсов, просто незрячим пользователям, для понимания структуры web-страниц, тестировщикам невизуальной доступности различных интернет-сервисов. Практико-ориентированность курса позволит слушателю уже в процессе обучения создать первый, пробный сайт.
Требования к компетенциям
Для успешного освоения курса слушатель должен:
• Владеть навыками работы на ПК под управлением ОС Windows на среднем пользовательском уровне;
• Уверенно работать в текстовом редакторе;
• Знать обязательно английскую раскладку клавиатуры компьютера;
• Уметь работать с программой экранного доступа NVDA.
Основные темы курса
Курс представлен следующими темами:
- Введение в HTML.
- Структура html-документа;
- Простейшая html-страница;
- Визуальные элементы: заголовки, абзацы, списки;
- Форматирование текста. Таблица стилей.
- Таблицы и списки.
- Конструирование таблицы;
- Атрибуты таблицы, атрибуты ячеек;
- Нумерованные и маркированные списки.
- Интерактивные элементы (часть 1).
- Ссылки;
- Атрибуты тега <a>;
- Вставка изображений;
- Атрибуты тега <img>;
- Элементы управления аудиоплеером;
- Атрибуты тега <audio>.
- Интерактивные элементы (часть 2).
- Конструирование формы;
- Вставка однострочного поля редактирования;
- Атрибуты поля редактирования;
- Вставка кнопки;
- Вставка радиокнопки;
- Вставка флажка;
- Вставка комбинированного списка;
- Вставка многострочного поля редактирования.
- Интерактивные элементы (часть 3).
- Вставка кнопки для загрузки файлов на сайт;
- Вставка ползунка (слайдера);
- Вставка поля типа счётчик;
- Вставка элемента управления для выбора даты;
- Вставка элемента управления для ввода времени;
- Вставка элемента управления для выбора цвета.
- Курсовой проект: создания сайта знакомств.
- Создание HTML-каркаса для главной страницы;
- Вставка краткой информации о сайте с использованием тегов заголовков, абзацев, списков, таблиц;
- Создание навигационного меню с использованием ссылок;
- Создание каркасов веб-страниц для навигационного меню;
- Вставка аудиоплеера на странице «Давайте познакомимся»;
- Вставка фотографий на странице «Давайте познакомимся»;
- Вставка формы регистрации на странице «Регистрация участников»;
- Вставка однострочных полей редактирования: логин, пароль, имя, Фамилия, номер телефона, e-mail с указанием длины поля;
- Вставка кнопки «Зарегистрироваться»;
- Вставка двух радиокнопок «Мужской» и «Женский»;
- Вставка флажка «Получать новости нашего проекта»;
- Вставка комбинированного списка «Откуда вы узнали о нас?»;
- Вставка многострочного поля редактирования «Расскажите кратко о себе»;
- Вставка кнопки «Загрузить образец своего голоса»;
- Вставка поля-дата «Дата вашего рождения»;
- Вставка поля-счётчика «Ваш рост».
Ожидаемые результаты
В результате освоения курса слушатель:
- Получит представление о структуре web-страниц;
- Поймёт, от чего зависит невизуальная доступность веб-сайтов и веб-форм при использовании программ экранного доступа;
- Усвоит основы HTML-вёрстки, являющейся базовым инструментом для любого языка веб-программирования;
- Получит необходимый минимум знаний о процессе взаимодействия интернет-браузера и веб-сервера;
- Реализует курсовой проект создания сайта знакомств с использованием базовых тегов HTML.