§ 3. Гіперпосилання і графіка на Web -сторінках

 

У цьому параграфі ви вивчите:

•  створення послань на Web -сторінці;

•  вставку і компонування зображень;

•  створення зображень-посилань.

 

Створення гіперпосилань

Гіперпосилання або просто посилання є найпопулярнішим елементом Web -сторінок. З їх допомогою користувач може переходити до різних частин поточної сторінки, звертатися до інших сторінок або Web -вузлів.

Посилання організується у такий спосіб. На вихідній Web -сторінці визначається відправна точка посилання, наприклад, підкреслене слово або малюнок. На цільовій Web -сторінці задається точка призначення посилання, що відповідає як конкретному HTML -елементу (тексту, малюнку, аудіо- або відеокліпу), так і документу в цілому.

Відправна точка посилання задається тегом <А>. Ім'я цього тегу походить від першої літери слова anchor - якір. Сам елемент А називається елементом прив'язки або якірним елементом. Усередині тегу <А> ставиться обов'язковий атрибут href , за допомогою якого визначається точка призначення посилання (цільовий ресурс). Між тегами <А> і </А> розміщається текст посилання або елемент малюнка. Так найпростіше посилання може виглядати як

<А href =" rest . html "> Moї канікули</А>

На Web -сторінці це посилання відображатиметься у вигляді тексту "Мої канікули". При клацанні мишею по цьому посиланню буде завантажуватися HTML -файл rest . html .

Зверніть увагу, що в атрибуті href зазначене лише ім'я файла, що відпо­відає відносному посиланню на файл, який розміщений у тій самій папці, що і вихідний документ. Якщо потрібно посилатися на ресурс, розміщений у World Wide Web , то в атрибуті href указується URL цього ресурсу, наприклад,

<А href =" http :// www.Samsung.com "> Продукція фірми Samsung </ A >

Як атрибут href можна вказати ресурс mail to (виклик протоколу електронної пошти SMPT ). Наприклад, посилання вигляду

<А href =" mailto :// garry@myserver.net.uа">Лист Гарику</А>

дозволить відвідувачеві вашої сторінки безпосередньо перейти до створення і відправлення повідомлення за адресою: garry@myserver.net.ua .

 

Які бувають посилання?

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

Локатор URL ресурсу, на який вказує посилання, може бути абсолютним і відносним. Абсолютний URL містить усі компоненти, необхідні для того, щоб броузер зміг знайти Web -сторінку в неосяжній мережі WWW. Але якщо посилання вказує на ресурс, що міститься на тому самому вузлі, що і вихідний документ, зручніше користуватися скороченим записом URL , у якому вказується тільки папка і файл. Такий запис адреси називається відносним URL . Прикладом відносного URL є значення атрибута href = " rest.html " (див. попередній пункт).

 

Створення внутрішнього посилання

Отже, для переходів з однієї частини документа до іншої служать внутрішні посилання. Цей вид посилань доцільно використовувати, коли всі частини великого документа не відображаються цілком у вікні броузера. Внутрішнє посилання, як і зовнішнє, задається за допомогою елемента якірного тегу <А> з атрибутом href . Але, на відміну від зовнішнього посилання, у значенні атрибута href указується не URL , а ім'я мітки (мітка позначається знаком #). Наприклад, такий тег

<А href ="#глав1">Розділ 1. Відплиття Богомира </А>

задає посилання на елемент документа, позначеного міткою "глав1". Саме посилання має вигляд виділеного тексту «Розділ 1. Відплиття Богомира». Мітка створюється за допомогою якоря <А>, однак у ньому замість атрибута href використовується атрибут name .

Розглянемо створення внутрішніх посилань на конкретному прикладі. Наприклад, ви збираєтеся створити електронний варіант книги Дж. Толкієна «Дві твердині» і хочете, щоб із змісту книги можна було переходити по посиланнях до відповідних глав (мал. 75.1).

HTML -код усього документа матиме такий вигляд:

<HTML>

<HEAD>

<TITLE>Внутрішні посилання</TITLE </HEAD> <BODY>

<H1> Джон P . P . Толкієн. "Дві твердині"</H1> <H2>Утримання</H2>

<A href="#глав1">Розділ 1. Відплиття Богомира</A><BR>

<A href="#глав2">Розділ 2. Кіннотники Рістанії</A><BR>

<A href="#глав3">Розділ 3. Урукхай</A><BR>

<A href="#глав4">Розділ 4. Древень</A><BR>

<A href="#глав5">Розділ 5. Білий вершник</A>

<H2><A name="глав1">Розділ 1. Відплиття Богомира</A></H2> Арагорн біг крутою тропою, вдивляючись у землю. Хобіти ступають легко: Слідопит, і той, бувало, збивався з їхнього сліду. Але біля вершини тропу зволожив струмок, і нарешті знайшлися ледь помітні вм'ятинки . . .

