HTML5. Подгружаемое и генерируемое содержимое. Семантическая разметка

Показывать лекцию целиком

Монолитные и блочные Web-страницы

Общепринятые правила построения веб – сайтов предполагают, что часть содержимого веб – страниц остается неизменной (панель навигации, к примеру).

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

Страницы, HTML – код которых определяет все содержимое веб – страницы называют монолитными.

Монолитные веб – страницы загружаются на компьютер пользователя целиком.

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

Альтернативным подходом к построению веб – страниц является подгружаемое содержимое. Иными словами, загружаются только те части веб – страницы, контент которых изменился. Такие страницы называются блочными.

Рассмотрим один из способов организации подгружаемого содержимого – элемент <iframe>.

<iframe>

Тег <iframe> создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые HTML - документы.

Тег <iframe> является контейнером, содержание которого игнорируется браузерами, не поддерживающими данный тег. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между элементами <iframe> и </iframe>.

<iframe> содержит следующие атрибуты:

align - определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом. Может принимать следующие значения:

absmiddle - выравнивание середины фрейма по середине текущей строки;

baseline - выравнивание фрейма по базовой линии текущей строки.;

bottom - выравнивание нижней границы фрейма по окружающему тексту;

left - выравнивание фрейма по левому краю окна;

middle - выравнивание середины фрейма по базовой линии текущей строки;

right - выравнивание фрейма по правому краю окна;

texttop - верхняя граница фрейма выравнивается по самому высокому текстовому элементу текущей строки;

top - верхняя граница фрейма выравнивается по самому высокому элементу текущей строки.

allowtransparency - устанавливает прозрачный фон фрейма, через который виден фон страницы;

frameborder – определяет, отображать ли границу вокруг фрейма или нет. Может принимать одно из двух значений:

yes (1) – отображать границу;

no (0) – не отображать границу.

height – задает высоту фрейма;

hspace – задает величину горизонтального отступа от фрейма до окружающего контента. Значения задаются в виде целых положительных чисел;

marginheight – задает величину отступа сверху и снизу от содержания до границы фрейма;

marginwidth – задает величину отступа слева и справа от содержания до границы фрейма. Значения задаются в виде целых положительных чисел;

name – определяет имя фрейма;

sandbox - позволяет задать ряд ограничений на контент загружаемый во фрейме. Может принимать следующие значения:

allow-same-origin - разрешает загружать содержание фрейма, воспринимая его из того же источника, что и родительский документ. Может использоваться для безопасного открытия контента, блокируя при этом всплывающие окна;

allow-top-navigation - позволяет открывать ссылки фрейма в родительском документе;

allow-forms - позволяет содержимому фрейма отправлять формы;

allow-scripts - разрешает запуск и выполнение скриптов. Создание всплывающих окон при этом запрещено.

scrolling – задает способ отображения полосы прокрутки во фрейме. Может принимать одно из трех следующих значений:

auto – отображать полосы прокрутки, в случае если размеры контента превышают размеры элемента;

no – не отображать полосы прокрутки;

yes – отображать полосы прокрутки.

seamless - определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа;

src – определяет путь к файлу, содержимое которого будет загружаться во фрейм;

srcdoc - xранит содержимое фрейма непосредственно в атрибуте;

vspace – задает величину вертикального отступа от фрейма до окружающего контента;

width – задает ширину фрейма.

Пример, добавления <iframe> на страницу:

<iframe src="banner.html" width="468" height="60" align="left">
    Данная версия браузера не поддерживает iframe.
 </iframe>

Более детально пример реализации подгружаемого содержимого веб – страницы будет рассмотрен в рамках практического занятия №1.

Генерируемое содержимое

Генерируемое содержимое Web-страницы — это содержимое, которое не описывается в HTML-коде, а создается программно, особым Web-сценарием. Содержимое может генерироваться как при открытии Web-страницы, так и в процессе ее просмотра, в ответ на действия посетителя.

У генерируемого содержимого есть два существенных преимущества:

сокращение размера HTML-кода Web-страниц.

унификация данных.

Рассмотрим небольшой пример организации генерируемого содержимого. Опишем JavaScript - функции для формирования списка и группы ссылок.

Список будет формироваться на основе следующего массива:

     var items = ["listItem1","listItem2","listItem3","listItem4","listItem5","listItem6","listItem7"];

