<
  • Главная
Статьи

Ako vytvoriť odkaz v dokumente HTML. Tag A - jeho syntax a atribúty

  1. URL alebo "adresa" stránky na internete
  2. <A> tag a jeho základná syntax
  3. Absolútna a relatívna referencia
  4. Relatívny odkaz na adresár vyšší ako aktuálny
  5. Atribúty značky <A>. Ako otvoriť dokument podľa odkazu v novom okne
  6. Nadpis odkazu. Atribút title pre značku <A>
  7. Hypertextový odkaz atribútu nofollow. Zákaz prenosu "dôvery" stránky odkazom
  8. Vnútorný odkaz alebo kotva vo vnútri dokumentu
  9. Link Anchor - Obrázok
  10. predĺženie

Odkazy (alebo hypertextové odkazy) prenikajú cez internet ako krvné cievy. Ak by neexistovali žiadne odkazy, neexistoval by žiadny internet.

Ako vytvoriť odkaz v dokumente HTML a správne zaregistrovať jeho atribúty, čo je adresa URL a ako sa vyhľadávacie nástroje týkajú prepojení - v tejto ďalšej lekcii pre začiatočníkov, ktorí sa chcú naučiť HTML.

URL alebo "adresa" stránky na internete

Každý HTML dokument na webe má svoju vlastnú „presnú adresu“. Nazýva sa „URL“, z angličtiny. URL - Uniform Resource Locator

Štruktúra adresy URL je často viditeľná v paneli s adresou prehliadača. Zahŕňa:

  1. Názov protokolu je http: // alebo https: //
  2. Doména domény
  3. priečinok alebo cestu k priečinku, kde sa tento dokument nachádza,
  4. Názov súboru (nemusí byť vždy).

Vďaka tejto „presnej adrese“ bolo možné odkazovať na tento dokument z textu iného dokumentu.

<A> tag a jeho základná syntax

Dúfam, že slovo „syntax“ vás už nebude desiť 🙂

<a href="http://domen-saita.ru/papka-na-servere/dokument.html"> text odkazu </a>

Ako vidíte, po štarte značky <A> musí existovať atribút povinný href, ktorý určuje adresu dokumentu, ku ktorému chcete ísť.

Vo vnútri tagu <A> je samotný text (hoci môže existovať obrázok), čo je text odkazu. Nazýva sa tiež " Kotva " alebo jednoducho - Kotva.

Absolútna a relatívna referencia

V príkladoch uvedených vyššie boli použité absolútne odkazy. Tie, ktoré obsahujú úplnú adresu URL dokumentu.

V niektorých prípadoch atribút href neobsahuje úplnú adresu URL s názvom protokolu a doménou lokality. Ak je dokument, na ktorý odkaz vedie, na tej istej lokalite - môžete použiť relatívny odkaz vedený z miesta, kde sa dokument nachádza.

Schéma, keď sa použije relatívna referencia

Príklad: odkaz z dokumentu first.html vedie k súboru second.html, ktorý sa nachádza v priečinku správ.

Relatívny odkaz na adresár vyšší ako aktuálny

kód:

<a href="../first.html"> Toto je relatívny odkaz na súbor v úrovni adresára </a>

Tento odkaz vedie k súboru first.html v "materskom" adresári, tzn. o jednu úroveň vyššie .

Kombinácia ../ označuje priečinok o jednu úroveň vyššie od danej pozície súboru, z ktorého sa prepojenie vytvára.

Atribúty značky <A>. Ako otvoriť dokument podľa odkazu v novom okne

Ak chcete, aby sa dokument otvoril na novej karte prehliadača, musíte použiť atribút target = "_ blank"

Ak chcete, aby sa dokument otvoril na novej karte prehliadača, musíte použiť atribút target = _ blank

Odkaz na atribút target = "_ blank"

Nezneužívajte ho. Nie je potrebné vytvárať interné odkazy na stránku s týmto atribútom. Užívatelia budú naštvaní „iskrivým oknom“.

Všeobecne platí, že s týmto cieľom atribút - celý príbeh. Stále existuje niekoľko jeho významov, ale všetky sa dnes používajú len zriedka.

