Введение в язык разметки HTML

Андрей Васильев

2020

Архитектура веб-приложения

Веб-приложение — распределённая система, использующая ресурсы двух приложений: веб-браузер и веб-сервер

Сервер ждёт подключения со стороны клиентов и одновременно обслуживает множество клиентов
Браузер получает документы с сервера и отображает их пользователю, обрабатывает действия пользователя

Современные браузеры поддерживают следующие документы:

HTML-документы с текстовой информацией
CSS-документы с описанием стилей
Мультимедиа-документы: изображения, видео и аудио
JavaScript-документы с исполняемым кодом

Основные задачи разработки веб-приложения

Выделим следующие ключевые задачи, которые необходимо решить при разработке веб-приложения

Спроектировать список запросов для обработки веб-сервером
Реализовать логику обработки запросов на веб-сервере
Сформировать HTML-документы для представления информации пользователям и выполнения запросов к серверу
Сформировать CSS-стили для качественного отображения информации в формируемых документах
Реализовать логику обработки действий пользователя на стороне браузера с помощью языка JavaScript

В рамках курса мы не будем:

Формировать собственные CSS-стили, будем использовать CSS-фреймворк
Самостоятельно писать код на языке JavaScript, вся логика должна быть реализована на серверной части.

Язык HTML

HTML — Hyper Text Markup Language, язык разметки гипертекстовых документов

Данный язык является стандартом для представления структурированной текстовой и мультимедийной информации

Документы на языке HTML являются текстовыми, их можно формировать в обычном текстовом редакторе
Ключевая особенность — возможность ссылаться на другие документы удобным для пользователя образом
Язык достаточно простой, что позволяет его читать людям и обрабатывать программно
Документ представляет собою иерархическую структуру из узлов, которую можно представить в виде дерева

Описание элементов с помощью тегов

Для описания элементов используется специальная нотация

<div>Короны есть не только у вирусов</div>

Тегом называется текст, состоящий из имени элемента, находящегося между символами < и >
Описание элемента начинается с открывающего тега, <div>
Описание элемента завершается с закрывающим тегом, который начинается со строки </, </div>
Текст между открывающим и закрывающим тегом, называется содержимым элемента
В зависимости от типа элемента способ отображения информации будет различный

Иерархия элементов

HTML-документ представляет собою иерархию элементов, рассмотрим пример

<div>
  <p>Песня</p>
  <ul>
    <li>Текст</li>
    <li>Музыка</li>
  </ul>
</div>

Корневым элементом в примере является div, всё остальное является его содержимым
Прямыми детьми элемента div выступают элементы ul и p
Элемент p содержит только текст
Элемент ul содержит 2 тега li, причём порядок их появления в тексте важен
Элементы li содержат только текст
Обычно используется 2 пробела для указания вложенности элементов, хотя отступы не играют роли в языке

Некорректное вложение элементов

При описании HTML-узлов необходимо следить за корректностью вложенности

Корректное вложение:

<p>Мой кот <strong>очень</strong> пушистый.</p>

Некорректное вложение:

<p>Мой кот <strong>очень пушистый.</p></strong>

Закрывающий тег </strong> идёт после тега </p>

Большинство веб-браузеров смогут обработать некорректный код, но при этом могут делать это по-разному

Комментарии в HTML-документе

Все элементы, которые мы помещаем в HTML-документ, предназначены для отображения информации пользователю

Для добавления информации для других разработчиков можно использовать комментарии

Комментарии начинаются с последовательности <!--

Комментарии заканчивается последовательностью --->

Пример комментария:

<!-- Это просто текстовый комментарий --->
<!-- <p> Тут тоже комментарий </p> --->

Блоковые и строчные элементы

Блоковые элементы

Формируют видимый блоковый элемент на странице

Показываются с новой строки относительно предыдущего блока
Следующие блоковые элементы тоже начинаются с новой строки
Обычно к ним относятся структурные элементы страницы: параграфы, списки, навигационное меню
Могут быть вложены друг в друга

