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.