HTML фреймы

Не так давно фреймы использовались в качестве навигации по сайту, когда навигационная страница располагалась в одном окне, а страницы с контентом, располагались в других документах. В настоящее время использование фреймов на страницах сайтов можно встретить все реже, это как правило, какие-то примеры кода с "песочниц" (выделенная среда для исполнения компьютерного кода), участки Google Maps (необходимо задавать адрес в такой форме: https://maps.google.com?output=embed), либо видео, размещенное с видео хостинга YouTube.

Тег <iframe> (HTML Inline Frame Element) определяет встроенную в веб-страницу область, которая может отображать содержимое отдельно взятого документа (например, *.pdf), медиа-контента или другого веб-сайта в заданном пространстве. Содержимое внутри области существует независимо от окружающей страницы.

Синтаксис для добавления фрейма:

<iframe src = "URL"> </iframe>, где src атрибут, который определяет местоположение документа или веб-сайта.

Обращаю Ваше внимание, на то что некоторые сайты, например такие как поисковые системы, блокируют возможность размещения страницы сайта во фреймах, либо осуществляют переход по таймеру на свою «реальную» страницу.


В следующем примере мы возьмем в качестве загрузки во фрейм отличный сайт - TinyPng.com, который предоставляет возможность сжимать изображения, предназначенные к загрузке на Ваш сайт. Как правило, удаётся уменьшить размер изображений на 50%, а то и больше, что значительно уменьшает их объем, экономит дисковое пространство и увеличивает скорость загрузки страниц.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <iframe></title>
	</head>
	<body>
		<iframe name = "myframe" width = "665px" height = "265px" src = "https://tinypng.com"></iframe><br> <!-- в атрибуте src указываем абсолютный адрес сайта, который хотим открыть во фрейме -->
		<a href = "https://tinypng.com" target = "myframe">TinyPng</a> <!-- указываем, что ссылка откроется во фрейме -->
		<a href = "moscow.jpg" target = "myframe">Moscow</a> <!-- задаем относительный путь к изображению и имя фрейма, где оно откроется -->
		<a href = "paris.jpg" target = "myframe">Paris</a> <!-- задаем относительный путь к изображению и имя фрейма, где оно откроется -->
		<a href = "london.jpg" target = "myframe">London</a> <!-- задаем относительный путь к изображению и имя фрейма, где оно откроется -->
	</body>
</html>

В этом примере мы:

Результат нашего примера:

Рис. 27 Пример использования фреймов в HTML.
Рис. 27 Пример использования фреймов в HTML.

HTML аббревиатура и контактная информация

HTML тег <abbr> (HTML Abbreviation Element) определяет аббревиатуру или акроним. Маркировка сокращений является полезной информацией для браузеров, систем перевода и поисковых машин, для пользователя применение этого элемента не видимо.

Как правило, тег <abbr> применяется совместно с глобальным атрибутом title, для отображения полного описания аббревиатуры пользователю при наведении.

HTML тег <address> определяет контактную информацию (автор / владелец) документа или статьи. Если элемент <address> находится внутри тега <body>, то представляет контактную информацию для документа, а если находится внутри элемента <article>html5 (статья), то он представляет контактную информацию для этой статьи.

Текст внутри элемента <address>, как правило, отображается курсивом. Элемент не должен использоваться просто для описания почтового адреса, если он не является частью контактной информации. Элемент, чаще всего, используют с другой информацией в элементе <footer>html5 (нижний колонтитул или "подвал" сайта).

Об элементах, добавленных в HTML 5 - <footer>html5 и <article>html5 мы поговорим в статье "Теги разметки страницы в HTML".

Пример использования:

<html>
	<head>
		<title>Аббревиатура и контактная информация</title>
	</head>
	<body>
		<p><abbr title = "ВСЕРОССИЙСКИЙ НАУЧНО-ИССЛЕДОВАТЕЛЬСКИЙ <!-- добавляем аббревиатуру с глобальным атрибутом title -->
		ГЕОЛОГИЧЕСКИЙ ИНСТИТУТ им. А.П. КАРПИНСКОГО">ВСЕГЕИ</abbr> является преемником и продолжателем традиций первого государственного геологического учреждения России –
		Геологического комитета, созданного в Санкт-Петербурге...
		<iframe src = "http://vsegei.ru"></iframe> <!-- добавляем фрейм с сайтом института -->
		<address style = "background-color: khaki"> 199106, Санкт-Петербург, Средний пр., 74</br> <!-- добавляем контактную информацию института -->
		E-mail: vsegei@vsegei.ru</br>
		Сайт: http://vsegei.ru/ru/  </address>
	</body>
</html>

В данном примере мы:


 Рис 28 Аббревиатура и контактная информация в HTML.
Рис 28 Аббревиатура и контактная информация в HTML.


Вопросы и задачи по теме

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

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива в любую папку на вашем жестком диске:

  • Используя полученные знания составьте HTML страницу (practice_19.html в архиве), которая содержит фрейм и четыре ссылки:

  1. Первая ссылка загружает сайт "Википедии", или любой другой.
  2. Вторая ссылка загружает во фрейм изображение из папки (practice_19_1.jpg).
  3. Третяя ссылка загружает во фрейм изображение из папки (practice_19_2.jpg).
  4. Четвертая ссылка загружает во фрейм изображение из папки (practice_19_3.jpg).

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

  • Результат примера вы можете скачать после выполнения задачи для самопроверки: