Порядок і рекомендації щодо виконання роботи

З дисципліни «Додрукарське опрацювання інформації»

На тему: «Мова XHTML. Гіперпосилання, якоря»

Мета роботи: зрозуміти різницю між гіперпосиланнями і якорями.

Програмні та технічні засоби: текстовий редактор (Блокнот або Microsoft Word), браузер Internet Explorer.

Короткі теоретичні відомості

Гіперпосилання

Без гіперпосилань глобальна мережа буде абсолютно непотрібною. Посилання складають основу Інтернету, тому що вони с засобом, за допомогою якого користувач може переходити від сторінки до сторінки, або з сайту на сайт. Для такої критичної функції, посилання насправді досить прості, як ми побачимо. Щоб створити посилання на ХНТМL, необхідні дві речі:

1. Ім'я файлу (або URL файлу), з яким ви хочете під'єднатись.

2. Текст, або гарячі точки, які визначаються з гіперпосиланням на цій сторінці.

Ось один приклад гіперпосилання, в цьому випадку вказаний як URL:

<a href="http://example.com/"> Example </a>

а - скорочення від anchor (якір), оскільки воно також використовується для створення якорів на посилання, – ми обговоримо це трохи пізніше. href - скорочення для hypertext
reference (гіпертекстове посилання), яке в нашому прикладі означає URL на веб-сайт. Це завжди поміщається в лапки (""). Потім йде текст посилання - текст, який браузер буде відображати як посилання, а не фактичний URL. Нарешті, йде закриваючий тег </а>, що говорить браузеру про кінець посилання. Остаточний результат буде виглядати так (рис.1):

Рис.1. Використання гіперпосилань

У прикладі вище використовується так званий віддалений шлях, оскільки він визначає його URL в Інтернеті. Це лише один з трьох можливих шляхів:

1. Віддалений Шлях: визначає веб-адресу файла. Його іноді помилково називають абсолютним шляхом (що означає дещо інше). Наприклад, "http://example.com/index.html"

2. Відносний шлях: вказує на файли з урахуванням їх місць по відношенню до поточного файлу. Наприклад, “/folder/filename.html”

3. Абсолютний шлях: вказує на файли з урахуванням їх абсолютного розміщення в файловій системі. Його також іноді називають relative-from-root (відносним від кореня) шляхом. Наприклад, “/folder/filename.html”

На практиці використовувати гіперпосилання набагато простіше, ніж це могло здатися на перший погляд. Тип посилання залежить від того, де ви знаходитесь і куди ви збираєтеся іти. Якщо слід створити посилання на попередню лабораторну роботу, можна використовувати будь-яке з наступних посилань:

1. <a href-"C:\практика\Lab2\paqe07.html"> Absolute path </a> (рис.2)

Рис. 2. Перегляд створеного гіперпосилання Absolute path

2 <a href="page.html> Relative path </a> (рис.3)

Рис. 3. Перегляд створеного гіперпосилання Relative path

Перше посилання - абсолютний шлях, оскільки він вказує на високий рівень каталогу ієрархії і проходить все нижче через проміжні каталоги в пошуках файлу. Абсолютний маршрут дуже корисний тому, що він завжди однаковий, незалежно від того, в якому місці на Вашому сайті Ви зв'язані.

Друге посилання - відносний шлях до шляху даної сторінки.

Порядок і рекомендації щодо виконання роботи

Зробимо приклад сторінки, яка містить посилання. Щоб завдання було більш складним, ми занесемо посилання в список- це те, шо ви бачите найчастіше на веб-сторінках. За допомогою шаблонів з уроку 2 створюємо файл з ім’ям page08.html, що включає в себе наступний код:

<hl> Список відносних посилань </hl>

<ul>

<li> <a href=”page01.html”> Перша сторінка </a> </li>
<li> <a href=”page02.html”> Друга сторінка </a> </li>
<li> <a href=”page03.html”> Третя сторінка </a> </li>

</ul>

Переглянувши в браузері ви повинні побачити наступне (рис.4):

Рис.4. Сторінка, що містить посилання

Якоря

Ви також можете створювати посилання всередині Вашої сторінки. Припустимо, що у вас є дуже довга сторінка. Користувач буде читати сторінку з верху до низу переміщуючись все далі і далі від початку. Використовуючи якоря, ви можете створити зручне посилання до початку сторінки. Крім того, можна створити список посилань у верхній частині сторінки, щоб відправити користувача далі по сторінці. Це досягається шляхом надання конкретних назв посиланням на сторінці, таких як, наприклад, "зверху" або "розділ 3. Код якоря виглядає так:

<а id=”top”>...</а>

Продемонструємо це на прикладі. Створюємо файл з ім'ям page09.htm та кодом нижче. Цей список досить довгий, але він необхідний, щоб показати всі функції якорів:

<h1> <a id=”title”> Демонстрація Якорів </a> </h1>
<u1>

<li> <a href=”#sec1”> Розділ 1 </a> </li>
<li> <a href=”#sec2”> Розділ 2 </a> </li>

<li> <a href=”#sec3”> Розділ 3 </a> </li>
</u1>

До сих пір посилання, які ви створювали, були з однієї точки сторінки на іншу сторінку. У ХНТМL ви можете використовувати якоря для створення спеціальних елементів, які будуть пов'язувати одну частину сторінки з іншою. </р>

<h2> <a id=”sec1”> Розділ 1 </a> </h2>

<р> Ви створюєте якір аналогічним чином до створення гіперпосилання. Замість того, щоб використовувати “HREF”, де вказуете ім'я та місце розташування, можна використовувати "ID" і визначити розділ.

<р> <а href=”#title”> До початку </a>

<h2> <a id=”sec2”> Розділ 2 </a> </h2>

Якоря вимагають деяку кількість тексту (або графіки) між відкриваючим та закриваючим тегом, хоча зони можуть вказати тільки на один символ. На відміну від посилання, якоря не відображаються на веб-сторінку.

Для посилання на якір на сторінці, можна використовувати той самий "HREF" атрибут, який ви зазвичай використовуєте для гіперпосилання, замінивши ім'я файлу для ім'я якоря і поставивши перед ним знак фунта (#).

<а href=”#title”> До початку </a> 
<h2> < a id=”sec3”> Розділ 3 </a> </h2>
 можна також використовувати мітку на місце в будь-якій іншій веб-сторінці, включаючи і вихідну сторінку. Внесення змін "HREF” у filename.html#part4” відправить користувача до "Розділу 4" на новій сторінці. </р>

<a href=http://www.w3.org/TR/xhtmll/#xhtml> Це посилання </a>, відправить вас в специфікації для другого видання ХНТМL 1.0 на World Wide Web Consortium.
</р>

<a href=”#title”> До початку </a>

Всі елементи в кінці знаходяться там для створення великої кількості ліній розриву; тепер вікно браузера набагато більше, ніж сам текст.

Переглянемо сторінку в браузері (рис.5):