Як створити посилання в HTML-документі. Тег A - його синтаксис і атрибути
- URL або «адреса» сторінки в Інтернет
- Тег <A> і його базовий синтаксис
- Абсолютна і відносна посилання
- Відносне посилання на каталог, рівнем вище поточного
- Атрибути тега <A>. Як відкрити документ за посиланням в новому вікні
- Тема посилання. Атрибут title для тега <A>
- Атрибут гіперпосилання nofollow. Заборона передачі «трасту» сайту за посиланням
- Внутрішнє посилання або якір всередині документа
- Якір посилання - картинка
- продовження
Посилання (або гіперпосилання) пронизують Інтернет як кровоносні судини. Не будь посилань - не було б Інтернету.
Як створити посилання в HTML документі і правильно прописати її атрибути, що таке URL і як Пошукові Системи відносяться до посилань - в цьому черговому уроці для початківців вивчати HTML.
URL або «адреса» сторінки в Інтернет
Кожен HTML документ в Мережі має свій «точну адресу». Його називають «урлом», від англ. URL - Uniform Resource Locator
Структура URL часто видно в адресному рядку браузера. Він включає в себе:
- Назва протоколу - http: // або https: //
- Домен сайту,
- папка або шлях до папки, де цей документ знаходиться,
- Файл (може бути не завжди).
Завдяки такому «точною адресою» і стало можливим посилатися на цей документ з тексту іншого документа.
Тег <A> і його базовий синтаксис
Сподіваюся, слово «синтаксис» вас уже не лякає 🙂
<a href="http://domen-saita.ru/papka-na-servere/dokument.html"> текст посилання </a>
Як бачите, після початку тега <A>, повинен йти обов'язковий атрибут href, який задає адресу документа, на який слід перейти.
Всередині самого тега-контейнера <A> варто текст (хоча може бути і картинка), який і є текстом посилання. Його ще називають «Анкор» або просто - Якір.
Абсолютна і відносна посилання
У прикладах вище, були використані абсолютні посилання. Такі, які містять повний URL документа.
У деяких випадках, атрибут href не містить повного URL з назвою протоколу і домену сайту. Якщо документ, на який веде посилання, знаходиться на тому ж сайті - можна використовувати відносне посилання, що веде від того місця, де знаходиться сам документ.
Схема, коли застосована відносна посилання
Приклад: посилання з документа first.html веде на файл second.html, який знаходиться в папці news
Відносне посилання на каталог, рівнем вище поточного
код:
<a href="../first.html"> це - відносна посилання на файл в каталозі, рівнем вище </a>
Це посилання веде на файл first.html в «рідному» каталозі, тобто на один рівень вище.
Поєднання ../ вказує на папку, розташовану на один рівень вище від даної позиції файлу, з якого робиться посилання.
Атрибути тега <A>. Як відкрити документ за посиланням в новому вікні
Для того, що б документ по посиланню відкривався в новій вкладці браузера, потрібно використовувати атрибут target = "_ blank"
Атрибут посилання target = "_ blank"
Не зловживайте ім. Не потрібно робити внутрішні посилання сайту з цим атрибутом. Користувача будуть дратувати «плодяться вікна».
Взагалі, з цим атрибутом target - ціла історія. Є ще цілий ряд його значень, але всі вони використовуються сьогодні вкрай рідко.
Це тому, що вони призначені для роботи з сайтом на фреймах, що нині не популярних і, з приходом HTML5, що йдуть в минуле.
Тема посилання. Атрибут title для тега <A>
Ще один корисний атрибут - title = "Текст, що пояснює куди веде ця посилання"
синтаксис:
<a href="http://domen-saita.ru/papka-na-servere/dokument.html" title="вспливающая подсказка"> це - посилання з підказкою </a>
Як бачите, браузер виводить його як підказку. А ще, його враховують і пошукові системи.
Підказка з атрибута для посилання title
Атрибут гіперпосилання nofollow. Заборона передачі «трасту» сайту за посиланням
Є ще один неоднозначний атрибут для посилань rel = "nofollow"
Він каже Пошуковим Системам, що документ по посиланню, можливо, не заслуговує на довіру. При цьому показники довіри ( «трасту») з сайту Джерела, не передаються на сайт за посиланням.
Тема про «трасті» і посилальному ранжируванні ще попереду, але якщо коротко, то «доля» сайтів в ВИДАЧУ Пошукових Систем залежить також і від кількості посилань, що ведуть на цей сайт. Чим їх більше, ніж більш авторитетні сайти посилаються - тим більше довіру до сайту за посиланням.
У деяких випадках, варто «екранувати» посилання цим атрибутом. Наприклад, якщо ви пишете негативний відгук про будь-якому сервісі.
<a href="http://bad-sait.ru/dokument.html" rel="nofollow"> поганий сайт </a>
Внутрішнє посилання або якір всередині документа
У великих за обсягом текстах, часто потрібна установка так званих «якорів» в логічних частинах документа. Потім, саме на це місце, можна послатися.
Найпростіший спосіб використання - створення локального змісту з гіперпосилань, що ведуть на ці якоря. Такі змісту зазвичай поміщають на самому початку статті.
При створенні такого якоря замість атрибута href використовують атрибут name
Синтаксис при створенні якоря:
<a name="top"> </a>
При створенні посилання, в кінці URL додають через знак # - ім'я «якоря»:
<P> <a href="#top"> Наверх </a> </ p>
Перехід буде точно до цього місця, тобто браузер помістить це місце в своїй верхній видимій частині.
Часто, в довгих документах, в самому низу ставлять таку посилання «Вгору».
... зробивши подорож по світу ароматних зерен, знайшли самі високоякісні з тих, якими славляться Африка, Азія, Центральна і Південна Америка. Тому сьогодні в кав'ярнях бренду Coffee bean ви зустрінете найкращі кавові сорти від визнаних світових виробників.
? наверх ?
З іншого документа можна також вийти до цього місця, якщо додати в кінці URL через знак # імя_якоря
<a href="http://domen-saita.ru/dokument.html#top"> текст посилання веде до якоря "top" в цьому документі </a>
Якір посилання - картинка
Посиланням може бути і будь-яка картинка.
код:
<a href="http://sait.ru/dokument.html"> <img src = kartinka.jpg "width =" 100 "height =" 131 "/> </a>
За замовчуванням, посилання підкреслюються браузером суцільною синьою межею, а посилання-картинки набувають синю рамку.
Посилання-картинки набувають синю рамку
Що б позбавиться від неї - в файл CSS для сайту додають просте правило:
a {border: 0px;}
Це вказівка зробити нульову товщину бордюру у всіх посилань-картинок.
продовження
В наступному пості, я розповім про поштові посиланнях, їх атрибутах і методах «запобігання» від злісних спамерів 🙂