Odkazy možno rozdeliť do dvoch kategórií:
odkazy na externé zdroje- sú vytvorené pomocou tagu a slúžia na rozšírenie možností aktuálneho dokumentu pri spracovaní prehliadačom;
hypertextové odkazy- odkazy na ďalšie zdroje, ktoré môže používateľ navštíviť alebo stiahnuť.
Ako vytvoriť hypertextové odkazy na stránke
1. Štruktúra odkazu
Hypertextové odkazy sa vytvárajú pomocou spárovaný štítok... Vo vnútri značky je text, ktorý sa zobrazí na webovej stránke. Text odkazu sa v prehliadači zobrazuje podčiarknutý, farba písma je modrá, po prejdení kurzorom myši nad odkaz zmení svoj vzhľad.
Povinný parameter značky je atribút href, ktorý určuje adresu URL webovej stránky.
ukazovateľ odkazuOdkaz má dve časti - ukazovateľ a adresná časť. Ukazovateľ odkazu je kus textu alebo obrázok viditeľný pre používateľa. Časť adresy odkaz nie je viditeľný pre používateľa, predstavuje adresu zdroja, na ktorý je potrebné prejsť.
Adresová časť odkazu pozostáva z adresy URL. URL(Uniform Resource Locator) – jednotný vyhľadávač zdrojov. Pri vytváraní adries na oddelenie slov od seba sa odporúča použiť radšej spojovník ako podčiarkovník. Vo všeobecnosti má adresa URL nasledujúci formát:
Spôsob prístupu: // názov servera: port / cesta
Spôsob prístupu alebo protokol, vymieňa údaje medzi pracovnými stanicami v rôznych sieťach. Najbežnejšie protokoly prenosu údajov:
súbor prečíta súbor z lokálneho disku:
Súbor: /gallery/pictures/summer.html
http poskytuje prístup k webovej stránke pomocou protokolu HTTP:
http://site.ru/
https je špeciálna implementácia protokolu HTTP, ktorá používa šifrovanie (zvyčajne SSL alebo TLS)
http://site.ru/
ftp požiada server FTP o súbor:
Ftp: // pgu / adresár / knižnica
mailto spustí e-mailovú reláciu so zadaným príjemcom a hostiteľom:
Mailto: [e-mail chránený]
Názov servera popisuje celý názov počítača v sieti, napríklad site.ru. Ak nie je zadaný názov servera, potom sa odkaz považuje za lokálny, t.j. odkazuje na rovnaký stroj ako dokument HTML obsahujúci odkaz.
Číslo TCP portu kde beží webový server. Je to číslo, ktoré musí byť špecifikované, ak metóda vyžaduje číslo portu ( samostatné servery môžu mať svoje vlastné charakteristické číslo portu). Ak nie je zadaný žiadny port, predvolený je port 80. Štandardné porty sú:
21 - FTP
23 - Telnet
70 - Gopher
80 - HTTP
spôsob obsahuje názov priečinka, v ktorom sa súbor nachádza.
2. Absolútna a relatívna cesta
Ak je v odkaze zadaný iba názov súboru, prehliadač predpokladá, že súbor sa nachádza v rovnakom priečinku ako dokument obsahujúci hypertextový odkaz. V praxi webové stránky obsahujú stovky dokumentov, ktoré sú umiestnené v samostatných priečinkoch, aby sa uľahčila ich správa. Ak chcete vytvoriť prepojenie na súbor mimo priečinka obsahujúceho aktuálny dokument, musíte zadať umiestnenie súboru alebo cestu. HTML podporuje dva druhy ciest: absolútnu a relatívnu.
Ryža. 1. Príklad štruktúry priečinkov 2.1. Absolútna cesta
Absolútna cesta určuje presné umiestnenie súboru v rámci celej štruktúry priečinkov na počítači (serveri). Absolútna cesta k súboru umožňuje prístup k súboru zo zdrojov tretích strán a obsahuje nasledujúce komponenty:
1) protokol, napríklad http (voliteľné);
2) doména ( Doménové meno alebo IP adresa počítača);
3) priečinok (názov priečinka označujúci cestu k súboru);
4) súbor (názov súboru).
Existujú dva typy zápisu absolútnej cesty – s protokolom a bez protokolu:
Http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html
Ak sa súbor nachádza v koreňovom priečinku, cesta k súboru bude nasledovná:
Http://site.ru/index.html
Ak nie je uvedený názov súboru, načíta sa webová stránka, ktorá je štandardne nastavená v nastaveniach web servera (tzv. indexový súbor).
http://site.ru/
Indexový súbor je zvyčajne dokument s názvom index.html. Prítomnosť koncovej lomky / znamená, že adresa ide do priečinka, ak tam nie je - priamo do súboru.
2.2. Relatívna cesta
Relatívna cesta popisuje cestu k zadanému dokumentu relatívne k aktuálnemu. Cesta je určená na základe umiestnenia webovej stránky, na ktorej sa odkaz nachádza. Relatívne odkazy sa používajú na vytváranie odkazov na iné dokumenty na tej istej lokalite. Keď prehliadač nenájde protokol http: // v odkaze, vyhľadá zadaný dokument na rovnakom serveri.
Relatívna cesta obsahuje nasledujúce komponenty:
1) priečinok (názov priečinka označujúci cestu k súboru);
2) súbor (názov súboru).
Relatívna cesta odkazu má tri špeciálne konvencie:
/ ukazuje na koreňový adresár a hovorí, že musíte začať cestu z koreňového adresára dokumentov a prejsť nadol do ďalšieho priečinka
./ označuje aktuálny priečinok
../ prejsť o jeden priečinok nahor (adresár)
Hlavný rozdiel medzi relatívnou cestou a absolútnou cestou je v tom, že relatívna cesta neobsahuje názov koreňového priečinka a nadradených priečinkov, čím je adresa kratšia a ak sa presúvate z jednej domény do druhej, nemusíte zaregistrovať novú absolútnu adresu. Ak však zdroj tretej strany odkazuje napríklad na vaše obrázky s relatívnymi adresami, na inej stránke sa nezobrazia.
3. Kotvy
Kotvy alebo interné odkazy, vytvorte odkazy na rôzne sekcie aktuálnu webovú stránku umožňuje rýchlu navigáciu medzi sekciami. To je veľmi užitočné, keď je na stránke príliš veľa textu. Pomocou značky sa vytvárajú aj interné odkazy s tým rozdielom, že atribút href obsahuje názov ukazovateľa – tzv Kotva, nie adresa URL. Znak # je vždy umiestnený pred názvom ukazovateľa.
Verím, že žiadna HTML stránka nemôže existovať bez aspoň jedného hypertextového odkazu (alebo len odkazu). Odkazy môžu byť buď na iné stránky alebo lokality, alebo na súbory, obrázky atď.
Odkazy môžu byť externé a interné, textové a grafické. vonkajšie odkazy odkazujú na iné stránky alebo objekty, objekty na ne, kým interné, naopak, na rôzne časti vašej stránky. Textový odkaz je text, na ktorý sa kliknutím dostanete na iný objekt alebo ho otvoríte a grafický odkaz je objekt (najčastejšie obrázok), ktorý zároveň slúži na prechod na inú stránku, web alebo napr. obrázok. Odkazy v HTML sa vytvárajú pomocou značky (z anglického kotva – kotva). Ďalej vám poviem viac o odkazoch.
Značka má dôležitý a hlavný atribút href. Jeho hodnota je cesta k objektu alebo stránke, na ktorú odkazuje náš odkaz vo forme adresy URL. Ako kotva (telo odkazu) môže fungovať text (textový odkaz) aj obrázok (grafický odkaz). Ak potrebujete vytvoriť grafický odkaz, musíte použiť značku IMG medzi značkami ako kotvu. Tu je jednoduchý príklad HTML kódu pre odkaz:
text odkazu (kotva)
Dovoľte mi uviesť ďalší príklad, aby ste sa lepšie učili. Ako základ vezmem moju stránku:
Na html stránke v prehliadači to bude vyzerať takto:
Farba textu odkazu je nastavená atribútmi v tagu BODY. Zjednodušene povedané, pre odkazy platia rovnaké atribúty pre úpravu ako pre text na stránke. Dá sa to zvýrazniť tučným písmom a kurzívou a použiť nadpisy atď.
Na html stránke sa zobrazí nasledovné:
Poďme k výsledku bez rámčeka:
Hlavná stránka 1seo
Ako ste si všimli, prechod na inú stránku sa vykonáva v tom istom okne. Ak chcete, aby sa odkaz otvoril v inom okne alebo rodičovi (v predvolenom nastavení je v tom istom okne), môžete použiť nasledujúce cieľový atribút značka A:
- _blank - otvorí stránku v novom okne;
- _parent - stiahne odkaz v rodičovskom okne;
- _self je predvolená hodnota. Otvorí odkaz v tom istom okne.
Domovská stránka webu 1seo
K dispozícii je aj atribút title na vytvorenie popisku pre odkaz:
Domovská stránka webu 1seo
Mimochodom, ak zadáte svoju poštovú schránku do adresy URL a zadáte protokol mailto:, potom sa po kliknutí na váš odkaz otvorí poštový program, kde už bude v poli Komu zadaná vaša adresa poštová schránka... Napríklad kód HTML bude vyzerať takto:
Napíšte mi správu
Snažil som sa napísať základné veci, ktoré potrebujete na vytvorenie odkazu v HTML. Mimochodom, ak ste čítali predchádzajúce články HTML Tutoriálu, tak môžem s istotou povedať, že už viete minimum na vytvorenie svojej prvej plnohodnotnej html stránky. Po vytvorení stránky ju môžete umiestniť na bezplatný hosting a vidieť plody svojej práce. Verte mi, že keď to urobíte, budete mať ešte väčší výbuch tvorivej energie. Ďalej vám ukážem, ako vytvoriť tabuľku v HTML. Toto je tiež veľmi dôležitá informácia, skúste ho úplne vstrebať a stráviť.
Dátum zverejnenia: 15.5.2012Hypertextové odkazy sú vynájdené na vzájomné prepojenie dokumentov v sieti, a ak vaša stránka nepozostáva z jednej stránky, ale z niekoľkých, môžete ich prepojiť iba vytvorením hypertextových odkazov. Pozrime sa priamo na príklad, ako to vyzerá.
Vytvorenie jednoduchého hypertextového odkazu
Prejdite na inú stránku
Všetko je tu jednoduché, na vytvorenie hypertextového odkazu používame značku kde href = ”” je adresa stránky, na ktorú sa vykoná prechod, v našom prípade sa táto stránka nachádza v rovnakom adresári. Môžete sem vložiť aj adresu href = "http://site.ru/page.html" alebo to môže byť odkaz na archív umiestnený v inom priečinku na vašej lokalite href = "arj / arhiv.zip" alebo na akýkoľvek iný dokument, na čom v skutočnosti nezáleží. Povinným atribútom každého hypertextového odkazu je tiež nadpis, ide o popis odkazu, je to veľmi dôležitý prvok pri optimalizácii pre vyhľadávače a sem píšete kľúčové slová stránky alebo dokumentu, na ktorý odkazujete. Text medzi značkou sa nazýva kotva a je tiež veľmi dôležitý.
Otvorenie odkazu na novej stránke
Existuje ďalší zaujímavý atribút, ktorý by sa vám mohol hodiť:
Prejdite na inú stránku
Cieľový atribút s hodnotou _blank otvára odkaz v novom okne, často sa používa, ak nechcete, aby niekto prišiel o vašu stránku a zároveň získal potrebné informácie práve v novej záložke alebo okne.
Odkazy na obrázky
Výsledok v prehliadači:
V podstate je tu všetko jednoduché, medzi otvorenie a zatvorenie hypertextového odkazu som dal značku obrázka , ale zase som nevložil len dva obrázky, triedu img som priradil k jednému, v ktorom som vynuloval okraj okolo obrázku, keďže keď sa z neho stane hypertextový odkaz, zobrazí sa, ale nie vo všetkých prehliadačoch, napríklad IE, uvidíte , ale nie v prehliadači Google Chrome.
Podčiarknutie v odkazoch
Prejdite na inú stránku
Prejdite na inú stránku
Pre prehľadnosť som dal dve možnosti riešenia tohto problému, priradil som ho k selektoru triedy a napísaním tejto triedy odstránite zbytočné podčiarknutie na konkrétnych miestach. Druhým riešením problému je odstránenie podčiarknutia zo všetkých odkazov v značke<а>, čo je samozrejme len zriedka potrebné, ale znalosti nie sú zbytočné.
Odkazy v dokumente
Nie je nezvyčajné, keď je dokument dostatočne dlhý a na začiatku stránky spravia malé menu s odkazmi na podsekcie tejto stránky. Tieto odkazy sa v dokumente nazývajú odkazy a implementácia je celkom jednoduchá. Na začiatok sú v dokumente umiestnené kotvy, sú to štítky, umiestňujú sa v dokumente, kam sa bude potrebné presunúť pri kliknutí na interný odkaz, spravidla ide o nadpisy sekcií, štítok vyzerá takto:
A posledná vec, ktorú potrebujeme vedieť o hypertextových odkazoch, sú odkazy na e-mailové schránky, implementácia je veľmi jednoduchá, stačí do atribútu href pridať záznam vo forme mailto: a adresu schránky:
Moja pošta< /a>
Tu končím lekciu "Vytváranie hypertextových odkazov v html", ako ste si mohli všimnúť, tu sme sa nezaobišli bez CSS, vo všeobecnosti je materiál celkom jednoduchý, myslím, že pre vás bude všetko jednoduché a jasné, píšte otázky .
Dátum zverejnenia: 2014-04-23
Ako vytvoriť odkazy v dokumente HTML
(Viac príkladov nájdete v spodnej časti tejto stránky)
HTML hypertextové odkazy (odkazy)
Tag možno použiť dvoma spôsobmi:
- Na prepojenie s iným dokumentom - pomocou atribútu href
- Na záložku v rámci dokumentu - pomocou atribútu name
Odkazy na syntax HTML
Príklad
| Navštívte stránku |
prehliadač to zobrazí takto:
Odkazy HTML – Cieľový atribút
Atribút target (destination) určuje, kde sa má prepojený dokument otvoriť (ten, na ktorý odkaz odkazuje).
Príklad nižšie otvorí prepojený dokument v novom okne alebo karte prehliadača:
Odkazy HTML - Atribút názvu
Atribút name sa používa na vytvorenie záložky ("kotva" / "kotva") v dokumente HTML.
komentár:
Pripravovaný štandard HTML5 navrhuje použiť atribút id namiesto atribútu name na určenie názvu odkazu.
Použitie atribútu id skutočne funguje v HTML4 vo všetkých moderných prehliadačoch.
Záložky sa nezobrazujú žiadnym špeciálnym spôsobom. Čitateľ ich nevidí.
komentár: K odkazom na podadresár vždy pridajte koncovú lomku. Ak vytvoríte takýto odkaz: href = "http: // site / html", potom sa na server vygenerujú dve požiadavky, najprv server pridá lomku k adrese a potom vytvorí novú požiadavku: href = "http : // stránka / html /" ...
Poradenstvo: Pomenované odkazy sa často používajú na vytvorenie „obsahu“ na začiatku veľkého dokumentu. Každej kapitole v dokumente je priradený pomenovaný odkaz a odkazy na každý z týchto pomenovaných kotiev sú vložené na začiatok dokumentu.
Poradenstvo: Ak prehliadač nenájde zadaný pomenovaný odkaz, prejde na začiatok dokumentu. Nevyskytujú sa žiadne chyby.
Uvažujme o použití hypertextových odkazov v príklade č. 1.
Zobraziť špecifikáciu HTML 5 môže byť tu.
Stránka sa otvorí v novom okne.
A tu si môžete stiahnuť tabuľky prvkov a atribútov.
Príklad #1. Používanie hypertextových odkazov
Použitie hypertextových odkazov na vytvorenie ukotvenia na stránke
Prvok „a“ možno použiť aj ako hypertextový odkaz na navigáciu v rámci stránky. Ak to chcete urobiť, na správnom mieste v dokumente musíte vytvoriť Kotva(z angl. Kotva), t.j. záložku a zadajte ju ako cieľ v hypertextovom odkaze. Kotva sa vytvorí pomocou prázdneho prvku „a“ s atribútom špecifikovaným v úvodnom tagu. Požadovaný značkovací prvok možno použiť aj ako kotvu, na ktorú v budúcnosti povedie interný hypertextový odkaz. Ak to chcete urobiť, stačí v ňom zadať atribút. Ďalej v atribúte href samotného hypertextového odkazu sa ako hodnota uvádza symbol libry "#" a hodnota atribútu kotvy. Aby to bolo jasnejšie, pozrime sa na všetko pomocou príkladu č. 2.
Ja som prvý odstavec.
Zobraziť tabuľku atribútov HTML 5 môcť
na oficiálnej stránke tu.
Stránka sa otvorí v novom okne a bude
prejdite na tabuľku s atribútmi.
Tu môžete prejsť na prvý odsek.
Príklad č.2. Používanie interných hypertextových odkazov
Všimnite si prítomnosť kotvy v absolútnej adrese špecifikovanej ako hodnota pre atribút href v druhom odseku príkladu. Pri použití takéhoto hypertextového odkazu prehliadač najskôr prejde na zadanú adresu a potom stránku posunie na miesto určenej kotvy. Ak na stránke nie je žiadna kotva, stránka sa zobrazí od úplného začiatku.
Relatívne hypertextové odkazy a vytváranie relatívneho adresovania
Na konci odseku zvážte princíp konštrukcie relatívne adresy... Nech je náš hypertextový odkaz v dokumente umiestnenom na lokálnom serveri na adrese http: // localhost / site / doc_1 / doc_2 / ... / doc_n / web_page.html, kde doc_n je priečinok n-tej úrovne. V tomto prípade sa za základ automaticky berie priečinok doc_n, v ktorom sa nachádza náš dokument s hypertextovým odkazom, na ktorom je postavené celé adresovanie. Takže:
- Ak chcete, aby odkaz smeroval na cieľový dokument new_page.html nachádzajúci sa v rovnakom priečinku doc_n ako náš pôvodný dokument s hypertextovým odkazom, potom stačí nastaviť názov cieľového dokumentu ako hodnotu atribútu href odkazu: href = "nova_stranka.html".
- Ak chcete prejsť na cieľový dokument new_page.html nachádzajúci sa v priečinku http: // localhost / site / doc_1 / doc_2 / ... / doc_n / doc_n_1 / ... doc_n_k /, hodnota atribútu href odkazu by mala zahŕňať iba priečinky vnorené v doc_n a samozrejme názov cieľového dokumentu: href = "doc_n_1 / ... doc_n_k / new_page.html"... Preto prehliadaču povieme, že má ísť do priečinka doc_n_1, ktorý sa nachádza v priečinku doc_n so zdrojovým dokumentom, v ktorom je hypertextový odkaz zaregistrovaný, potom do priečinka doc_n_2 atď., až kým sa nedostane do priečinka doc_n_k s sa tam nachádza cieľový dokument, ktorý je a musí byť otvorený.
- Aby ste sa dostali do priečinka o úroveň vyššie ako bol pôvodný, používa sa špeciálna kombinácia symbolov "../". Ak chcete prejsť o n úrovní, napíšte kombináciu „../“ n-krát za sebou. Takže v našom prípade postupujte podľa odkazu na cieľový dokument http: // localhost / site / doc_1 / doc_2 / ... / doc_n-3 / new_page.html atribút href odkazu musí byť "../../../new_page.html". Preto informujeme prehliadač, že by mal ísť do priečinka doc_n-1, potom doc_n-2 a doc_n-3 a potom otvoriť cieľový dokument new_page.html, ktorý sa tam nachádza.
- Ak je potrebné nielen vyliezť o niekoľko úrovní vyššie, ale aj prejsť do priečinka (alebo niekoľkých podpriečinkov), aby ste získali prístup k cieľovému dokumentu, potom v hodnote atribútu href odkazu musíte najskôr napíšte požadovaný počet úrovní zdvihnutia pomocou symbolov ". ./" a potom pripojte cestu z výsledného priečinka k cieľovému dokumentu. Napríklad, ak sa cieľový dokument nachádza v priečinku new_doc a cesta k nemu vyzerá takto http: // localhost / site / doc_1 / doc_2 / ... / doc_n-3 / new_doc / new_page.html, potom musí byť atribút href odkazu "../../../new_doc/new_page.html"... Tie. povieme prehliadaču, aby prešiel o tri úrovne vyššie v porovnaní so zdrojovým priečinkom doc_n, ktorý obsahuje dokument s hypertextovým odkazom, a potom prešiel do priečinka new_doc a otvoril cieľový dokument new_page.html
Ako príklad si môžete stiahnuť výukovú ministránku postavenú výlučne na základe relatívneho adresovania. Po prehliadaní experimentujte s úpravou a vytváraním nových odkazov, priečinkov a stránok.
Relatívne hypertextové odkazy veľmi pohodlné pri vývoji offline prehliadačových aplikácií, napríklad referenčných príručiek. Pamätajte však, že keď presuniete dokument z aktuálneho priečinka do iného, všetky relatívne odkazy v ňom prestanú fungovať. Preto budú musieť byť prepísané. Ak relatívne odkazy smerujú na súbory, ktoré sa nachádzajú aj v aktuálnom priečinku alebo v podpriečinkoch, potom po presunutí tohto priečinka na iné miesto zostanú všetky prepojenia v dokumente funkčné.
Ak potrebujete začať počítať relatívnu cestu od koreňového adresára lokality, pridajte na začiatok cesty lomku „/“. Napríklad odkaz " Domov"označuje dokument, ktorý sa nachádza v koreňovom priečinku lokality (a nie v aktuálnom!). Upozorňujeme, že počítanie z koreňového priečinka lokality funguje iba pod kontrolou skutočného webového servera. Na lokálnom serveri napr. napríklad Xampp, musíte začať počítať od názvu koreňového priečinka.
