Target=”_blank”  je nejvíce podceňovanou zranitelností naší doby. Základy HTML: práce s odkazy. Značka A a její atributy rel, target, name Jak z obrázku udělat odkaz - dva způsoby

Dobrý den, milí čtenáři tohoto blogu. Dnešní publikaci jsem se rozhodl věnovat nejdůležitějšímu aspektu webmasteringu, kde se pokusím podrobně vysvětlit, co je to hypertextový odkaz, s nímž neodmyslitelně souvisí, který je zase bez nadsázky základem internetu.

Ale abyste správně vytvořili hypertextové odkazy a vložili je do kódu webových stránek (například vašeho webu), musíte si prostudovat odpovídající oblast hypertextového značkovacího jazyka (), protože tyto prvky jsou tvořeny pomocí a HTML tag, který má , umožňuje upgradovat odkaz na požadovaný druh.

Dnes si tedy rozebereme, z jakých částí se hypertextový odkaz skládá, jak použití atributu target blank umožňuje otevřít stránku v novém okně (záložce), jak udělat z libovolného obrázku odkaz a mnoho dalších důležitých detailů. Tyto informace vás mimo jiné posunou vpřed v učení jazyka HTML.

Co je hypertextový odkaz a lze jej nazvat odkazem?

V odpovědi na otázku položenou v nadpisu řeknu, že pojem „odkaz“ má širší sémantické spektrum (odkaz na Sibiř, bankovnictví k identifikaci plátce, text v knize atd.), včetně významu, který je vlastní pojmu "hyperlink" , který je spojen pouze s hypertextem, což umožňuje nelineárně vnímat informace.

Tím pádem, hypertextový odkaz je speciální případ odkazu, takže je docela dobře možné je použít v dnešním tématu rovnocenně. To je to, co použiji pro své vlastní sobecké zájmy v průběhu dnešní publikace a použiji oba tyto výrazy, abych se vyhnul zbytečnému spamu s klíčovými slovy.

Existují ale také neviditelné služby vytvořené pomocí a ty v rámci , jejichž úkolem je odesílat četné signály a příkazy do prohlížečů, aby provedly určitou funkci.

Například pomocí servisních hypertextových odkazů je možné zobrazit ikonu . Lze je zobrazit pouze jako součást HTML kódu (klikněte na libovolnou stránku otevřenou v prohlížeči):

Ponechme prozatím odkazy na služby na pokoji a zvažme obecný vzorec vytváření hypertextových odkazů. Mají společné to, že je mají všichni povinný atribut href, jehož hodnota je adresa dokumentu (). Odkaz HTML může vést jak na interní stránku webu, tak na externí dokument.

Ještě jedna důležitá poznámka. Použití atributu href umožňuje kliknutí na hypertextové odkazy, to znamená, že uživatelům umožňuje automaticky přejít na odpovídající stránku webu v důsledku kliknutí na ně.

Jak vytvořit hypertextový odkaz v HTML pomocí href

Již tedy víme, že pro vytvoření odkazu je potřeba tag a atribut href, jejichž parametry mohou být URL různých typů. Protože A toto, pak mezi otvorem a zavírání obsahuje obsah, který se zobrazí na webové stránce.

Tento obsah se nazývá kotva a může být prezentován jako text nebo obrázek (více o tom, jak z obrázku udělat odkaz, si povíme níže). Jak jsem již poznamenal, kotva bude klikací. Zvažte příklad hypertextového odkazu s textovým obsahem. Zde je návod, jak by to vypadalo v kódu HTML:

něco málo o kotvách

Kromě HTTP lze použít zabezpečený protokol HTTPS. Odkaz nemusí vést na webovou stránku. Vše závisí na hodnotě href, což může být cesta k nějakému souboru:

//website/wp-content/uploads/2012/05/giperssylqi-v-html.jpg

stažení

Na webové stránce bude tento odkaz vypadat takto:

Prohlížeč „rozumí“, že objekt s příponou .zip lze použít pouze ke stažení, což uživateli navrhne.

Mimochodem, cesta k jakémukoli souboru je někdy specifikována přes FTP (). Poté v adrese URL, která se používá jako parametr atributu href, byste měli jednoduše nahradit protokol HTTP (HTTPS) protokolem FTP. Odkaz na soubor bude vypadat takto:

stáhnout ze serveru

Ale to není všechno. Podobným způsobem pomocí pseudoprotokolu mailto je vytvořen e-mailový odkaz pro rychlý přístup k nástroji pro psaní:

psát dopisy

Po kliknutí na takový odkaz by se mělo objevit okno výchozího poštovního klienta, ve kterém můžete sestavit text zprávy a odeslat ji na již zadanou adresu, převzatou, jak jste asi uhodli, z href.

V praxi byly hypertextové odkazy na poštu v minulosti velmi často využívány webmastery a majiteli velkých zdrojů, aby zajistili pohodlí uživatelů a zákazníků, kteří se dostanou k poštovnímu formuláři jedním kliknutím.

Tento typ komunikace na webových zdrojích však již není tak populární (zejména proto, že můžete například instalovat), protože takto otevřené e-mailové adresy jsou aktivně zachycovány pomocí softwaru a používány různými druhy spammerů.

Jako příklad jsem uvedl pouze nejběžnější protokoly, které jsou součástí URL, což je zase parametr atributu href při vytváření hypertextového odkazu. Kromě HTTP (HTTPS), FTP a mailto existují další pro specifičtější úkoly. Možná se jim budeme podrobněji věnovat v dalších publikacích.

Typy hypertextových odkazů

A nyní zkusme klasifikovat odkazy podle určitých kritérií.

Podle jejich rozsahu:

1. Externí- vést na stránky umístěné mimo stránky, na kterých jsou umístěny;

2. Vnitřní- odkazovat na webové stránky v rámci stejného webového zdroje.

Podle formátu:

2. Graficky f — v tomto případě je kotvou hypertextového odkazu obrázek (včetně miniatury), banner, tlačítko atd.