Массив содержит строки - элементы списка. На самой HTML - странице размещен тег <ol id="list">, для того, чтобы добавить элементы в список, необходимо:

программно создать элемент <li>;

добавить созданному элементу HTML - код содержимого;

добавить элемент в список.

Программно это будет выглядеть следующим образом:

var list = document.getElementById("list");
for (var i = 0; i< items.length; i++)
  {
    var listItem = document.createElement("li");
    listItem.innerHTML = items[i];
    list.appendChild(listItem);
  }

Таким образом при вызове функции сформируется содержимое списка с id="list".

Сформировать группу ссылок немногим сложнее, поскольку помимо текста ссылки, элемент <a> должен содержать адрес перехода. Для этого нам понадобится массив следующего вида:

  var links = [];
  links[0] = {name: "first", href: "document1.html"};
  links[1] = {name: "second", href: "document2.html"};
  links[2] = {name: "third", href: "document3.html"};
  links[3] = {name: "fourth", href: "document4.html"};

На HTML - странице определен контейнер <div id="navigation">. Последовательность добавления ссылки в контейнер выглядит так:

программное создание элемента <a>;

задание текста ссылки;

задание значения атрибута href;

добавление ссылки в контейнер.

Следующий код иллюстрирует программную реализацию указанной последовательности действий:

var nav = document.getElementById("navigation");
    for(var j = 0; j<links.length; j++)
  {
    var linkItem = document.createElement("a");
    linkItem.innerText = links[j].name+"    ";
    linkItem.setAttribute('href', links[j].href);
    nav.appendChild(linkItem);
  }

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

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

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

Семантика, как научная дисциплина, изучает значение единиц языка. В IT под семантикой понимается формализация конструкций языков программирования.

Попробуем разобраться в том, что же это значит уже в контексте HTML и веб - разработки.

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

В HTML5 предусмотрен ряд тегов, позволяющих явно указать что тот, или иной контент относится к определенной части веб - страницы, либо указывающих на то, чем контент является (цитата, время и дата и т.п.).

Очевидно, что "потребителями" подобной разметки являются не пользователи сайтов, ведь тегов они не видят. Суть семантической разметки – упрощение машинной обработки содержимого сайтов, к примеру, для лучшего "понимания" сайта поисковыми роботами.

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

Повышается доступность, т.к. страницы сайта не потеряют своей структуры даже при отключенном или неподдерживаемом CSS.

Контент страниц сайта будет понятен для людей, читающих сайты с помощью специальных программ для чтения с экрана.

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

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

Уменьшается вес страниц сайта, повышается читабельность кода сайта за счет его компактности, увеличивается скорость загрузки страниц сайта.

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

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

