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

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

Вставка гіперпосилання

У HTML для вставки гіперпосилання використовується дескриптор (тег) Це приклад того, як вставити гіперпосилання в HTML-документ, що здійснюється за допомогою тега . Відвідувач сайту побачить підкреслений текст, відмінний від кольору навколишнього тексту (колір HTML-посилання може бути будь-яким), «головна сторінка Google», натиснувши на який, він потрапить на головну сторінку пошукової системи «Гугл». Слід зазначити, що текст гіперпосилання повинен містити інформацію про те, куди буде здійснено перехід. Цього принципу слід дотримуватися і взяти за правило!

Структура тега

Можна помітити, що тег вся ця конструкція називається елементом веб-документа. За правилами HTML, одні елементи можуть містити інші елементи. Тег не виняток. Якщо програмісту необхідно виділити жирним слово Google, то робиться це за допомогою тега за загальними правилами форматування тексту, дотримуючи послідовність вкладених тегів. Веб-майстер повинен знати, як створити гіперпосилання в HTML без помилок, інакше вони не будуть працювати. Непрацюючі посилання на комп'ютерному сленгу називають «битими». головна сторінка Гугл Тут: елемент Гугл [/b] містить вкладений елемент Гугл Тепер відвідувач сторінки побачить гіперпосилання виділених жирним текстом словом «Гугл».

Абсолютні гіперпосилання

Гіперпосилання використовують абсолютні URL-адреси сайтів, які містять імена доменів (.ru, .com, .org, .gov), називаються абсолютними і мають наступний синтаксис: протокол://назва домену/шлях до файлу Приклад адреси поширеного в Америці пошукача: https://aol.com — абсолютний, так як містить ім'я домену .com. Абсолютні гіперпосилання використовуються для переходів на сторінки інших сайтів або для доступу до ресурсів, розташованим на іншому сервері. Перехід здійснюється за допомогою протоколів Інтернету. Протоколи — це не тема даної статті, але оскільки вони беруть участь у створенні гіперпосилань, необхідно хоча б коротко про них згадати:
http і https — найбільш часто зустрічаються; за ним здійснюється перехід між веб-сторінками різних сайтів; ftp — протокол для завантаження файлів на сервер або скачування з користувачем сайту; mailto — поштовий протокол, за яким надсилається електронна пошта безпосередньо з сайту, не заходячи в особисту пошту. Існують ще кілька протоколів особливого призначення (gopher, telnet), зустрічаються досить рідко, використання яких вимагає спеціальних знань у програмуванні або системному адмініструванні.

Відносні гіперпосилання

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

Відносна адресація при створенні сайту

Зручний і найбільш поширений алгоритм створення сайту програмістом: створення папки на комп'ютері і розташування її в місці швидкого доступу для зручності; створення в цій папці головної сторінки сайту index.html; створення другорядних веб-сторінок (index.html/page2); створення папки та розміщення в ній графічних файлів; створення папки та розміщення в ній інших об'єктів (файли для скачування, наприклад); наповнення сайту контентом; розміщення файлів сайту на хостингу. Обов'язково доведеться використовувати посилання для зв'язку між елементами сайту, і дуже до речі буде знати, як вставити гіперпосилання в HTML на іншу сторінку цього ж сайту. Якщо файли сайту знаходяться в одній директорії, на одному сервері, то немає необхідності використовувати абсолютну адресацію. При передачі файлів сайту на хостинг зв'язок між об'єктами збережеться, тому що вони на хостингу також розмістяться в одній директорії. Припустимо, програміст створив головну сторінку сайту index.html на яку є посилання на іншу сторінку page2.html, прикрашену картинкою img.png. Тоді відносний шлях до цієї картинці буде виглядати так: картинка Порада: при вивченні цієї теми краще всього використовувати простий редактор тексту з причини того, що потрібно придбати вправність у правильному написанні адрес переходу і щоб навчитися розбиратися в чужому коді. На цьому етапі буде хорошим результатом без помилок прописана гіперпосилання в блокноті, HTML їх не прощає та видає помилки.

Способи переходу за гіперпосиланнями

За замовчуванням нова сторінка відкривається в поточному вікні браузера, коли користувач клікає по ним. Але веб-програміст може змінити значення за замовчуванням і змусити відкриватися сторінку, наприклад, у новому вікні. Для цього існує атрибут target з певним своїм значенням. Наочно це можна виразити таблицею. Значення атрибута target

_blank



відкриває сторінку в новому вікні браузера



_self



відкриває сторінку в поточному вікні (значення за замовчуванням)



_parent



відкриває сторінку батьківському фреймі



_top



при використанні фреймів скасовує їх всі і відкриває сторінку в поточному вікні браузера

Синтаксис застосування атрибута target: головна сторінка гугл Головна сторінка «Гугл» відкриється у новому вікні. Примітка: для відкриття сторінок у новій вкладці не існує значень для даного атрибута, а задається самим користувачем в настройках браузера.

Колір гіперпосилань

Досвідчений користувач Інтернету з часом повинен був помітити, що гіперпосилання відрізняються за кольором від навколишнього тексту, і зазвичай вони сині. Посилання, за яким він переходив і потім повернувся на попередню сторінку, стають бузковими. Використання гіперпосилань в HTML в нестандартній колірній гамі небагато, але виділяє на сайті серед інших. Задаються кольори посилань в тезі з допомогою атрибутів і їхніх значень, в яких виступає колір HTML в системі rgb (#00FF00) або з прямим зазначенням імені кольору («green»). Існує три види атрибутів для посилань: link — задає колір відвіданого посилання; vlink — задає колір посилання, по якій користувач переходив; alink — задає колір посилання в момент переходу на іншу сторінку. Це відбувається швидко, тому не завжди можна вловити цей ефект. Приклад розмітки: Якщо застосувати ці атрибути тегу посилання даного веб-документа будуть темно-синіми, відвідані – лілового, а активні – оранжево-червоного кольору.

Графічні гіперпосилання

Прогрес і розвиток веб-дизайну зобов'язують знати, як вставити гіперпосилання в HTML в якості зображення. Зрозуміло, що картинка повинна відповідати вмісту сторінки призначення. Наприклад, головна сторінка сайту про лікарських рослинах може бути представлена у вигляді фотографій рослин, клікнувши по яких, користувач переходить на сторінку, на якій описуються лікарські властивості рослини. Широко застосовується спосіб заміни статичних кнопок ( ) на красиві графічні, створені веб-дизайнером в редакторах графіки (GIMP, Photoshop). Для вставки графіки в якості гіперпосилань на сторінки сайту використовується той же синтаксис, тільки замість тексту використовується тег вставки зображення за правилами HTML: До тегу Щоб дзвінки здійснювалися з сайту, необхідно наявність не тільки посилання на номер телефону абонента, але і гарнітури (мікрофон, навушники), встановленої на комп'ютері VoIP-програма, швидкість інтернету повинна перевищувати 05 Мб/сек. Оплата за дзвінки здійснюється витратою трафіку. Тому, якщо Інтернет безлімітний, то дзвінки безкоштовні.

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

Розміщуючи сайт в Інтернеті, веб-майстер повинен знати, які види гіперпосилань існують у HTML, і не тільки правильно, професійно їх застосовувати, але й дотримуватися наступних положень: Гіперпосилання має бути добре видно, відрізнятися від навколишнього її тексту. Користувач повинен знати, що це – гіперпосилання. Користувачеві має бути зрозуміло, куди він потрапить, натиснувши на посилання. Для цього доцільно використовувати ще атрибут title, який лаконічно описує сторінку переходу. Синтаксис застосування атрибута такий: Yandex Користувач повинен отримати правдиву інформацію про файл, який буде завантажено при переході по посиланню. Потрапивши не на очікувану сторінку або скачавши не той файл, користувач в 99% випадків тут же покине сайт і в майбутньому ніколи на нього не зайде.

Анти-Seo при створенні гіперпосилань

Крім технічної сторони питання про те, як вставити гіперпосилання в HTML, слід висвітлити ще й моральний аспект. Існує багато сайтів, доступ до яких користувачам блокується програмами безпеки (антивірусом) або навіть державою. Це ті сайти, які були створені нечистими на руку веб-програмістами. Одна з хитрощів, до якої вони вдаються, – це вставка «невидимих» гіперпосилання на веб-сторінку. Шахраї знають, як створити гіперпосилання в HTML, а за допомогою атрибутів прибрати підкреслення посилання і призначити їй колір навколишнього тексту з тим, щоб пересічний користувач не побачив її. А за допомогою інших інструментів веб-технологій (CSS, jаvascript, PHP) можна запрограмувати їх поведінку. Наприклад, подія onmouseover мови jаvascript активує дію елемента веб-сторінки. Коли користувач проводить курсором по невидимій засланні, він потрапляє на рекламну сторінку іншого сайту. Або ще гірше, коли присутня невидима посилання на файл і на його комп'ютер починає викачуватися і встановлюватися непотрібне програмне забезпечення. Зазвичай це віруси, які змінюють домашню сторінку браузера, захаращують жорсткий диск масою програм та інше. Скоро такі сайти потрапляють в «чорний список» вірусних баз, систем безпеки і серед самих користувачів Інтернет. Такі сайти довго не живуть, і їм доводиться змінювати свої назви, нескінченно мігрувати по Інтернету, змінюючи хост-провайдерів. Це не сприяє розкручуванню сайту, до чого завжди прагне його творець, ніколи не зробить його мегапорталом, таким як, наприклад, соцмережі. Крім іншого, такі прийоми викликають багато негативних емоцій у постраждалих від цих дій людей.