Перш ніж дізнатися, як створити гіперпосилання, ви повинні розуміти, що це таке. Під гіперпосиланням розуміють фрагмент HTML-документа, текст із повідомлення електронної поштиабо зображення, яке надає можливість переходу на іншу сторінку одного сайту або забезпечує зв'язок між двома віртуальними ресурсами. Якщо необхідно перенаправити відвідувача на сторінку даного сайту, використовують відносну адресу сторінки (page.html). Для забезпечення зв'язку сторінок різних веб-ресурсів, необхідно вказувати абсолютну адресу сторінки в гіперпосиланні, яка виглядає таким чином - http:⁄⁄site.com⁄page.html.

Не виключено використання гіперпосилання в межах однієї віртуальної сторінки. Наприклад, якщо розробник бажає виділити для користувача якусь, найбільш важливу інформаціюна тій самій сторінці або прикладом такого гіперпосилання може бути швидкий перехід до початку сторінки. Корисність гіперпосилання неможливо переоцінити, тому що вона дозволяє миттєво створити повідомлення користувачу, адресу якого відображено у вигляді гіперпосилання. Створювати гіперпосилання можна не лише на сайтах, а й у документах Ворд, а також у презентаціях та програмі powerpoint.

Створення гіперпосилання у презентації

Для створення презентації можна використовувати кілька програм. Основними з них є Powerpoint та LibreOffice Impress. У всіх програмах передбачено створення гіперпосилання у презентації. До того ж, гіперпосилання у презентаціях можна розділити на кілька видів – це необхідно знати перед тим, як створити гіперпосилання у презентації, оскільки, розробляючи конкретний проект, слід враховувати всі можливості, які пропонує певна програма.

• адресу в Інтернеті;
• документ;
• Адреса електронної пошти;
• слайд презентації;
• слайд іншої презентації.

Для того, щоб зробити гіперпосилання у презентації, що створюється в PowerPoint на сторінку сайту, необхідно виділити контент (це може бути медіафайл, картинка або текст), шукаємо у вкладці «Вставка» групу «Посилання» та натискаємо на кнопку «Гіперпосилання». В результаті ваших дій на екрані монітора відкриється вікно "Вставка гіперпосилання". Тепер ваше завдання – вибрати один із чотирьох варіантів гіперпосилання:

• на адресу електронної пошти;
• на веб-сторінку чи файл;
• новий документ;
• на місце у цьому документі.

Після вибору потрібно вставити потрібна адреса– компонент набуде традиційного вигляду гіперпосилання. Цього ж результату можна досягти іншим способом – необхідно скористатися меню правої клавіші мишки. Після натискання ви потрапляєте на ту ж кнопку «Вставка гіперпосилання».

Для створення гіперпосилання у презентації, що реалізується за допомогою програми LibreOffice Impress необхідно виділити ту частину контенту, яку необхідно зробити гіперпосиланням, активувати вкладку «Вставка», вибрати «Гіперпосилання». Після завершення цих дій вставляємо відповідну адресу.

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

Документи у Ворді друкуються для рознесення на будь-яких веб-ресурсах. Тому доцільно створювати гіперпосилання у документах Ворд. Про те, як створити гіперпосилання у Ворді, ми й поговоримо. Незважаючи на таке ємне слово «гіперпосилання», воно створюється дуже просто. Для початку необхідно виділити слово та фразу (ця дія виконується для створення гіперпосилання в документах та презентаціях, у текстах на сайтах). На вкладці вставка є кнопка "Гіперпосилання" - її ви знайдете в командах "Зв'язки". За результатами роботи відкривається діалогове вікно. Пункт «Гіперпосилання» можна вибрати і в контекстному меню - натисніть на виділений текст правою кнопкоюмишки. Крім того, використовуючи на клавіатурі клавіш ctrlі k, можна також викликати пункт «Гіперпосилання», якщо виділити у документі слова чи фразу.

