Завдання на лабораторну роботу. Гіперпосилання. Впровадження зображень.

Гіперпосилання. Впровадження зображень.

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

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

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

URL.
HTML використовує URL (Uniform Resource Locator) для представлення гіпертекстових посилань і посилань на мережеві сервіси усередині HTML-документа. Перша частина URL (до двокрапки) описує метод доступу або мережевий сервіс. Інша частина URL (після двокрапки) інтерпретується залежно від методу доступу. Зазвичай, два прямих слэша після двокрапки позначають ім'я машини:
Uniform Resource Locator має наступний формат:
method://servername:port/pathname#anchor.

Опишемо кожен з компонентів URL:

METHOD

Ім'я операції, яка виконуватиметься при інтерпретації даного URL. Найбільш часто використовувані методи:

· file: читання файлу з локального диска. Ім'я файлу інтерпретується для локальної машини користувача. Даний метод використовується для відображення якого-небудь файлу, що знаходиться на машині користувача. Наприклад: file:/home/alex/index.html - відображує файл index.html з каталога /home/alex на призначеній для користувача машині

· http: доступ до WEB-сорінки в мережі з використанням HTTP-протокола. (Це найбільш часто використовуваний метод доступу до якого-небудь HTML-документу в мережі). Наприклад: http://www.softexpress.com/ - доступ до Home-сорінки компанії SoftExpress

· ftp: запит файлу з анонімного FTP-сервера.
Наприклад: ftp://hostname/directory/filename

· mailto: активізує поштову сесію з вказаним користувачем і хостом. Наприклад: mailto:info@softexpress.com - активізує сесію посилки повідомлення користувача info на машині softexpress.com, якщо броузер підтримує запуск електронної пошти. Відмітимо, що метод mailto: не вимагає вказівки слэшів після двокрапки (як правило, після двокрапки відразу йде електронна адреса абонента)

· telnet: звернення до служби telnet

· news: виклик служби новин, якщо броузер її підтримує.
Например: news:relcom.www.support

SERVERNAME

Необов'язковий параметр, що описує повне мережеве ім'я машини. Наприклад: www.softexpress.com - повне мережеве ім'я сервера фірми СофтСервіс. Якщо ім'я сервера не вказане, то посилання вважається локальним, і повна дорога, вказана далі в URL обчислюється на тій машині, з якою узятий HTML-документ, що містить дане посилання. Замість символьного імені машини може бути використана IP-адрес, проте це не рекомендується із-за можливого пересічення з фіксованими локальними адресами внутрішньої мережі.

PORT

Номер порту TCP на якому функціонує WEB-сервер. Якщо порт не вказаний, то "за умовчанням" використовується порт 80. Даний параметр (port) не використовується в переважній більшості URL.

PATHNAME

Часткова або повна дорога до документа, який повинен викликатися в результаті інтерпретації URL. Різні WEB-сервери сконфігуровані по іазному для інтерпретації шляху доступу до документа. Наприклад, при використанні CGI скриптів (виконуваних програм), вони зазвичай збираються в одному або декількох виділених каталогах, шлях до яких записаний в спеціальних параметрах WEB-серверу. Для даних каталогів WEB-сервером виділяється спеціальний логічний шлях, який і використовується в URL. Якщо WEB-сервер бачить даний шлях, то запрошуваний файл інтерпретується як виконуваний модуль. Інакше, запрошуваний файл інтерпретується просто як файл даних, навіть якщо він є виконуваним модулем. Наприклад: http://www.softexpress.com/cgi-win/handle.exe У даному прикладі HTTP-сервер повинен викликати CGI-скрипт з ім'ям handle.exe, який знаходиться на машині з мережевим ім'ям www.softexpress.com. Відмітьте, що при описі шляху використовується UNIX-подібний синтаксис, де, у відмінності від DOS і Windows використовуються прямі слэші замість зворотних. Якщо після мережевого імені машини відразу йде ім'я документу, то він повинен знаходитися в кореневому каталозі на видаленій машині або (що частіше) в каталозі, виділеному WEB-сервером як кореневий. Якщо ж URL закінчується мережевим ім'ям машини, то як документ запрошується документ з кореневого каталога видаленої машини з ім'ям, встановленим в налаштуваннях WEB-сервера (як правило, це index.html).

ANCHOR

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

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

Синтаксис HTML, що дозволяє це зробити, - наступний:
<A HREF="URL" >текст-который-будет-подсвечен-как-ссылка </A>
Любий текст, що знаходиться між даними двома тегами підсвічується спеціальним чином Web-броузером. Зазвичай цей текст відображується підкресленим і виділеним синім (або іншим заданим користувачем) кольором.

Текст, позначаючий URL, не відображується броузером, а використовується лише для виконання вказаних ним дій при активізації посилання (зазвичай при клацанні миші на тексті, що підсвічується або підкресленому).

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

1. Створіть маркер розділу. Синтаксис даного маркера наступний:
   <A NAME="NamedAnchor" >Текст </A>
2. Створіть посилання на даний маркер:
   <A HREF="#NamedAnchor" >Текст </A>

Графіка усередині HTML-документа.
Одна з найпривабливіших рис Web - можливість включення посилань на графічні і інші типи даних в HTML-документ. Робиться це за допомогою тега <IMG...ISMAP>. Використання даного тега дозволяє значно поліпшити зовнішній вигляд і функціональність документів.

Існує два способи використання графіки в HTML-документах.

Перший

- це впровадження графічних образів в документ, що дозволяє користувачеві бачити зображення безпосередньо в контексті інших елементів документа. Це найбільш використовувана техніка при проектуванні документів, звана інколи "inline image". Синтаксис тега:
<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2
ALIGN=top|middle|bottom|texttop|absmiddle|baseline|absbottom
BORDER=n3 VSPACE=n4 HSPACE=n5 ISMAP>

Фонові малюнки

Більшість броузеров дозволяють включати в документ фоновий малюнок, який буде відображатися на тлі всього документа. Ненав'язливий напівпрозорий малюнок (шпалери) зазвичай добре виглядає як фон для більшості документів. Опис фонового малюнка включається в тег BODY і виглядає таким чином: <BODY BACKGROUND="URL">

Завдання на лабораторну роботу

1. Перетворіть домашню сторінку в простий домашній сайт, зв'язавши окремі частини за допомогою гіперпосилань. Необхідно використовувати всі види гіперпосилань

Обов'язкові сторінки:

• Про автора.
• Мій ВНЗ – про СРТ ЧДТУ.
• Моя група.
• Моя майбутня професія.
• Мої захоплення або хобі.
• Будь-яка інша інформація.
1. Додайте на ваші сторінки наступні зображення, використавши різні значення параметрів тега <IMG>.
2. Дорогі хлопці! У програміста Васі Голопупкіна виникла серйозна проблема. Він завантажив свій любимий графічний файл в ультра новий графічний редактор SuperPuperGigaPaint, який відразу ж виконав недопустиму операцію і закрився, а картинка розбилася на шматочки. Допоможіть Васі зібрати початкове зображення. Зображення вставте в звіт з лабораторної роботи, попередньо оформивши його в відповідності з типовими вимогами. J

Figure: Розбите зображення.