Том I. HTML5

Общие положения

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

Итак, проблема: у вас есть текст, который вам необходимо разместить на вашем сайте. Как её решить? Для этого в HTML существует тег параграфов текста – тег <p>, который используется как контейнер для работы с текстом. А еще, это еще один зеркальный тег.
Быть может, я сейчас слегка перегну палку и говорить об этом еще рано, но я всё-таки напишу про это именно здесь. Когда вырастете – поймете и вам это пригодится, придете сюда, в начало, читать об этом. Итак, помните, как я говорил выше, что в HTML у тегов могут быть атрибуты? Вот и тег <p> исключением не является. У него есть атрибут 'contenteditable' со значением после знака '=' 'true'. Этот атрибут позволит вам превратить обычный параграф текста в редактируемый, это нужно для того, чтобы пользователь мог с ним взаимодействовать. С этой информацией, введенной пользователем, в дальнейшем можно взаимодействовать с помощью JavaScript. Но он так же может использоваться и с заголовками, и с тегами ненумерованных/нумерованных списков, однако о списках позже. В любом случае, поздравляю, вы разместили у себя на странице свой первый параграф текста.

Разместив на у себя на странице параграфы с текстом, нам может понадобиться разместить и заголовки к ним. Разумеется, в HTML это тоже предусмотрено – для этого есть теги с <h1> до <h6> – различные по значению для браузера, а так же, как я сказал, по размеру по умолчанию (от самого большого до самого малого). Эти теги тоже зеркальны.

У тегов параграфов и заголовков есть еще один полезный под(суб)тег. Это тег <span>. Зачастую он применяется для дополнительной, внутристрочной стилизации текста, к примеру, для создания буквиц. Проще говоря, если вам будет нужно сделать так, чтобы ваш параграф текста выглядел одним образом, а одно лишь слово внутри этого параграфа было по стилю другим, то здесь вам и пригодится тег <span>. Записывается, кстати, просто, например, в параграфе: <p><span>Какой-то</span> текст</p>. И далее, помимо того, что находится в параграфе, вы можете заниматься отдельной стилизацией именно того, что заключено между тегами span.

Ещё одним из базовых тегов является не зеркальный тег <img> – image (от англ. изображение), он используется для добавления изображения на веб-страницу и у него есть два важных атрибута. Первый атрибут – это alt. Он позволяет отображать на странице содержимое добавленного изображения, если то, по тем или иным причинам, не будет загружено вместе с остальным контентом. Это так же необходимо и для пользователей с ограниченными возможностями – слабовидящих или незрячих людей. Их специальные программы – скринридеры – позволяют воспроизводить прочитанным вслух текстом содержимое фотографии. Поэтому то, что вы напишете в атрибуте 'alt', будет всерьез помогать людям с ограниченными возможностями воспринимать информацию с вашей веб-страницы. Второй атрибут – 'src=" "', в значении которого указывается путь к изображению. Поскольку мы работаем из репозитория, то все изображения для вашего веб-сайта рекомендуется размещать внутри него в папке с названием, к примеру, img или images. Исходя из того, что наш файл index.html у нас тоже создан и находится внутри репозитория, то путь к картинке прописать несложно. Репозиторий с нашим веб-сайтом назовём "test_site", представим, что скачали картинку со смешным котом и назвали её cat. При прописывании пути обязательно указывать расширение изображения (png, jpg, svg и так далее), и выглядеть это будет так:

***

<body>

</body>

***

Вот и всё! Теперь вы можете создавать простейшие веб-сайты, где есть заголовки, тексты и даже картинки. Ну а с тем, что чуть посложнее, мы разберемся далее.

Списки и инструменты форматирования документа