<!— Далі йде текст глави 1 —> <H2><A name="глав2">Розділ 2. Кіннотники Рістанії</A></H2>

Сутеніло. Позаду, у лісистих підніжжях, дерева тонули в тумані, і туман підповзав до світлих заводей Андуїну, але в небесах було ясно...

<!— Далі йде текст глави 2 —>

<H2><A name="главЗ">Розділ 3. Урукхай </A></H2>

Піна огорнув неясний і неспокійний сон: йому здавалося, що він чує власний голосок десь у темних підвалах і зве: "Фродо, Фродо!"...

<!— Далі йде текст інших глав —>

</BODY></HTML>

При клацанні по внутрішньому посиланню, вказаному у змісті, документ прокручується до початку тієї чи іншої глави.

Зробимо кілька зауважень із приводу оформлення посилань. По-перше, текст посилання не повинен бути довгим, щоб не утруднювати вибір потрібного посилання при швидкому перегляді документа користувачем. По-друге, текст посилання повинен відображати зміст об'єкта, на який указує посилання. Не слід, наприклад, використовувати для посилань малоінформативні фрази типу «Клацніть тут» чи «Клацни і побачиш».

 

Вставка зображення

Важко знайти в WWW сторінку, яка не мала б зображень. Вставка зображення на Web -сторінку виконується одиночним тегом < img >. Усередині цього тегу обов'язково записується атрибут src , що вміщує URL зображення. Назва цього атрибута походить від слова source - джерело.

Наприклад, ви хочете розмістити на сторінці картинку з файла Lord . jpg . Для цього збережіть файл із зображенням у певній папці (наприклад, у тій самій папці, що і HTML -документ), а у документ введіть тег

<IMG src ="lord . jpg">

Повний код документа може мати вигляд:

<HTML> <HEAD>

<ТITLE>" Володар nepcTHiB "</TITLE> </HEAD> <BODY>

<Н2>Вставка зображення</Н2>

<IMG src ="lord . jpg"> </BODY> </HTML>

У результаті ви отримаєте Web -сторінку, як на мал. 75 .2. За умовчанням броузер покаже зображення, вирівняне по лівому краю сторінки.

Якого розміру буде зобра­ження на Web -сторінці? За умовчанням броузер використовуватиме реальні розміри зображення, яке зберігається в графічному файлі. Якщо потрібно змінити ці розміри, застосовують атрибути width (ширина) і height (висота) у тегу <img>. Значення розмірів зображення задаються звичайно у пікселах, наприклад, width ="133" height ="33". Можна також задавати ширину і висоту у відсотках розмірів зовнішнього елемента (сторінки). Наприклад, зображення, що задається тегом

<img src ="lord . jpg" width ="30%">

займе по ширині 30% сторінки, а висота буде розрахована броузером із зберіганням пропорцій.

Звичайно користувач бажає скласти уявлення про зміст сторінки, коли вона тільки почала завантажуватися. Тоді він зможе прийняти рішення, чи варто чекати повного завантаження сторінки. У цьому йому допоможуть написи на місці малюнків, що не завантажилися. Вони задаються атрибутами alt . Наприклад, така інструкція

<img src ="photo . jpg" width ="50%" alt =" Moя фотографія">

замість малюнка, що не завантажився, виведе рамку із межами малюнка і помістить у неї текст «Моя фотографія».

 

Графічні формати зображень для Web -сторінок