У діалоговому вікні з'являться документи комп'ютера, з яких вибирайте необхідний. Якщо гіперпосилання робиться на документ Інтернету, можна скористатися ручним способомстворення гіперпосилання. Просто скопіюйте його URL і вставте в поле "Адреса". Щоб підтвердити свої дії, натисніть кнопку «OK». На цьому операцію зі вставки посилання завершено.

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

Вище було описано, як створити гіперпосилання в powerpoint (у "створення гіперпосилання в презентації"), але гіперпосилання можна створювати і мовою HTML. Такою мовою гіперпосилання має наступний вигляд - Текстове посилання. Як бачимо, в даному варіантіє дві частини – (відкривається частина і частина, що закривається). Між цими позначеннями розміщено текст – користувач бачитиме лише його, а не всю повністю гіперпосилання. В обов'язковому порядку в гіперпосиланні бере участь атрибут href, але він може бути не єдиним атрибутом, поміщеним усередину дужок тега, що відкриває – це мінімальні вимогидо створення гіперпосилання. Серед інших атрибутів можуть бути ті, які містять інформацію про зовнішньому виглядіпосилання та про те, яким чином посилання має відреагувати на наведення курсору, клацання та інші події.

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

Вітаю шановні читачіблог сайт. Сьогодні ми поговоримо про те як створювати гіперпосилання в html, дізнаємося як використовувати тег та його атрибути href і target, навчимося робити картинку посиланням.

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

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

Почнемо з простого та розглянемо створення звичайних текстовихпосилань. Для створення текстового гіперпосилання достатньо будь-який фрагмент тексту, який має стати посиланням, укласти парний тег . І в атрибуті hrefцього тега необхідно вказати адресу цільової web-сторінки в інтернеті:

сторінка 15

У цьому фрагменті HTML-коду створюється абзац, який містить посилання. Посилання вказує на web-сторінку page15.html, яка знаходиться у папці catalog, що зберігається у кореневій папці сайту www.site.ru.

сторінка 15

Якщо на сторінці не використовуються стилі CSSі не застосовуються додаткові атрибути, гіперпосилання на сторінці за замовчуванням відображаються наступним чином:

• звичайні посилання відображаються синім;
• відвідувані посилання виділяються фіолетовим кольором;
• активне гіперпосилання (за якою клацнули в Наразі) відображається червоним кольором, але оскільки час між натисканням на посилання та початком завантаження нового документа досить мало, подібний стан посилання дуже короткочасний;
• текст посилань виводиться із підкресленням.

Інтернет адреси

Повна адреса містить веб-адресу веб-сервера, і шлях до файлу, який необхідно отримати. Наприклад:

http://www.site.ru/catalog/page15.html

Тут www.site.ru адреса web-сервера, а /catalog/page15.html шлях до файлу на цьому сервері. Взагалі, зазвичай повні інтернет-адреси використовують лише якщо необхідно створити гіперпосилання, що вказує на будь-які ресурси, що знаходяться на іншому веб-сайті.

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

Скорочені інтернет-адреси бувають абсолютнимиі відносними. Абсолютна адреса задає шлях до цільового файлу щодо кореневої папки сайту. Така адреса починається із символу /(слеш), який і позначає кореневу папку. Наприклад, адреса /page15.html вказує на файл page15.html, який зберігається в кореневій папці сайту. Або адреса /catalog/page.html вказує на файл page.html, який поміщений в папку catalog, вкладеної в кореневу папку сайту.

Відносна адреса зачепить шлях до файлу щодо файлу поточної веб-сторінки. Відносні адресине містять на початку символу слеш. Розглянемо кілька прикладів.

Наприклад, адреса «page.html» вказує на файл, який знаходиться в тій же папці, що і файл поточної web-сторінки. А адреса «catalog/page.html» відкриє файл page.html, що зберігається в папці catalog, вкладеній у папку, в якій зберігається поточна сторінка. За допомогою двох точок спочатку адреси можна вказувати папки попереднього рівня вкладеності. Так, наприклад, адреса «.../page.html» вказує на сторінку page.html, що зберігається в папці, в яку вкладена папка з поточною веб-сторінкою.

Посилання на пошту

