Hypertextový odkaz může odkazovat na stránky v rámci jednoho webu nebo odkazovat na jakoukoli stránku na internetu. Při vytváření odkazů na stránky jiných lidí byste měli vždy používat absolutní adresu stránky (http://www.site.com/page.html). Pokud vytváříte odkaz na stránku v rámci webu, je vhodnější použít relativní URL (stranka.html, katalog/stranka.html). Při vytváření grafického hypertextového odkazu mějte na paměti, že grafika nemusí být některým uživatelům přístupná, takže nezapomeňte zahrnout vhodné textové prvky.
Příklad:
Hypertextový odkaz na html stránce
Někdy je nutné vytvořit hypertextový odkaz v rámci jedné stránky. Například na této stránce jsou na začátku lekce hypertextové odkazy, které vám umožňují zobrazit konkrétní otázku, a úplně dole na stránce, což vám umožňuje přejít na začátek stránky.
Příklad:
Poštovní hypertextový odkaz
Příklad:
|
HTML kód: |
Displej prohlížeče: |
Otevírání html stránek v novém okně
Pomocí atributu TARGET můžete načíst stránku v novém okně prohlížeče. Tento atribut je určen k určení názvu okna. Název okna se používá pro oficiální účely. Chcete-li otevřít stránku v novém okně, musíte použít konstantu _blank.
Příklad:
Barva textu hypertextového odkazu
Atributy LINK, ALINK, VLINK určují barvu písma hypertextových odkazů.
Atribut LINK se používá ke zvýraznění hypertextových odkazů, které uživatel ještě nenavštívil.
Postup pro následující hypertextové odkazy
Některé prohlížeče mohou podporovat možnost procházení hypertextových odkazů pomocí klávesy Tab. V tomto případě prohlížeč ve výchozím nastavení zvýrazňuje hypertextové odkazy v pořadí, v jakém se objevují v textu stránky. Pořadí přechodu můžete změnit pomocí atributu tagu TABINDEX . Chcete-li zahrnout hypertextový odkaz do seznamu popisujícího nové pořadí navigace, musíte atributu TABINDEX přiřadit nějaké kladné celé číslo v rozsahu od 1 do 32767. Chcete-li hypertextový odkaz ze seznamu vyloučit, musíte atributu přiřadit libovolné záporné číslo. Když uživatel stiskne klávesu TAB, kurzor se přesune na hypertextový odkaz s nejmenší kladnou hodnotou indexu. Pokud je více hypertextovým odkazům přiřazena stejná hodnota indexu, první vybraný je ten, který se objeví výše v textu stránky.
Je třeba říci, že atribut TABINDEX lze použít k výběru dalších objektů, například grafických obrázků.
Podívejme se na použití hypertextových odkazů na příkladu č. 1.
Zobrazit specifikaci HTML 5 můžete tady.
Stránka se otevře v novém okně.
Zde si můžete stáhnout tabulky prvků a atributů.
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, který musíte vytvořit Kotva(z angličtiny Kotva), tj. záložku a určete ji jako cíl hypertextového odkazu. Kotva je vytvořena pomocí prázdného prvku "a", jehož úvodní značka určuje atribut. Požadovaný značkovací prvek můžete také použít jako kotvu, na kterou později povede interní hypertextový odkaz. Chcete-li to provést, stačí v něm zadat atribut. Dále v atributu href samotného hypertextového odkazu je hodnotou symbol hash "#" a hodnota atributu kotvy. Aby to bylo jasnější, uvažujme vše pomocí příkladu č. 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 na tabulku s atributy.
Zde můžete přejít na první odstavec.
Příklad č. 2. Použití interních hypertextových odkazů
Všimněte si 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 na místo zadané kotvy. Pokud na stránce není kotva, stránka se zobrazí od začátku.
Relativní hypertextové odkazy a konstrukce relativního adresování
Na závěr se podívejme na princip konstrukce relativní adresy. Nechť je náš hypertextový odkaz umístěn 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áš dokument s hypertextovým odkazem, automaticky brána jako základ, na kterém je založeno veškeré adresování. Tak:
- Pokud chcete, aby odkaz směřoval na cílový dokument new_page.html, který se nachází ve stejné složce doc_n jako náš zdrojový dokument s hypertextovým odkazem, pak stačí nastavit název cílového dokumentu jako hodnotu atributu href odkaz: 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é pod doc_n a samozřejmě název cílového dokumentu: href="doc_n_1/ ... doc_n_k/ nová_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 nachází cílový dokument, který musí a musí otevřít.
- Chcete-li se dostat do složky na vyšší úrovni, než byla původní, použijte speciální kombinaci znaků "../" . Chcete-li se posunout o n úrovní výše, 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 by měl mít hodnotu "../../../new_page.html" . To prohlížeči sdělí, že by měl přejít do složky doc_n-1, poté doc_n-2 a doc_n-3 a poté otevřít cílový dokument new_page.html, který se tam nachází.
- Pokud je pro získání přístupu k cílovému dokumentu nutné nejen přejít o několik úrovní nahoru, ale také tam přejít do složky (nebo několika podsložek), pak v hodnotě atributu href odkazu nejprve potřebujete k určení požadovaného počtu úrovní, které chcete přejít 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 pak přešel do složky new_doc a otevřel cílový dokument new_page.html
Jako příklad si můžete stáhnout školicí ministránku postavenou výhradně na relativním adresování. Po zobrazení experimentujte se změnami a vytvářením nových odkazů, složek a stránek.
Relativní hypertextové odkazy velmi pohodlné pro vývoj offline aplikací založených na prohlížeči, jako jsou nápověda. Pamatujte však, že když přesunete dokument z aktuální složky do jiné, všechny relativní odkazy v něm přestanou fungovat. 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 začít počítat relativní cestu od kořene 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 místním serveru, například Xampp , počítání by mělo začít od názvu kořenové složky.
Myslím, že již chápete, o čem bude tato kapitola pojednáno... a víte, co je odkaz, pokud ne, klikněte sem. Existuje několik typů odkazů a také „mechanismů“ pro kliknutí na ně. V této kapitole se pokusím podrobně hovořit o tom, jak registrovat odkazy, a také jít do složitosti práce s nimi.
Lyrická odbočka:
Jednou v armádě za mnou přišel náčelník generálního štábu a vydal rozkaz, cituji:
Přineste mi ten dokument, i když nevím, kde je nebo co to je!! proč stojíš? Utíkejme!! Jdu pozdě!!!
Takže, co tím chci říct, aby prohlížeč neupadl do strnulosti, jako jsem tehdy udělal já, potřebuje znát: přesný název dokumentu, cestu k dokumentu a místo, kam jej má přinést, nebo spíše, kde to otevřít.
V tuto chvíli jsme pomocí poznámkového bloku vytvořili pouze jeden HTML dokument, mám ho s názvem index.html (proč jste zvolili tak zvláštní název index.html a proč je to potřeba, viz) Nevím který, název jste si vymyslel sám, ale myslím , Pamatujete si ho a víte, kde je, pokud ovšem nejste můj náčelník štábu :).. V tomto dokumentu se pokusíme vytvořit odkaz na jiný dokument který ještě nemáme.. Takže než na něj nalinkujete, musíte si ho vytvořit , naštěstí už víte, jak na to.
- Otevřete poznámkový blok.
- Kód píšeme v jazyce html. například stránka s množstvím fotografií.
- Uložíme jej jako html stránku do stejné pracovní složky, kde již existuje první dokument, který jsme vytvořili. Aby nedošlo k záměně, říkejme mu primer.html a možná přejmenujme první na index.html
Nyní vím, že máte dva html dokumenty index.html a primer.html a že nyní máte minimální sadu pro další školení.
Textové odkazy.
Pojďme se setkat s tagem (z kotvy), můžete do něj vložit text nebo obrázek, který se stane odkazem na určité dokumenty. Atribut značky href určuje název a cestu k dokumentu, na který odkaz odkazuje.
Vše dohromady je napsáno takto:
Tady jsou moje fotky!!Jak jste pravděpodobně pochopili, primer.html je název našeho druhého html dokumentu a nápis „Tady jsou moje fotky!!“ toto je část textu ze souboru index.html.
Analogicky s obrázky, tag
Cesta odkazu k otevíranému dokumentu se zadává pomocí stejných metod:
Tady jsou moje fotky!!- To znamená, že soubor primer.html je umístěn o jednu úroveň výše než dokument
Tady jsou moje fotky!!- dokument je umístěn na webových stránkách www.site.ru..
No, zkusíme to? Níže je uveden příklad dvou dokumentů obsahujících odkazy směřující na sebe.
Soubor index.html:
Řekni mi, milé dítě: ve kterém uchu to bzučí?
V že jo nebo vlevo, odjet?
Soubor Primer.html:
Z příkladu můžete vidět, že odkazy jsou barevně zvýrazněny, ve výchozím nastavení je modrá odkaz a červená již navštívený odkaz, tyto barvy lze změnit pomocí úvodní značky, která je nám již dobře známá < body > a jeho atributy.
odkaz- barva odkazu.odkaz- barva aktivního odkazu, na který kliknete.
vlink- barva navštíveného odkazu.
Píše se to takto:
>Když budeme pokračovat v povídání o barvě textového odkazu, stojí za zmínku, že v případě potřeby můžete vynutit barevné zvýraznění celého odkazu i jeho jednotlivých částí (fráze, slova, písmena) pomocí známé značky a jeho atribut barva. To se však netýká pouze barvy, můžete také samostatně nastavit velikost, styl a font textu. Pamatujte však, že manipulace s barvami musí být provedena uvnitř značky tady a ne přes palubu, jinak bude barva odkazu buď ve výchozím nastavení, nebo jak je uvedeno ve značce
Soubor index.html:
link="#008000" alink="#ff0000" vlink="#ffff00">
Podívejte se na frázi, která vám pomůže zapamatovat si místa barev v duze
R
A
D
U
G
A
Soubor Primer.html:
link="#008000" alink="#ff0000" vlink="#ffff00">
Každý
lovec
přání
vědět
Kde
sedí
bažant
Vraťte se na hlavní stránku
Jedna z vašich stránek na webu Nezbytně by se mělo volat index.html. Je to soubor s tímto názvem, který program robota vyhledá na vašem webu, když někdo zadá název vašeho webu. Od stránky index.html se otevře jako první, udělejte z něj hlavní. Zbytek stránek můžete nazývat, jak chcete... už žádné nuance se jmény nejsou.
O registru... Při psaní cesty a názvů dokumentů pamatujte, že např.: Stránka.html, stránka.html a PAGE.html jsou názvy různých dokumentů! Totéž platí pro názvy záložek a obrázků. Při psaní kódu vždy zvažte případ, kdy je vysoká pravděpodobnost, že taková jména nebudou rozpoznána jedním nebo druhým prohlížečem. Udělejte si pravidlo, že budete vše psát a nazývat malými latinskými písmeny, pak se riziko lidského faktoru a vrtochů programů sníží na nulu.
Pravidlo tří kliknutí...
Snažte se vytvořit „strom odkazů“ tak, aby se návštěvník webu dostal z jakékoli stránky na jakékoli místo na webu na minimální počet kliknutí. Více než tři přechody na požadované místo na webu už nejsou dobré Nekonečné načítání zbytečných stránek pro člověka může vést k nervovému zhroucení a předčasnému uzavření webu. Ušetřete lidem čas, peníze a nervy.
Odkazy lze rozdělit do dvou kategorií:
odkazy na externí zdroje— jsou vytvořeny pomocí tagu a používají se k rozšíř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í párového tagu. Text, který se zobrazí na webové stránce, je umístěn uvnitř značky. 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.
index odkazůOdkaz se skládá ze dvou částí − ukazatel A adresní část. Index odkazů je kus textu nebo obrázku viditelný pro uživatele. Část adresy Odkaz není viditelný pro uživatele, představuje adresu zdroje, na který potřebujete přejít.
Adresová část odkazu se skládá z adresy URL. URL(Uniform Resource Locator) - jednotná adresa zdroje. Při vytváření adres se doporučuje k oddělení slov používat spíše pomlčku než podtržítko. Obecně platí, že adresa URL má následující formát:
Metoda přístupu://název serveru:port/cesta
Přístupová metoda, neboli protokol, vyměňuje data mezi pracovními stanicemi v různých sítích. Nejběžnější protokoly přenosu dat:
soubor poskytuje čtení souboru 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 přijetí 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, pak je odkaz považován za lokální, tj. je na stejném počítači jako dokument HTML obsahující odkaz.
Číslo TCP portu, na kterém webový server funguje. Toto je číslo, které je nutné zadat, pokud metoda vyžaduje číslo portu (jednotlivé servery mohou mít své vlastní rozlišující číslo portu). Pokud není zadán žádný port, výchozí je port 80. Standardní porty jsou:
21 - FTP
23 - Telnet
70 - Gopher
80 - HTTP
Cesta obsahuje název složky, ve které je soubor umístěn.
2. Absolutní a relativní cesta
Pokud odkaz uvádí 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í souboru nebo cestu. HTML podporuje dva typy cest: absolutní a relativní.
Rýže. 1. Příklad struktury složek 2.1. Absolutní cesta
Absolutní cesta označ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 (název domény 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ápisu absolutní cesty – s a bez označení protokolu:
Http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html
Pokud je soubor 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 přístup jde do složky, pokud tam není, jde 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á, že začít v kořenovém adresáři dokumentu a postupovat 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, což zkracuje adresu, a pokud se přesouváte z jedné domény do druhé, nemusíte zadejte 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, neboli interní odkazy, vytvářejí přechody do různých sekcí aktuální webové stránky, což vám umožňuje rychle se mezi sekcemi pohybovat. To se ukazuje jako velmi výhodné, 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 je vždy znak #.
Věřím, že žádná HTML stránka nemůže existovat bez alespoň jednoho hypertextového odkazu (nebo pouze odkazu). Odkazy mohou být na jiné stránky nebo weby, stejně jako na soubory, obrázky atd.
Odkazy mohou být externí a interní, textové i grafické. Externí odkazy odkazují na jiné stránky nebo objekty na nich, zatímco interní odkazy 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, zatímco grafický odkaz je objekt (obvykle obrázek), který zároveň slouží k přechodu na jinou stránku, web nebo například obrázek. 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 buď text (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 kódu pro odkaz:
text odkazu (kotva)
Dám vám další příklad, abyste to lépe pochopili. Jako základ použiji svůj web:
Na html stránce v prohlížeči to bude vypadat takto:
Barva textu odkazu je nastavena pomocí atributů v tagu BODY. Jednoduše řečeno, odkazy podléhají stejným atributům úprav jako text na stránce. To zahrnuje tučné písmo a kurzívu, používání nadpisů atd.
Na html stránce se objeví následující:
Dostaneme výsledek bez rámečku:
Úvodní 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čky A:
- _blank — otevře stránku v novém okně;
- _parent - načte odkaz v nadřazeném okně;
- _self – výchozí. Otevře odkaz ve stejném okně.
Domovská stránka webu 1seo
K dispozici je také atribut title pro vytvoření popisku pro odkaz:
Domovská stránka webu 1seo
Mimochodem, pokud v URL zadáte svou poštovní schránku a zadáte protokol mailto:, pak se po kliknutí na váš odkaz otevře poštovní program, kde již bude v poli Komu zadána adresa vaší poštovní schránky. V příkladu by HTML kód vypadal takto:
Napište mi zprávu
Snažil jsem se napsat hlavní 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 nahrát 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 tvůrčí energie. Dále vám řeknu, jak vytvořit tabulku v HTML. To je také velmi důležitá informace, snažte se ji zcela vstřebat a strávit.
Datum zveřejnění: 15. května 2012