1. Що таке посилання (гіперпосилання).
2. Як зробити посилання (гіперпосилання) в HTML на сайті.
3. Як відкрити посилання в новому вікні.
4. Як зробити посилання на e-mail (адреса електронної пошти).
5. Як зробити картинку посиланням.
6. Як зробити гіперпосилання (html якір) на одній HTML-сторінці.
7. Види і колір гіперпосилань в HTML.

Привіт, шановні читачі блогу blogibiznes.ru! Як відомо, для успішної розкрутки сайту і підвищення його позицій в результатах пошукової видачі, необхідно проводити якісну SEO оптимізацію сайту. поняття " пошукова оптимізація ", Яка, в свою чергу, ділиться на внутрішню і зовнішню, нерозривно пов'язане з такими поняттями, як" внутрішні і зовнішні посилання сайту ". Тому, нам дуже важливо знати, скільки посилань повинно бути на сайті, як перевірити їх кількість, як прибрати зайві посилання з сайту і закрити їх від індексації, як нарощувати кількість посилань і т.д. Щоб відповісти на всі ці та інші питання, що стосуються внутрішніх і зовнішніх посилань, давайте, для початку, розберемося, що таке посилання (або гіперпосилання) в HTML.

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

Що таке посилання (гіперпосилання).

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

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

Зовнішнє посилання служить для зв'язку документів, що знаходяться на різних сайтах в межах всієї мережі інтернет і використовується для нарощування посилальної маси при зовнішньої оптимізації.

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

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

Як зробити посилання (гіперпосилання) в HTML на сайті.

Зробити посилання на іншу сторінку свого або іншого сайту дуже легко. Для створення гіперпосилання треба вказати браузеру, що є посиланням і вказати адресу документа, на який вона буде вести. Робиться це за допомогою HTML-тега <a> і обов'язкового атрибута href:

<a href="URL"> Текст_ссилкі (анкор) </a>

Тут URL - це адреса документа, на який слід перейти. А текст гіперпосилання, розташований між тегами <a> і </a>, називається анкором посилання і видно відвідувачу веб-сторінки. Крім того, що текст посилання (анкор) інформує читача, куди буде здійснено перехід, він ще дуже важливий в пошуковій оптимізації (SEO), так як служить одним з визначальних факторів, що впливають на ранжування вашого сайту за ключовими словами, що містяться в цьому анкорі. Зазвичай такий вид ранжирування називають посилальним.

URL-адресу посилання може бути як абсолютним, так і відносним. Абсолютні адреси починаються з вказівки протоколу (зазвичай http) і імені сайту, наприклад:

<a href="http://blogibiznes.ru/chto-takoe-seo-optimizatsiya-sayta.html"> Абсолютне посилання </a>

Вони використовуються для вказівки документа на іншому сайті (зовнішнє посилання).

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

Як бачите, з абсолютними посиланнями все просто. Ось з відносними складніше, оскільки при їх створенні треба розуміти, яке значення атрибута href треба вказати, так як воно залежить від вихідного розташування документів. Як я вже говорив, ніхто з цим особливо не заморочується і робить все посилання на сайті абсолютними. Однак, якщо Вам цікаво докладніше дізнатися, як правильно створювати відносні посилання для сайту, можу порекомендувати статтю Дмитра, автора блогу ktonanovenkogo.ru. Більш докладного і зрозумілого пояснення я ще не зустрічав.

Для прикладу, покажу, як буде виглядати посилання, що веде до файлу щодо кореня сайту (просто відсікаємо все, що зліва від третього слеша в аналогічній абсолютної посилання):

<a href="/chto-takoe-seo-optimizatsiya-sayta.html"> Відносне посилання </a>

Ну а відносна посилання на головну сторінку сайту буде виглядати так:

<a href="/"> На головну </a>

Продовжимо про те, як робити гіперпосилання. Часто можна бачити, як при наведенні на посилання, спливає текстова підказка. Робиться це за допомогою атрибуту title:

<a title="Вспливающая подсказка" href="http://blogibiznes.ru"> Текст посилання (анкор) </a>

Кольори і оформлення спливаючого тексту залежать тільки від налаштувань операційної системи і браузера.

Ну ось, як створити посилання сподіваюся зрозуміло. А як вставити гіперпосилання в текст веб-сторінки сайту? Для цього треба перейти в режим HTML-редактора і просто скопіювати туди створений нами HTML-код.

Як відкрити посилання в новому вікні.

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

Відкрити посилання в новому вікні нам допоможе атрибут target тега <a>. За замовчуванням він має значення _self, яке зазвичай не прописується. Для того щоб відкрити документ в новому вікні, змінюємо значення атрибута target на _blank:

<a href="http://blogibiznes.ru" target="_blank"> Нове вікно </a>

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

Як зробити посилання на e-mail (адреса електронної пошти).

Створюючи поштову посилання, треба вказати адресу e-mail, використовуючи стандартний протокол передачі електронної пошти mailto:

<a href="mailto:[email protected]"> Текст посилання на e-mail </a>

При натисканні за цим посиланням відкриється програма для роботи з електронною поштою, встановлена ​​у Вас за замовчуванням, де вже буде заповнено поле "Кому". Щоб автоматично заповнювалася і тема листа, треба зробити посилання на e-mail такого виду:

<a href="mailto:admin@blogibiznes.ru?subject=тема_пісьма"> Текст посилання на e-mail </a>

Замість слів "тема_пісьма" треба написати потрібну тему і, обов'язково, латинськими буквами. Робимо це тому, що багато браузери і поштові програми погано працюють з кирилицею і є шанс побачити в темі листа всякі кракозябри. Використовуючи цей не хитрий рада, Ви зможете створити посилання на e-mail, не боячись непотрібних сюрпризів.

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

Щоб зробити будь-яку картинку посиланням, в HTML застосовується тег <img>, який використовується для вставки зображень, який прописується замість анкора посилання:

<a href="http://blogibiznes.ru"> <img title = "Перейти на головну сторінку блогу blogibiznes.ru" src = "http://blogibiznes.ru/image/Top.jpg" alt = "Головна сторінка блогу blogibiznes.ru "/> </a>

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

Як зробити гіперпосилання (html якір) на одній HTML-сторінці.

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

Для створення якоря спочатку робимо закладку з будь-яким ім'ям (використовуються тільки латинські букви, цифри, дефіс і підкреслення), що задається за допомогою атрибута name тега <a>:

<a name="Імя якоря"> </a>

Між тегами <a> і </a> нічого не пишемо, щоб якір не був видний в тексті.

Тепер треба зробити хеш-посилання на якір, де в якості значення атрибута href пишемо символ решітки (# - октоторп або хеш) і вбрання Ім'я якоря:

<a href="#Імя якоря"> Текст посилання на html якір-ятати </a>

Щоб посилання просто вела вгору на початок сторінки, пишемо в потрібному місці такий код:

<a href="javascript:scroll(0,0);"> Вгору </a>

Інший варіант для прокрутки сторінки вгору я підглянув у того ж Дмитра на сайті ktonanovenkogo.ru. В цьому випадку ставимо звичайну хеш-посилання, але після символу решітки (#) ніяке ім'я якоря не пишемо:

<a href="#"> Вгору </a>

Якщо вставити перший або другий варіант посилання в картинку, то можна використовувати такий метод для створення кнопки "Вгору". Наприклад, так:

<a href="javascript:scroll(0,0);"> <img class = "aligncenter size-full wp-image-тисяча триста дев'яносто три" title = "Кнопка Вгору" src = "http://blogibiznes.ru/wp- content / uploads / 2011/12 / Top.jpg "alt =" Кнопка Наверх_Top "width =" 100 "height =" 100 "/> </a>

Дмитро КтоНаНовенького радить ще один спосіб установки закладок в тексті веб-сторінки, без використання html якорів. Для цього робимо закладку з будь-якого HTML-тега, наявного на сторінці, прописуючи йому універсальний атрибут id. Наприклад, робимо закладку з тега заголовка h3:

<H3 id = "Ім'я якоря"> Текст заголовка </ h3>

Хеш-посилання прописуємо також, як і в попередньому випадку:

<a href="#Імя якоря"> Текст посилання на html якір-ятати </a>

Важливо в атрибуті id першим символом імені якоря прописувати латинську букву, потім можна використовувати будь-які інші дозволені символи.

Давайте, для прикладу, повернемося до заголовку " Як зробити гіперпосилання в HTML ", А потім продовжимо.

Можна використовувати хеш-посилання для переходу на потрібне місце не тільки в межах однієї сторінки, але і для переходу на іншу сторінку сайту. Для цього ми встановлюємо html якір в потрібному місці на потрібній сторінці, а в саму хеш-посилання перед символом решітки прописуємо адресу цієї сторінки. наприклад:

<a href="http://blogibiznes.ru/chto-takoe-seo-optimizatsiya-sayta.html#Імя якоря"> Текст посилання на html якір-ятати </a>

Для прикладу, перейдіть за посиланням "Пошукова оптимізація" вгорі цієї сторінки і Ви потрапите в новій статті відразу до слова SEO.

Види і колір гіперпосилань в HTML.

Будь-яка гіперпосилання на HTML-сторінці за замовчуванням знаходиться в одному з трьох станів:

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

Змінити колір гіперпосилань в html-документі можна за допомогою тега <body> і наступних його атрибутів:

• Link - колір не відвіданих посилань.
• Alink - колір активного посилання.
• Vlink - колір відвіданих посилань.

Всі наведені атрибути можна об'єднувати:

<Body link = "# 1122cc" vlink = "# 6611cc" alink = "# d14836">

Сподіваюся, тепер зрозуміло, як створити гіперпосилання на HTML-сторінці і на e-mail, як зробити картинку посиланням, що таке текстові анкор, хеш-посилання і html якоря, які бувають html-теги і атрибути посилань. Я постарався, наскільки зміг, докладно розповісти, що таке посилання в HTML і які вони бувають. Нагадаю, що вставка гіперпосилань в текст проводиться тільки в режимі HTML.

Таких довгих статей ще писати не доводилося, більше 10 000 символів. Але на цьому тема посилань не вичерпана, далі буде.

Якщо для Вас була корисна ця стаття, прохання натискати на кнопочки соц.сетей нижче. До нових зустрічей на сторінках blogibiznes.ru !