За допомогою мови htmlможна створювати поштові гіперпосилання, клацання за якими запускає програму поштового клієнта. При вказівці адреси в атрибуті hrefперед email необхідно поставити "mailto:", тобто. приблизно так: href="mailto: [email protected]". Причому після двокрапки перед поштовою адресоюне повинно бути прогалин.

написати лист

Як зробити картинку посиланням

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

1. Для створення посилань використовується парний тег з обов'язковим атрибутом href, у значенні якого міститься адреса цільової сторінки: Текст;
2. У разі створення посилання на пошту в атрибуті href перед адресою пошти необхідно поставити «mailto:»: написати листа;
3. Якщо треба створити посилання зображення,то просто поміщаємо тег img всередину тега : .

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

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

В HTML для вставки гіперпосилання використовується дескриптор (тег) , що вставляється в потрібне місце. Зазвичай його мають серед тексту, оскільки гіперпосилання як така є текстової структурою. Але посилання бувають ще графічними (іконки, кнопки, малюнки); про них буде розказано далі. Їхнє розташування на веб-сторінці не обмежується текстом, а залежить від дизайнерського рішення творця сайту.

головна сторінка Google

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

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

Можна помітити, що тег - парний: необхідний тег, що закриває.

href-атрибуттега, що вказує призначення посилання.

https://google.com/ - значення атрибуту, що містить у собі URL-адресу ресурсу, на який здійсниться перехід. Воно полягає в подвійні або одинарні лапки. Це залежить від структури вкладеності тегів по правилам HTML.

головна сторінка Google

вся ця конструкція називається елементомвеб-документ.

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

Головна сторінка Гугл

Тут: елемент

Головна сторінка Гугл

містить вкладений елемент

Гугл

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

протокол://назва домену/шлях до файлу

Приклад адреси розповсюдженого в Америці пошукача: https://aol.com - абсолютний, оскільки містить ім'я домену.com.

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

• httpі https -найчастіше зустрічаються; за ними здійснюється перехід між інтернет-сторінками різних сайтів;
• ftp -протокол для завантаження файлів на сервер або завантаження користувача з сайту;
• mailto -поштовий протокол, яким надсилається електронна пошта безпосередньо з сайту, не заходячи в особисту пошту.

Існує ще кілька протоколів особливого призначення(gopher, telnet), що зустрічаються досить рідко, використання яких потребує спеціальних знань у програмуванні чи системному адмініструванні.

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

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

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

Перейти до літери Я

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

Тепер, щоб здійснювався перехід від алфавіту на початку сторінки до букви «Я», потрібно зробити прив'язку якоря там HTML-документа, у якому починаються слова на букву «Я»:

буква Я

перед якорем стоїть знак ґрат, без якого перехід до літери не працюватиме.

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

Зручний та найзагальніший алгоритм створення сайту програмістом:

• створення папки в комп'ютері та розташування її в місці швидкого доступудля зручності;
• створення у цій папці головної;
• створення другорядних веб-сторінок (index.html/page2);
• та розміщення в ній графічних файлів;
• створення папки та розміщення в ній інших об'єктів (файли для скачування, наприклад);
• наповнення сайту контентом;
• розміщення файлів сайту на хостингу

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

Допустимо, програміст створив головну сторінку сайту index.html, на якій є посилання на іншу сторінку page2.html, прикрашену картинкою img.png. Тоді відносний шляхдо цієї картинки буде виглядати так:

малюнок

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

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

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

Синтаксис застосування атрибуту target:

головна сторінка гугл

Головна сторінка «Гугл» відкриється у новому вікні.

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

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

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