Podle typu adresy URL, která slouží jako hodnota atributu href:

1. Absolutní, které obsahují explicitní označení protokolu přenosu dat (například HTTP) a názvu domény webu (ve všem o doménách).

Takové odkazy se častěji používají při odkazování na stránky externích zdrojů. V tomto případě bude hodnota href zahrnovat úplnou cestu k požadovanému souboru nebo webové stránce. Zde je příklad absolutního hypertextového odkazu:

Kontext - co to je

2. relativní, jedna z možností pro vytvoření, kterou bude cesta zadaná vzhledem ke kořenové složce webu (odtud název tohoto typu hypertextového odkazu). V tomto případě bude z adresy URL odstraněn protokol (HTTP) a doména webu:

Kontext - co to je

Relativní hypertextové odkazy na webové stránce mohou poskytovat odkazy na interní stránky. V této podobě jsou kratší, což usnadňuje HTML kód. Všechno samozřejmě není tak jednoduché a vyžaduje širší pokrytí, jak můžete vidět, pokud budete následovat uvedený odkaz.

atributy značky

Nyní se podívejme, jaké další atributy kromě povinného href existují a jak mohou ovlivnit vytvoření hypertextového odkazu. Nejúplnější data v tomto ohledu najdete takříkajíc „z první ruky“ na oficiálních stránkách International Consortium W3C, kde se aktuální informace objevují nejrychleji.

Jsou zcela totožné a iniciují otevření webové stránky v aktuální záložce. Pokud chcete, aby se stránky při kliknutí na odkazy otevíraly na nové kartě, měli byste to přidat při vytváření odkazu cílový atribut s prázdným parametrem:

Kontext - co to je

Někteří webmasteři a SEO se sice domnívají, že je lepší, když návštěvník dostane možnost si vybrat (tedy nepsat cíl prázdný), protože v případě potřeby lze stránku otevřít i v nové záložce pomocí kontextového menu (přesunout umístěte kurzor na odkaz, klikněte pravým tlačítkem a klikněte na příslušnou položku):

Navíc, jak vidíte, v tomto případě má uživatel tu výhodu, že je možné otevřít webovou stránku nejen v nové záložce, ale také v novém okně(tuto možnost nelze implementovat pomocí HTML, pouze pomocí skriptů).

Věřím však, že ne všichni začínající uživatelé jsou plně obeznámeni s možnostmi a nastavením populárních prohlížečů (). Je docela pravděpodobné, že čtenář poté, co sledoval externí hypertextový odkaz a ztratil ze zřetele zdrojovou stránku (místo toho se zobrazí dokument příjemce), jednoduše zavře kartu ve svém srdci.

Vlastník webového zdroje tedy může nejen ztratit potenciálního návštěvníka, ale také získat zhoršení faktorů chování (), což povede ke ztrátě pozic na stránce v hodnocení.

Navíc otevření stránky na sousední kartě je velmi pohodlné z hlediska použitelnosti (). Uživatel následuje hypertextový odkaz na webovou stránku, obdrží další informace a jako by se nic nestalo, pokračuje ve studiu hlavního materiálu.

Abychom si udělali objektivní obrázek, je třeba dodat, že použití „target="_blank"" na jakékoli externí odkazy se ukazuje být zatíženo určitým bezpečnostním rizikem. Pokud to někoho zajímá, můžete si přečíst, kde jsou uvedena doporučení pro řešení problémů při použití cílového prázdného místa a také alternativní možnosti implementace úlohy otevření webové stránky na nové kartě.

Zdá se, že zaznamenal všechny výhody a nevýhody použití prázdné hodnoty k otevření hypertextového odkazu na nové kartě. Pokud čtete články na mém blogu, pravděpodobně jste již uhodli můj postoj k tomuto parametru cílového atributu.

V tuto chvíli u mě převažují jeho klady nad zápory a jsem jeho bezvýhradným zastáncem. Na základě výše uvedených skutečností si můžete na tuto problematiku vytvořit vlastní názor. I když ... s přihlédnutím ke vzniku nových okolností se může změnit.

Jak vytvořit hash odkazy, kotvy a proč jsou potřeba?

Dále zaměřuji vaši pozornost na jiný typ hypertextových odkazů, které mohou být užitečné, pokud je materiál umístěný na webové stránce poměrně objemný a měl by být strukturován pro zlepšení navigace.

Příklad nemusíte hledat daleko, stačí se podívat na obsah této publikace hned na začátku. Vidíte, existuje seznam sekcí článku? Hypertextové odkazy na tyto sekce jsou pouze hash odkazy. Po kliknutí na některý z nich prohlížeč posune stránku na místo, kde začíná příslušná část.

Vytvoření takových odkazů je docela jednoduché. Nejprve musíte vytvořit Kotva, umístěním příslušného štítku na požadované místo na stránce ve formě ID identifikátoru, což je jeden z globálních atributů aplikovaných na jakoukoli HTML značku.

Vzhledem k univerzalitě ID mohou být takové kotevní značky umístěny téměř kdekoli na webové stránce. Protože je text obvykle rozdělen do odstavců, lze je použít na . Položil jsem hlavně kotvy, které rozdělují články na logické části:

Když takto označíme všechna potřebná místa v HTML kódu, vytvoříme na ně hypertextové odkazy. Za tímto účelem na konec za posledním lomítkem "/" v URL (což, jak již víte, je hodnota atributu href), postupně napíšeme znak libry "#" a název štítku (ID) :

Jak generovat hash odkazy a kotvy?

Navíc, pokud je takový odkaz kotvy umístěn na stejné stránce jako kotvy, pak lze část adresy URL až po poslední lomítko před značkou hash včetně vynechat a lze použít pouze „#“ plus název ID. jako parametr href (ve skutečnosti je to jedna z možností pro relativní odkazy):

Jak generovat hash odkazy a kotvy?

