Jak vložím hypertextový odkaz do HTML? Vytváření a používání hypertextových odkazů v HTML

Hypertext je text, který obsahuje odkazy na jiný text. Příkladem jsou poznámky autora o složitých definicích nebo poznámkách pod čarou překladatelů v dolní části stránky knihy, pokud obsahuje text v cizím jazyce. Internetové stránky jsou komplexním systémem hypertextových přechodů z jedné stránky do druhé, v rámci samotné stránky, stejně jako mezi nesouvisejícími unifikovanými zdroji témat. Taková struktura je praktická, ušetří spoustu času, umožňuje návštěvníkovi rychle najít potřebné informace a neztratit se v mnoha přechodech.

Vložení hypertextového odkazu

V jazyce HTML používáte popisovač (tag) pro vložení hypertextového odkazu. , který je vložen na správném místě. Obvykle je umístěn mezi textem, protože samotný hypertextový odkaz je struktura textu. Odkazy jsou však stále grafické (ikony, knoflíky, obrázky) - budou o nich dále diskutovány. Jejich umístění na webové stránce není omezeno pouze na text, ale závisí na rozhodnutí tvůrce webu.

Domovská stránka Google

Jedná se o příklad vložení hypertextového odkazu do dokumentu HTML, který se provádí pomocí značky . návštěvníci stránek uvidí podtržený text, který se liší od barvy okolního textu (barva HTML vložky může být cokoliv), „domovská stránka Google“, kliknutím na které se dostanete na domovskou stránku, „Google“ vyhledávači. Je třeba poznamenat, že text hypertextového odkazu by měl obsahovat informace o tom, kde se přechod uskuteční. Tato zásada by měla být dodržována a přijímána zpravidla!

Struktura značky ...

Vidíte tu značku - spárováno: je vyžadována uzavírací značka .

atribut href označuje účel odkazu.

https://google.com/ - hodnota atributu, který obsahuje adresu URL zdroje, ke kterému se přechod uskuteční. Skládá se z dvojitých nebo jednoduchých uvozovek. Záleží na struktuře vkládání značek podle pravidel HTML.

domácí google

tato celá stavba se nazývá prvku webový dokument.

Podle pravidel HTML mohou některé prvky obsahovat další prvky. Tag ne výjimkou. Pokud programátor potřebuje zvýraznit slovo Google výrazem tučně, pak se to provádí pomocí značky na obecných pravidlech pro formátování textu, sledujíc postupnost značek vnoření. Webmaster by měl vědět, jak vytvořit hypertextový odkaz v HTML bez chyb, jinak to nebude fungovat. Nefunkční odkazy na slangu počítače se nazývají "zlomené".

domovská stránka Google

Zde: položka

domovská stránka Google

obsahuje vnořený prvek

Google

Nyní návštěvník stránky uvidí hypertextový odkaz s tučným textem zvýrazněným slovem "Google".

Absolutní hypertextové odkazy

Používají se hypertextové odkazy používající absolutní adresy URL stránek obsahujících názvy domén (.ru, .com, .org, .gov) absolutní a mají následující syntaxi:

protocol: // název domény / cesta k souboru

Příklad adresy populárního vyhledávače v Americe: https://aol.com - absolutní, protože obsahuje název domény .com.

Absolutní hypertextové odkazy se používají k navigaci na stránky jiných webů nebo k přístupu k prostředkům umístěným na jiném serveru. Přechod se provádí pomocí internetových protokolů. Protokoly nejsou předmětem tohoto článku, ale protože se podílejí na tvorbě hypertextových odkazů, je třeba je alespoň stručně zmínit o nich:

• http a https - nejčastějšími jsou přechod mezi internetovými stránkami různých webů;
• ftp - protokol pro nahrávání souborů na server nebo stažení ze strany uživatele;
• mailto - mailový protokol, který odesílá e-mail přímo z webu, aniž by šel do vaší osobní pošty.

Existuje několik dalších speciálních účelových protokolů (gopher, telnet), které jsou poměrně vzácné, jejichž použití vyžaduje speciální znalosti v oblasti programování nebo správy systému.

Relativní hypertextové odkazy

S relativním adresováním používá hypertextové odkazy ve formátu HTML pro přechody v prostředku a nevede přes ně. V případě, že strana je tak velký, že běží svislý posuvník, někdy velmi dlouho, jako je ve slovníku, je to velmi pohodlné a vhodné používat relativní odkazy přejít na požadované písmeno.

Vytvoření internetového slovníku má programátor na začátku stránky abecedu, a pokud neplatí pro použití odkazů, uživatel by musel po dlouhou dobu otočit kolečkem myši, aby se dostal k písmenu "I".

Chcete-li vytvořit relativní odkaz, použijte atribut jméno tag :

Přejděte na písmeno Я

kde ano je volána kotva, a Přejděte na písmeno Я - cílová kotva. Pro správné zobrazení kotev je doporučeno použití latinských písmen a čísel, takže se nepište "I", i když by bylo srozumitelnější.

Nyní, že při přechodu z abecedy na začátku stránky na písmeno „I“, je nutné, aby se kotevní kolík v HTML dokumentu, který začíná na písmeno „I“:

písmeno I

předtím, než je kotva znamením roštu, bez něhož přechod na písmeno nebude fungovat.

Relativní adresování při vytváření webu

Vhodný a nejběžnější algoritmus pro vytváření webových stránek programátorem:

• vytvořit složku v počítači a umístit ji na rychlé přístupové místo pro pohodlí;
• vytvořit v této složce hlavní stránku webu index.html;
• vytvoření sekundárních webových stránek (index.html / page2);
• vytváření složky a umístění grafických souborů;
• vytváření složky a umísťování dalších objektů (například soubory ke stažení);
• vyplňování webu obsahem;
• umístění souborů na webu hostingu.

Je nutné použít odkazy pro komunikaci mezi prvky webu a velmi příhodně bude vědět, jak vložit hypertextový odkaz do HTML na jinou stránku na stejném webu. Pokud jsou soubory webu ve stejném adresáři, na stejném serveru, není nutné používat absolutní adresování. Při přenosu souborů webu do hostingu bude vazba mezi objekty zachována, protože budou umístěna ve stejném adresáři hostingu.

Například programátor vytvořil hlavní stránku webu index.html, na kterém je odkaz na jinou stránku page2.html, zdobený obrazem img.jpg. Relativní cesta k tomuto snímku bude vypadat takto:

obrázek

Tip: při studiu tohoto tématu je nejlepší použít jednoduchý textový editor, protože potřebujete získat dovednosti v správném hláskování adres a učit se, jak se vypořádat s kódem ostatních lidí. V této fázi bude hypertextový odkaz v notebooku dobrý výsledek bez chyb, HTML jim neodpustí a vytváří chyby.

Způsoby navigace přes hypertextové odkazy

Ve výchozím nastavení se nová stránka otevře v aktuálním okně prohlížeče, když uživatel klepne na hypertextový odkaz. Webový programátor však může změnit výchozí hodnotu a vynutit otevření stránky, například v novém okně. K tomu je atribut cíle s určitou hodnotou. To lze nejlépe vyjádřit v tabulce.

Syntaxe pro použití atributu cíl:

domácí google

Domovská stránka "Google" se otevře v novém okně.

Poznámka: pro otevření stránek na nové kartě nejsou pro tento atribut žádné hodnoty, ale jsou nastaveny uživatelem v nastavení prohlížeče.

Barva hypertextových odkazů

Zkušený uživatel internetu s časem by si měl všimnout, že hypertextové odkazy se liší barvou od okolního textu a obvykle jsou modré. Odkazy, kterými prošel a vrátili se na předchozí stránku, se stávají šeříky. Použití hypertextových odkazů ve formátu HTML v nestandardním barevném schématu není moc, ale mezi ostatními zmiňuje místo.