Тег	Описание
`a`	предназначен для создания cсылки или якоря
`abbr`	указывает, что содержимое тега является аббревиатурой
`acronym`	указывает, что содержимое тега является акронимом (разновидность аббревиатуры, которая произносится не по буквам, а слитно, как одно слово)
`address`	содержит информацию об авторе
`area`	применяется внутри контейнера `<map>` для создания карты-изображения. Определяет параметры активных зон-ссылок на карте
`base`	указывает полный базовый адрес документа. Применяется для составления относительных адресов и для указания целевого окна всех ссылок страницы
`bdo`	устанавливает направление вывода текста (справа налево, слева направо)
`blockquote`	выделяет цитату (как правило длинную). Отображается с увеличенным отступом
`body`	определяет границы тела документа. Внутри тега располагаются все элементы, отвечающие за содержание HTML-страницы
`button`	создает на форме кнопку
`caption`	создает заголовок таблицы. Отображается над таблицей вне рамки. Элемент таблицы
`cite`	используется, чтобы указать источник цитаты или ее автора. Как правило, оформляется курсивом
`code`	обозначает текст, как код программы или формулу
`col`	позволяет задать общие свойства сразу для всего столбца таблицы
`colgroup`	позволяет задать общие свойства сразу для нескольких столбцов таблицы
`dd`	используется при создании списка определений вместе `с <dl>` и `<dt>`. Задает определение термина
`del`	обозначает текст, как удаленный. Может выступать как строчный или как блочный элемент в зависимости от контекста
`dfn`	выделяет в тексте термин
`div`	выделяет логический блок. Один из основных элементов блочной верстки
`dl`	используется при создании списка определений вместе с `<dt>` и `<dd>`
`dt`	используется при создании списка определений вместе с `<dl>` и `<dd>`
`em`	используется для акцентирования внимания
`fieldset`	предназначен для группировки элементов формы
`form`	создает форму на странице. Форма применяется для обмена данными между пользователями и сервером
`h1, h2, h3, h4, h5, h6`	используются для создания заголовков
`head`	заголовок документа, содержит информацию о текущем документе
`html`	тег-контейнер, заключающий в себе все содержимое страницы, кроме `doctype`, который должен быть расположен перед тегом `<html>`
`img`	добавляет на страницу изображение
`input`	позволяет создавать элементы интерфейса: кнопки, текстовые поля, переключатели и флажки. Основной метод получения информации от пользователя (читателя) базируется на этом теге
`ins`	обозначает текст, добавленный в новой версии документа. Может выступать как строчный или как блочный элемент в зависимости от контекста
`kbd`	обозначает текст набираемый на клавиатуре или сочетания клавиш
`label`	позволяет связать элемент интерфейса на форме с текстовой надписью и задать горячие клавиши
`legend`	определяет заголовок для элементов форм, сгруппированных в контейнере тега `<fieldset>`
`li`	создает элемент списка
`link`	устанавливает связь с внешними документами, чаще всего с таблицами стилей
`map`	тег-контейнер для создания карты-изображений
`meta`	содержит метаданные - техническое описание документа в виде пар "имя-значение". Служит для идентификации свойств документа (например, автора, конечной даты использования, списка ключевых слов и т.д.) и установки значений этих свойств
`noscript`	содержит текст, который выводится браузером
`object`	используется для внедрения на страницу различных объектов (как правило медиафайлов)
`ol`	создает нумерованный список
`optgroup`	тег-контейнер для тегов `<option>`. Объединяет их в группу
`option`	задает отдельную строку списка в теге `<select>`
`p`	предназначен для создания абзацев
`pre`	определяет предварительно отформатированный фрагмент текста. Выводится с соблюдением всех пробелов и переводов строки
`q`	выделяет в тексте цитату
`samp`	обозначает текст, как код программы или формулу
`script`	добавляет на страницу скрипт
`select`	создает элемент выбора значений
`span`	используется в основном для оформления и/или назначения уникального идентификатора (`id`) определенному фрагменту текста
`strong`	логически выделяет, усиливает текст.
`style`	задает таблицу стилей
`table`	определяет таблицу
`tbody`	применяется для группировки строк, с целью задать общее форматирование
`td`	задает ячейку таблицы
`textarea`	определяет многострочное поле для ввода.
`tfoot`	применяется для определения строки, которая будет отображаться внизу таблицы
`th`	определяет ячейку-заголовок таблицы
`thead`	применяется для определения строки/строк, которые будут отображаться вверху таблицы
`title`	определяет заголовок документа
`tr`	определяет строку таблицы
`ul`	создает маркированный список
`var`	обозначает имя переменной

Нами приведен не полный список семантических тегов, более того этот список вряд ли когда - нибудь будет полным, к примеру можно вспомнить о микроформатах (см. список материалов для самостоятельного изучения).

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

Ключевые термины и определения

Подгружаемое содержимое – содержимое, загружаемое в определенный раздел веб - страницы, при возникновении необходимости в его отображении.

Генерируемое содержимое – содержимое веб - страниц, явно не прописанное в HTML - коде, как правило, формируется с помощью веб-сценариев.

Семантическая разметка – разметка HTML - документа с правильным использованием тегов, образом определенным в стандартах языка.

Краткие итоги

Данная лекция направлена на ознакомление с рядом понятий, без которых современная веб - разработка не обходится. Мы лишь частично затронули объемные темы, чтобы внести ясность.

Итак, подведем краткий итог и повторим то, что необходимо вынести из лекции.

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

Далеко не всегда все содержимое веб - страницы определено и известно заранее. Более того, если вспомнить вступительную лекцию, то понятно что только веб - решение, предоставляющее пользователям возможность формировать контент можно отнести к Web 2.0. Т.е. содержимое веб - страницы может быть сгенерировано посредством веб - сценариев, использования различных способов хранения данных и т.п.

Семантическая верстка – это не требование, а только рекомендация. С распространением инструментов анализа веб - ресурсов (а это тоже уже давно отдельное научное направление) будет возрастать и значимость семантической разметки.