HTML5
Основы HTML1.1
- Структура HTML-документа
- Элемент <html>
- Элемент <head>
- Элемент <title>
- Элемент <meta>
- Элемент <style>
- Элемент <link>
- Элемент <script>
- Элемент <body>
HTML-элементы1.2
HTML-атрибуты1.3
HTML-текст1.4
- Элементы для заголовков
- Элементы для форматирования текста
- Элементы для ввода «компьютерного» текста
- Элементы для оформления цитат и определений
- Абзацы, средства переноса текста
HTML-ссылки1.5
- Структура ссылки
- Абсолютный и относительный путь
- Якорь
- Как сделать изображение-ссылку
- Как сделать ссылку на телефонный номер, скайп или адрес электронной почты
- Атрибуты ссылок
HTML-изображения1.6
- Элемент <img>
- Адрес изображения
- Размеры изображения
- Форматы графических файлов
- Элемент <map>
- Элемент <area>
- Пример создания карты-изображения
HTML-таблицы1.7
- Как создать таблицу
- Как создать строки (ряды) таблицы
- Как сделать ячейку заголовка столбца таблицы
- Как сделать ячейку тела таблицы
- Как добавить подпись (заголовок) к таблице
- Группирование строк и столбцов таблицы <colgroup> и <col>
- Группировка разделов таблицы <thead>, <tbody> и <tfoot>
- Как объединить ячейки таблицы
- Атрибуты элементов таблицы
- Пример создания таблицы
HTML-списки1.8
- Маркированный список <ul>
- Нумерованный список <ol>
- Список определений <dl>
- Вложенный список
- Многоуровневый нумерованный список
Спецсимволы HTML1.9
HTML-генераторы1.10
Семантические элементы HTML51.11
Элемент документа1.11.1
Метаданные документа1.11.2
Разделы документа1.11.3
- Элемент <body>
- Элемент <article>
- Элемент <section>
- Элемент <nav>
- Элемент <aside>
- Элементы <h1>, <h2>, <h3>, <h4>, <h5> и <h6>
- Элемент <header>
- Элемент <footer>
Группировка содержимого1.11.4
- Элемент <p>
- Элемент <address>
- Элемент <hr>
- Элемент <pre>
- Элемент <blockquote>
- Элемент <ol>
- Элемент <ul>
- Элемент <li>
- Элемент <dl>
- Элемент <dt>
- Элемент <dd>
- Элемент <figure>
- Элемент <figcaption>
- Элемент <main>
- Элемент <div>
Семантика уровня текста1.11.5
- Элемент <a>
- Элемент <em>
- Элемент <strong>
- Элемент <small>
- Элемент <s>
- Элемент <cite>
- Элемент <q>
- Элемент <dfn>
- Элемент <abbr>
- Элемент <ruby>
- Элемент <rb>
- Элемент <rt>
- Элемент <rtc>
- Элемент <rp>
- Элемент <data>
- Элемент <time>
- Элемент <code>
- Элемент <var>
- Элемент <samp>
- Элемент <kbd>
- Элементы <sub> и <sup>
- Элемент <i>
- Элемент <b>
- Элемент <u>
- Элемент <mark>
- Элемент <bdi>
- Элемент <bdo>
- Элемент <span>
- Элемент <br>
- Элемент <wbr>
Правки документа1.11.6
Встраиваемое содержимое1.11.7
- Элемент <picture>
- Элемент <source>
- Элемент <img>
- Элемент <iframe>
- Элемент <embed>
- Элемент <object>
- Элемент <param>
- Элемент <video>
- Элемент <audio>
- Элемент <track>
- Элемент <map>
- Элемент <area>
Ссылки1.11.8
Табличные данные1.11.9
- Элемент <table>
- Элемент <caption>
- Элемент <colgroup>
- Элемент <col>
- Элемент <tbody>
- Элемент <thead>
- Элемент <tfoot>
- Элемент <tr>
- Элемент <td>
- Элемент <th>
Формы1.11.10
- Элемент <form>
- Элемент <label>
- Элемент <input>
- Элемент <button>
- Элемент <select>
- Элемент <datalist>
- Элемент <optgroup>
- Элемент <option>
- Элемент <textarea>
- Элемент <output>
- Элемент <progress>
- Элемент <meter>
- Элемент <fieldset>
- Элемент <legend>
- Атрибут autocomplete
Интерактивные элементы1.11.11
Скрипты1.11.12
HTML5-аудио1.12
- Элемент <audio>
- Аудио кодеки
- Альтернативные медиа-ресурсы <source>
- Добавление субтитров и заголовков <track>
- Стилизованный пример аудио плеера
HTML5-видео1.13
- Элемент <video>
- Встраиваемый интерактивный контент <embed>
- Видеокодеки
- Видеоконтейнеры
- Альтернативные медиа-ресурсы <source>
- Добавление субтитров и заголовков <track>
- Пример: размещаем видео на сайте
- Видеоконвертеры
Необязательные теги HTML5-разметки1.14
HTML5-формы1.15
- Элемент <form>
- Группировка элементов формы <fieldset>
- Создание полей формы <input>
- Текстовые поля ввода <textarea>
- Раскрывающийся список <select>
- Надписи к полям формы <label>
- Кнопки <button>
- Флажки и переключатели в формах
Контентная модель HTML51.16
HTML – значимый язык программирования, который обязательно нужно знать, чтобы заниматься созданием сайтов. Применяется данная технология для определения структуры веб-страниц и правильности отображения контента, а именно для разметки веб-страниц: абзацев, заголовков, списков, ссылок, мультимедийных файлов и других элементов.
Алгоритм обучения
Познавательное учебное путешествие лучше всего начать с изучения именно HTML. В разделе «Введение в HTML» можно получить вводную информацию, после чего перейти к изучению продвинутого уровня. Там представлены такие темы, как:
«CSS» (каскадные таблицы стилей), особенности их использования для стилизации HTML-доков. Сюда можно отнести изменение размера и типа шрифта, использование анимации и др.
«Javascript» и его использование для того, чтобы веб-страницы были функционально динамичны, то есть, определялось местоположение и отображалось на карте, сохранялись локально пользовательские данные на гаджетах.
Перед началом обучения, необходимо понимать хотя бы базовые особенности использования компьютеров и интернета, а именно, быть контент-потребителем и уметь просматривать странички. В разделе «Установка базового программного обеспечения» описывается базовая рабочая среда, которая должна быть у каждого юзера, а также, должно присутствовать понимание, как работать с файлами и создавать их. Данная информация подробно изложена в разделе «Работа с файлами». Оба раздела являются составными частями модуля для новичков «Начало работы с вебом».
Основные модули
Раздел состоит из модулей, порядок которых максимально удобен для изучения, начинать курс лучше из первого.
Введение в HTML
Данный раздел дает фундамент, который в дальнейшем даст возможность применять важные понятия и синтаксис. Изучается использование HTML к тексту, создание гиперссылки и другие важные аспекты.
Мультимедиа и встраивание
В данном модуле идет рассмотрение использования HTML для подсоединения мультимедийных файлов к веб-странице. Сюда относятся разные способы встраивания фото, аудио, видеоконтента.
HTML Таблицы
С помощью таблиц удается упорядочить и отобразить на экране данные через строки и столбцы. Данный раздел поясняет основы табличной разметки, а также описывает такие сложные опции, как реализация подписок и резюме.
HTML Формы
Формы являются важной частью интернета. Их задача лежит в обеспечении функциональных возможностей, которые понадобятся для работы с веб-сайтом (например, регистрация, вход, отправка отзывов, комментарии, совершение покупок и др.)
Решение общих HTML задач
Применение HTML для решения задач имеет ссылки на разделы контента, в которых изложены решения проблем, например, работа с заголовками, добавление фото или видеоконтента и т.д.