Zadejte barvu odkazů ve značce pomocí atributů a jejich hodnot, ve kterých se barva HTML zobrazí v systému rgb (# 00FF00) nebo s přímou indikací názvu barvy ("zelená"). Existují tři typy atributů pro odkazy:

• link - nastavuje barvu neviditelného odkazu;
• vlink - určuje barvu spojení, které již uživatel přepnul;
• alink - nastavuje barvu propojení v okamžiku přechodu na jinou stránku. To se děje rychle, takže nemůžete vždy zachytit tento efekt.

Příklad označení:

Použijete-li tyto atributy do tagu , odkazy tohoto dokumentu budou tmavě modré, navštívené - fialové a aktivní - oranžově červené.

Grafické hypertextové odkazy

Pokrok a vývoj webového designu je nutné vědět, jak vložit hypertextový odkaz do HTML jako obrázek. Je zřejmé, že obrázek musí odpovídat obsahu cílové stránky. Například hlavní stránka místa o léčivých rostlinách může být prezentována ve formě fotografie rostlin, klepnutím na něž se uživatel dostane na stránku, která popisuje léčivé vlastnosti rostliny.

Široce používaná metoda nahrazení statických tlačítek () na krásné grafice, kterou vytvořil webdesigner v grafických editorech (GIMP, Photoshop).

Chcete-li vložit grafiku jako hypertextové odkazy na stránky webu, použije se stejná syntaxe, ale namísto textu se použije značka vložení obrázku podle pravidel HTML:

Chcete-li tag Stejným způsobem jsou použitelné atributy specifikace alternativního textu, šířky, výšky a dalších.

Volání z webu

Standard html5 rozšířil funkcionalitu používání Internetu a nyní můžete volat nejen z telefonu, ale přímo z webu. K tomuto účelu můžete také použít hypertextové odkazy v dokumentu HTML a mají tuto syntaxi:

...předplatitele...

Namísto slova "účastník" je předepsán kontakt volajícímu, jak je tomu v telefonním seznamu. Můžete také umístit grafický soubor (obrázek účastníka).

Že hovory byly provedeny na místě, musíte mít nejen odkaz na telefonní číslo účastníka, ale také sluchátka s mikrofonem (mikrofon, sluchátka) v počítači nainstalována VoIP-programu, rychlost internetu by neměla překročit 0,5 MB / sec. Platba za hovory se provádí výdajem na dopravu. Pokud je tedy internet neomezený, volání je zdarma.

Etika vytváření hypertextových odkazů

Umístěním webových stránek na internet by správce webu měl vědět, jaké typy hypertextových odkazů existují v HTML, a to nejen správně, profesionálně je aplikovat, ale také dodržovat následující ustanovení:

• Hypertextový odkaz musí být jasně viditelný, odlišný od okolního textu. Uživatel by měl vědět, že se jedná o hypertextový odkaz.
• Uživatel by měl pochopit, kam se dostane kliknutím na odkaz. Pro tento účel je vhodné použít jiný atribut titul, který stručně popisuje přechodovou stránku. Syntaxe pro použití atributu je:

Yandex

• Uživatel by měl obdržet pravdivé informace o souboru, který bude stažen po kliknutí na odkaz.

Po spadnutí na očekávanou stránku nebo stažení nesprávného souboru bude uživatel okamžitě opustit web na 99% webu a v budoucnu se k ní nikdy nedostane.

Anti-Seo při vytváření hypertextových odkazů

Kromě technické stránky, jak vložit hypertextový odkaz do HTML, byste měli také zdůraznit morální aspekt. Existuje mnoho stránek, do kterých uživatelé blokují bezpečnostní programy (antivirové programy) nebo dokonce i stav. Toto jsou stránky vytvořené nečistými vývojáři webu.

Jedním z triků, které využívají, je vkládání "neviditelných" hypertextových odkazů do webové stránky. Podvodníci vědí, jak vytvořit hypertextový odkaz v jazyce HTML, a používat atributy pro odstranění podtržítka odkazu a přiřadit mu barvu okolního textu tak, aby jej průměrný uživatel neviděl. A pomocí dalších nástrojů webových technologií (CSS, jаvascript, PHP) můžete naprogramovat jejich chování. Například událost jаvascript onmouseover aktivuje akci prvku webové stránky. Když uživatel přesune kurzor přes neviditelný odkaz, narazí na stránku reklamy jiné stránky. Nebo ještě horší, když je k souboru soubor neviditelný a na jeho počítači začíná stahovat a instalovat nepotřebný software. Obvykle se jedná o viry, které mění domovskou stránku prohlížeče, rušily pevný disk s mnoha programy a podobně.

Brzy tyto stránky spadají do "černého seznamu" virů, bezpečnostních systémů a mezi samotnými uživateli internetu. Takové stránky nežijí dlouho a musí měnit jména, nekonečně migrovat přes internet, mění hosty. To nepodporuje propagaci webu, který je vždy vyhledáván jeho tvůrcem, nikdy to nebude megaportální, jako jsou například sociální sítě. Mimo jiné takové triky způsobují spoustu negativních emocí u lidí postižených těmito činy.