Строчные элементы

Формируют описание для внутренней части блока

Описывают часть внутреннего содержимого блока
Обычно служат для описания ссылок на другие страницы, а также придания формата текстовому содержимому

Атрибуты элементов

У каждого элемента помимо его содержимого можно указать также и атрибуты, которые поясняют его поведение

<table>
  <tr> <!-- Первая строка --->
    <td colspan="2">Ячейка на 2 стоблца</td>
  </tr>
  <tr> <!-- Вторая строка --->
    <td>Первый</td> <td>Второй</td>
  </tr>
</table>

Атрибуты описываются в открывающем теге
Для описания атрибута используется формат имя="значение", атрибуты разделяются пробелами
Значение атрибута надо помещать в двойные кавычки
Бывают атрибуты без значения, достаточно указать имя

Описание значения атрибутов

По умолчанию следует использовать двойные кавычки для описания значения атрибута

Можно вообще без кавычек, но это трудно воспринимать
Пробелы являются разделителями атрибутов
Потенциально можно использовать одинарные кавычки, но это не принято и может привести к проблеме смешивания кавычек

<a href="http://www.example.com'>
  A link to my example.</a>

Следите, чтобы внутри значения не встречались кавычки

<a href='http://www.example.com'
  title='Isn't this fun?'>
  A link to my example.</a>

Глобальные атрибуты

Данные атрибуты могут быть установлены для любого элемента документа

class — имя класса из таблицы стилей для элемента
contenteditable — определяет можно ли редактировать содержимого данного элемента
hidden — должен ли данный элемент быть скрыт или нет
id — определяет идентификатор элемента на странице, должен быть уникальным для страницы
lang — определяет код содержимого в элементе
style — содержит определение CSS-стилей для данного элемента
title — определяет дополнительную подсказку об элементе для всплывающей подсказке

Элементы без текстового содержимого

Некоторые элементы HTML-документов не имеют текстового содержимого. Для их описания достаточно указать только лишь открывающий тег и необходимые атрибуты

<img src="images/firefox-icon.png"
  alt="My test image">

img — элемент для отображения изображения на странице
src — атрибут содержит ссылку на источник изображения, которое надо отобразить
alt — атрибут содержит текст, описывающий изображение, который используется если изображение не загрузилось и для обеспечения доступности
Закрывающий тег не нужен

Пробелы в HTML-документы

По умолчанию при обработке документов все подряд непечатные символы заменяются на 1 пробела

Следующие выражения являются идентичными:

<p>Собаки очень весёлые</p>

<p>Собаки              очень
                 весёлые</p>

Таким образом мы можем свободно форматировать документ, чтобы его структуру было удобно воспринимать

Вложенные элементы имеют отступы в 2 пробела
Если содержимое элемента достаточно большое, то можно оставлять 1 строку под открывающий тег

Структура HTML-документа

<!DOCTYPE html> <!-- Версия HTML-спецификации --->
<html>
  <head>
    <!-- Метаинформация о документе --->
  </head>
  <body>
    <!-- Содержимое документа --->
  </body>
</html>

html является обязательным корневым элементом документа
head содержит информацию о содержимом: какой язык использован, какая кодировка у документа, откуда подгружать стилевые файлы
body включает собственно содержимое документа, которое отображается пользователю

Содержимое заголовка

Заголовок содержит описание содержимого документа

Кодировка символов в документе:
```
<meta charset="utf-8">
```
Заголовок для отображения в браузере:
```
<title>Котики</title>
```

Автор документа:

<meta name="author" content="Mikhail Markov">

Содержимое заголовка. Продолжение

Краткое описание документа:

<meta name="description" content="Котики в природе">

Иконка для отображения во вкладке браузера:
```
<link rel="shortcut icon" href="favicon.ico"
  type="image/x-icon">
```

