Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17542 / 1636 | Оценка: 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.

Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

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

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Татьяна Бобошко
Татьяна Бобошко
Россия
Роман Васильев
Роман Васильев
Россия