To znamená, že při sestavování obsahu manuálu pro optimalizaci HTML kódu můžete snadno použít tuto odlehčenou možnost. Pokud jako URL vložíte pouze jeden znak libry, bez názvu identifikátoru, pak se z místa, kde se takový odkaz nachází, stránka posune úplně nahoru:

Horní

Ve skutečnosti je to nejjednodušší možnost, která opět slouží jako další plus pro použitelnost zdroje, protože usnadňuje život svým návštěvníkům. Atraktivní obrázek lze použít jako kotvu pro vytvoření tlačítka.

Jak odstranit podtržení a změnit barvu odkazu

Vývojáři HTML mysleli na téměř všechny nuance, které mohou pomoci při optimalizaci toho či onoho aspektu, totéž platí pro hypertextové odkazy. Například při sledování hypertextového odkazu na jinou webovou stránku a následném návratu zpět uživatel uvidí, že hypertextový odkaz změnil barvu.

Pokud potřebuje takové akce opakovat opakovaně, pak bude schopen rychle určit, na které odkazy již klikl a na které ne. Tato možnost je zabudována do téměř každého prohlížeče. Není třeba vysvětlovat, jak je to pohodlné a jak ušetří čas.

Výchozí a žádné hypertextové odkazy CSS podtržené a tři barevné možnosti, z nichž každý má svůj vlastní atribut pro:

• odkaz - nastavuje barvu hypertextového odkazu na webové stránce (výchozí je modrá, která je označena #0000ff);
• alink - aktivní barva hypertextového odkazu po dobu, po kterou je zpracováván webovým prohlížečem (červená #ff0000);
• vlink — barva odkazu navštíveného uživatelem (fialová, #800080).

Jak tedy změníte barvy odkazů zobrazovaných prohlížeči pro váš web? No, pro jednoduchý HTML web, kde se stránky tvoří ručně (a myslím, že v moderní realitě prakticky neexistují žádné plnohodnotné zdroje tohoto druhu, kromě jednoduchých deníků a vstupních stránek), stačí najít úvodní značku a nastavte pro něj potřebné parametry (mimochodem, jeho název můžete použít k označení barvy), například:

Pokud jste nainstalovali redakční systém () pro správu svého webového zdroje, pak bez ohledu na typ enginu, který používáte, musíte otevřít pro úpravy soubor zodpovědný za zobrazení záhlaví (záhlaví), kde je otevírací značka .

Pokud na vašem zdroji běží WordPress, pak pro praktickou realizaci tohoto nápadu jej můžete použít jako nástroj pro automatické vkládání obrázku do hypertextového odkazu, kde nejprve vyberete z knihovny nebo nahrajete požadovaný obrázek a vložíte jej do textu :

Poté vyberte výsledný kód obrázku a stiskněte tlačítko „odkaz“ editoru, poté do zobrazeného okna vložte požadovaný zkopírovaný hypertextový odkaz:

Jsem rád, že vás vítám na blogu! V dnešním článku začneme mluvit o Hypertext Markup Language. html. Tato publikace bude první svého druhu (a zdaleka ne poslední), jelikož jsem nic podobného ještě nenapsal.

Plán příspěvku:

Ale teď, když jsem získal potřebné znalosti a vyzkoušel je v praxi, rád se o ně podělím se svými čtenáři. Ostatně ne nadarmo se říká, kolik úsilí a času bylo vynaloženo v počáteční fázi, např. jak vložit odkazhtml. Samozřejmě, že po přečtení mého příspěvku to také budete vědět a zvládnete to.

Obecně stojí za zmínku značky odkazů jsou v práci optimalizátorů prostě nezbytné, protože jejich chlebem je právě optimalizace pro vyhledávače a bez odkazů se přirozeně neobejdou ani SEO guruové, natož obyčejní blogeři :).

Možná, html značka odkazuA je jedním z mých nejpoužívanějších spolu s tagem img, který je potřeba pro zobrazení obrázků v textu. V průměru je v každém článku, který publikuji, umístěno asi pět odkazů, a to jak na interní stránky, tak na externí.

Nezapomeň na to značky webuhtml se používají nejen při psaní příspěvků. Budou také potřeba při změně kódu šablony, kterou jste nainstalovali do WordPress CMS nebo jiného redakčního systému.

Proto je potřeba nastudovat alespoň to nejzákladnější html tagy abyste v budoucnu neměli problémy při práci s odkazy. Pokud například při psaní článků používáte „Visual Editor“, pak to není příliš dobré, protože pokud tento editor nefunguje, nebudete znát ani základní kód pro vložení odkazu.

Obecně, věřím, že znalost základních pojmů v html značkovacím jazyce vám velmi pomůže a zjednoduší vám život. Přesto čas, který nyní věnujete studiu, možná pro vás nové látky, nebude promarněný.

Existuje také spousta nuancí, které vám usnadní práci a o kterých se dočtete níže v mém článku - to jsou rel="nofollow”, A target="_blankprázdný" a mnoho dalších zajímavostí souvisejících s odkazy.

Značka odkazu A – vytvoření hypertextového odkazu v html dokumentu s kotvou a bez ní

Jak jsem si již všiml výše, odkaz je mnou jeden z nejpoužívanějších html tagů. Jsou potřeba, aby uživatelé mohli snadno přepínat z jednoho dokumentu do druhého jediným kliknutím myši.

Chcete-li však zadat cestu k hypertextovému odkazu, musíte použít atributhref. Díky němu můžete a měli byste zadat URL stránky, na kterou chcete odkazovat. Mohou to být jak interní stránky vašeho webu, tak stránky jakéhokoli jiného zdroje na World Wide Web.

Anchor html link tag A je významným faktorem, který vyhledávací roboti berou v úvahu, takže mu musíte věnovat zvláštní pozornost. Doporučuji použít klíčová slova v kotvě, na která chcete, aby se váš článek dostal na první pozice ve výsledcích vyhledávání.

Když jsme se trochu zabývali teorií hypertextových odkazů v html dokumentu, můžeme přistoupit k názorným příkladům. Zde je kód pro odkaz:

Zde by měl být text vašeho hypertextového odkazu, tedy kotvy

Jak vidíte, odkaz začíná otevírací závorkou "<», затем идет html тег A, после него должен быть обязательный атрибут href и знак равенства. Далее, следуют две скобки следующего типа – «”», между ними нужно указать URL адрес ссылающегося ресурса, при использовании «http://». Затем, нужно указать анкор ссылки и в конце концов закрыть тег ссылки А при помощи «».

Také vám doporučuji používat odkazy bez ukotvení, protože pokud k vašemu zdroji vedou pouze hypertextové odkazy s kotvou, může to způsobit dotazy z vyhledávačů a vést ke špatným následkům. Jistě jste už slyšeli o senzačním algoritmu Google, který má děsivé jméno Penguin :).

Otevření odkazu v novém okně. atribut target_blank

No, přišli jsme na html značku A, ale to není vše. Atributů, které se vám budou hodit při práci s odkazy, je mnohem více. Jeden z nich - atributtarget_blank.

Je potřeba, aby se odkaz, který jste vložili do html dokumentu, otevřel v novém okně internetového prohlížeče. To je velmi užitečné, když píšete jeden dlouhý článek a odkazujete na své minulé publikace. Stránka čtená uživatelem tak zůstává otevřená a odkazy se otevírají na jiných kartách prohlížeče.

cíl prázdný v html se používá velmi často, protože pomáhá z hlediska chování návštěvníků vašeho webu, to znamená, že ovlivňuje faktory jeho chování. Pokud tedy stále nepoužíváte atribut target s parametrem _blank, doporučuji si tuto část velmi pozorně přečíst.

Jak jste si možná všimli, není velký rozdíl, kde bude požadovaný atribut umístěn, protože na jejich pořadí v html značkách nezáleží.

atribut rel nofollow a značka noindex. Zavřete odkaz z indexování

Začněme pracovat s atributem rel link v html dokumentu. Tento atribut s parametrem nofollow slouží k tomu, aby se váha vaší stránky nepřenášela na jinou.

Jak víte, na každé stránce, dokonce i na nově vytvořené a bez externích odkazů z jiných zdrojů, je váha vyšší než nula. Uživatelé to nevidí, ale vyhledávače to berou v úvahu.

Proto, aby od vás vnitřní váha vašich stránek neodplavala, je potřeba přiložit nějaké odkazy s atributem rel nofollow. Odkazy obsahující tento atribut nebudou předávat váhu jiným webům.

Přirozeně, atributrel nofollow neměli byste jej používat, když odkazujete na interní stránky vašeho webu, protože kompetentní interní propojení je klíčem k úspěšné optimalizaci zdroje a jeho dalšímu rozvoji.

Výše uvedený atribut používám pouze v případě, že odkazuji na externí stránky. Například, jak jste si mohli všimnout, často na konci mých článků zvu postees, aby se stali mým čtenářem Twitteru (), a dávám odkaz na svůj účet, samozřejmě tento odkaz přikládám do rel nofollow. Vypadá to takto:

Staňte se mým následovníkem

Opět platí, že zda je nofollow rel umístěn před nebo za atribut href, je irelevantní. V takových odkazech byste také neměli předepisovat klíčová slova v kotvě, protože to nedává žádný smysl, protože jsme dříve udělat odkaznofollow, což znamená, že nepřenáší váhu.

Nyní k diskuzi štíteknoindex. Slouží k tomu, aby vyhledávací roboti neindexovali zbytečné prvky stránky. Navíc to platí nejen pro hypertextové odkazy, ale také pro určité části textu.

Staňte se mým následovníkem

Mimochodem, když jdu na jakýkoli web, okamžitě vidím, kde je hypertextový odkaz uzavřen z indexování a kde je naopak otevřený. To vše díky skvělému doplňku pro prohlížeč Opera. Také s pomocí tohoto pluginu mohu sledovat další parametry zdrojů, jako jsou a AlexaRank.

Odkaz na kotvu a jak to udělat. Atribut názvu

A nyní, možná pro mnohé, objevím při práci s odkazy velmi zajímavou věc. Osobně jsem se o tom dozvěděl až po více než šestiměsíčním používání WordPressu. Takže, teď pojďme mluvit o odkazová kotva.

Díky němu, a také při používání hash odkazy, můžete odkázat nejen na nějaký článek, ale i na místo v něm, které je nutné, tedy na určitou část textu. To je nutné, když je publikace velmi objemná a bude obtížné v ní najít potřebné informace.

Nejprve je potřeba v článku vybrat úsek textu, na který chcete odkazovat, na který se stránka v internetovém prohlížeči posune. To znamená, že pokud uvedete odkaz, řekněme o nastavení (ne příklad kotvy), pak by měl být atribut name umístěn v požadované části publikace.

Jak vidíte, atribut name nemá kotvu, protože kotva se skládá z úvodního a závěrečného tagu A. Parametr atributu si musíte nastavit sami, je uveden za rovnítkem a závorkami, jak je ukázáno v příkladu výše .

Nyní přímo v novém příspěvku je potřeba určit hash link pomocí předem připravené kotvy. Odkaz tedy okamžitě otevře místo v textu, které je potřeba. Tento hash odkaz bude vypadat takto:

Kotva

Poté se čtenáři vašeho webu budou moci kliknutím na takové odkazy okamžitě dostat do konkrétní sekce na stránce.

No, to je vše, co mám, pokud máte nějaké dotazy, zeptejte se jich v komentářích. Podotýkám, že to není poslední článek o html, v dohledné době budou na toto téma vycházet další publikace.

Video epilog: umělec kreslí obrázky na sklo velmi rychle

Mnoho webů má praxi otevírání externích odkazů v novém okně. Často se tímto způsobem otevírají například odkazy na web vývojáře nebo výsledky vyhledávače. Zpravidla se k tomu používá atribut tag.< >:

Obecně řečeno, říkat uživateli, jak otevřít odkaz, je ošklivé. Guruové použitelnosti webových stránek jednomyslně tvrdí, že uživatel sám se může rozhodnout, jak odkaz otevřít. Vytřídí svá okna bez našeho přání v této věci. Kromě toho také porušíme standardní tlačítko Zpět v prohlížeči. Takový hrubý zásah do zvyků pravděpodobně způsobí nechuť!

Navíc vzniká špatný dojem: „Uživatel opustí web! Možná se nikdy nevrátí! Ah ah ah! Co dělat? Otevřeme nový odkaz v jiném okně! Možná, že až uvidí vše, co potřebuje, pak se zavřením tohoto okna k nám opět dostane a pak se určitě stane pravidelným návštěvníkem!

Smysl je, doufám, jasný – naplňte web kvalitním užitečným a zajímavým obsahem a návštěvníci se pak budou vědomě a nezávisle vracet.

Kromě morální však existuje také technická stránka problému - cílový atribut není ve specifikaci XHTML 1.0 Strict, a proto neprojde validací!

Platné řešení: JavaScript

Pokud jste se i přes předchozí odstavce přesto rozhodli (nebo byli nuceni) otevřít stránku v novém okně, udělejme to alespoň v platnosti.

Zde přichází na pomoc JavaScript. Zkusme zachytit událost onclick odkazu a vynutit otevření nového okna pomocí funkce window.open(). Poté zakážeme přechod na odkaz v nativním okně zadáním return false:

Odkaz se otevře v novém okně

Zkontrolujeme řešení:

Všechno je skvělé. Prohlížeče s jistotou otevřou odkaz v novém okně. Validátor nás potěší zelenou zprávou o úspěchu. Zdálo by se, že se můžete uklidnit, ale bylo to! Zkusme dát do prohlížeče tvrdý blokátor vyskakovacích oken a znovu se řiďte odkazem!

Lepší řešení

Blokování vyskakovacích oken je určeno hlavně k boji proti otravným reklamám. Tato funkce je dostupná ve všech moderních prohlížečích. Některé prohlížeče dokonce nabízejí různé úrovně blokování. Například v Opeře 9+ můžete blokovat buď jen „nechtěná“ okna, nebo vše.

Nevím, jaké procento uživatelů tak radikálně bojuje s vyskakovacími okny, ale pouze s takovým nastavením se místo otevření okna prostě objeví malá výzva „vyskakovací okno zablokováno“. Navíc i tento projev reakce prohlížeče na kliknutí v nastavení lze zakázat. V tomto případě odkaz jednoduše ztratí funkčnost: „Klikám, ale nic se neděje!“

Kdyby někdo po přečtení tohoto řekl: „Nemůžete se zalíbit všem! No, kdo je jejich doktor, že je pro ně všechno vypnuté! “, Tak s takovými lidmi nejsme na cestě. Ve zbytku pokračujme.

Odkaz se otevře v novém okně

Zde jsme využili toho, že funkce window.open() vrací true, pokud bylo okno úspěšně otevřeno, a false v opačném případě. To znamená, že v případě, že byl odkaz úspěšně otevřen v novém okně, zablokujeme otevření odkazu v našem nativním okně, protože návrat bude!pravda=nepravda. A naopak, pokud se okno nepodařilo otevřít, návrat true umožní odkazu normálně fungovat.

Dobrý den, milí čtenáři tohoto blogu. Dnes chci podrobněji mluvit o tom, co je hypertextový odkaz v jazyce Html, jak je můžete umístit do textu na webu, jak udělat z odkazu obrázek, jak správně používat značku „A“ a její „ Atributy Href“ a „Cíl prázdné“ (otevřít v novém okně).

Obecně je klíčovým prvkem hypertextový odkaz. Odkazy jsou dnes navíc jedním ze tří hlavních faktorů ovlivňujících úspěšnou propagaci webu. Jejich správná aplikace a pochopení například toho, jak to ovlivňuje jejich účtování vyhledávači, může výrazně ovlivnit návštěvnost vašeho zdroje.

Co je hypertextový odkaz a kotva (kotva)

Se zastaralými a pro každodenní použití nedoporučovanými štítky jsme se tedy již seznámili. Pokračujme v našem seznámení.

Abychom vytvořili hypertextový odkaz v Html kódu, potřebujeme také použít značku A. K tomu bude možné použít různé atributy, které určují například URL adresu cíle pro pohyb tímto odkazem (href ) nebo pokyn k otevření v novém okně (target= _blank). Ale pojďme mluvit o všem popořadě.

Jak jsme již zmínili výše, hypertextové odkazy jsou klíčovým prvkem jazyka Html a umožňují vám odkazovat jak na interní stránky vašeho vlastního webu, tak na jiné internetové zdroje. Řeknu banalitu - přechod na odkaz se provádí kliknutím na něj (a co jste si mysleli?).

Kromě toho, že je lze rozdělit na vnitřní nebo vnější, také jsou může být oficiální a používat výhradně pro potřeby prohlížeče, pomocí kterého se budou otevírat stránky vašeho webu.

V tomto případě nebudou na stránce vidět, protože se zapisují do oblasti Head zdrojového kódu dokumentu, jehož obsah se na stránce nezobrazuje (strukturu kódu hypertextového značkovacího jazyka jsem zmínil v článku o).

Hypertextové odkazy služby se nevytvářejí pomocí značky "A" (jako obvykle), ale pomocí značky Odkaz. Úloh, které provádějí například s jejich pomocí, je poměrně dost, externí soubory s CSS kaskádovými styly nebo třeba .

Ale dnes nebudeme uvažovat o tom, jak mohou být vytvořeny (čas na ně přijde), ale zastavíme se viditelné odkazy, které lze vytvořit v oblasti Tělo a podle toho se zobrazí na webové stránce.

Ale přesto mají všechny hypertextové odkazy (viditelné i servisní) jedno společné – všechny obsahují povinný atribut Href. V něm je jako jeho hodnota napsáno konkrétní místo v dokumentu (pokud bylo dříve označeno kotvou) nebo adresa samotného dokumentu na internetu (nebo jinými slovy cesta ke stránce nebo nějaká jiná soubor je zapsán v Href).

Hypertextové odkazy jsou navigační prvky, které jsou navrženy tak, aby vás přesměrovaly na jiné dokumenty na webu nebo aby se pohybovaly obsahem webové stránky, kterou si již prohlížíte, pomocí značek dříve vytvořených v těle dokumentu, které se také nazývají Html. kotvy(kotvy).

Může zde být nějaký zmatek, protože. v SEO pod slovem, ale v jazyce Html znamená „kotva“ přesně kotvu (překlad slova kotva) nebo štítek v textu, na který se pak lze odkazovat.

Proč se v Html používají kotvy? To je docela praktické při vytváření navigace na poměrně dlouhé webové stránce. Pravděpodobně jste se setkali na netu, když na stránce, kterou jste otevřeli, jsou hned pod jejím názvem uvedeny názvy sekcí článku publikovaného na této stránce.

Čtenář tak může okamžitě přejít na místo na stránce, kde se nachází informace, které ho zajímají, a neobtěžovat se posouváním textu a vizuálním hledáním správného místa. Pohodlné a vylepšující.

Jak se vytvářejí kotvy a hash odkazy

Naším úkolem v tomto případě tedy bude nainstalovat kotvy na správná místa na stránce (dokumentu), která v obecném případě bude vypadat takto:

Tito. abyste vytvořili kotvu, musíte do prázdné značky hypertextového odkazu "A" zaregistrovat jediný atribut "Name", jehož hodnota je použití jedinečného štítku, který by neměl obsahovat mezery a ve kterém můžete používat znaky latinky, čísla, pomlčky a podtržítka (v naprosté analogii s pravidly, podle kterých můžete vytvářet URL - ,,,[_],[-]).

V tomto případě kotva nebude viditelná na samotné stránce, protože. uvnitř prvků "A" jsme nenapsali žádný text. Takto vytvořené kotvy však znečišťují Html kód, a proto se nyní používají mnohem častěji než kotvy jiný způsob, jak vytvořit štítek.

V tomto případě nemusíte vytvářet prázdnou značku „A“, ale můžete použít kterýkoli z již dostupných prvků na správném místě v textu. Například by to mohlo být.

Tito. k vytvoření analogu kotvy stačí do libovolné značky přidat univerzální atribut ID (lze jej použít pro všechny značky a mimochodem na něm fungují), například takto:

Text nadpisu

Nyní tedy namísto vytvoření požadovaného počtu kotev, které znečišťují kód a aktuálně nejsou platné (nedoporučuje se konsorciem W3C, které vyvíjí jazyk Html), jednoduše přidáme Id.

Ukazuje se, že k tomu bude nutné jako obvykle vložit povinný atribut „Href“ do hypertextového odkazu „A“, jehož hodnota však bude tvořena názvem požadovaného štítku (kotvy), kterému předchází znak libry "#", který má také název hash (proto mimochodem rostou nohy často používaného názvu: link hash):

přeskočí na místo stránky označené kotvou

Upozorňujeme, že když na takový hypertextový odkaz kliknete, nový dokument se neotevře. Prohlížeč posune již otevřenou stránku do takové pozice, aby místo v textu, kam jste vložili kotvu, zaujalo pozici úplně nahoře na obrazovce. Bylo by logické předpokládat, že hodnoty všech štítků (kotev) na jedné stránce by měly být jedinečné, aby nedošlo k záměně prohlížeče.

Pokud vytvoříte kotvu pomocí atributu ID ve značce, která je k tomu vhodně umístěna, musíte vzít v úvahu, že kromě omezení typu použitých znaků (,,,[_],[-]) Hodnota ID je povinná musí začínat latinkou.

Pak mohou být všechny platné znaky umístěny v libovolném množství, ale první znak kotevního štítku v hodnotě atributu ID musí být písmeno (samozřejmě latinka). Jinak taková kotva vložená do Html kódu nebude fungovat (ve většině prohlížečů).

Pokud za symbol hash "#" nenapíšete žádný název štítku kotvy (href="#"), pak takový hypertextový odkaz posune stránku nahoru. Takto můžete vytvořit nejjednodušší tlačítko „Zpět na začátek“ vytvořením odkazu z obrázku (o tom si povíme trochu později) a jeho vložením do šablony webu, například takto:

Href je povinný atribut jakékoli značky hypertextového odkazu.

Nyní přejděme od navigace v rámci dokumentu (pomocí kotev) k externí navigaci, tzn. budeme muset vytvořit odkazy vedoucí na jiné dokumenty na našem nebo jiném webu. Nyní do atributu Href již nemusíme psát kotevní značky, ale cestu k otevíranému souboru (stránka je svým designem soubor, který se načte do prohlížeče pro následné zobrazení).

Kotva

Zde bychom měli jít dále, ale o nich jsem již psal více než podrobně ve zmíněném materiálu, takže asi nemá smysl se opakovat. Ale musíte vědět, jak můžete nastavit cestu k souboru v atributu Href hypertextového odkazu, který jste vytvořili. Nepřihlašujte se proto, abyste se seznámili s předloženým materiálem.

Dovolte mi však připomenout, že při vytváření adres URL je vhodnější použít pouze následující znaky: (,,,[_],[-]) a nepoužívejte mezery. Pokud vezmeme v úvahu obsah atributu Href pro absolutní odkazy, lze jej schematicky znázornit takto:

Pokud zahodíme to, co budete používat jen zřídka, můžete totéž prezentovat v poněkud zjednodušené podobě:

Protokol (obvykle http)://název_domény (např. web)/cesta_k_souboru (webové stránky)

Kromě jednoduchého protokolu http na internetu můžete najít odkazy s protokolem https, který se liší tím, že používá šifrování. Ten se používá na stránkách, kde je potřeba chránit kanál výměny dat mezi serverem a klientským prohlížečem. Používá se například u služeb elektronických peněz WebMoney.

Na internetu můžete najít různé varianty obsahu Href, například tento:

https://web/videokursy

Nebo takto (s příponou souboru):

https://site/seo/kak-raskrutit-sajt.html

To nemění podstatu, ale pokud je na konci obsahu atributu Href uvnitř hypertextového odkazu lomítko, znamená to, že přístup již není k souboru, ale ke složce, ve které bude odpovídající objekt indexu vyhledávat (více se o tom dočtete ve výše uvedeném článku o url adresách).

Stáhněte si něco z odkazu

Jak vidíte, tento hypertextový odkaz se neliší od obvyklého, prohlížeč prostě chápe, že potřebuje stáhnout soubor s příponou zip, a ne se jej snažit otevřít pro prohlížení, jako jsou například soubory dokumentů s příponou zip html rozšíření. To vše si však můžete nakonfigurovat čistě individuálně ve svém prohlížeči tak, aby vyhovoval vašim osobním potřebám.

Stáhnout z FTP serveru

Můžete také například vytvořit (mail) přidáním odpovídající adresy URL do Href:

Napsat dopis

Po kliknutí na takový odkaz se na vašem počítači otevře váš výchozí poštovní program (prohlížeč si můžete nakonfigurovat tak, aby se odkazy s mailto v Href otevíraly v Gmailu atd.) a zobrazí se dialog pro vytvoření nového dopisu, ve kterém do pole "Komu" » vloží poštovní adresu uvedenou v Href.

Ve skutečnosti můžete vytvořit poměrně složité poštovní odkazy, které vyplní další pole v dialogovém okně pro odeslání e-mailu, ale to se používá poměrně zřídka.

Každopádně v poslední době webmasteři prakticky přestali používat hyperlinky s mailto v Href kvůli tomu, že jsou rozebírány spammery se všemi z toho plynoucími důsledky. Lepší je tvořit na stránkách, i když na kontaktní stránce mám stále vše prezentované v klasické podobě. Bylo by nutné změnit ve svém volném čase (nebo ne ... myslím).

Jak otevřít odkaz v novém okně (cíl je prázdný)

Při vytváření odkazů v Html kódu se často setkáváme s otázkou – v jakém okně prohlížeče otevřít dokument, na který vede? Ve výchozím nastavení se otevře ve stávajícím okně, které překrývá stránku, ze které byl tento hypertextový odkaz umístěn.

Osobně jsem velkým zastáncem atribut Target s prázdnou hodnotou, což umožňuje otevřít stránku v novém okně a nechat otevřený dokument, kam byl tento odkaz umístěn. Nevím, jak to ovlivňuje použitelnost mého blogu, ale tato možnost se mi líbí více a používám ji téměř ve všech případech.

Ve vyhledávačích si také rád přizpůsobuji otevírání odkazů v novém okně abyste problém měli vždy po ruce a mohli se k němu kdykoli vrátit. Pro tyto účely, jak již bylo zmíněno, používá Html speciální atribut Target, který má ve výchozím nastavení hodnotu Self:

Otevře dokument ve stejném okně

Sice do tagu "A" samozřejmě nikdo nepíše target="_self", protože tato hodnota se používá standardně, ale pokud potřebujete stránku otevřít v novém okně, budete muset napsat target="_blank ":

Otevře se v novém okně

Všimněte si, že hodnoty atributu Target jsou zapsány s podtržítkem na začátku(_blank), protože je to tak stanoveno ve validátoru Wc3, který obsahuje díry v hypertextovém značkovacím jazyce. Je pozoruhodné, že Html poskytuje možnost změnit výchozí možnost otevírání odkazu.

Pokud například chcete, aby se všechny hypertextové odkazy vašeho webu otevíraly v novém okně, budete muset napsat do oblasti Head šablony, kterou používáte Základní značka s atributem target="_blank":

tam je něco jiného

A nyní, pokud chcete otevřít některý z odkazů ve stejném okně, budete již muset přidat target="_self" do jeho značky "A", protože _blank se nyní používá ve výchozím nastavení. Oh jak.

Mimochodem, prvek Base jsem použil výše popsaným způsobem, ale také jsem do něj uzavřel oblast kódu s několika hypertextovými odkazy, které bylo třeba otevřít v novém okně. Tito. Použil jsem také uzavírací značku Base uvnitř oblasti Body a vše fungovalo. I když takový kód samozřejmě není platný.

Barvy hypertextového odkazu při umístění kurzoru a přechodu – jak je změnit

V jazyce Html to bylo tak koncipováno, že pro uživatele bylo snadné navigovat, který odkaz již otevřel a který ještě zůstal nedotčen.

K tomuto účelu se používá barva, která se změní, když uživatel klikne na hypertextový odkaz a dokument na něm zavěšený se úspěšně otevře. Po návratu na původní stránku uživatel zjistí, že odkaz, který navštívil, změnil barvu. Tento trik umí všechny prohlížeče.

Ve výchozím nastavení jsou v čistém Html (bez použití vlastností CSS) odkazy podtržené a mohou mít tři barevné možnosti:

1. Modrá je barva pro nefunkční odkazy, na které uživatel ještě neklikl
2. Červená - je akceptována hypertextovým odkazem ihned po kliknutí na něj a dokud se požadovaný dokument nestáhne do prohlížeče uživatele po síti (v moderních podmínkách není vůbec snadné tento okamžik zachytit a všude je na vině vše)
3. Fialová – barva použitých odkazů, které uživatel již sledoval

V Html 4.01 jsou tyto barvy odkazu výchozí, ale lze je změnit pomocí speciálních atributů, které se zapisují do tagu Body, který najdete v jednom ze souborů vámi používané šablony. Ke změně všech tří barev se používají tři atributy:

1. Odkaz – nastavuje barvu nenavštíveného odkazu
2. Alink - barva aktuálně aktivního, kterou zpracovává prohlížeč
3. Vlink – barva hypertextového odkazu, který již uživatel navštívil

Pamatujte, už jsem psal o tom, jak. Podle toho mohou zmíněné atributy vypadat takto:

Přirozeně zde byla myšlena čistá možnost Html, kdy z nějakého důvodu není vhodné nebo nemožné použít styling, jinak lze všechny tyto barvy snadno nastavit a změnit pomocí .

Jak udělat z obrázku odkaz – dva způsoby

No, tady je všechno docela jednoduché. Protože je vložený prvek, pak lze celkově jakýkoli obrázek považovat pouze za písmeno, možná s výjimkou většího.

V případě čistého Html kolem obrázku, na který jste udělali odkaz, budete mít tři pixely široký okraj. Navíc barva tohoto rámečku bude plně odpovídat barvám odkazů přijatých pro váš web (mluvili jsme o nich o něco výše v textu).

Chcete-li odstranit přidání ohraničení k obrázku, který jste vytvořili jako hypertextový odkaz, musíte do značky Img přidat atribut Border s hodnotou nula:

Jedná se o velmi jednoduchý způsob, jak z obrázku udělat odkaz, ale existuje i sofistikovanější možnost tzv obrazová mapa. V tomto případě, díky použití poměrně velkého množství Html tagů a atributů, můžete z jednoho obrázku vytvořit celou mapu odkazů s aktivními oblastmi (klikací a mající různé tvary - obdélník, kruh, mnohoúhelník).

Můžete například na svou stránku umístit velkou fotografii a vytvořit ji tak, že když kliknete na její různé části, otevřou se různé stránky s různými hypertextovými odkazy. Ve skutečnosti je na popis obrazové mapy docela dlouhá doba a je nepravděpodobné, že ji někdo použije, takže to neudělám, protože "ta hra nestojí za svíčku."

Hodně štěstí! Brzy se uvidíme na stránkách blogu

Mohlo by vás zajímat

Select, Option, Textarea, Label, Fieldset, Legend – Html tagy formuláře rozevíracího seznamu a textového pole
Jak vložit odkaz a obrázek (fotku) do HTML - IMG a A tagy
Iframe a Frame - co to je a jak nejlépe používat rámce v Html
Znaky mezer a jejich formátování kódu v Html, stejně jako speciální znaky bez mezer a další mnemotechnické pomůcky
MailTo - co to je a jak vytvořit e-mailový odkaz v Html
Jak se nastavují barvy v Html a CSS kódu, výběr odstínů RGB v tabulkách, výsledky Yandex a další programy
Font (obličej, velikost a barva), Blockquote a Pre tagy – zastaralé formátování textu v čistém HTML (bez použití CSS)
Img - Html tag pro vložení obrázku (Src), jeho zarovnání a obtékání textem (align) a také nastavení pozadí (pozadí)
Seznamy v Html kódu - značky UL, OL, LI a DL
Tagy a atributy nadpisů H1-H6, vodorovný řádek Hr, zalomení řádku Br a odstavec P podle standardu Html 4.01

Jediná aktuálně relevantní hodnota cíle je _blank . Ostatní hodnoty cíle byly použity ke specifikaci konkrétních snímků. Rámce však byly v HTML5 zastaralé.

výchozí cíl

Pokud není zadán žádný cíl, odkaz se otevře v aktuálním kontextu, pokud uživatel nebo prohlížeč neurčí jinak.

a target=”_blank” Otevřít na nové kartě prohlížeče (nebo v okně)

Atribut target určuje, kde se po kliknutí na odkaz otevře propojený dokument. Výchozí nastavení je aktuální okno. Pokud target="_blank" , propojený dokument se otevře na nové kartě nebo (ve starších prohlížečích) v novém okně.

Proč otevřít v novém prohlížeči?

Nejčastějším důvodem pro použití `target=”_blank” je, že se odkazy mimo stránky otevírají na samostatné kartě. To umožňuje uživateli kliknout na referenci a vrátit se k ní později, aniž by opustil aktuální stránku. Udrží návštěvníky na vašem webu déle a zlepší většinu vašich metrik: míru okamžitého opuštění, konverze, navštívené stránky.

Otevřete všechny externí odkazy na nové kartě pomocí JavaScriptu

Nemusíte ručně přidávat target="_blank" ke každému odkazu na vašem webu. Pokud odkazujete hodně (což byste měli dělat), je snadné přidat na váš web nějaký kód JavaScript a přeměnit všechny externí odkazy na _prázdné odkazy automaticky.

(Na každé stránce tohoto webu můžete vidět mírně upravenou podobu tohoto kódu v akci.) Tento trik vyžaduje jQuery , ale je velká šance, že jej již používáte. Používá se v nejpopulárnějších frameworkech a systémech pro správu obsahu, včetně WordPress, Drupal a Twitter Bootstrap. Pokud to potřebujete udělat bez jQuery, lze to udělat také. Zde je verze „prostého JavaScriptu“:

Funkce externalLinks() ( for(var c = document.getElementsByTagName("a"), a = 0;a< c.length;a++) { var b = c[a]; b.getAttribute("href") && b.hostname !== location.hostname && (b.target = "_blank") } } ; externalLinks();

Kromě toho, že je to jednodušší, výrazně to vyčistí vaše značky.

Důvody, proč nepoužívat `target=”_blank”

Někteří lidé tvrdí, že uživatelé nechtějí otevírat odkazy v novém kontextu prohlížení. Myslí si, že to je podobné jako vyskakovací reklamy a jiné nepříjemné chování. Se vzestupem prohlížení v záložkách, tento argument do značné míry zmizel. Většina uživatelů dává přednost otevírání odkazů na nové kartě, protože jim to umožňuje zařadit odkazované odkazy do fronty pro pozdější čtení, aniž by ztratili aktuální kontext procházení.

Hodnoty cílového atributu