Створення гіпертекстових посилань. Впровадження в сторінку графічних елементів

Мета роботи: навчитися створювати посилання на різні типи документів, використовуючи відносні й абсолютні URL, а також додавати до web-сторінок графічні елементи.

2.1 Теоретичні відомості

Гіпертекстові посилання. Відносні й абсолютні URL. Більшість гіпертекстових посилань включаються в HTML-документи за допомогою елемента "якір" (<а></а>). Він повинен доповнюватися атрибутом href, у якому вказується URL (Uniform Resourse Locator), на яку варто перейти по даному посиланню. Сама URL повинна бути взята у лапки, оскільки є значенням атрибута href. Посилання на HTML має наступний формат:

<a href="URL">Помістіть сюди посилання</а>

URL - уніфікована адреса, що використовується для однозначної ідентифікації будь-яких web-компонентів. URL складається із двох частин: імені протоколу й шляху призначення. Ім'я протоколу говорить про те, з яким типом Інтернет-ресурсу ви збираєтеся мати справу. Найпоширенішим в Інтернеті протоколом є http, за допомогою якого запитуються web-документи. Шлях призначення може бути іменем файлу, каталогу або комп'ютера. URL виду http://www.fakecorp.com/products/іndex.html вказує на конкретний документ, а ftp://ftpnetscape.com каже браузеру про те, що необхідно використати протокол FTP для доступу до комп'ютера з ім’ям ftp.netscape.com.

Розрізняють абсолютні та відносні адреси:

http://www.olelondonisp.net/drwatson/index.html
http://www.olelondonisp.net/drwatson/resume.html

Обидві URL є абсолютними – з їх допомогою можна потрапити на ці сторінки з будь-якого місця Інтернету. Якщо ж створити посилання на сторінці іndex.html, що повинна вказувати на resume.html, можна використати відносну URL, оскільки більша частина адреси нічим не відрізняється. Ця відносність, означає те, що можна одержати доступ і до інших каталогів того ж сервера, використовуючи загальну нотацію. Наприклад, якщо потрібно потрапити на сторінку, розташовану в підкаталозі відносно поточного, можна скористатися URL виду /pages/house.html або виду /assіstances/roger/resume.html. У такий же спосіб можна переходити й до елементів, розташованих у батьківських каталогах. Наприклад, на сторінці, що зберігається в каталозі products, потрібно розмістити посилання на головну сторінку, розташовану в кореневому каталозі даного сайту. Це робиться таким чином:

.. /index.html

Дві крапки на початку адреси - це стандартний синтаксис для позначення переходу на один каталог "нагору" по ієрархії.

Правила створення посилань:

- опис посилання повинен бути інформативним, посилання, на яких підписано "натисніть тут", не дають достатньої інформації про те, куди саме користувач потрапить, якщо він дійсно виконає запропоновану дію;

- необхідно помістити хоч що-небудь всередину якоря, нехай це буде текст або зображення, у протилежному випадку користувачеві не буде на чому клікати, щоб перейти по посиланню;

- не можна створювати вкладені посилання, перш ніж створювати нове, потрібно закрити попереднє;

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

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

У місці, де починається потрібний розділ, необхідно використати якір з атрибутом іd:

<а id="dl"><h1>Розділ 1</h1></a>

<p>Зміст розділу 1</p>

Значення іd можуть містити й букви й цифри, однак вони повинні починатися з букви, а далі вже можуть бути дефіси, підкреслення, двокрапки й крапки. Так, 12 не буде сприйматися коректно, a questіon: one або myіtem56 - буде. Тепер потрібно поставити посилання на цей розділ. Для цього використовується якір, що вказує не на URL, а на ім'я розділу, перед цим ім'ям необхідно використати знак #:

<р>Дивіться<а href="#d1">Розділ 1</a>/</p>

На іменовані розділи можна посилатися і з інших сторінок. Просто ім’я розділу стаж частиною URL, що визначає розміщення сторінки:

<р>Зверніть увагу на

<a href = "http://www.fakecorp.com/questions.html#dl">
Розділ 1</а></р>

При цьому браузер шукає сторінку questions.html, на ній шукає розділ з назвою d1 і виводить його.

Створення посилання на e-mail здійснюється наступним чином:

<а href="mailto:my@mail.com">Надсилайте ваші питання прямо на e-mail.</a>

Деякі браузери дозволяють автоматично заповнювати поле «Тема листів». Робиться це за допомогою атрибута title в складі елементу «якір»:

<a href="mailto:my@mail.com" title="Xoчy купити книгу!">3аказати книгу</а>

Елемент <img />. Стандартним способом додавання зображень є використання елемента <іmg />. За допомогою елемента <іmg /> резервується місце на сторінці під зображення. Базова конструкція повинна виглядати таким чином: <іmg src="іmage_URL" />. Атрибут src розшифровується як source (джерело) і містить адресу графічного файлу. Тобто замість слів іmage_URL повинна бути реальна URL. Адреса файлу може бути як абсолютною (наприклад, http://www.fakecorpcom/іmages/productl.jpg), так і відносною (якщо, наприклад, файл розташований на тому ж сервері, що й HTML-сторінка). Варто пам'ятати, що не можна розміщувати на веб-сторінці посилання на файли, що розташовані на локальному жорсткому диску. Якщо створити посилання виду <іmg src="fіle:///c:/web_sіte/іmage.gіf"/>, то користувачі не зможуть побачити зазначене зображення.

HTML дозволяє додавати альтернативний текст, він задається за допомогою атрибута alt, що є обов'язковим атрибутом елемента <іmg />. У ньому міститься рядок тексту, що замінює зображення у випадку неможливості його виводу на екран через якісь причини. Найчастіше цей текст виводиться в окремому прямокутнику, що окреслює те місце, де повинне бути зображення.

Наявність атрибута alt вважається гарним тоном, оскільки це показує, що ви піклуєтеся про свою аудиторію. Альтернативний текст повинен бути коротким, але дійсно інформативним. Якщо ви бажаєте як можна повніше описати відсутнє зображення, це можна зробити таким чином. Помістіть в елемент <іmg/> атрибут longdesc. Цей атрибут дозволяє розмістити посилання на URL, де може розташовуватися хоч ціла стаття, присвячена даному малюнку.

Обов'язковими атрибутами елемента <іmg /> є також: wіdth й heіght, їх значення задаються в пікселях і визначають ширину й висоту зображення.

2.2 Порядок виконання лабораторної роботи

1. Додайте до сторінки index.html, що була розроблена у попердній роботі переходи на інші сторінки, що містять текстову та графічну інформацію. Наприклад:

<a href="subdir/file.zip">Download</a>

2. Розробіть структуру Ваших сторінок та додайте навігацію між ними та всередині кожної сторінки. Наприклад:

<a href="#paragraph4">Перехід на параграф №4</a>

................................................

<a name="paragraph4">Параграф</a>

3. Додайте посилання на e-mail.

4. Створіть сторінки, що містять графічний матеріал.

5. Додайте навігацію до розробленої сторінки.

2.3 Завдання для виконання

1. Розробити 2-3 сторінки з відповідною структурою та фотокартками, що ілюструють розділи сторінки.

2. Створіть сторінку index.html, що дозволяє переходити на сторінки, створені в лабораторній роботі 1.

3. Оформити звіт.