• Главная
  • Карта сайта
Не найдено

Як створити посилання в HTML-документі. Тег A - його синтаксис і атрибути

  1. URL або «адреса» сторінки в Інтернет
  2. Тег <A> і його базовий синтаксис
  3. Абсолютна і відносна посилання
  4. Відносне посилання на каталог, рівнем вище поточного
  5. Атрибути тега <A>. Як відкрити документ за посиланням в новому вікні
  6. Тема посилання. Атрибут title для тега <A>
  7. Атрибут гіперпосилання nofollow. Заборона передачі «трасту» сайту за посиланням
  8. Внутрішнє посилання або якір всередині документа
  9. Якір посилання - картинка
  10. продовження

Посилання (або гіперпосилання) пронизують Інтернет як кровоносні судини. Не будь посилань - не було б Інтернету.

Як створити посилання в HTML документі і правильно прописати її атрибути, що таке URL і як Пошукові Системи відносяться до посилань - в цьому черговому уроці для початківців вивчати HTML.

URL або «адреса» сторінки в Інтернет

Кожен HTML документ в Мережі має свій «точну адресу». Його називають «урлом», від англ. URL - Uniform Resource Locator

Структура URL часто видно в адресному рядку браузера. Він включає в себе:

  1. Назва протоколу - http: // або https: //
  2. Домен сайту,
  3. папка або шлях до папки, де цей документ знаходиться,
  4. Файл (може бути не завжди).

Завдяки такому «точною адресою» і стало можливим посилатися на цей документ з тексту іншого документа.

Тег <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 = "_ 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;}

Це вказівка ​​зробити нульову товщину бордюру у всіх посилань-картинок.

продовження

В наступному пості, я розповім про поштові посиланнях, їх атрибутах і методах «запобігання» від злісних спамерів 🙂

Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью