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> <!-- добавляем фрейм с сайтом института --> <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 стиль (цвет заднего фона).
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива в любую папку на вашем жестком диске:
- Используя полученные знания составьте HTML страницу (practice_19.html в архиве), которая содержит фрейм и четыре ссылки:
- Первая ссылка загружает сайт "Википедии", или любой другой.
- Вторая ссылка загружает во фрейм изображение из папки (practice_19_1.jpg).
- Третяя ссылка загружает во фрейм изображение из папки (practice_19_2.jpg).
- Четвертая ссылка загружает во фрейм изображение из папки (practice_19_3.jpg).
Для фрейма задайте размер таким образом, чтобы он был по ширине и высоте изображений. В качестве адреса, который будет загружаться во фрейм можете выбрать сайт "Википедии", или любой другой.
- Результат примера вы можете скачать после выполнения задачи для самопроверки: