HTML фреймы

В это статье Вы узнаете, что такое фреймы, для чего они нужны, где и как применяются, кроме того, Вы познакомитесь как в 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>

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

• Элементом <iframe> создали фрейм, которому атрибутом name задали имя - "myframe", атрибутом width установили ширину фрейма "665px", а атрибутом height высоту фрейма "265px" . В обязательном атрибуте src указали абсолютный адрес сайта, который хотим открыть во фрейме "https://tinypng.com".
• Разместили четыре ссылки, при клике на которые ссылка открывается непосредственно во фрейме (в значении атрибута target указано имя нашего фрейма - "myframe"). Первая ссылка открывает сайт, загруженный изначально, а остальные три загружают различные изображения, находящиеся в той же папке, что и файл с примером.

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

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

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

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

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

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

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

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

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

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

• Поместили аббревиатуру института в тег <abbr> и применили глобальный атрибут title, для того, чтобы при наведении на нее мышкой было понятно, что это высшее учебное заведение, а не то, что вы подумали.
• Кроме того загрузили во фрейм сайт данного учебного заведения (в обязательном атрибуте src указали абсолютный адрес сайта).
• Внизу страницы (внутри тега <address>) добавили адрес и контактные данные института, указанные на официальном сайте. Текст, помещенный внутрь этого тега, по умолчанию отображается курсивом. Кроме того для элемента <address> добавили глобальный атрибут style, которым задали встроенный CSS стиль (цвет заднего фона).

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