Как известно, списки бывают двух видов: нумерованные (упорядоченные) и не нумерованные (неупорядоченные). Основа у них проста и состоит из двух зеркальных тегов: тег <ul> для ненумерованного списка и <ol> для нумерованного. Для лучшего понимания и чтобы не путать их между собой, я рекомендую запомнить названия этих тегов с точки зрения слов, откуда они произошли. Первый вид списка – ненумерованный (<ul>) расшифровывается как "unordered list" (от англ. unordered list – не упорядоченный список). Второй вид списка – нумерованный (<ol>) расшифровывается как "ordered list" (от англ. ordered list – упорядоченный список). Как можно догадаться, название этих тегов – это есть первые буквы названий видов списков – ul и ol. Но эти теги еще не сами списки, а только их основа, как некий контейнер.

Любой список, нумерованный или ненумерованный, состоит из элементов. За это отвечает соответствующий тег – <lu>. Этот тег не стал исключением и у него тоже есть расшифровка – это "list item" (от англ. list item – элемент списка). Структура создания списков в таком случае получается простой (одинаково работает для обоих видов списка, только меняйте теги):

***

<body>

<ul>

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

</ul>

</body>

***

*для справки: и нумерованные и не нумерованные списки можно формировать каскадно, вкладывая один в другой.
Для этого, уже по известной схеме, формируется список, а затем, как один из его пунктов после тега <li>, прописывается новый подсписок тегами <ol> или <ul>. Вот, например:

Пункт 1;
Пункт 2;
Пункт 3;

Пункт 1;
Пункт 2;
Пункт 3;

Ну а теперь элементы форматирования текста:

Элемент 'strong' (замена не рекомендованному тегу 'b' – "bold") – выделяет текст жирным, отмечая его важность для браузера;
Элемент 'em' (замена не рекомендованному тегу 'i' – "italic") – форматирует текст курсивом, так же отмечая его важность для браузера;
Элемент 'ins' – "inserted" – отвечает за создание подчеркнутого текста;
Элемент 'sup' – "supertext" – отвечает за создание ^{надстрочного текста}, к примеру, для написания степеней умножения ( 2³ ) и прочих символов верхнего индекса;
Элемент 'sub' – "subscript" – отвечает за создание _{подстрочного текста} и прочих символов нижнего индекса;
Элемент 'del' – "deleted" – отвечает за создание ~~зачеркнутого текста~~;

Таблицы

Для рисования таблиц в HTML так же существует определенный набор тегов, которые подобно тегам списка структурируются каскадно.

Для начала перечислим эти элементы в порядке убывания важности:

Элемент 'thead' – table header (от англ. заголовок таблицы) – рекомендованный в HTML5 контейнер для помещения в него строки-заголовка таблицы. Является родительным элементом элемента 'th';
Элемент 'tbody' – table body (от англ. тело таблицы) – рекомендованный в HTML5 контейнер для помещения в него тела (остальной части) таблицы. Является родительным элементом всех элементов 'tr' и 'td', начиная с элемента 'tr'. Такие разделения на блоки-контейнеры для информации, как в случае с заголовком и телом таблицы, прежде всего, нужны для структуризации. То есть для того, чтобы другие разработчики, читая написанный код, четко видели разграничение по частям таблицы, которая в коде может быть весьма объёмной;
Элемент 'table' (от англ. таблица);
Элемент 'tr' – table row (от англ. строка таблицы);
Элемент 'td' – table data (от англ. данные таблицы);

Разновидность элемента 'td' – подэлемент 'th' – table header (от англ. заголовок таблицы). При необходимости он превращает верхнюю строку таблицы в титульную строку (заголовок таблицы). При этом текст в этой строке выравнивается по центру и выделяется жирным шрифтом. Является дочерним элементом элемента 'thead';

Далее приступим к наглядной демонстрации и создадим таблицу.

Имя	Возраст	Рост
Вася	18	176
Коля	16	179
Саша	21	190

Ссылки

