Гіперпосилання і графіка на Web-сторінці
Гіперпосила́ння (або пóклик) — це активний (виділеним кольором) текст, зображення чи кнопка на веб-сторінці, натиснення на яку (активізація гіперпосилання) викликає перехід на іншу сторінку чи іншу частину поточної сторінки.
Гіперпосилання HTML-сторінки
Гіперпосилання — фрагмент HTML-документу та один із базових його елементів. Гіперпосилання у HTML-документі може вказувати як на файл, що лежить у тій самій директорії на сервері, так і вміщати повний шлях URL до файлу, який розташований в Інтернеті. Також можна створювати гіперпосилання на електронну пошту, відео, аудіофайли та інші документи.
Гіперпосилання для користувача — текст або графічне зображення на сайті чи електронному документі, що дозволяє переходити до інших об'єктів Інтернету
Якщо
обидва файли розташовуються в одній директорії, вистачить лише вказати ім'я
файлу і розширення. Якщо в сусідніх директоріях, слід вказати крім імені та
розширення ще й шлях до директорії. Якщо файли розташовуються на різних
директоріях, потрібно вказати повну URL-адресу. Саме посилання в HTML
створюється за допомогою тегу <a></a>,
де атрибут href="URL" вказує
на URL файлу.
Створення
настроюваного гіперпосилання на документ, файл або веб- сторінку
1.
Виділіть текст
або зображення, які потрібно відобразити як гіперпосилання.
2.
На вкладці Вставлення в групі Посилання натисніть кнопку Гіперпосилання .
Також можна
клацнути правою кнопкою миші текст або зображення та вибрати пункт Гіперпосилання в контекстному меню.
3.
Виконайте одну з
таких дій:
o
Щоб створити
посилання на наявний файл або веб-сторінку, у розділі Зв’язати з виберіть варіант файлом, веб-сторінкою, а потім у поле Адреса введіть адресу посилання. Якщо адреса файлу невідома,
клацніть стрілку розкривного меню Папка
та перейдіть до потрібного файлу.
o
Щоб створити
посилання на файл, який ще не створено, у списку Зв’язати з виберіть варіант новим документом, введіть ім’я нового файлу в полі Ім’я нового документа, а потім у
розділі Коли почати редагування нового
документа виберіть варіант Пізніше
або Зараз.
Примітка : Щоб настроїти текст
екранної підказки, який відображається під час наведення вказівника миші на
гіперпосилання, натисніть кнопку Підказка
та введіть потрібний текст. Якщо не ввести текст підказки, у програмі Word
замість неї відображатиметься шлях до файлу або його адреса.
Створення гіперпосилання на пусте повідомлення електронної пошти
1.
Виділіть текст
або зображення, які потрібно відобразити як гіперпосилання.
2.
На вкладці Вставлення в групі Посилання натисніть кнопку Гіперпосилання .
Також можна
клацнути правою кнопкою миші текст або зображення та вибрати пункт Гіперпосилання в контекстному меню.
3.
У розділі Зв’язати з виберіть параметр електронною поштою.
4.
Введіть потрібну
адресу електронної пошти в полі Адреса
електронної пошти або виберіть адресу зі списку Недавно використані адреси електронної пошти.
5.
У полі Тема введіть тему повідомлення
електронної пошти.
Примітка :
·
Деякі
веб-браузери та програми електронної пошти можуть не розпізнавати рядок теми.
·
Щоб настроїти
текст екранної підказки, який відображатиметься під час наведення вказівника на
гіперпосилання, натисніть кнопку Підказка
та введіть потрібний текст. Якщо не ввести текст підказки, у програмі Word як
підказка відображатиметься напис "mailto" та адреса електронної пошти
й рядок теми.
Порада : Також можна створити гіперпосилання на пусте
повідомлення електронної пошти, ввівши адресу в документі. Наприклад, введіть abc@example.com, і програма Word
автоматично створить гіперпосилання, якщо ви не вимкнули функцію автоматичного
форматування гіперпосилань.Створення гіперпосилання на розташування в поточному документі або на поточній веб-сторінці
Якщо ви створили документ або веб-сторінку в програмі Word і хочете створити посилання на розташування в цьому документі або на веб-сторінці, позначте розташування або місце призначення гіперпосилання, а потім додайте посилання на нього.Позначення розташування гіперпосилання
Щоб позначити розташування гіперпосилання, можна скористатися закладкою або стилем заголовка в програмі Word.Вставлення закладки
У поточному документі виконайте такі дії:
1.
Виділіть текст
або елемент, для якого потрібно призначити закладку, або клацніть область у
документі, куди потрібно вставити закладку.
2.
На вкладці Вставлення в групі Посилання натисніть кнопку Закладка.
3.
У полі Ім’я закладки введіть ім’я.
Ім’я закладки має
починатися з букви та може містити цифри. Пробіли в імені закладки
використовувати не можна. Якщо потрібно розділити слова в імені закладки,
скористайтеся символом підкреслення (наприклад, Перший_заголовок).
4.
Натисніть кнопку Додати.
Застосування стилю заголовка
До тексту в розташуванні, куди потрібно перейти, можна застосувати один із вбудованих стилів заголовків, передбачених у програмі Word. У поточному документі виконайте такі дії:
1.
Виберіть текст,
до якого потрібно застосувати стиль заголовка.
2.
На вкладці Основне в групі Стилі виберіть потрібний стиль.
Наприклад, якщо ви
виділили текст, який необхідно оформити як основний заголовок, у колекції
експрес-стилів виберіть стиль із назвою Заголовок 1.
Додавання посилання
1.
Виділіть текст
або об’єкт, який потрібно відобразити як гіперпосилання.
2.
Клацніть правою
кнопкою миші та в контекстному меню виберіть пункт Гіперпосилання .
3.
У розділі Зв’язати з виберіть пункт місцем у документі.
4.
Зі списку
виберіть заголовок або закладку, на яку має вказувати посилання.
Примітка : Щоб настроїти текст
екранної підказки, який відображається під час наведення вказівника миші на
гіперпосилання, натисніть кнопку Підказка
та введіть потрібний текст. Якщо не ввести текст підказки, у програмі Word як
підказка відображатиметься напис "Поточний документ". Для посилання
на закладку в програмі Word використовується ім’я закладки.
Створення гіперпосилання на певне розташування в іншому документі або на іншій веб-сторінці
Якщо ви створили документ або веб-сторінку в програмі Word і хочете створити посилання на розташування в цьому документі або на веб-сторінці, позначте розташування або місце призначення гіперпосилання, а потім додайте посилання на нього.Позначення розташування гіперпосилання
1.
Вставте закладку
в кінцевий файл або на веб-сторінку призначення.
2.
Відкрийте файл, у
якому потрібно вставити гіперпосилання, і виберіть текст або об’єкт, який
потрібно відобразити як гіперпосилання.
3.
Клацніть правою
кнопкою миші та в контекстному меню виберіть пункт Гіперпосилання .
4.
У розділі Зв’язати з виберіть параметр файлом, веб-сторінкою.
5.
У полі Папка клацніть стрілку вниз, перейдіть
до файлу, на який потрібно створити посилання, і клацніть цей файл.
6.
Натисніть кнопку Закладка, виберіть потрібну закладку,
а потім натисніть кнопку OK.
Примітка : Щоб настроїти текст
екранної підказки, який відображається під час наведення вказівника миші на
гіперпосилання, натисніть кнопку Підказка
та введіть потрібний текст. Якщо не ввести текст підказки, у програмі Word
замість нього відображатиметься шлях до файлу, зокрема ім’я закладки.
Додавання посилання
1.
Виділіть текст
або об’єкт, який потрібно відобразити як гіперпосилання.
2.
Клацніть правою
кнопкою миші та в контекстному меню виберіть пункт Гіперпосилання .
3.
У розділі Зв’язати з виберіть пункт місцем у документі.
4.
Зі списку
виберіть заголовок або закладку, на яку має вказувати посилання.
Примітка : Щоб настроїти текст
екранної підказки, який відображається під час наведення вказівника миші на
гіперпосилання, натисніть кнопку Підказка
та введіть потрібний текст. Якщо не ввести текст підказки, у програмі Word як
підказка відображатиметься напис "Поточний документ". Для посилання
на закладку в програмі Word використовується ім’я закладки.
Порада : З документа Word можна створити посилання на
певні розташування у файлах, збережених у форматі Microsoft Office Excel (XLS)
або Microsoft Office PowerPoint (PPT). Щоб створити посилання на певне
розташування в книзі Excel, створіть визначене ім’я в книзі, а потім у кінці
імені файлу в гіперпосиланні введіть #
(символ номера), а після нього визначене ім’я. Щоб створити посилання на певний
слайд у презентації PowerPoint, після імені файлу введіть символ #, а після нього номер слайда.Швидке створення гіперпосилання на інший файл
Гіперпосилання можна швидко створити, не відкриваючи діалогове вікно Додавання гіперпосилання. Для цього перетягніть вибраний текст або зображення з документа Word або перетягніть веб-адресу чи гіперпосилання з деяких браузерів. Також можна скопіювати вибрану клітинку або діапазон у програмі Microsoft Office Excel.Наприклад, може знадобитися створити гіперпосилання на довше пояснення в іншому документі або на новину на веб-сторінці.
Увага! : Текст потрібно копіювати зі вже збереженого файлу.
Примітка : Якщо перетягнути графічні об’єкти, як-от фігури, гіперпосилання створити не вдасться. Щоб створити гіперпосилання на графічний об’єкт, виберіть об’єкт, клацніть його правою кнопкою миші та в контекстному меню виберіть пункт Гіперпосилання .
Створення гіперпосилання перетягуванням вмісту з іншого документа Word
1.
Збережіть файл,
на який потрібно створити посилання. Це – кінцевий документ.
2.
Відкрийте
документ, куди потрібно додати гіперпосилання.
3.
Відкрийте
кінцевий документ і виберіть текст, графічний об’єкт або інший елемент, до
якого потрібно перейти.
Наприклад,
виділіть перші кілька слів розділу документа, на який потрібно створити
посилання.
4.
Клацніть
виділений елемент правою кнопкою миші, перетягніть його на панель завдань і
наведіть вказівник миші на піктограму документа, до якого потрібно додати
гіперпосилання.
5.
Відпустіть праву
кнопку миші в розташуванні на сторінці, де потрібно вставити гіперпосилання, а
потім натисніть кнопку Створити
гіперпосилання .
Примітка : Текст, графічний
об’єкт або інший елемент, що ви вибрали, тепер має стати посиланням на кінцевий
документ.
Створення гіперпосилання перетягуванням із веб-сторінки
1.
Відкрийте
документ, куди потрібно додати гіперпосилання.
2.
Відкрийте
веб-сторінку та клацніть правою кнопкою миші елемент, на який потрібно створити
посилання на веб-сторінці.
3.
Перетягніть
елемент на панель завдань і наведіть вказівник миші на піктограму документа, до
якого потрібно додати гіперпосилання.
4.
Відпустіть праву
кнопку миші в розташуванні на сторінці, де потрібно вставити гіперпосилання, а
потім натисніть кнопку Створити
гіперпосилання .
Створення гіперпосилання копіюванням і вставленням з електронної таблиці Excel
1.
Відкрийте аркуш
Excel, на який потрібно створити посилання, і виберіть потрібну клітинку або
діапазон клітинок.
2.
Клацніть їх
правою кнопкою миші та в контекстному меню виберіть команду Копіювати.
3.
Відкрийте
документ Word, куди потрібно додати гіперпосилання.
На вкладці Основне в групі Буфер
обміну клацніть стрілку під кнопкою Вставити та виберіть пункт Вставити
як гіперпосилання.Графіка Web-сторінки
Фонове
зображення
Отже, давайте розберемося, яким же чином
можна використовувати графічні елементи на веб-сторінці. Розглянемо такий
приклад. Допустимо, ми хочемо, щоб читачі дізналися достоїнства нашого коханого
електронного піаніно - клавінови. Ми вже написали відповідний текст, але хочемо
його оформити не дуже строго. І тут найпростішим рішенням буде розмістити цей
текст не на одноколірному, а на тематичному фоні. Допустимо, що у нас заготовлено відповідний фоно вий малюнок (про те, як це зробити, див. в розділі 3.5) - він записаний у файлі під ім'ям back1 .jpg (мал. 3.1). Якщо при окремому перегляді цього малюнка він вам подобається, це ще нічого не означає. Щоб визначити, чи підходить малюнок як фон до тексту, його потрібно перевірити “в справі”.
Щоб помістити малюнок на веб-сторінку як фон, потрібно встановити в теге <BODY> атрибут BACKGROUND= із значенням, що містить ім'я файлу малюнка.
<BODY BACKGROUND""Images/back1.jpg">
Якщо малюнок менше вікна броузера, то він повторюватиметься по горизонталі і по вертикалі. Це відбувається автоматично, і до недавнього часу це не можна було відмінити. Тепер же, якщо ви не хочете повторення
Мал.
3.1. Фоновий малюнок.
Можна вказати або відносне місцеположення
файлу малюнка (тобто шлях доступу до нього відносне розташування початкового
HTML-файлу), або його повну URL-адресу. Тут і далі ми припускаємо, що ви
розмістили в тій же теці, що і HTML-файл, теку , у яку складаєте всі графічні
файли. Повернемося до нашого малюнка. Ясно, що на такому сіруватому фоні чорні букви читатимуться погано, тому відразу визначимо для тексту білий колір (або майже білий). Гіперпосилань у нас поки немає, але про них все одно треба поклопотатися заздалегідь. Поки давайте визначимо для них жовтий колір. Подивимося, що у нас виходить:
<HTML>
<HEAD>
<TITLE>Клавинова</TITLE>
</HEAD>
<BODY BACKGROUND="3.1.jpg" TEXT="#F8F8F8" LINK="Yellow" VLINK="Yellow" ALINK="Yellow">
<H1><DIV ALIGN="center">Клавинова</DIV></H1>
<P ALIGN="justify">
Инструменты серии
<BIG>Клавинова</BIG>
, выпускаемые компанией Yamaha, являются достойной заменой
<I>обычных</I>
пианино для массового пользователя. Во-первых,
<BIG>KJIABHHOBA</BIG>
стоит
<В>дешевле</В>
маломальски хорошего пианино или тем более рояля, а во-вторых, ее звук и исполнительские ощущения зачастую не хуже, а
<U>лучше</U>
, чем на «живых» инструментах того же (или даже чуть более
<SUP>высокого</SUP>)
ценового диапазона.
</Р> </BODY> </HTML>
Результат показаний на мал. 3.2. До речі, звернете увагу, що тут ми трохи “попрацювали” з елементами тексту, щоб трохи пожвавити їх: назва “клавінова” виділена крупним шрифтом, достоїнства - де підкреслені, де виділені напівжирним шрифтом, слово “звичайних” для підкреслення іронії виділене курсивом, а слово “високого” підняте над основним текстом за допомогою тега <SUP>.
Все це добре задумано, але вся сторіночка виглядає не дуже привабливо. По-перше, фон має яскраво виражену “клітинну структуру”. По-друге, текст читається не дуже добре: для його сприйняття доводиться напружувати зір, особливо при великих екранних дозволах.
Мал.
3.2. Не найвдаліше застосування фонового малюнка
Спробуємо вирішити ці проблеми. По-перше,
трохи зменшимо розмір фонового малюнка, щоб залишити в нім тільки кольори
приблизно одній яскравості. По-друге, оскільки текст білий, потрібно для улучше
нія його читаності підвищити контрастність тексту з фоном. У будь-якому
графічному редакторові знизимо яскравість нашого малюнка, що зробить його
темніше. Крім того, згідно загальному правилу, світлий текст на темному фоні краще завжди робити трохи більше. Тому укладемо наш текст в теги <BIG>...</BIG>.
Графічні
ілюстрації
І, нарешті, проілюструємо наш текст,
вставивши перед описом фотографію клавінови. Припустимо, що фотографія у нас
вже готова і лежить в палиці під ім'ям clavi.gif. Вставити її в текст можна з
помо щью тега <IMG>, наприклад, от так: <IMG SRC="Images/clavi.gif">
В принципі, це вже достатньо - на місці цього запису броузер відобразить нашу картинку. Проте краще вказати в теге <IMG> ще декілька атрибутів.
По-перше, треба пам'ятати, що картинки завантажуються з мережі завжди набагато повільніше, ніж звичайний текст. Це я говорю не до того, що сам файл картинки повинен бути не дуже великого об'єму (це вірно, але це питання ми обговоримо окремо), а до того, що при такому записі, як вище, багато броузери, почавши завантажувати картинку, припинять завантаження подальшого тексту до тих пір, поки картинка не буде завантажена повністю. Але для читача було б зручніше, якби текст продовжував завантажуватися араллельно з картинкою: поки вона довантажується, можна було б щось вже читати. Щоб броузер міг це зробити, йому потрібно явно вказати розміри майбутньої картинки за допомогою атрибутів WIDTH= і HEIGHT=:
<IMG SRC="Images/clavi.gif" WIDTH="300" HEIGHT="200">
Взагалі кажучи, за допомогою цих атрибутів можна задати які завгодно розміри картинки, “розтягнувши” або стиснувши її як душі завгодно. Проте зазвичай цього не роблять, і ось чому. Представляти картинку меншою, ніж вона є, недоцільно, оскільки навіщо тоді вантажити великий файл? Адже файли для картинок великого розміру мають великий розмір і вантажаться з Інтернету, відповідно, набагато довше. Краще вже зробити малень кий файл для картинки маленького розміру і швидко завантажити його. А якщо представити картинку більшою, ніж вона є, то, як правило, вона виглядатиме малопрівлекательно за рахунок появи “ступінчастості” як у формах, так і в кольорі.
Далі, хорошим тоном є наявність так званого альтернативного тексту для тих випадків, коли в броузере відключено проглядання графіки. Тоді на місці нашої картинки буде виведений прямокутник соответ ствующего розміру, який супроводжується поясненням, що за картинка на цьому місці повинна бути. Альтернативний текст вводиться як значення атрибуту ALT:
<IMG SRC="Images/clavi.gif" WIDTH="300" HEIGHT="200" АLТ="Клавинова">
Нарешті, навколо малюнка можна відобразити рамку. Товщина цієї рамки задається як значення атрибуту BORDER=. Якщо ми, як в даному випадку, не хочемо відображати рамку навколо малюнка, то можемо нічого і не указувати, оскільки більшість броузеров за умовчанням рамку не малюють. Але деякі броузери все ж таки це роблять, і “для вірності” непогано б вказати і відсутність рамки теж:
<IMG SRC="Images/clavi.gif" WIDTH="300" HEIGHT="200" АLТ="Клавинова" BORDER="0">
Чого ще не вистачає нашому HTML-файлу? Звичайно ж, гіперпосилань! Без них будь-який документ в Інтернеті сприймається набагато нудніше, оскільки відвідувач відразу бачить, що зайшов в безвихідь. Тому обов'язково додайте гіперпосилання скрізь, де це тільки можна. В даному випадку, наприклад, слово “Yamaha” просто проситься стати гіперпосиланням на сайт відповідної компанії. Зробимо це:
<A HREF="http://www.yamaha.com">Yamaha</A>
До речі, картинки теж можуть містити гіперпосилання. Ми можемо, напри заходів, точно так, як і із словом “Yamaha”, поступити і з нашим тегом картинки. Тоді клацання на зображенні клавінови також відведе користувача на сайт компанії Yamaha.
Давайте подивимося, що у нас виходить.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>KJIABHHOBA</TITLE>
</HEAD>
<BODY BACKGROUND="Images/back4.jpg" TEXT="#F8F8F8" LINK="Yellow" VLlNK="Yellow" ALINK="Yellow" BGCOLOR="#OBOBOB">
<H1><DIV ALIGN="center">KJIABHHOBA</DIV></Hl>
<DIV ALIGN="center">
<A HREF="http://www.yamaha.com">
<IMG SRC="Images/clavi.gif" WIDTH="300" HEIGHT="200" ALT="KJIABHHOBA" BORDER="0"></A></DIV>
<BIG>
<P ALIGN="justify">Инструменты серии
<BIG>KJIABMHOBA</BIG>
, выпускаемые компанией
<А HREF="http: //www.yamaha.com">Yamaha </A>
, являются достойной заменой
<I>обычных</I>
пианино для массового пользователя. Во-первых,
<ВIG>КЛАВИНОВА</ВIG>
стоит
<В>дешевле</В>
мало-мальски хорошего пианино или тем более рояля, а во-вторых, ее звук и исполнительские ощущения зачастую не хуже, а <U>лучше</U>, чем на &lаquо;живых» инструментах того же (или даже чуть более
<SUP>Bыcoкoro</SUP>
) ценового диапазона.
</Р>
</BIG>
</BODY>
</HTML>
Результат наших праць представлений на мал. 3.3. Звернете увагу на те, що для розташування картинки по центру ми поступили так само, як і при центруванні звичайного тексту - використовували конструкцію <DIV ALIGN="center">.
Текст тепер дійсно сприймається набагато краще. Правда, із-за використання слів різного розміру і тега <SUP> наші строчки вийшли різної висоти, що не дуже красиво. Проте поки не будемо цим займатися - гнучко управляти висотою рядків можна за допомогою каскадних таблиць стилів, про що піде мова в наступному розділі.
Ще слід відмітити, що ми не дарма визначили в нашому прикладі колір фону (за допомогою атрибуту BGCOLOR=). Адже якщо у користувача в броузере відключено завантаження графіки, то наш білий текст у нього відображатиметься на заданому за умовчанням білому фоні, і в результаті нічого не буде
Мал.
3.3. Приклад сторіночки з фоновим малюнком і ілюстрацією
видно! Та і взагалі, фоновий малюнок може
завантажитися і промальовуватися не відразу, адже це графічний файл, що має
набагато більші розміри, чим текст! Тому завжди незайве явно вказати потрібний
колір фону, бажано близький по відтінку до фонового малюнка. До речі, тег <IMG> може мати власний атрибут ALIGN=, який управляє розташуванням малюнка щодо тексту. У нашому прикладі це було не актуально, оскільки малюнок знаходився в окремому блоці <DIV> . Але якщо малюнок “вбудований” в текст, тобто декілька варіантів його розташування:
ALIGN="left" - текст обтікає малюнок, який розташовується зліва;
ALIGN="right" - текст обтікає малюнок, який розташовується справа;
ALIGN="top" - малюнок розташовується усередині текстового рядка, і його верхня межа співпадає з верхньою межею букв тексту (можна також застосовувати значення "texttop");
ALIGN="middle" - малюнок розташовується усередині текстового рядка, який вертикально вирівнюється по центру малюнка (можна також при міняти значення "absmiddle");
ALIGN="bottom" - малюнок розташовується усередині текстового рядка, і його нижня межа співпадає з нижньою межею букв тексту (можна також застосовувати значення "absbottom" або "baseline").
Крім того, щоб малюнок не дуже “притискався” до тексту, можна залишити між ними трохи “повітря”. Для цього в теге <IMG> використовують атрибути HSPACE= і VSРАСЕ=, значення яких задають відповідно горизонтальне і вертикальне “поля” малюнка.
І ще невелике зауваження: броузер Internet Explorer (версія 4 і вище) дозволяє за допомогою тега <IMG> завантажувати і проглядати також відеофрагменти у форматі AVI (Video for Windows). Для цього можна встановити атрибут DYNSRC=, як значення якого вказати ім'я AVT-файлу. При цьому можна додатково вказати в атрибуті START=, коли слід починати програвання відео: "FILEOPEN" - відразу після завантаження файлу або "MOUSEOVER" - після наведення покажчика миші на зображення. Атрибут LOOP= дозволяє встановити кількість програвань: "О" означає нескінченне повторення, алюбоє інше число указує точна кількість повторів.
Немає коментарів:
Дописати коментар