Практикум: Створення гіперпосилань та меню переходів
Для виконання завдань даного практикуму необхідно ознайомитись із правилами створення гіперпосилань, наприклад, у посібнику Основи HTML. А також, створити структуру вашого майбутньтого навчального сайту.
У зручному для вас місці жорсткого диску створіть папку my-site-YourLastName. У цій папці створіть папки css, audio, video, images.
Далі скопіюйте папку вашого навчального сайту виконані у попередніх практикумах роботи − html-файли pochatok.html, rozmitka-textu.html, lists.html, table.html. Окрім того, щоб зберегти вигляд сторінки «Сайт верстальника-початківця»(pochatok.html), необхідно скопіювати файл outlines.css з папки css, розташованої поряд з файлом сторінки, і вставити його у відповідну папку навчального сайту. Структура вашого навчального сайту буде як на рисунку 1.
Рис. 1. Матеріали вашого майбутнього сайту на даному етапі повинні мати структуру як у верхній частині рисунку. А щоб сторінка, створена документом pochatok.html зберігла свій вигляд, папка css повинна містити відповідний файл (дивіться нижню частину рисунка).
У редакторі коду відкрийте файл lists.html, який знаходиться у папці my-site-YourLastName. Натисніть Ctrl+Shift+S (або File→Save As..), введіть ім'я файлу index та збережіть його.
Знайдіть закриваючий тег </nav>. Видаліть увесь вміст сторінки за ним, до закриваючого тега </body>.
Підніміться вгору документа. Змініть назву сторінки Списки на Навчальний сайт. Нижче, всередині контейнера <style>...</style> видаліть усі стилі після стилю nav li {list-style-type: none;}. Підготовча робота завершена (рис.2).
Рис. 2. Це майбутня панель навігації. Щоб вона виглядала як дві кнопки з випадаючими підменю, необхідно придати списку і його елементам деякі властивості, з якими ви познайомитесь пізніше.
Щоб панель навігації працювала, необхідно додати посилання до відповідних рядків списку. Елементи списку, до яких існують файли, перетворіть на гіперпосилання наступним чином:
огорніть у тег <a> всі елементи списка другого рівня, наприклад, <li><a href="pochatok.html>Структура HTML документа</a></li>;
наступний пункт повинен посилатися на файл rozmitka-textu.html;
використайте атрибут target зі значенням, при якому це посилання відкриватиметься у новому вікні;
інші пункти повинні посилатися на відповідні файли:
Елемент списку
Відповідний файл
Списки
lists.html
Таблиці
table.html
Графічні зображення
picture.html
Відео та звук
media.html
ЗАУВАЖЕННЯ: Останніх двох файлів ще не існує. Є два шляхи − додати посилання до цих елементів пізніше, коли файли буде створено, або прописати посилання зараз, створивши файли з такою назвою пізніше. Пропонуємо вам скористатись другим варіантом. Це зменшить обсяг роботи по коригуванню панелі навігації при появі сторінок, яких ще не існує.
У результаті ваша панель навігації повинна виглядати наступним чином:
<nav>
<ul type="square">
<li>Знайомство з HTML і CSS
<ul type="disc">
<li><a href="pochatok.html">Структура HTML документа</a></li>
<li><a href="rozmitka-textu.html">Розмітка тексту</a></li>
<li><a href="lists.html">Списки</a></li>
<li><a href="table.html">Таблиці</a></li>
</ul>
</li>
<li>Мультимедіа та гіперпосилання
<ul>
<li><a href="picture.html">Зображення на вебсторінках</a></li>
<li><a href="media.html">Відео та звук</a></li>
</ul>
</li>
</ul>
</nav>
Додайте нижче панелі навігації заголовок другого рівня Я майбутній верстальник, а під цим заголовком розташуйте невеличку розповідь про себе, використовуючи відомі вам теги текстової розмітки.
Під розповіддю додайте контейнер <footer>..</footer>, у якому розташуйте посилання на пошукову сторінку Google. До цього посилання додайте атрибут target зі значенням, що дозволяє відкривати сторінку за посиланням у новій вкладці. Також додайте до цього посиланя атрибут з виринаючою підказкою, яка буде вказувати відвідувачу до чого призведе натискання на це посилання.
Додайте нижче посилання для зворотнього зв'язку через електронну пошту з вказівкою теми звернення. На веб сторінці це і попереднє посилання повинні бути розташовані в двох рядках. Оберіть для цього теги на свій розсуд.
Підніміться вгору html-документа. Виділіть і скопіюйте увесь контейнер <nav>..</nav>. Відкрийте файл lists.html та замініть у ньому контейнер <nav>..</nav> скопійованим фрагментом.
У файлі lists.html розташуйте перед тегом <nav> посилання на головну сторінку сайту index.html з текстом На головну. Після цього виділіть та скопіюйте посилання на головну сторінку та наступний за ним контейнер <nav>..</nav>. Вставте скопійований фрагмент у всі внутрішні сторінки сайту відразу після тега <body>, замінючи стару навігацію без посилань, де це необхідно.
Перевірте правильність роботи посилань. З кожної сторінки сайту відвідувач повинен мати можливість потрапити на будь-яку іншу сторінку.
На вебсторінці Створення таблиці (у файлі table.html) додайте після таблиці якірне посилання на рецепт гарбузової каші, який знаходиться на сторінці Розмітка тексту.
Для цього відкрийте у редакторі коду файл rozmitka-textu.html. Знайдіть заголовок <h1>Гарбузова каша.. і додайте до тега заголовку атрибут ідентифікатор наступним чином: <h1 id="recipe">.
ЗАУВАЖЕННЯ: У якості значення атрибуту id використано переклад на англійську мову слова рецепт. Верстальник може використати у якості значення ідентифікатора будь-яку кобінацію латинських літер, цифр та дефісу, яка починається з латинської літери. Але краще обирати змістовне слово англійською.
Перейдіть у файл table.html. Після закриваючого тега </table> розташуйте посилання на рецепт. Код може мати наступний вигляд
<p>
Рецепт <a href="rozmitka-textu.html#recipe">
Гарбузової каші</a> від ресторану
</p>
Збережіть html-документи та обов'язково перевірте роботу якірного посилання в браузері.
Створіть копію файлу lists.html у папці my-site-YourLastName з ім'ям index.html. Відкрийте його в редакторі коду.
Як і в попередній роботі видаліть увесь код за закриваючим тегом </nav>. Також видаліть стилі, які не стосуються тега nav.
Змініть назву сторінки Списки на Навчальний сайт. Підготовча робота завершена (рис.2).
Рис. 2. Це майбутня панель навігації. Щоб вона виглядала як дві кнопки з випадаючими підменю, необхідно придати списку і його елементам деякі властивості, з якими ви познайомитесь пізніше.
Щоб панель навігації працювала, необхідно додати посилання до відповідних рядків списку. Елементи списку, до яких існують файли, перетворіть на гіперпосилання наступним чином:
огорніть у тег <a> всі елементи списка другого рівня, наприклад, <li><a href="pochatok.html>Структура HTML документа</a></li>;
наступний пункт повинен посилатися на файл rozmitka-textu.html;
використайте відповідний атрибут, щоб це посилання відкривалось у новому вікні;
інші пункти повинні посилатися на відповідні файли:
Елемент списку
Відповідний файл
Списки
lists.html
Таблиці
table.html
Графічні зображення
picture.html
Відео та звук
media.html
ЗАУВАЖЕННЯ: Останніх двох файлів ще не існує. Є два шляхи − додати посилання до цих елементів пізніше, коли файли буде створено, або прописати посилання зараз, створивши файли з такою назвою пізніше. Пропонуємо вам скористатись другим варіантом. Це зменшить обсяг роботи по коригуванню панелі навігації при появі сторінок, яких ще не існує.
Додайте нижче панелі навігації заголовок другого рівня Я майбутній верстальник, а під цим заголовком розташуйте невеличку розповідь про себе, використовуючи відомі вам теги текстової розмітки.
Під розповіддю додайте контейнер <footer>..</footer>, у якому розташуйте посилання на пошукову сторінку Google. Це посилання також повинно відкриватись у новій вкладці. Також додайте до цього посиланя атрибут з виринаючою підказкою, яка буде вказувати відвідувачу до чого призведе натискання на це посилання.
Додайте нижче посилання для зворотнього зв'язку через електронну пошту з вказівкою теми звернення. На вебсторінці це і попереднє посилання повинні бути розташовані в двох рядках. Оберіть для цього теги на свій розсуд.
Підніміться вгору html-документа. Виділіть і скопіюйте увесь контейнер <nav>..</nav>. Відкрийте файл links.html та замініть у ньому контейнер <nav>..</nav> скопійованим фрагментом.
У файлі links.html розташуйте перед тегом <nav> посилання на головну сторінку сайту index.html з текстом На головну. Після цього виділіть та скопіюйте посилання на головну сторінку та наступний за ним контейнер <nav>..</nav>. Вставте скопійований фрагмент у всі внутрішні сторінки сайту відразу після тега <body>, замінючи стару навігацію без посилань, де це необхідно.
Перевірте правильність роботи посилань. З кожної сторінки сайту відвідувач повинен мати можливість потрапити на будь-яку іншу сторінку.
На вебсторінці Створення таблиці (у файлі table.html) додайте після таблиці якірне посилання на рецепт гарбузової каші, який знаходиться на сторінці Розмітка тексту.
Перевірте правильність роботи якірного посилання в браузері.
Якщо всі додані вами посилання працюють як слід, ви успішно впорались з роботою. Інакше, шукайте помилки. Цього разу сенсу, додавати тут готову роботу ми не бачимо.
Додаткове завдання
Рекомендуємо вам ще трохи потренуватись у додаванні посилань. Наприклад, на головній сторінці, після тексту про себе, додайте опис деяких сторінок сайту із посиланням на них. Наприклад, Сторінка «Створення таблиць» була зверстана при вивченні тегів, за допомогою яких на вебсторінку додаються таблиці. При цьому назва сторінки − це текст посилання.