За создание ссылок внутри вашей веб-страницы отвечает зеркальный тег <a> – он является одним из важнейших элементов HTML и предназначен для создания ссылок. У тега <a> есть два предназначения: первое непосредственно относится к созданию ссылки, чтобы перевести вас ну другую веб-страницу, второе же устанавливает якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы. К примеру, так устроено оглавление в на странице, которую вы сейчас читаете.
Простейшим способом создать ссылку якорного типа было бы задать id в теге той части страницы, куда необходимо переместиться, а в теге ссылки – прописать href="#указанный_id".

У тега <a>, разумеется, тоже есть набор атрибутов и их довольно много. Важнейшим из них является атрибут href, в значении которого указывается URL (Universal Resource Locator – универсальный указатель ресурсов). То есть в этот атрибут указывается адрес документа, на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта. Короче говоря, абсолютной ссылкой было бы то, если бы я сейчас указал здесь ссылку на сайт google.com, а относительной ссылкой то, если бы я указал здесь путь к другому .html файлу.
Ещё одним полезным атрибутом является атрибут target со значением _blank – атрибут с этим значением позволит вам открывать ссылку в новой вкладке.

Так же интересно и то, что ссылки для загрузки файлов – это всё те же самые теги <a>, только уже с атрибутом download.

Вот, попробуйте нажать, если хотите себе кота: СКАЧАТЬ!

*для справки: в HTML так же существует специальный тег 'button', который создает на странице кнопку. К этой кнопке затем можно привязать самые различные действия посредствам языка JavaScript, но в том числе и закреплять к ней ссылки.

Формы

Элемент 'form' (от англ. форма) – это тег создания блока форм, то есть полей ввода на web-странице. Использует в себе следующие теги:

Тег 'form' является "телом" формы;
Тег 'input' (от англ. ввод), создает непосредственно само поле ввода данных для пользователя, как, например, логин и/или пароль. Соответственно, тегов 'input' может быть столько, сколько нужно конечной форме;

*для справки: тег 'input' является самозакрывающимся, то есть для него не нужно второго закрывающего тега.

*для справки: чтобы прямоугольники полей ввода после прописывания тегов 'input' расположились один под другим, их можно дополнительно заключить в теги параграфов 'p'.

Между тегами 'form' и перед тегом 'input' можно размещать любой текст, указывающий на поле ввода. К примеру, можно подписать, что конкретно это поле ввода относится к вводу строки логина и/или пароля при регистрации на сайте.

Внимание! По нажатию на кнопку вы можете узнать о важных и полезных атрибутах тега <input>.

Вместе с тем тег 'input' может регулироваться дополнительными атрибутами, ему можно задавать типы:

Первый тип – это тип строки поиска – 'search'. Да, строка поиска тоже формируется через форму.
Второй тип текстовый – 'text'. В тег 'input' он включен по умолчанию и позволяет прописывать в нем текстовую информацию, например логины, электронные почты и прочее – любую текстовую информацию, необходимую для формы;
Третий тип предназначен для введения паролей и по-английски так и называется 'password'. Его особенность в том, что в поле ввода 'input' при прописывании этого типа, символы скрываются.
- Тип принимает в себя атрибуты 'minlength' и 'maxlength', чтобы указать минимальную и максимальную длину значения, которое может быть введено.
Следующий немаловажный тип для формы – это 'checkbox' – флажок или «чекбокс». Этот тип позволяет добавить возможность выбора одного или нескольких элементов в форме, например, при регистрации на сайте. К примеру, когда нужно выбрать несколько книг, которые вам нравятся.
- У 'checkbox' cледует использовать атрибут 'value' для определения значения, которое будет отдано этим элементом.
- Используйте атрибут 'checked', чтобы указать, должен ли флажок быть выставлен.
- Можно также использовать атрибут 'indeterminate', чтобы указать, что флажок находится в неопределённом состоянии (на большинстве платформ при этом рисуется горизонтальная линия поперёк флажка).
Следующий тип – это 'color' – элемент управления цветом. Создает выпадающий список, позволяющий еще больше расширить возможности регистрационной формы, выбрав, к примеру, любимый цвет.
Тип 'month' – элемент управления для ввода месяца и года без часового пояса.
Тип 'date' – элемент управления для ввода даты (год, месяц и день, без времени).
Тип 'datetime' – продвинутый элемент относительно предыдущего; элемент управления для ввода даты и времени (час, минута, секунда и доля секунды) в соответствии с часовым поясом UTC.
Тип 'datetime-local' – элемент управления для ввода даты и времени без часового пояса.
Тип 'email' – поле для редактирования адреса электронной почты. Перед отправкой проверяется, что входное значение содержит либо пустую строку, либо один действительный адрес электронной почты. Соответствуют CSS псевдоклассам :valid and :invalid.
Тип 'file' – элемент управления, который позволяет пользователю выбрать файл.
- Используйте атрибут 'accept', чтобы определить типы файлов, которые могут быть выбраны.
Тип 'hidden' – элемент управления, который не отображается, но чьё значение будет отправлено на сервер.
Тип 'image' добавляет кнопку вставки изображения. Для этого типа нужно использовать уже известный атрибут 'src', чтобы определить путь к изображению.
Тип 'radio' – это кнопка-переключатель, позволяющая выбрать одно значение из множественного выбора. К примеру, пол – мужской или женский.
- Для корректной работы типа 'radio', когда в списке есть несколько значений, из которых требуется выбрать один, типу 'radio' требуется дополнительно указывать атрибут 'name'. Это позволит создать список, внутри которого можно выбирать только одно значение из многих.
Тип 'submit' – кнопка отправки готовой формы.
И последний тип, который мы здесь опишем, это тип 'range'. Этот тип позволяет добавить на страницу ползунок выбора значений, подобно слайдеру для перемотки у окна видео или аудио-плеера. Этот тип в дальнейшем понадобится для его использования вместе с JavaScript для считывания из него данных и дальнейшей работы с ними.
Вместе с этой версией тега 'input' могу использоваться такие атрибуты как:
- 'min' – минимальное значение, предназначенное для установки ползунку минимального числового значения и считывания его в дальнейшем;
- 'max' – максимальное значение, предназначенное для установки ползунку максимального числового значения и считывания его в дальнейшем;
- 'step' – шаг ползунка между значениями, который будет отсчитывать установленное число;

*для справки: существует еще несколько типов, применимых к тегу 'input', о них можно почитать самостоятельно по ссылке.
Это ссылка на русскоязычный сайт HTM5Book, однако, я, как "айтишник", как и все остальные айтишники, не стану исключением, что для успешного обучения и работы в этой сфере вам необходимо знание английского языка.

Но и это еще не всё! Тег 'input' может регулироваться так же и дополнительными атрибутами такими как:

'placeholder' – у тега 'input' в типе 'text', 'password', 'email' и подобных, позволяет добавить непосредственно в саму область поля ввода некий текст. К примеру, подсказку, что именно в это поле необходимо ввести логин/пароль/e-mail и так далее.
'autofocus' – после загрузки web-страницы, атрибут позволяет "сфокусироваться" на нужном поле ввода, куда немедленно помещается курсор для ввода данных;
Атрибут 'pattern' – атрибут позволяет задать полю ввода необходимое (обязательное) количество символов, при не соблюдении которого форма не будет отправляться. Указывается как 'pattern = "[0-9]"', где принимается количество символов от нуля до девяти, соответственно. Используется, например, для полей ввода номеров телефона. Подробнее можно почитать на специальном HTML5Pattern, где очень подробно описаны самые различные паттерны;
Атрибут 'list' – элемент чем-то похож на тег 'select', однако позволяющий забирать для тега 'input' какие-либо значения с возможностью выбора предложенных.
- Работа атрибута 'list' в связке с тегом 'input' организуется посредствам дополнительной структуры данных с использованием тега 'datalist'. В этот тег, аналогично с тегом 'select', каскадно встраиваются теги 'option', в которые закладываются варианты выпадающего списка формата 'list'. Тегу 'datalist' обязательно присваивается 'id', к которому затем будет обращаться тег 'input' с атрибутом 'list'.

Далее приступим к наглядной демонстрации функционала атрибута 'list' на web-странице.

Введите один из цветов или выберите из предложенных:

Далее приступим к наглядной демонстрации функционала формы на web-странице.

*для справки: у полей ввода формы есть функционал для людей с ограниченными возможностями здоровья. Для слабовидящих или незрячих людей эта функция позволяет специальным программам правильно зачитывать содержимое формы, а для людей с ограниченными моторными функциями позволяет нажимать на любую область блока 'input', к примеру, на название поля ввода или прочие элементы, косвенно относящиеся к тому или иному полю ввода. За эту функцию отвечает зеркальный тег 'label' – в него, как в контейнер, помещается 'input'.

Отчасти к элементам заполнения формы (в некоторых случаях), можно отнести и элемент 'select'. Однако функционал этого элемента часто может быть за пределами одних лишь форм, поэтому опишем его далее. Этот элемент позволяет создавать выпадающие списки на web-странице и выбирать одну из предложенных опций, к примеру, язык, регион проживания и прочее.

Далее приступим к краткой демонстрации списка.

Выберите Ваш основной язык

Выберите страну происхождения

Выберите предпочитаемое гражданство

Видео, аудио и семантические элементы

Разумеется, на web-страницу нужно размещать не только текстовую информацию, но еще и мультимедийную. Для этого в HTML существуют специальные теги 'audio' и 'video'. И 'audio' и 'video' теги представляют из себя некий контейнер, внутри которого, посредствам тега 'source', где прописывается имя/путь к файлу и атрибута 'type' (= "video/'формат'"" или = "audio/'формат'"), к ним прикрепляется соответствующий аудио/видео файл.

*для справки: регулирование размеров окна вставляемого видео осуществляется посредствам атрибутов, прописываемых тегу 'video' и/или 'audio':

Атрибут 'width' задает окну видео необходимую длину;
Атрибут 'height' задает окну видео необходимую высоту;

Для добавления элементов управления вставленным видео в тег 'video' прописывается атрибут 'controls'.

В HTML5 есть специальные теги, позволяющие логически делить страницу на составные части, что удобно как при программировании, так и при чтении кода. По своей сути, эти элементы не отличаются от элемента 'div', как контейнера, но нужны для грамотной расстановки блоков информации.

Это такие элементы как:

Элемент 'article', то есть статья. Используется, соответственно, для помещения в него материалов статей;
Элемент 'header' – в него помещается верхний блок сайта, например, с меню навигации в верхней части и/или название сайта;
Элемент 'footer' – это самая нижняя часть сайта, в этот элемент помещается документация, справки обратная связь, адреса и прочая подобная информация;
Элемент 'section' – используется для разметки отделов внутри страницы;
Элемент 'nav' используется для разметки панели навигации;

*для справки: в HTML5 можно и самостоятельно создавать свои собственные теги. Для этого нужно использовать небольшой JavaScript код, строка которого будет выглядеть следующим образом:

<script type="text/javascript">document.createElement("название_своего_тега")</script>

На этом наше краткое путешествие по огромному миру языка HTML5 подошло к концу. Если вы хотите подробнее рассмотреть язык, вы можете воспользоваться сайтами (очень рекомендую), или . При этом вы не обязаны читать подробности конкретно на каждом из выбранных сайтов. Гораздо более простой и эффективный вариант – воспользоваться Гуглом, спросив у него интересующую вас тему.

Ну а теперь мы можем перейти ко второму, не менее интересному и объемному языку стилей – CSS. Для перехода на страницу посвященную CSS, вы можете воспользоваться кнопкой или меню навигации в верхней части страницы.

Оглавление