Odkazy lze rozdělit do dvou kategorií:
odkazy na externí zdroje- jsou vytvořeny pomocí tagu a slouží k vylepšení možností aktuálního dokumentu při zpracování prohlížečem;
hypertextové odkazy- odkazy na další zdroje, které může uživatel navštívit nebo stáhnout.
Jak vytvořit hypertextové odkazy na webu
1. Struktura odkazů
Hypertextové odkazy jsou vytvářeny pomocí spárovaná značka. Uvnitř tagu je umístěn text, který se zobrazí na webové stránce. Text odkazu se v prohlížeči zobrazí podtržený, barva písma je modrá a když na odkaz najedete, kurzor myši změní vzhled.
Povinný parametr značky je atribut href, který určuje URL webové stránky.
ukazatel odkazuOdkaz má dvě části − ukazatel A adresní část. ukazatel odkazu představuje část textu nebo obrázek viditelný uživateli. Část adresy odkaz není viditelný pro uživatele, představuje adresu zdroje, na který chcete přejít.
Adresová část odkazu se skládá z URL. URL(Uniform Resource Locator) – jednotná adresa zdroje. Při vytváření adres k oddělení slov se doporučuje používat spíše pomlčku než podtržítko. Obecně má adresa URL následující formát:
Metoda přístupu://název_serveru:port/cesta
Metoda přístupu, neboli protokol, vyměňuje data mezi pracovními stanicemi v různých sítích. Nejběžnější protokoly přenosu dat:
soubor načte soubor z místního disku:
Soubor:/gallery/pictures/summer.html
http poskytuje přístup k webové stránce pomocí protokolu HTTP:
http://site.ru/
https je speciální implementace protokolu HTTP, která používá šifrování (obvykle SSL nebo TLS)
https://site.ru/
ftp požádá server FTP o získání souboru:
ftp://pgu/directory/library
mailto zahájí e-mailovou relaci se zadaným cílem a hostitelem:
Mailto: [e-mail chráněný]
Název serveru popisuje úplný název počítače v síti, například site.ru . Pokud není zadán název serveru, je odkaz považován za místní, tj. odkazuje na stejný počítač jako dokument HTML obsahující odkaz.
Číslo TCP portu na kterém běží webový server. Představuje číslo, které se má zadat, pokud metoda vyžaduje číslo portu ( samostatné servery mohou mít své vlastní rozlišující číslo portu). Pokud není zadán žádný port, použije se jako výchozí port 80. Standardní porty jsou:
21 - FTP
23 - Telnet
70 - Gopher
80 - HTTP
Způsob obsahuje název složky, kde je soubor umístěn.
2. Absolutní a relativní cesta
Pokud je v odkazu zadán pouze název souboru, prohlížeč předpokládá, že soubor je ve stejné složce jako dokument obsahující hypertextový odkaz. V praxi webové stránky obsahují stovky dokumentů, které jsou pro snadnější správu umístěny v samostatných složkách. Chcete-li vytvořit odkaz na soubor mimo složku obsahující aktuální dokument, musíte zadat umístění nebo cestu souboru. HTML podporuje dva typy cest: absolutní a relativní.
Rýže. 1. Příklad struktury složek 2.1. Absolutní cesta
Absolutní cesta určuje přesné umístění souboru v rámci celé struktury složek na počítači (serveru). Absolutní cesta k souboru umožňuje přístup k souboru ze zdrojů třetích stran a obsahuje následující součásti:
1) protokol, například http (volitelné);
2) doména ( Doménové jméno nebo IP adresa počítače);
3) složka (název složky udávající cestu k souboru);
4) soubor (název souboru).
Existují dva typy záznamů absolutní cesty – s protokolem a bez protokolu:
http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html
Pokud je soubor umístěn v kořenové složce, cesta k souboru bude následující:
http://site.ru/index.html
Pokud název souboru není uveden, načte se webová stránka, která je standardně nastavena v nastavení webového serveru (tzv. indexový soubor).
http://site.ru/
Indexový soubor je obvykle dokument s názvem index.html . Přítomnost koncového lomítka / znamená, že adresa jde do složky, pokud není přítomna, přímo do souboru.
2.2. Relativní cesta
Relativní cesta popisuje cestu k zadanému dokumentu relativně k aktuálnímu. Cesta je určena na základě umístění webové stránky, na které je odkaz umístěn. Relativní odkazy se používají při vytváření odkazů na jiné dokumenty na stejném webu. Když prohlížeč v odkazu nenajde protokol http://, hledá zadaný dokument na stejném serveru.
Relativní cesta obsahuje následující komponenty:
1) složka (název složky udávající cestu k souboru);
2) soubor (název souboru).
Cesta pro relativní odkazy má tři speciální zápisy:
/ ukazuje na kořenový adresář a říká vám, abyste začali z kořenového adresáře dokumentu a postupovali dolů do další složky
./ ukazuje na aktuální složku
../ přejít o jednu složku (adresář) nahoru
Hlavní rozdíl mezi relativní cestou a absolutní cestou je v tom, že relativní cesta neobsahuje název kořenové složky a nadřazených složek, díky čemuž je adresa kratší a v případě přesunu z jedné domény do druhé nepotřebujete napsat novou absolutní adresu. Pokud však zdroj třetí strany odkazuje například na vaše obrázky s relativními adresami, nebudou zobrazeny na jiném webu.
3. Kotvy
Kotvy, nebo interní odkazy, vytvářet odkazy na různé sekce aktuální webovou stránku, což vám umožní rychle se pohybovat mezi sekcemi. To se hodí, když je na stránce příliš mnoho textu. Pomocí tagu se také vytvářejí interní odkazy s tím rozdílem, že atribut href obsahuje název ukazatele - tzv Kotva, nikoli URL. Před názvem ukazatele vždy předchází znak #.
Věřím, že žádná HTML stránka nemůže existovat bez alespoň jednoho hypertextového odkazu (nebo pouze odkazu). Odkazy mohou být buď na jiné stránky nebo weby, nebo na soubory, obrázky atd.
Odkazy jsou externí a interní, textové a grafické. externí odkazy odkazy na jiné stránky nebo objekty na nich, zatímco interní naopak odkazují na různé části vašeho webu. Textový odkaz je text, který vás po kliknutí přenese na jiný objekt nebo jej otevře, a grafický odkaz je objekt (nejčastěji obrázek), který zároveň slouží k přechodu na jinou stránku, web nebo např. obraz. Odkazy v HTML se vytvářejí pomocí tagu (z anglického kotva – kotva). Dále vám řeknu více o odkazech.
Značka má důležitý a hlavní atribut href. Jeho hodnota je cesta k objektu nebo webu, na který odkazuje náš odkaz ve formě URL. Kotva (tělo odkazu) může být textová (textový odkaz) nebo obrázek (grafický odkaz). Pokud potřebujete vytvořit grafický odkaz, musíte jako kotvu použít značku IMG mezi značkami. Zde je jednoduchý příklad HTML odkazu:
text odkazu (kotva)
Dovolte mi uvést další příklad, abyste to lépe pochopili. Na základě mého webu:
Na html stránce v prohlížeči to bude vypadat takto:
Barva textu odkazu je nastavena pomocí atributů v tagu BODY. Zjednodušeně řečeno, pro odkazy se hodí stejné atributy pro úpravy jako pro text na stránce. Toto je zvýraznění tučným písmem a kurzívou a použití nadpisů atd.
Na html stránce se objeví následující:
Dostaneme výsledek bez rámečku:
Hlavní stránka 1seo
Jak jste si všimli, přechod na jinou stránku se provádí ve stejném okně. Pokud chcete, aby se odkaz otevřel v jiném okně nebo nadřazeném okně (ve výchozím nastavení je ve stejném okně), můžete použít následující cílový atribut Značka A:
- _blank - otevře stránku v novém okně;
- _parent - načte odkaz v nadřazeném okně;
- _self je výchozí. Otevře odkaz ve stejném okně.
Hlavní stránka webu 1seo
K dispozici je také atribut title pro vytvoření popisku pro odkaz:
Hlavní stránka webu 1seo
Mimochodem, pokud v URL zadáte svou poštovní schránku a zadáte protokol mailto:, kliknutím na váš odkaz se otevře poštovní program, kde v poli Komu již bude zadána vaše adresa poštovní schránka. HTML kód bude vypadat například takto:
Pošli mi zprávu
Snažil jsem se napsat základní věci, které potřebujete k vytvoření odkazu v HTML. Mimochodem, pokud jste četli předchozí články HTML Tutoriálu, pak mohu s jistotou říci, že už víte minimum k vytvoření své první plnohodnotné html stránky. Poté, co vytvoříte stránku, můžete ji umístit na bezplatný hosting a vidět plody své práce. Věřte mi, že poté, co to uděláte, budete mít ještě větší příval kreativní energie. Dále vám řeknu, jak vytvořit tabulku v HTML. To je také velmi důležitá informace Pokuste se jej zcela vstřebat a strávit.
Datum zveřejnění: 15. května 2012Hypertextové odkazy byly vynalezeny za účelem vzájemného propojení dokumentů v síti, a pokud se vaše stránky neskládají z jedné stránky, ale z několika, můžete je propojit pouze vytvořením hypertextových odkazů. Podívejme se přímo na příklad, jak to vypadá.
Vytvořte jednoduchý hypertextový odkaz
Přejít na jinou stránku
Zde je vše jednoduché, k vytvoření hypertextového odkazu používáme značku kde href=”” je adresa stránky, na kterou bude přechod proveden, v našem případě je tato stránka umístěna ve stejném adresáři. Můžete sem také vložit adresu jako href="http://site.ru/page.html" nebo to může být odkaz na archiv umístěný v jiné složce na vašem webu href="arj/arhiv.zip" nebo na jakýkoli jiný dokument, na čemž vlastně nezáleží. Povinným atributem každého hypertextového odkazu je také název, jedná se o popis odkazu, jedná se o velmi důležitý prvek při optimalizaci pro vyhledávače a zde zapisujete klíčová slova stránky nebo dokumentu, na který odkazujete. Text, který se nachází mezi tagem, se nazývá kotva a je také velmi důležitý.
Otevření odkazu na nové stránce
Existuje další zajímavý atribut, který se vám může hodit:
Přejít na jinou stránku
Atribut target s hodnotou _blank otevře odkaz v novém okně, často se používá, pokud nechcete, aby osoba ztratila vaši stránku a zároveň získala potřebné informace právě v nové záložce nebo okně.
Odkazy na obrázky
Výsledek v prohlížeči:
V podstatě je zde vše jednoduché, značku obrázku vkládám mezi úvodní a uzavírací značku hypertextového odkazu , ale zase jsem nevložil jen dva obrázky, přiřadil jsem třídu img tomu, ve kterém jsem resetoval rámeček kolem obrázku, protože když se z toho stane hypertextový odkaz, zobrazí se, ale ne ve všech prohlížečích, například IE vidět, ale ne v Google Chrome.
Podtržení v odkazech
Přejít na jinou stránku
Přejít na jinou stránku
Pro názornost jsem dal dvě možnosti řešení tohoto problému, přiřadil jej k selektoru třídy a předepsáním této třídy odstraníte zbytečné podtrhávání na konkrétních místech. Druhým řešením problému je odstranění podtržení ze všech odkazů ve značce<а>, což samozřejmě jen zřídka vyvolává potřebu, ale přesto znalosti nejsou zbytečné.
Odkazy v dokumentu
Není neobvyklé, že je dokument dostatečně dlouhý a na začátku stránky je vytvořeno malé menu s odkazy na podsekce této stránky. Tyto odkazy se v dokumentu nazývají odkazy a vše je implementováno zcela jednoduše. Nejprve jsou v dokumentu umístěny kotvy, to jsou značky, jsou umístěny v dokumentu, kam se bude nutné přesunout při kliknutí na interní odkaz, zpravidla se jedná o nadpisy sekcí, štítek vypadá takto:
A poslední věc, kterou o hypertextových odkazech potřebujeme vědět, jsou odkazy na elektronické schránky, implementuje se to velmi jednoduše, stačí přidat mailto: do atributu href a adresu schránky:
Můj mail< /a>
Tím končí lekce „Vytváření hypertextových odkazů v html“, jak jste si mohli všimnout, bez CSS jsme se zde neobešli, obecně je materiál docela jednoduchý, myslím, že pro vás bude vše jednoduché a jasné, pište otázky.
Datum publikace: 2014-04-23
Jak vytvořit odkazy v dokumentu HTML
(Další příklady najdete ve spodní části této stránky)
HTML hypertextové odkazy (odkazy)
Štítek lze použít dvěma způsoby:
- Chcete-li vytvořit odkaz na jiný dokument - pomocí atributu href
- Chcete-li vytvořit záložku v dokumentu - pomocí atributu name
Odkazy syntaxe HTML
Příklad
| Navštívit stránku |
zobrazí se v prohlížeči takto:
HTML odkazy – cílový atribut
Atribut target (destination) určuje, kde otevřít propojený (ten, na který odkaz odkazuje) dokument.
Níže uvedený příklad otevře propojený dokument v novém okně nebo kartě prohlížeče:
Odkazy HTML - Atribut názvu
Atribut name se používá k vytvoření záložky ("kotva" / "kotva") v dokumentu HTML.
Komentář:
V dohledné budoucnosti standard HTML5 navrhuje používat k určení názvu odkazu místo atributu name atribut id.
Použití atributu id skutečně funguje v HTML4 ve všech moderních prohlížečích.
Záložky se nezobrazují žádným zvláštním způsobem. Nejsou pro čtenáře viditelné.
Komentář: K odkazům na podadresáře vždy přidejte koncové lomítko. Pokud vytvoříte odkaz jako tento: href="http://site/html", vygenerují se dva požadavky na server, nejprve server přidá lomítko k adrese a poté vytvoří nový požadavek: href="http ://site/html/" .
Rada: Pojmenované odkazy se často používají k vytvoření „obsahu“ na začátku velkého dokumentu. Každé kapitole v dokumentu je přiřazen pojmenovaný odkaz a odkazy na každou z těchto pojmenovaných kotev jsou vloženy na začátek dokumentu.
Rada: Pokud prohlížeč nenajde zadaný pojmenovaný odkaz, přejde na začátek dokumentu. Nedochází k žádným chybám.
Zvažte použití hypertextových odkazů pomocí příkladu č. 1.
Zobrazit specifikaci HTML 5 můžete zde.
Stránka se otevře v novém okně.
A tabulky prvků a atributů si můžete stáhnout zde.
Příklad #1. Použití hypertextových odkazů
Použití hypertextových odkazů k vytvoření ukotvení na stránce
Prvek "a" lze také použít jako hypertextový odkaz pro navigaci na stránce. Chcete-li to provést, na správném místě v dokumentu musíte vytvořit Kotva(z angličtiny. Kotva), tj. záložku a určete ji jako cíl v hypertextovém odkazu. Kotva je vytvořena pomocí prázdného prvku "a", v jehož úvodní značce je uveden atribut. Požadovaný značkovací prvek můžete také použít jako kotvu, na kterou v budoucnu povede interní hypertextový odkaz. Chcete-li to provést, stačí v něm zadat atribut. Dále atribut href samotného hypertextového odkazu určuje znak libry „#“ a hodnotu atributu kotvy jako svou hodnotu. Aby to bylo jasnější, podívejme se na příklad č. 2.
Já jsem první odstavec.
Zobrazit tabulku atributů HTML 5 umět
na oficiálních stránkách zde.
Stránka se otevře v novém okně a bude
přejděte do tabulky atributů.
Zde můžete přejít na první odstavec.
Příklad č. 2. Použití interních hypertextových odkazů
Všimněte si přítomnosti kotvy v absolutní adrese zadané jako hodnota atributu href ve druhém odstavci příkladu. Při použití takového hypertextového odkazu prohlížeč nejprve přejde na zadanou adresu a poté posouvá stránku do umístění zadané kotvy. Pokud na stránce není kotva, stránka se zobrazí od úplného začátku.
Relativní hypertextové odkazy a vytváření relativního adresování
Na závěr této části zvažte konstrukční princip relativní adresy. Nechť je náš hypertextový odkaz v dokumentu umístěném na lokálním serveru na adrese http://localhost/site/ doc_1/ doc_2/ ... /doc_n/web_page.html, kde doc_n je složka n-té úrovně vnoření. V tomto případě je složka doc_n, ve které je umístěn náš hyperlinkovaný dokument, automaticky brána jako základ, na kterém je postaveno veškeré adresování. Tak:
- Pokud chcete, aby odkaz odkazoval na cílový dokument new_page.html umístěný ve stejné složce doc_n jako náš zdrojový dokument s hypertextovým odkazem, pak stačí nastavit atribut href odkazu na název cílového dokumentu: href="nova_stranka.html "
- Chcete-li přejít na cílový dokument new_page.html umístěný ve složce http://localhost/site/ doc_1/ doc_2/ ... /doc_n/ doc_n_1/ ... doc_n_k/, hodnota atributu href odkazu by měla zahrnovat pouze složky vnořené v doc_n a samozřejmě název cílového dokumentu: href="doc_n_1/ ... doc_n_k/nova_stranka.html". Prohlížeči tedy řekneme, že má přejít do složky doc_n_1, která se nachází ve složce doc_n se zdrojovým dokumentem, ve kterém je hypertextový odkaz zapsán, poté do složky doc_n_2 atd., dokud se nedostane do složky doc_n_k s příponou se zde nachází cílový dokument, který musí a musí otevřít.
- Pro přechod do složky o úroveň výše, než byla původní, se používá speciální kombinace znaků "../". Chcete-li přejít o n úrovní, musíte kombinaci "../" napsat nkrát za sebou. V našem případě tedy následovat odkaz na cílový dokument http://localhost/site/ doc_1/ doc_2/ ... /doc_n-3/ new_page.html atribut href odkazu musí být „../../../new_page.html“ . To řekne prohlížeči, aby šel nahoru do složky doc_n-1, pak doc_n-2 a doc_n-3 a tam otevřel cílový dokument new_page.html.
- Pokud je nutné nejen přejít o několik úrovní výše, ale také tam přejít do složky (nebo několika podsložek), abyste získali přístup k cílovému dokumentu, pak v hodnotě atributu href odkazu musíte nejprve zadat požadovaný počet úrovní pro přechod nahoru pomocí symbolů ". ./" a poté přidejte cestu z výsledné složky k cílovému dokumentu. Pokud je například cílový dokument umístěn ve složce new_doc a adresa k němu vypadá takto http://localhost/site/ doc_1/ doc_2/ ... /doc_n-3/new_doc/ new_page.html, pak atribut href odkazu musí mít hodnotu "../../../new_doc/new_page.html". Tito. řekneme prohlížeči, aby přešel o tři úrovně nahoru ze zdrojové složky doc_n , která obsahuje dokument s hypertextovým odkazem, a poté přešel do složky new_doc a otevřel cílový dokument nová_stránka.html
Jako příklad si můžete stáhnout vzdělávací ministránku postavenou výhradně na základě relativního oslovování. Po zhlédnutí experimentujte se změnami a vytvářením nových odkazů, složek a stránek.
Relativní hypertextové odkazy velmi užitečné při vývoji offline aplikací založených na prohlížeči, jako jsou nápověda. Mějte však na paměti, že při přesunu dokumentu z aktuální složky do jiné přestanou fungovat všechny relativní odkazy v něm. Proto budou muset být přepsány. Pokud relativní odkazy ukazují na soubory, které jsou také umístěny v aktuální složce nebo v podsložkách, pak po přesunutí této složky do jiného umístění zůstanou všechny odkazy v dokumentu funkční.
Pokud potřebujete spustit relativní počítání cesty od kořenového adresáře webu, měli byste na začátek cesty napsat lomítko „/“. Například odkaz " Domov" ukazuje na dokument, který se nachází v kořenové složce webu (nikoli aktuální!). Mějte na paměti, že počítání z kořenového adresáře webu funguje pouze pod kontrolou skutečného webového serveru. Na lokálním serveru, jako je např. Xampp, musíte začít počítat od názvu kořenové složky.
