Як працюють веб-сторінки

1

# Як створити HTML-фреймсети з іменованими цілями та посиланнями на джерелаФреймсети – це застарілий спосіб поділу веб-сторінки. Ви можете зустріти їх у застарілій документації або старих кодових базах. Концепція проста: ви берете вікно браузера та поділяєте його на окремі секції. Кожна секція завантажує свій незалежний HTML-файл. В результаті виходить сторінка, яка не оновлює всю розмітку повністю при натисканні посилання.Щоб це працювало, вам потрібні дві речі. По-перше, сам файл кадру. По-друге, окремі HTML-документи, які заповнять ці осередки.### Налаштування джерел кадрівПочніть із створення HTML-файлів, які ви хочете відображати. Припустимо, у вас є links.htm для навігації і information.htm для вмісту.Далі створіть структуру кадру. Цей файл вказує браузеру, як розділити екран. Ви використовуєте тег “ для визначення макету. У наведеному нижче прикладі сторінку розділено вертикально. Ліва колонка має фіксовану ширину 200 пікселів. Права колонка займає весь простір, що залишився.“html
““Атрибут `cols` відповідає за поділ. Значення `*` діє як підстановочний знак для ширини, що залишилася. Всередині фреймсета ви розміщуєте теги “. Кожен тег має атрибут `src`. Цей атрибут вказує на конкретний HTML-файл, який повинен завантажуватись у даному осередку. Лівий кадр підвантажує `links.htm`. Правий кадр підвантажує `information.htm`.Потрібно правильно закривати теги. Тег “ завершує визначення макету. Тег “ завершує документ. Якщо ви пропустите теги, що закривають, браузер може відобразити сторінку некоректно або повністю проігнорувати структуру.### Назва кадрів для внутрішньої навігаціїНавіщо називати кадри? Це контролює те, де відкриваються посилання. Без імен клік за посиланням у навігації замінить поточний вміст у цьому конкретному кадрі. Якщо ви натиснете посилання в меню, саме меню зникне. Сторінка за посиланням займе все місце в осередку меню. Макет зламається. Користувач втратить навігацію.Щоб запобігти цьому, надайте імена кожному кадру. Це створить цільове призначення гіперпосилань.Додайте атрибут `name` до кожного тегу “. Виберіть описові імена. `menu` та `info` – очевидний вибір.“html““Тепер оновіть посилання у файлі `links.htm`. Використовуйте атрибут `target` у тегах-посиланнях. Встановіть значення, яке дорівнює імені кадру, в якому має з’явитися вміст.“html
Company Information
““Коли користувач натискає це посилання, браузер завантажує нову сторінку у кадр з ім’ям `info`. Фрейм `menu` залишається на своєму місці. Користувач може продовжувати переходити на сайт, не втрачаючи орієнтацію. Це основна перевага використання іменованих кадрів у макеті.### Збереження та перегляд результатівФайли фреймсетів зберігаються як і будь-які інші HTML-документы. Використовуйте розширення `.htm` або `.html`. Спеціального файлу для фреймсетів не існує.Структура файлів має значення. Зберігайте файл кадру в тій же директорії, що й файли, на які він посилається. Якщо файл фреймсета шукає `links.htm` у тій же папці, але ви зберегли його в іншому місці, браузер покаже порожній кадр або помилку.Відкрийте файл кадру у браузері. Ви повинні побачити розділений екран. Зліва відображається навігація. Праворуч – вміст. Якщо ви бачите лише одну сторінку або помилку, перевірте шляхи та теги, що закривають.Структура налаштована. Посилання працюють. Наступний крок – стилізація. Вам потрібно буде видалити смуги прокручування та межі за промовчанням, які браузери додають до кадрів. Це окреме завдання, але це наступний логічний крок у покращенні зовнішнього вигляду.