Подключение внешних ресурсов

Заголовок приходит в браузер первым, поэтому важно размещать ссылки на другие важные документы в заголовке, чтобы браузер мог их начать скачивать

CSS-документы описывают стили, которые можно применять к различным элементам
```
<link rel="stylesheet" href="my-css-file.css">
```
JavaScript-документы содержат динамический код для выполнения на стороне браузера
```
<script src="my-js-file.js"></script>
```

Первые надо размещать в заголовке, а JS-код в конце

rel описывает тип ссылки, обязательно stylesheet
href содержит ссылку на внешний документ

Указание языка документа

Тегу html следует указать язык документа, так как это облегчает работу поисковых систем и систем помощи людям с ограниченными возможностями

Язык указывается в качестве значения тега lang:

<html lang="ru">

Если у вас в документе несколько языков, то соответствующие блоки можно разметить с помощью элемента span:

<p>
  Пример английского:
  <span lang="en-US">The cats are cool</span>.
</p>

Формирование содержимого документа

Содержимое документа находится внутри элемента body

Язык HTML предлагает набор из различных элементов, которые позволяют структурировать информацию на странице

Базовым элементом документа является параграф, p
Есть шесть уровней заголовков: h1, h2, h3, h4, h5, h6
Каждый из этих элементов блоковый

<h1>Документ о котиках</h1>
<p>Котики очень важны!</p>
<h2>Котики: начало</h2>
<p>Котики пушистые</p>
<h2>Котики: продолжение</h2>
<h3>Котолапки</h3>
<p>У котолапок есть когти</p>

Предложения по структурированию

Желательно использовать 1 заголовок первого уровня
Далее информацию следует группировать в подзаголовках
h3 должно следовать за h2, а не наоборот
Следует использовать не более четырёх видов заголовков на одной странице, а лучше всего три

Кому нужны заголовки

Пользователям удобнее ориентироваться в структурированной информации, а не в длинных текстах
Поисковым движкам легче извлекать важные данные
Обеспечения доступа для людей с ограниченными возможностями
Заголовки можно красиво стилизовать

Списки

Ненумерованный список

Список описывается элементом ul
Отдельный элемент списка описывается элементом li

<h1>Мои покупки</h1>
<ul>
  <li>Молоко</li>
  <li>Яйца</li>
  <li>Хлеб</li>
  <li>Сыр</li>
</ul>

Нумерованный список

Список описывается элементом ol
Отдельный элемент списка описывается элементом li

<h1>Мои котики</h1>
<ol>
  <li>Пёстрый</li>
  <li>Рыжик</li>
  <li>Кусак</li>
  <li>Белый</li>
</ol>

Внутри содержимого элемента списка может находится другой список, эффективно делая его вложенным

Выделение текста

При написании очень длинного текста, зачастую необходимо выделять различные части текста, чтобы читающий мог понять что в тексте важно, а что нет

Для выделения текста можно использовать строчный элемент em, сокращение от emphasis:
```
<p>Я <em>рад</em>, что вы не <em>опоздали</em></p>
```
Для выделения текста жирным используется строчный элемент strong:
```
<p>Данная житкость <strong>очень токсичная</strong></p>
```

Форматирование текста

В WYSWYG текстовых редакторах есть возможность указывать атрибуты текста: наклон, жирность, подчёркивание

В старых HTML-стандартах определены элементы i, b, u, которые по названию позволяют форматировать текст

В настоящий момент для оформления текста надо использовать CSS-стили

Если же хотите использовать данные элементы, то следует придерживаться следующих правил:

i следует использовать для оформления иностранных слов, терминов, цитату и т.д.
b следует использовать для оформления ключевых слов, названий продуктов, вводных предложений
u зачастую использовать вообще не стоит, даже в печатных изданиях

Ссылки на другие ресурсы

При описании HTML-документа необходимо ссылаться на другие документы по их единому указателю ресурса, URL

При формировании ссылок для пользователя
Для указания местоположения CSS таблиц
Для подключения исполняемых JS-файлов
Для указания пути к мультимедиа объектам

Элемент `a`

Для создания гиперссылки для пользователя используется элемент a: <a href="https://ya.ru">Поиск</a>

href содержит в себе ссылку на другой ресурс
Текстовое содержимое показывается пользователю

Дополнительные возможности `a`

title предоставляет дополнительную информацию, которая будет показана пользователю при наведении на ссылку

<p>Создаём ссылку
  <a href="https://developer.mozilla.org"
     title="Информация для веб-разработчиков"
  >Mozilla developer network</a>
</p>

По возможности размещайте данную информацию в тексте, чтобы она была доступна на всех устройствах
Элемент a может включать в себя блоковые элементы, в том числе и изображения

<a href="https://www.mozilla.org/ru/">
  <img src="mozilla-image.png"
   alt="Логотип Mozilla">
</a>

Формирование путей к документам

Как и при работе с файловой системой можно формировать либо полные пути, либо относительные пути

Полный путь начинается либо с указания схемы доступа, https:/, file:/, либо с /
Относительный путь высчитывается с «каталога», в котором находится текущий ресурс

Рассмотрим следующую структуру файлов

.
├── css
│   └── style.css
├── data.html
├── img
│   ├── cat.png
│   └── dog.gif
└── index.html

Относительные ссылки в файле index.html

<!--- Ссылка на data.html --->
<a href="data.html">...
<!--- Отображаем картинки --->
<img src="img/cat.png">
<!--- Подключаем стили --->
<link rel="stylesheet"
    href="css/style.css">

Практики по формированию путей

По возможности используйте относительные пути
- При развёртывании на файловой системе рекомендуется использовать относительные пути
- При работе с веб-сервером браузеру не нужно выполнять DNS-запросы

Текст ссылки должен хорошо описывать ссылку

<a href="https://ya.ru">
  Поискать интересного в интернете</a>
<a href="https://ya.ru">
  Нажмите на ссылку
</a>, чтобы поискать в интернете

Не добавляйте URL в текст ссылки
Ссылки должны состоять из пары-тройки слов
Используйте уникальный текст для каждой ссылки

Пути к специальным документам

Если по нажатию на ссылку пользователю необходимо скачать большой объём данных или требуется специальная технология, то пользователю необходимо сообщить об этом

<p><a href="http://www.example.com/report.pdf">
  Скачать большой отчёт (PDF, 10MB)
</a></p>

<p><a href="http://www.example.com/video-stream/"
      target="_blank">
  Посмотреть видео (поток, отдельная вкладка)
</a></p>

<p><a href="http://www.example.com/car-game">
  Играть в гонки (требует WASM)
</a></p>

Семантическая разметка документа

Ранее рассмотренные элементы структуры могут оказаться в различных частях страницы и нести разную смысловую нагрузку

Заглавие, обычно изображение или общие данные для всех страниц, принадлежащих одному сайту
Навигационная панель, также общий элемент между страницами, позволяющий передвигаться между ними
Содержимое страницы, обычно центральная часть страницы, предоставляющая ключевую информацию
Боковая панель, содержит дополнительную информацию, рекламу и т.д.
Нижний колонтитул, обычно общий для всех страниц, содержит информацию о лицензии, дополнительные ссылки

Элементы семантической разметки

<body>
  <header>Заголовок страницы</header>
  <nav>Навигация внутри страницы</nav>
  <main>Основное содержимое
    <article>Статья №1
      <header>Заголовок статьи</header>
      <section>Секция 1 статьи 1
        <header>Заголовок секции</header>
        <p>Содержимое</p>
      </section>
    </article>
    <aside>Боковая панель</aside>
  </main>
  <footer>Содержимое нижнего колонтитула</footer>
</body>