Можливість створити посилання в документі, який приведе вас до іншого документа, можливо, в мережі, що знаходиться на півдорозі по всьому світу, є, мабуть, єдиною найбільш важливою причиною, через яку була винайдена Всесвітня павутина. Ці посилання, які називають гіперпосиланнями, є «H» у HTML (мова розмітки гіпертексту). Без гіперпосилань Інтернет був би не дуже корисний. Не було б ніяких пошукових систем, соціальних мереж або банерної реклами (добре, більшість з нас могла б стояти, щоб побачити це).
Коли ви створюєте власні веб-сторінки, ви захочете створити гіперпосилання, і KompoZer має інструменти, які дозволяють легко додавати посилання будь-якого типу. Зразок сторінки, зображений у цьому керівництві, міститиме посилання на інші веб-сайти чотирьох категорій, інші частини цієї ж веб-сторінки та початок повідомлення електронної пошти. Я почну з заголовка і чотирьох
заголовки для кожної категорії. На наступній сторінці ми додамо декілька посилань.
01
з 05
Створення гіперпосилання за допомогою KompoZer
Доступ до інструментів гіперпосилання KompoZer можна отримати, натиснувши кнопку «Посилання» на панелі інструментів. Щоб створити гіперпосилання:
- Розташуйте курсор на сторінці, де ви хочете розмістити гіперпосилання.
- Натисніть кнопку «Посилання» на панелі інструментів. Відкриється діалогове вікно «Властивості посилання».
- Перше поле, яке ви бажаєте заповнити, - це поле «Текст посилання». Введіть текст, який ви хочете, щоб з'явитися на сторінці для вашої гіперпосилання.
- Друге поле, яке вам потрібно заповнити, це поле Link Location. Введіть URL-адресу сторінки, за якою ваша гіперпосилання прийме користувача при натисканні. Це гарна ідея, щоб скопіювати і вставити URL з адресного рядка вашого переглядача. Ймовірність того, що ви зробите помилку, набагато нижче, і ви знаєте, принаймні, під час створення свого посилання, що сторінка жива і це посилання не пошкоджено.
- Натисніть кнопку Гаразд, і діалогове вікно Link Properties закриється. Ваше посилання тепер з'явиться на вашій сторінці.
У більшості переглядачів гіперпосилання виділяється синім підкресленим текстом за замовчуванням. Ви можете застосовувати свої власні стилі до гіперпосилань за допомогою KompoZer, але поки ми будемо дотримуватися основної гіперпосилання. Рекомендується попередньо переглянути сторінку в веб-переглядачі та клацнути посилання, щоб переконатися, що вони працюють.
02
з 05
Створення якірного посилання з KompoZer
Існує інший вид гіперпосилання, яка при натисканні приводить вас до іншої частини тієї ж веб-сторінки. Цей вид гіперпосилання називається посиланням-прив'язкою, а область сторінки, на яку ви переходите при натисканні на це посилання, називається прив'язкою. Якщо ви коли-небудь використовували посилання «вгору» внизу веб-сторінки, ви натискаєте посилання на якір.
KompoZer дозволяє створювати прив'язки, на які ви можете посилатися за допомогою інструмента «Якір» на панелі інструментів.
- Натисніть область вашої сторінки, де ви хочете прив'язку. Тобто туди, куди ви хочете, щоб перегляд сторінок переходив при натисканні на посилання прив'язки. Для цього прикладу я клацнув безпосередньо перед «F» у заголовку «Улюблена музика».
- Натисніть кнопку «Якір» на панелі інструментів. Відкриється діалогове вікно Властивості іменованої прив'язки.
- Кожен якір на сторінці повинен мати унікальне ім'я. Для цього якорі я використовував назву «музика».
- Натисніть кнопку Гаразд, і ви повинні побачити, що символ прив'язки з'явиться в тому місці, де ви хотіли прив'язку. Цей символ не з'явиться на вашій веб-сторінці, просто KompoZer покаже вам, де знаходяться ваші якоря.
- Повторіть процедуру для будь-яких інших областей сторінки, на які ви хочете, щоб користувачі могли переходити. Якщо на сторінці багато тексту, розділеного заголовками або якимось іншим логічним роздільником, якір - це простий спосіб навігації на сторінці.
Далі ми створимо посилання, які приведуть читача до якорів, які ви створили.
03
з 05
Створення навігації за допомогою KompoZer
Тепер, коли у вас є прив'язки на вашій сторінці, давайте створимо посилання, які будуть використовуватися в якості ярликів для цих прив'язок. Для цього уроку я створив таблицю з 1 рядка і 4 стовпчика під верхнім заголовком сторінки. Кожна комірка таблиці містить той же текст, що і один із заголовків категорій, які використовуються для поділу посилань на сторінці. Ми зробимо текст у кожній з цих комірок таблиці посиланням на відповідний якір.
04
з 05
Створення гіперпосилань на якір за допомогою KompoZer
Тепер, коли у нас є свої якіри і введено текст, який ми будемо використовувати для навігації по сторінках, ми можемо перетворити ці фрагменти простого тексту на посилання. Ми знову будемо використовувати кнопку «Посилання», але цього разу вона буде працювати трохи інакше.
- Виберіть текст, який ви хочете перетворити на посилання. У цьому прикладі я вибрав текст «Улюблена музика», який знаходиться в першій комірці таблиці вгорі сторінки.
- Натисніть кнопку «Посилання» на панелі інструментів. Відкриється діалогове вікно «Властивості посилання».
- У цьому випадку ми вибрали текст перед натисканням кнопки «Посилання», тому розділ «Текст посилання» вікна вже заповнений і не може бути відредагований. Натисніть стрілку вниз у розділі Адреса посилання. Ви побачите список якорів, які ви створили на попередніх кроках. Для цього прикладу я вибрав # music anchor.
- Натисніть кнопку Гаразд. Текст «Улюблена музика» на панелі навігації перетворюється на посилання, яке змусить глядача при клацанні перейти до цього розділу на сторінці.
Ви помітите, що кожен іменований якір у спадному меню має знак «#». Так ви б створили посилання на якір в HTML. «#» Перед назвою прив'язки говорить браузеру, що це посилання приведе вас в інше місце на тій же сторінці.
05
з 05
Створення гіперпосилання з зображення за допомогою KompoZer
Чи знаєте ви, що ви можете створити посилання із зображень, а також текст? KompoZer дозволяє зробити це всього за кілька кліків. Тут я вставив маленьке зображення значка зі стрілкою, що вказує вгору, і текстом TOP внизу сторінки. Я збираюся використовувати це зображення як посилання, щоб повернутися до початку сторінки.
- Клацніть правою клавішею миші зображення та виберіть «Властивості зображення та посилання» у контекстній мітці. Відкриється діалогове вікно «Властивості зображення».
- На вкладці «Розташування» ви побачите назву файлу зображення та ескіз, який вже заповнено. Введіть текст у поле «Альтернативний текст». Це те, що з'являється, коли ви наводите курсор миші на зображення, а також те, що читається програмою читання з екрану, коли людина з порушеннями зору читає веб-сторінку.
- Натисніть вкладку Посилання. Тут ви можете вибрати якір з меню, як ми зробили з посиланнями на якір. Фактично, це зображення використовується як якірне посилання. Я вибрав якір # Links_Of_Interest, який поверне нас до вершини.
- Натисніть кнопку Гаразд. Тепер зображення натискають верхню частину сторінки.