Основними форматами малюнків, що відображаються програмами броузерів, є GIF (скорочення від Graphics Interchange Format - графічний формат обміну) і JPEG (скорочення від Joint Photographic Experts Group - об'єднана група експертів фотографії").

Файли формату GIF (розширення . gif ) мають малий обсяг завдяки тому, що в них використовується палітра з 256 кольорів і застосовується алгоритм стиснення без утрат Лемпеля - Зіва - Велча. Цей алгоритм особливо ефективний при обробці простих ілюстрацій з великими ділянками одного кольо­ру. Формат GIF широко застосовується для створення «прозорих» малюнків, а також зображень, що завантажуються черезрядковим методом. Приклади черезрядкового завантаження ви напевно бачили при перегляді Web -сторінок в Інтернеті: спочатку завантажується простий варіант малюнка з великим роз­міром точок зображення, потім у процесі завантаження малюнка точки зображення зменшуються, і малюнок ніби виявляється. Ще однією перевагою GIF -формату є можливість використання анімації. У файлі GIF можна створити послідовність малюнків - кадрів «мультфільму», що є найпростішим способом додавання анімації на Web -сторінки.

Інший графічний формат, JPEG (розширення jpg або . jpeg ), звичайно застосовується для зображень з більшою кількістю кольорів, наприклад, для фотографій. У цьому форматі застосований метод стиснення із утратами. При збереженні високоякісних зображень JPEG займає на диску набагато менше місця, ніж GIF . Однак, формат JPEG не підтримує функції прозорості й анімації.

Існує ще один формат створення малюнків для Web -сторінок, це - PNG (скорочення від Portable Network Graphics - мережна графіка, що переноситься). Подання зображень у виді PNG -файлів застосовується як альтернатива формату GIF і є перспективним для застосування в мережних додатках. Перевагою цього формату порівняно з форматом GIF є компактність файлів і достатня якість передачі кольорів. На жаль, формат PNG підтримується поки що не всіма броузерами.

 

Зображення-посилання

Гіперпосилання на Web -сторінках можна подавати не тільки як виділений текст, а й у вигляді малюнка. Клацання мишею по такому малюнку призводить до завантаження нового HTML -документа або переходу в межах поточного документа.

Для створення зображення-посилання встановіть у потрібному місці доку­мента якірний тег <А> і вкладіть до нього елемент IMG . Наприклад, якщо у документі розмістити елемент

<А href =" http :// ww .rambler.com">

<IMG src="logo.jpg" width="100" height="28"> </A>

то можна буде клацанням по малюнку з файла Logo . jpg завантажувати пошукову систему Рамблер.

 

Про компонування й обсяг Web -сторінок

Змістова частина Web -сторінки складається з текстових і графічних елементів. Вона повинна займати щонайменше половину робочої ділянки вікна броузера. Оптимальним співвідношенням є, коли під змістову частину виділяється приблизно 80% простору сторінки, а під елементи навігації (списки, меню, кноп­ки) - 20%.

Після створення сторінки перегляньте, чи всі наявні на ній елементи потрібні. Спробуйте видалити неважливі з погляду змісту елементи. Якщо дизайн сторінки при цьому не постраждає, то без вилучених елементів узагалі можна обійтися. Пам'ятайте про загальний принцип Web -дизайну - прагнути до мінімального розміру HTML -файлів. Кожен кілобайт обсягу сторінки - це зайві секунди завантаження. Розмір HTML -файлів не повинен перевищувати 20 - 30 Кбайт, а оптимальним розміром файлів зображень є декілька кілобайтів. Якщо зображення не вміщається у файл такого розміру, потрібно виконати обробку зображення, щоб підсумковий обсяг у форматі GIF або JPEG не перевищував одного-двох десятків Кб.

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

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

 

Контрольні запитання

•  Яким елементом HTML задається посилання?

•  Що може бути цільовим об'єктом посилання?

•  Що таке внутрішні і зовнішні посилання?

•  Чим відрізняються абсолютні і відносні URL ?

•  Як створити внутрішнє посилання? Наведіть приклад.

•  За допомогою якого елемента й атрибута вставляється зображення на Web -сторінку?

•  Як задається розмір зображення?

•  Як створити посилання у вигляді малюнка?

Практикум. Компонування зображення на сторінці

Зображення, що вставляється в HTML -документ, вирівнюється за умовчанням по лівому краю сторінки. Якщо ви хочете вирівняти зобра­ження по правому краю, допи­шіть у тег <IMG> атрибут align = "right".

Разом із зображеннями на Web -сторінках, як правило, є текст. Якщо у тегу <IMG> використовується атрибут align , то текст автоматично розташовується навколо малюнка. При значенні align ="left" зобра­ження розміщається по лівому краю сторінки; а текст обтікає зображення справа. Коли задане значення align ="right", зображення розміщається справа, а текст обтікає його зліва.

Наведемо приклад сторінки (мал.75.3), де текст обтікає зображення, вирівняне по лівому краю. HTML -код цієї сторінки такий:

<HTML> <HEAD>

<TITLE>"Володар перстнів"</TITLE></HEAD> <BODY>

<IMG src="lord.jpg" align="left">

Три кольца - премудрым эльфам - для добра их гордого,<BR>

Семь колец - пещерным гномам - для труда их горного,<BR>

Девять - людям Средиземья - для служенья черного,<BR>

И одно - Всесильное - властелину Мордора,<BR>

Чтоб разъединить их всех, чтоб лишить их Bonn <BR>

И объединить навек в их земной юдоли.<BR>

Под владычеством всесильным властелина Мордора... </BODY> </HTML>

Як можна поліпшити компонування зображень і тексту? Подивіться на Web -сторінку, наведену на мал. 75.3. На ній текст ніби «липне» до малюнка, тобто розташовується впритул без зазору. Усунути цей дефект можна, задавши вільне поле навколо малюнка. Для цього використовуються атрибути hspace (задає у пікселах ширину поля праворуч і ліворуч від зображення) і vspace (задає поля зверху і знизу зображення). Наприклад, тег

<IMG src ="lord.jpg" align ="left" hspace ="25">

означає, що зверху і знизу малюнка броузер залишить вільні поля розміром 55 пікселів, а з правого і лівого боку малюнка - поля по 25 пікселів.