Опубликован: 01.08.2012 | Уровень: для всех | Доступ: платный | ВУЗ: Томский политехнический университет
Лекция 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.

Сергей Крупко
Сергей Крупко

Добрый день.

Я сейчас прохожу курс  повышения квалификации  - "Профессиональное веб-программирование". Мне нужно получить диплом по этому курсу. Я так полагаю нужно его оплатить чтобы получить диплом о повышении квалификации. Как мне оплатить этот курс?

 

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

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

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

 

Алексей Бегунов
Алексей Бегунов
Беларусь
Виктор Лабутин
Виктор Лабутин
Россия