Основы HTML

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

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

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

Требования к компетенциям

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

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

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

  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. Создание каркасов веб-страниц для навигационного меню;
    5. Вставка аудиоплеера на странице «Давайте познакомимся»;
    6. Вставка фотографий на странице «Давайте познакомимся»;
    7. Вставка формы регистрации на странице «Регистрация участников»;
    8. Вставка однострочных полей редактирования: логин, пароль, имя, Фамилия, номер телефона, e-mail с указанием длины поля;
    9. Вставка кнопки «Зарегистрироваться»;
    10. Вставка двух радиокнопок «Мужской» и «Женский»;
    11. Вставка флажка «Получать новости нашего проекта»;
    12. Вставка комбинированного списка «Откуда вы узнали о нас?»;
    13. Вставка многострочного поля редактирования «Расскажите кратко о себе»;
    14. Вставка кнопки «Загрузить образец своего голоса»;
    15. Вставка поля-дата «Дата вашего рождения»;
    16. Вставка поля-счётчика «Ваш рост».

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

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

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