Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 19801 / 2044 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Лекция 15:

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

Аннотация: Монолитные и блочные веб – страницы. <iframe>. Генерируемое содержимое. Семантическая разметка.

Монолитные и блочные 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.

Галина Башкирова
Галина Башкирова

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

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Константин Моренко
Константин Моренко
Таня Михайлова
Таня Михайлова
Россия
Игорь Хан
Игорь Хан
Узбекистан, Ташкент, Ташкентский педагогический институт иностранных языков, 1990