Задаються кольори посилань у тезі за допомогою атрибутів та їх значень, у яких виступає колір HTMLв системі rgb(#00FF00) або з прямою вказівкою імені кольору («green»). Існує три види атрибутів для посилань:

• link - задає колір невідвіданого посилання;
• vlink — задає колір посилання, яким користувач вже переходив;
• alink — задає колір посилання на момент переходу на іншу сторінку. Це відбувається швидко, тому не завжди можна вловити цей ефект.

Приклад розмітки:

Якщо застосувати ці атрибути у тезі , посилання даного веб-документа будуть темно-синіми, відвідані - фіолетового, а активні - оранжево-червоного кольору.

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

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

Широко застосовується спосіб заміни статичних кнопок ( ) на красиві графічні, створені веб-дизайнером у редакторах графіки (GIMP, Photoshop).

Для вставки графіки як гіперпосилання на сторінки сайту використовується той же синтаксис, тільки замість тексту використовується тег вставки зображення за правилами HTML:

До так само застосовні атрибути завдання альтернативного тексту, ширини, висоти та інші.

Дзвінки із сайту

Стандарт html5 розширив функціональні можливостівикористання Інтернету, і тепер робити дзвінки можна не тільки з телефону, але безпосередньо з сайту. Для цієї мети також можна використовувати гіперпосилання в HTML документі, і вони мають такий синтаксис:

...абонент...

Замість слова «абонент» прописується зрозумілий контакт, що телефонує, як у телефонної книги. Також можна розмістити графічний файл(Фотографію абонента).

Щоб дзвінки здійснювалися з сайту, необхідна наявність не лише посилання на номер телефону абонента, а й гарнітури (мікрофон, навушники), встановленої на комп'ютері VoIP-програма, швидкість інтернету має перевищувати 0,5 Мб/сек. Оплата за дзвінки здійснюється витратою трафіку. Тому якщо Інтернет безлімітний, то дзвінки безкоштовні.

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

Розміщуючи сайт в Інтернеті, веб-майстер повинен знати, які види гіперпосилань існують у HTML, і не тільки правильно, професійно їх застосовувати, а й дотримуватись таких положень:

• Гіперпосилання має бути добре видно, відрізнятися від навколишнього тексту. Користувач повинен знати, що це гіперпосилання.
• Користувачеві має бути зрозуміло, куди він потрапить, натиснувши на посилання. Для цього доцільно використати ще атрибут title,що лаконічно визначає сторінку переходу. Синтаксис застосування атрибуту такий:

Yandex

• Користувач повинен отримати правдиву інформацію про файл, який буде завантажено під час переходу за посиланням.

Потрапивши не на очікувану сторінку або завантаживши не той файл, користувач у 99% випадків відразу залишить сайт і в майбутньому ніколи на нього не зайде.

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

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

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

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

Гіперпосилання – це певний текстабо малюнок, при натисканні на який відкриється або задане місце в цьому ж документі, або картинка, або інший документ та інше. Не переглянуте гіперпосилання у Ворді виділено синім кольором та підкреслено.

На цьому з теорією закінчимо. Давайте розбиратися, як зробити гіперпосилання у MS Word.

Найпростіший спосіб – це просто скопіювати адресу сайту. Виділіть та скопіюйте текст із адресного рядка браузера.

Тепер відкрийте документ, встановіть курсор у потрібному місці та вставте посилання. Натисніть на пробіл або «Enter» . Звичайне посиланнястала гіперпосиланням у документі Ворд і веде на вказаний сайт.

Якщо ви копіюєте фрагмент тексту, в якому є посилання, то автоматично вони не перетворюються на гіперпосилання. Для цього встановіть курсор наприкінці потрібного посиланнята натисніть пробіл.

Тепер розглянемо, як зробити текст гіперпосиланням. Для цього, виділіть потрібний фрагменттексту або слово, клацніть по ньому правою кнопкою миші та виберіть пункт «Гіперпосилання» .

Відкриється вікно. У полі "Зв'язати з" виберіть «файлом, веб-сторінкою», в поле «Адреса» вставте електронна адресапотрібного сайту Натисніть кнопку «ОК» .

Виділіть текст, клацніть по ньому правою кнопкою миші та виберіть «Гіперпосилання» .

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

У розглянутому прикладі при натисканні на «документ» відкривається папка «Downloads» .

Щоб зробити картинку гіперпосиланням- Виділіть її і повторіть вищеописані дії. Якщо картинка в тексті буде гіперпосиланням, то при наведенні на неї, з'явиться віконце. Натисніть Ctrl і клацніть по ній.

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

Відобразиться наступне контекстне меню. У ньому клацніть по пункту «Створити гіперпосилання».

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

Тепер Ви знаєте різні способи, які допоможуть зробити гіперпосилання в Ворді. Якщо залишилися якісь питання – ставте їх у коментарях.

Оцінити статтю:

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

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

Загалом цей урок зробить твоє уявлення про створення посилань закінченим і достатнім. Ти зрозумієш, як створити гіперпосилання в HTML та навіщо. І навчишся керувати її властивостями.

§ 1. Посилання на файл, посилання на сайт, посилання на сторінку

Численні питання про те, чим відрізняється посилання на файл від посилання на сайт або його окрему сторінку, змусили мене винести відповідь на нього на початок цього уроку. Відповідь така: нічим. Всі ці посилання є зовнішніми по відношенню до вихіднийсторінці і створюються тим самим способом.

Щоб не розтікатися думкою по дереву, покажу все на прикладі.

У браузері ми побачимо ось що:

У браузері ми побачимо ось що:

Як бачиш, всі типи посилань створюються абсолютно однаково. Різниця тільки в адресаоб'єкта, який потрібно послатися. А тепер перейдемо до основної частини уроку.

§ 2. Створення зовнішніх посилань

Між собою посилання різняться на зовнішніі внутрішні, а також на текстовіі графічні. Зовнішні посилання ведуть за межі html-сторінки, внутрішні на різні частини цієї жсторінки. Текстові посилання являють собою текст (за замовчуванням, він виділено синім кольором і підкреслено), а графічні, як об'єкт, яким потрібно клацнути для переходу, містять якусь картинку. Всі ці різновиди посилань створюються HTML з допомогою тега (скорочення від англ. anchor - якір). Розглянемо його детальніше.

Для створення зовнішнього посиланняна сайт, сторінку або файл служить атрибут тега - href. Як значення цей атрибут набуває URL-адресасайту, сторінки чи файлу (про це ми говорили вище). Між тегами розташовується видима частина посилання (анкор посилання), тобто те, що ми бачимо на екрані браузера. Анкор посилання може бути як звичайним текстом(текстове посилання), так і графічним зображенням(Посилання-картинка). Посилання-картинка створюється вставкою знайомого нам тега між тегами та . Загалом, синтаксис створення посилання має такий вигляд:

Наприклад, щоб створити текстове посилання на головну сторінку цього сайту, потрібно написати наступний HTML-код:

http://www.seoded.ru/"> Головна сторінка сайту

У браузері це виглядатиме так:

Як писав на початку цього уроку, колір тексту посилань (анкору) можна змінити за допомогою . Взагалі, до тексту посилань можна застосовувати ті ж, що й до основного тексту сторінки, тобто виділяти жирним, курсивом, використовувати заголовки і т.д.

§ 2.1 Графічні посилання (посилання-картинки)

Як я вже сказав вище, щоб створити посилання-картинку, потрібно замість тексту використовувати . Приклад такого посилання виглядає так:

А браузер покаже:

За промовчанням, браузер оточує картинку в графічному посиланні рамкою. Якщо це небажано, то атрибуту borderтега IMGпотрібно присвоїти значення 0:

border="0">

Головна сторінка

§ 3. Внутрішні посилання

Для комфортного переміщення сторінками з великою кількістюконтенту використовуються внутрішні посилання. Саме з їх допомогою я зробив «Зміст уроку» (див. на початку цієї сторінки). Внутрішні посилання створюються за тим самим принципом, як і зовнішні. Тільки значення атрибута hrefвказується якір посилання. Якір створюється атрибутом name:

name="ім'я якоря">текст

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

Я кір знаходиться в тих місцях сторінки, в які повинен потрапити користувач після натискання на посилання.

Як я вже сказав вище, в атрибуті hrefвнутрішнього посилання замість адреси вказується ім'я потрібного якоря з обов'язковим символом ґрат ( # ) перед ним. Розберемо з прикладу.

Я створив якір з ім'ям zagolovokі розмістив його поруч із заголовком цього уроку («Гіперпосилання в HTML»). Код якоря наступний:

name="zagolovok">

href="#zagolovok">До заголовка

А в браузері так:

Якщо ти помітив, то після переходу за внутрішнім посиланням до заголовка змінилася URL-адреса адресному рядкубраузера:

До початкової адреси:

http://www..html

http://www..html#zagolovok

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

§ 4. Абсолютні та відносні посилання

Головна сторінка

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

Допустимо нам потрібно послатися на сторінку klienty.html, яка лежить в одній папціз головною сторінкоюсайту. Тоді код відносного посиланнянабуде вигляду:

/klienty.html">Клієнти

А тепер припустимо, що в одній папці з головною сторінкою лежить папка zakazyі вже у нійлежить сторінка klienty.html Тоді код відносного посилання стане таким:

/zakazy/klienty.html">Клієнти

Тепер розглянемо створення гіперпосилань щодо вихідної сторінки. Допустимо, у нас є сторінка price.html (вихідна сторінка) і з неї потрібно послатися на сторінку klienty.htmlТут бувають такі типові варіанти:

1. Сторінки price.html та klienty.html знаходяться в одній папці.

klienty.html">Клієнти




2. у кореневій папці сайту, сторінка price.html лежить у папці zakazy на один рівень вище).

Код стане таким:

../klienty.html">Клієнти

Дві точки показують, що потрібно вийти з поточної папкина рівень вищий.




3. Сторінка klienty.html та папка zakazy знаходяться у кореневій папці сайту, папка mebel лежить у папці zakazy, сторінка price.html лежить у папці mebel(т. е. сторінка klienty.html щодо вихідної сторінки price.html лежить на два рівні вище).

../../klienty.html">Клієнти

Т. е. кожен рівень позначається двома точками і слішем / ».




4. у кореневій папці сайту, сторінка klienty.html лежить у папці zakazy(т. е. тепер сторінка klienty.html щодо вихідної сторінки price.html лежить на один рівень нижче).

zakazy/klienty.html">Клієнти

У цьому випадку крапки та сліші не ставляться.




5. Сторінка price.html (початкова сторінка) та папка zakazy знаходяться у кореневій папці сайту, папка mebel лежить у папці zakazy, сторінка klienty.html лежить у папці mebel(т. е. тепер сторінка klienty.html щодо вихідної сторінки price.html лежить на два рівні нижче).

zakazy/mebel/klienty.html">Клієнти




6. У кореневій папці сайту лежать дві папки: zakazy та oplata. Сторінка klienty.html лежить у папці zakazy, вихідна сторінка price.html лежить у папці oplata(тобто обидві сторінки лежать в різних папкахна рівень нижчевід кореневої папки сайту).

../zakazy/klienty.html">Клієнти

§ 5. Посилання на електронну пошту

Для того щоб створити посилання на електронну пошту, потрібно замість URL-адреси у значенні атрибута hrefнаписати адресу електронної пошти із зазначенням протоколу ( mailto:). І тоді при натисканні за таким посиланням відкриється вікно поштової програмиіз вписаною в поле «Кому» адресою електронної пошти. У HTML-коді це виглядає так:

mailto: [email protected]">Моя пошта

А в браузері так:

У тезі також можна використовувати атрибут title. З його допомогою створюється підказка, що з'являється при наведенні миші на посилання.

title="Перейти на головну сторінку">!} Головна сторінка

§ 7. Висновок

Це основні відомості про створення посилань у HTML. На цьому даний урокможна вважати закінченим. А цей факт говорить про те, що більшу частину основ HTMLти вже освоїв.

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

Можеш показати його друзям чи ще кому. Загалом, відчути себе власником сайту. А потім після невеликого загулу з нагоди такої події переходити до наступного розділу, в якому я розповім тобі про створення таблиць у HTML.

І це вже буде перший крок на шляху до перетворення особистої сторінки на серйозний ресурс.