HTML

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

Целевая аудитория

Настоящий курс разработан с учётом особенностей людей с глубоким нарушением зрения, желающих сделать первые шаги по пути к разработке новых сайтов и модернизации уже существующих. Он будет полезен школьникам старших классов, студентам первых курсов, просто незрячим пользователям для понимания структуры WEB-страниц, тестировщикам невизуальной доступности различных Интернет-сервисов. Практико-ориентированность курса позволит слушателю уже в процессе обучения создать первый пробный сайт.

Требования к компетенциям слушателя

Для успешного освоения курса слушатель должен:
• Владеть навыками  работы на ПК под управлением ОС Windows на среднем пользовательском уровне;
• Уверенно работать в текстовом редакторе;
• Знать английскую раскладку клавиатуры компьютера;
• Уметь работать с программой экранного доступа.

Основные темы курса

Курс представлен следующими темами:

  1. Введение в HTML:
    1. Структура HTML-документа;
    2. Простейшая HTML-страница;
    3. Визуальные элементы: заголовки, абзацы, списки;
    4. Форматирование текста. Таблица стилей.
  2. Таблицы и списки:
    1. Конструирование таблицы;
    2. Атрибуты таблицы, атрибуты ячеек;
    3. Нумерованные и маркированные списки.
  3. Интерактивные элементы (часть 1):
    1. Ссылки;
    2. Атрибуты тега <a>;
    3. Вставка изображений;
    4. Атрибуты тега <img>;
    5. Элементы управления аудиоплеером;
    6. Атрибуты тега <audio>.
  4. Интерактивные элементы (часть 2):
    1. Конструирование формы;
    2. Вставка однострочного поля редактирования;
    3. Атрибуты поля редактирования;
    4. Вставка кнопки;
    5. Вставка радиокнопки;
    6. Вставка флажка;
    7. Вставка комбинированного списка;
    8. Вставка многострочного поля редактирования.
  5. Интерактивные элементы (часть 3):
    1. Вставка кнопки для загрузки файлов на сайт;
    2. Вставка ползунка (слайдера);
    3. Вставка поля типа счётчик;
    4. Вставка элемента управления для выбора даты;
    5. Вставка элемента управления для ввода времени;
    6. Вставка элемента управления для выбора цвета.
  6. Курсовой проект: создания сайта знакомств:
    1. Создание HTML-каркаса для главной страницы;
    2. Вставка краткой информации о сайте с использованием тегов заголовков, абзацев, списков, таблиц;
    3. Создание навигационного меню с использованием ссылок;
    4. Создание каркасов WEB-страниц для навигационного меню;
    5. Вставка аудиоплеера на странице «Давайте познакомимся»;
    6. Вставка фотографий на странице «Давайте познакомимся»;
    7. Вставка формы регистрации на странице «Регистрация участников»;
    8. Вставка однострочных полей редактирования: логин, пароль, имя, Фамилия, номер телефона, e-mail с указанием длины поля;
    9. Вставка кнопки «Зарегистрироваться»;
    10. Вставка двух радиокнопок «Мужской» и «Женский»;
    11. Вставка флажка «Получать новости нашего проекта»;
    12. Вставка комбинированного списка «Откуда вы узнали о нас?»;
    13. Вставка многострочного поля редактирования «Расскажите кратко о себе»;
    14. Вставка кнопки «Загрузить образец своего голоса»;
    15. Вставка поля «дата»: «Дата вашего рождения»;
    16. Вставка поля-счётчика «Ваш рост».

Ожидаемые результаты

В результате освоения курса слушатель:

  • Получит представление о структуре WEB-страниц;
  • Поймёт, от чего зависит доступность Интернет-сайтов и WEB-форм при использовании программ экранного доступа;
  • Усвоит основы HTML-вёрстки, являющейся базовым инструментом для любого языка WEB-программирования;
  • Получит необходимый минимум знаний о процессе взаимодействия Интернет-браузера и WEB-сервера;
  • Реализует курсовой проект создания сайта знакомств с использованием базовых тегов HTML.