2.5.2 Фрейми. Карти посилань.
Фрейми - рамочки (віконця) дають можливість вбудовувати у веб-сторінку іншу веб-сторінку чи документ. Якщо інформації забагато, то появляються вертикальні або горизонтальні смуги прокручування.
У фреймах відображені підручники, примітки у Вікіпедії. На жаль не всі сайти можуть відкриватися у фреймах, оскільки на стороні веб-сервера можуть діяти обмеження на відкриття у фреймах.
Певний час фрейми використовували для розмітки сайтів, де в окремому фреймі задавалося меню, однак такий підхід застарілий.
Тег <iframe> (HTML Inline Frame Element) визначає область, яка може відображати на веб-сторінці вміст окремо взятого документа (наприклад, * .pdf), медіа-контенту або іншого веб-сайту в заданому просторі. Вміст всередині області існує незалежно від навколишньої сторінки.
Елемент iframe має вигляд: <iframe src="повний шлях до завантажуваного ресурсу" ></iframe>
Завдання 1.
Створіть папку Урок_2.5.
Завантажте файл CSS.pdf (він внизу сторінки) і збережіть його у цій папці.
Завантажте Notepad++ і оберіть кодування "UTF-8".
Збережіть файл з іменем Sample_2_5_1.html у папці Урок_2.5.
Пропишіть html-код і не забувайте щоразу, вносячи зміни у код, зберігати його і переглядати результат у браузері.
6. Додайте до створеної сторінки ще один фрейм, вмістивши в нього довільне зображення. Зображення необхідно зберегти у папці Урок_2.5.
Розмітка сайтів з допомогою карт посилань
Розглянемо основні теги:
Вставка зображення:
<img src="повне ім'я файлу на диску" usemap="#коротке ім'я файлу">
<img src="images/paris.png" usemap="#paris">
Створення контейнера (парний тег) для карти посилань:
<map name="коротке ім'я файлу"> .... </map>
<map name="paris"> .... </map>
Створення "гарячих" областей карти посилань:
<area href="адреса сторінки чи сайту, на яку посилається активна область" shape="форма активної області" coords="числа-координати активної області">
shape=”rect” - прямокутна ділянка
<area href="https://wownature.in.ua/pryrodnyy-zapovidnyk-roztochchia/" alt="Розточчя" shape="rect" coords="485,85,575,145">shape=”poly” - ділянка неправильної форми з багатьма вершинами
<area href="https://city-adm.lviv.ua/" alt="Львів" shape="poly" coords="955,300,1070,310,1140,270,1270,410,1250,460,1260,55,1115,525,940,430">shape=”circle” - круг
<area href="https://mandry.club/mista/parizh/" alt="Париж" shape="circle" coords="300,340,30">
Розглянемо, як визначаються форма та координати активної області
Створіть папку Карта і в ній папку images.
В папку images помістіть зображення карти lviv.png (розкрийте його в повний розмір і збережіть).
Відкрийте це зображення в графічному редакторі (Paint або інший онлайновий сервіс). Інструмент Піпетка дозволяє визначити координати будь-якої точки зображення.
Активну область для міста Яворів задамо у вигляді круга. Для цього достатньо визначити координати центра цього круга (100,140) та його радіус (20). Гіперпосилання буде відкривати сайт Яворівської міської ради:
<area href="http://yavoriv-rada.gov.ua/" alt="Яворів" shape="circle" coords="100,140,20">Активну область для природного заповідника "Розточчя" задамо прямокутником. Для цього визначимо координати лівого верхнього (485,85) та правого нижнього кутів цього прямокутника (575,145). Гіперпосилання буде відкривати інформацію про заповідник "Розточчя":
<area href="https://wownature.in.ua/pryrodnyy-zapovidnyk-roztochchia/" alt="Розточчя" shape="rect" coords="485,85,575,145">Активну область для міста Львів задамо полігоном (багатокутником). Для цього необхідно визначити координати багатьох граничних точок (чим більше, тим точніше). Координати перераховуються послідовно в напрямку за або проти годинникової стрілки. Гіперпосилання буде відкривати сайт Львівської міської ради:
<area href="https://city-adm.lviv.ua/" alt="Львів" shape="poly" coords="955,300,1070,310,1140,270,1270,410,1250,460,1260,55,1115,525,940,430">
Завдання 2. Самостійна робота. Створіть файл Sample_2_5_2.html
Для карти посилань використайте довільну карту України.
З частини карти, що обмежує Львівську область, вставте посилання на сайт Львівської обласної держадміністрації. Активну область задайте полігоном.
З міста Києва вставте посилання на сайт Київської обласної держадміністрації. Активну область задайте кругом