Theory and Tasks for Students - Spring 2019
Введение в HTML

HTML (HyperText Markup Language) - язык форматирования текста, является подмножеством языка XML (eXtensible Markup Language). XML состоит из тегов, определяющих объекты, например: <Person FirstName="John" SecondName="Doe"> <PreferredSearchEngines> <SearchEngine>Google</SearchEngine> <SearchEngine>Yandex</SearchEngine> <SearchEngine>Bing</SearchEngine> </PreferredSearchEngines> <Photo FilePath="/home/jdoe/photo.jpg"/> </Person> FirstName является атрибутом, теги бывают как с закрывающим тегом, так и одиночные. Таким образом, можно описать любые данные в виде текста, однако это не является достаточно удобным представлением для человека. Язык HTML определил список конкретных тегов, их семантику (смысловую нагрузку) и варианты отображения их содержания. Задачей было создать такие объекты, которые позволяли бы легко форматировать текст как статью, например, как в документе Microsoft Word.

Структура HTML документа и основные теги

В начале HTML документа идёт тег, определяющий версию спецификации HTML, по которой он написан. Затем идёт сам тег документа, который делится на две части:

  • <head> - "голова" документа, содержит в себе мета-данные, ссылки на скрипты, стили и т.д. - его содержание не отображается на самой странице;
  • <body> - "тело" документа, содержит в себе код самой страницы.

<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

Здесь и далее одиночные теги будут писаться со знаком слэш / в конце для различия - в HTML этот символ писать не обязательно. Также важно понимать, что каждый тег может содержать любые другие теги и/или текст, если явно не сказано иначе. Кроме того, как правило, все пробельные символы(пробелы, табуляция, переводы строк) сжимаются веб-клиентами в один пробел, поэтому форматировать код документа стоит только из соображения удобства разработки.
теги, используемые в <head>:

  • <title> - название веб-страницы, обычно отображается в заголовке окна браузера;
  • <meta/> - универсальный тег мета-данных;
  • <link/> - подключает к документу другие файлы, например, таблицы стилей;
  • <script> - подключает к документу скрипты JavaScript или содержит код этих скриптов;
  • <style> - содержит в себе часть таблицы стилей.

Некоторые теги, используемые в <body>:

  • <div> - базовый блочный элемент, блочные элементы обычно располагаются друг под другом;
  • <span> - базовый строчный элемент, строчные элемент ведут себя как текст и располагаются друг за другом в строку;
    • id - атрибут, применимый к любому тегу, определяет уникальный идентификатор этого элемента, слова в названии идентификатора обычно разделяются подчёркиванием, например id="js_form_submit";
    • class - атрибут, применимый к любому тегу, определяет список классов элемента, несколько классов указываются через пробел, слова в названии обычно разделяются минусом, например class="nav-link active";
  • <p> - Paragraph, блочный, представляет собой параграф текста;
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> - Header, блочные, 6 уровней заголовков, 1 уровень - самый крупный, располагаются вне параграфов;
  • <br/> - line BReak, строчный, используется в текстах как перевод строки;
  • <pre> - PREformatted text, блочный, отображает содержание, сохраняя исходное форматирование с помощью пробельных символов, обычно текст отображается моноширинным шрифтом;
  • <strong> - строчный, выделяет текст как важный, обычно отображается жирным шрифтом;
  • <em> - EMphasis, строчный, отмечает необходимость выделить текст, например, интонацией(аудио-веб-клиенты), обычно отображается курсивом;
  • <sub> - SUBscript, строчный, используется для указания текста как нижнего индекса, отображается как уменьшенный текст ниже базовой линии шрифта;
  • <sup> - SUPerscript, строчный, используется для указания текста как верхнего индекса, отображается как уменьшенный текст выше базовой линии шрифта;
  • <a> - Address, строчный, представляет собой ссылку. Атрибуты:
    • href - Hyper REFerence, адрес ссылки;
    • target - значение _blank сообщит браузеру о том, что ссылку стоит открыть в новом окне/вкладке.
  • <img/> - IMaGe, строчный, представляет собой картинку. Атрибуты:
    • src - SouRCe, прямая ссылка на картинку;
    • alt - ALTernative, текст, отображаемые в случае, если картинку нельзя загрузить/отобразить (неверная ссылка, текстовый браузер);
    • width - задаёт ширину картинки в пикселях, пытаясь сохранить соотношение сторон;
    • height - задаёт высоту картинки в пикселях, пытаясь сохранить соотношение сторон.

  • <ul> - Unordered List, блочный, представляет собой контейнер списка, элементы не имеют нумерацию, может содержать только элементы <li>;
  • <ol> - Ordered List, блочный, представляет собой контейнер списка, элементы пронумерованы, может содержать только элементы <li>;
    • <li> - List Item, блочный, представляет собой контейнер элемента списка, может содержаться только в элементах <ul> и <ol>;

  • <table> - блочный, представляет собой контейнер табличных данных;
    • <caption> - блочный, представляет собой название таблицы, может встречаться только один раз в таблице, должен быть первым элементом таблицы, использовать не обязательно;
    • <thead> - контейнер строк, располагаемых вверху таблицы вне зависимости от позиции в коде, может встречаться только 1 раз, использовать не обязательно;
    • <tbody> - контейнер строк, может встречаться несколько раз в одной таблице, использовать не обязательно;
    • <tfoot> - контейнер строк, располагаемых внизу таблицы вне зависимости от позиции в коде, может встречаться только 1 раз, использовать не обязательно;
      • <tr> - Table Row, контейнер строки ячеек таблицы, может находиться как в <thead>, <tbody> и <tfoot>, прямо внутри <table>, если предыдущие 3 не используются;
        • <th> - Table Heading, контейнер заголовочной ячейки таблицы;
        • <td> - Table Data, контейнер ячейки таблицы с данными.