Je to preto, že sú navrhnuté tak, aby pracovali s webom na rámoch , ktoré už nie sú populárne a s príchodom HTML5 sa stávajú minulosťou.

Nadpis odkazu. Atribút title pre značku <A>

Ďalší užitočný atribút je title = "Text vysvetľujúci, kde tento odkaz vedie"

syntax:

<a href="http://domen-saita.ru/papka-na-servere/dokument.html" title="the pop-up tip"> toto je odkaz na odkaz </a>

Ako vidíte, prehliadač ho zobrazí ako tip nástroja. A napriek tomu berie do úvahy vyhľadávače.

Pomôcka atribútu pre názov odkazu

Hypertextový odkaz atribútu nofollow. Zákaz prenosu "dôvery" stránky odkazom

Pre odkazy rel = "nofollow" existuje ešte jeden nejednoznačný atribút

Povie vyhľadávačom, že odkazový dokument nemusí byť dôveryhodný. Zároveň sa na webovú lokalitu nesprístupňujú indikátory dôvery („trust“) zo stránky Source.

Téma "dôvera" a odkaz rebríčku je stále dopredu, ale ak je to krátke, "osud" stránok vo vyhľadávačoch bude tiež závisieť na počte odkazov vedúcich na túto stránku. Čím viac z nich, viac autoritatívne stránky odkaz - väčšiu dôveryhodnosť stránky odkazom.

V niektorých prípadoch stojí za to „skríning“ prepojení s týmto atribútom. Napríklad, ak napíšete negatívny prehľad o akejkoľvek službe.

<a href="http://bad-sait.ru/dokument.html" rel="nofollow"> zlá stránka </a>

Vnútorný odkaz alebo kotva vo vnútri dokumentu

Vo veľkých textoch sa často vyžaduje inštalácia tzv. „Kotiev“ v logických častiach dokumentu. Potom je to na tomto mieste, môžete odkazovať.

Najjednoduchším spôsobom je vytvoriť lokálny obsah z hypertextových odkazov vedúcich k týmto kotvám. Takéto obsahy sú zvyčajne umiestnené na začiatku článku.

Pri vytváraní takejto kotvy sa namiesto atribútu href používa atribút name.

Syntax pre vytvorenie kotvy je:

<a name="top"> </a>

Pri vytváraní odkazu na konci adresy URL pridajte znak # - názov "kotvy":

<p> <a href="#top"> Top </a> </ p>

Prechod bude presne na toto miesto, t. Prehliadač umiestni toto miesto do hornej viditeľnej časti.

Často, v dlhých dokumentoch, na samom spodnom konci kladú takýto odkaz „Top“.

... ktorí cestovali po svete voňavých zŕn, našli najvyššiu kvalitu tých, pre ktoré sú Afrika, Ázia, Stredná a Južná Amerika známe. Preto dnes v kaviarňach značky Zrnková káva Nájdete tu najlepšie odrody kávy od uznávaných výrobcov.

? Na vrchol ?

Z iného dokumentu môžete tiež prejsť na toto miesto, ak na koniec adresy URL pridáte znak # name_accord

<a href="http://domen-saita.ru/dokument.html#top"> text odkazu v tomto dokumente vedie k zakotveniu v hornej časti dokumentu </a>

Link Anchor - Obrázok

Akýkoľvek obrázok môže byť odkaz.

kód:

<a href="http://sait.ru/dokument.html"> <img src = kartinka.jpg "width =" 100 "height =" 131 "/> </a>

V predvolenom nastavení sú prepojenia podčiarknuté prehliadačom s plnou modrou čiarou a prepojovacie obrázky získajú modrý rám.

Odkazy-obrázky si modrý rám

Ak sa ho chcete zbaviť, do súboru CSS pre lokalitu sa pridá jednoduché pravidlo:

a {hranica: 0px;}

Toto je inštrukcia na vytvorenie nuly pre všetky prepojenia obrázkov.

predĺženie

V nasledujúcom príspevku budem hovoriť o e-mailových odkazoch, ich atribútoch a metódach „ochrany“ pred zlými spamermi



Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью