Myslím, že už chápete, o čom sa bude diskutovať v tejto kapitole.. a viete, čo je to odkaz, ak nie, tak kliknite sem .. Existuje niekoľko typov odkazov, ako aj „mechanizmov“ na ich sledovanie. V tejto kapitole sa vám pokúsim podrobne povedať, ako registrovať odkazy, ako aj venovať zložitosti práce s nimi.
Lyrická odbočka:
Raz v armáde za mnou prišiel náčelník generálneho štábu a vydal rozkaz, citujem:
Prineste mi ten dokument, hoci neviem, kde a čo to je!! Čo stojíš? Poďme bežať!! Meškám!!!
Prečo teda prehliadač, podobne ako ja, neupadne do stuporov, potrebuje vedieť: presný názov dokumentu, cestu k dokumentu a miesto, kam ho priniesť, alebo skôr kam aby ste ho otvorili.
Na tento moment pomocou poznámkového bloku sme vytvorili iba jeden HTML dokument, ja ho mám s názvom index.html (prečo som zvolil taký divný názov index.html a prečo sa potrebujem pozrieť) neviem čím, ty sám vymyslel názov, ale myslím, že si pamätáte a viete, kde leží, ak samozrejme nie ste môj náčelník štábu :).V tomto dokumente sa pokúsime vytvoriť odkaz na iný dokument, ktorý ešte nemáme.. Takže predtým, ako sa na to odvoláte, musíte si to vytvoriť, ďakujem, že to už poznáte.
- Otvorte poznámkový blok.
- Kód píšeme v html. Napríklad stránka s množstvom fotografií.
- Uložíme to ako html stránku v tom istom pracovný priečinok, kde je už prvý dokument, ktorý sme vytvorili. Aby sme neboli zmätení, nazvime to primer.html a možno aj premenujeme prvý na index.html
Teraz viem, že máš dvoch html dokument a index.html a primer.html a teraz máte minimálnu sadu na ďalšie učenie.
Textové odkazy.
Tag zoznámiť sa (od kotvy - kotva), môžete do nej vložiť text alebo obrázok, ktorý sa stane odkazom na určité dokumenty. Atribút značky href určuje názov a cestu k dokumentu, na ktorý odkazuje odkaz.
Všetko spolu je napísané takto:
Tu sú moje obrázky!!Ako ste pravdepodobne pochopili primer.html je názov nášho druhého html dokumentu a nápis "Tu sú moje fotky!!" toto je časť textu zo súboru index.html.
Analogicky so značkou obrázkov
cesta odkazu na otváraný dokument sa zapisuje rovnakým spôsobom:
Tu sú moje obrázky!!- A to znamená, že súbor primer.html je umiestnený o úroveň vyššie od dokumentu
Tu sú moje obrázky!!- dokument sa nachádza na webovej stránke www.site.ru..
No, skúsime? Nižšie je uvedený príklad dvoch dokumentov naraz, v ktorých sú zaregistrované odkazy smerujúce na seba.
súbor index.html:
Povedz mi, milé dieťa: v ktorom uchu mi bzučí?
AT zákona alebo vľavo?
súbor primer.html:
Príklad ukazuje, že odkazy sú farebne zvýraznené, štandardne modrá je odkaz a červená je už navštívený odkaz, tieto farby je možné zmeniť pomocou úvodnej značky, ktorá je nám už dobre známa < body > a jeho atribúty.
odkaz- farba odkazu.odkaz- farba aktívneho odkazu, na ktorý sa klikne.
vlink- farba navštíveného odkazu.
Píše sa to takto:
>Ak budeme pokračovať v rozprávaní o farbe textového odkazu, stojí za zmienku, že v prípade potreby môžete pomocou známej značky vynútiť farebné zvýraznenie celého odkazu aj jeho jednotlivých častí (frázy, slová, písmená). a jeho atribút farba. To však neplatí len pre farbu, ale aj samostatne si môžete nastaviť veľkosť, štýl a font textu. Pamätajte však, že manipulácia s farbami musí byť vykonaná vo vnútri štítku tu a nie cez palubu, inak bude farba odkazu buď predvolená, alebo ako je napísané v značke
súbor index.html:
link="#008000" alink="#ff0000" vlink="#ffff00">
Hľadajte frázu, ktorá vám pomôže zapamätať si miesta farieb v dúhe.
R
ALE
D
O
G
ALE
súbor primer.html:
link="#008000" alink="#ff0000" vlink="#ffff00">
Každý
lovec
želania
vedieť
kde
sedí
bažant
Vráťte sa na hlavnú stránku
Jedna z vašich stránok na webe nevyhnutne treba zavolať index.html Je to súbor s týmto názvom na vašej stránke, ktorý program robota vyhľadá, keď osoba zadá názov vašej stránky. Od stránky index.html sa otvorí ako prvý, urobte z neho hlavný. Ostatné stránky si môžete nazvať ako chcete... už neexistujú žiadne nuansy s menami.
O prípade .. Pri písaní cesty a názvov dokumentov pamätajte na to, že napríklad: Strana.html, strana.html a PAGE.html sú názvy rôzne dokumenty! To isté platí pre názvy záložiek a kresby. Pri písaní kódu vždy rozlišujte malé a veľké písmená, existuje vysoká pravdepodobnosť, že takéto názvy konkrétny prehliadač nerozpozná. Urobte si pravidlom písať všetko a volať mená malými latinskými písmenami, potom sa riziko ľudského faktora a vrtochov programov zníži na nulu.
Pravidlo troch kliknutí.
Pokúste sa vytvoriť „strom odkazov“ tak, aby sa návštevník stránky dostal z ktorejkoľvek jej stránky na akékoľvek miesto na stránke za minimálny počet kliknutí na odkazy. Viac ako tri prechody do správne miesto toto už na stránke nie je dobré.. Nekonečné načítavanie stránok, ktoré človek nepotrebuje, môže viesť k nervovému zrúteniu a predčasnému zatvoreniu stránky. Ušetrite ľuďom čas, peniaze a nervy.
Hlavnou črtou dokumentu HTML je, že obsahuje hypertextové odkazy(alebo jednoducho odkazy) na iné dokumenty, stránky, súbory, obrázky atď. Bola to schopnosť vkladať odkazy do stránok na objekty mimo nej, vďaka čomu bol internet taký populárny a pohodlný na používanie. Preto pri tvorbe vašej stránky vždy pamätajte na „čaro“ odkazov.
V tejto lekcii budeme hovoriť o ako vytvoriť odkaz na stránku, na jej samostatnú stránku alebo súbor. Dozviete sa, ako zmeniť text odkazu, ako ho otvoriť v novom okne, ako z odkazu urobiť obrázok, čo sú externé a interné odkazy a mnoho ďalšieho. Navyše už máte informácie o práci s odkazmi, ktorých sme sa dotkli v predchádzajúcich lekciách (hovorili sme napríklad o tom, ako môžete zmeniť farbu odkazu v ).
Vo všeobecnosti táto lekcia urobí vašu predstavu o budovaní odkazov úplnou a dostatočnou. Pochopíte, ako vytvoriť hypertextový odkaz v HTML a prečo. A naučte sa spravovať jeho vlastnosti.
Podmienky
§ 1. Odkaz na súbor, odkaz na stránku, odkaz na stránku
Množstvo otázok o rozdiele medzi odkazom na súbor a odkazom na stránku alebo jej individuálnu stránku ma prinútilo dať odpoveď na úplnom začiatku tejto lekcie. Odpoveď znie: nič. Všetky uvedené odkazy sú externé originálny stránku a sú vytvorené rovnakým spôsobom.
Aby sa myšlienka nešírila po strome, ukážem všetko na príklade.
V prehliadači uvidíme toto:
V prehliadači uvidíme toto:
Ako vidíte, všetky typy odkazov sú vytvorené úplne rovnakým spôsobom. Jediný rozdiel je adresu objekt, na ktorý sa má odkazovať. Teraz prejdime k hlavnej časti lekcie.
§ 2. Vytváranie externých odkazov
Odkazy sa navzájom líšia externé a domáci, ako aj na text a grafický. Externé odkazy vedú mimo "limity" html stránky, interné odkazy na rôzne časti rovnaký stránky. Textové odkazy sú textové (v predvolenom nastavení sú zvýraznené modrou a podčiarknuté) a grafické odkazy ako objekt, na ktorý musíte kliknúť, aby ste prešli, obsahujú nejaký druh obrázka. Všetky tieto typy odkazov sú vytvorené v HTML pomocou tagu (skratka z anglického anchor – anchor). Pozrime sa na to podrobnejšie.
Na vytvorenie externého odkazu na stránku, stránku alebo súbor sa používa atribút tag - href. Tento atribút berie ako svoju hodnotu URL stránka, stránka alebo súbor (o tom sme hovorili vyššie). Medzi značkami a je viditeľná časť odkazu (kotva odkazu), teda to, čo vidíme na obrazovke prehliadača. Kotva odkazu môže byť buď obyčajný text (textový odkaz) alebo grafický obrázok (odkaz na obrázok). Odkaz na obrázok sa vytvorí vložením známej značky medzi značky a . Vo všeobecnosti syntax na vytvorenie odkazu vyzerá takto:
Napríklad na vytvorenie textového odkazu domovskej stránke na tejto stránke, musíte napísať nasledujúci HTML kód:
http://www.seoded.ru/"> Domovská stránka webu
V prehliadači to bude vyzerať takto:
Ako som písal na samom začiatku tohto návodu, farbu textu odkazu (kotvy) je možné zmeniť pomocou . Vo všeobecnosti platí, že na text odkazov môžete použiť to isté ako na hlavný text stránky, t. j. tučné písmo, kurzíva, použitie nadpisov atď.
§ 2.1 Grafické odkazy (odkazy na obrázky)
Ako som povedal vyššie, na vytvorenie odkazu na obrázok musíte použiť . Príklad takéhoto odkazu vyzerá takto:
A prehliadač zobrazí:
V predvolenom nastavení prehliadač obklopuje obrázok v odkaze na obrázok rámom. Ak to nie je žiaduce, potom atribút hranica tag img mala by byť nastavená na 0:
border="0">
Hlavná stránka
§ 3. Interné odkazy
Pre pohodlnú navigáciu po stránkach s množstvom obsahu slúžia interné odkazy. S ich pomocou som vytvoril obsah lekcie (pozri na začiatku tejto stránky). Interné odkazy sa vytvárajú rovnakým spôsobom ako externé odkazy. Iba v hodnote atribútu href je označená "kotva" odkazu. Kotva je vytvorená atribútom názov:
name="názov kotvy">text
A meno "kotvy" je nastavené ľubovoľne. Tu stojí za to povedať, že nie všetky prehliadače rozumejú ruským názvom „kotvy“, preto odporúčam používať latinskú abecedu. Text medzi značkami na vytvorenie „kotvy“ je voliteľný a najčastejšie nie je špecifikovaný.
„Som osýpky“ sa nachádza na tých miestach stránky, na ktoré by mal používateľ prejsť po kliknutí na odkaz.
Ako som uviedol vyššie, v atribúte href interný odkaz namiesto adresy, názov požadovanej „kotvy“ je označený povinným symbolom hash ( # ) pred ním. Vezmime si príklad.
Vytvoril som "kotvu" s názvom hlavička a umiestnili ho do kódu stránky vedľa názvu tejto lekcie („Hypertextové odkazy v HTML“). Kód "kotvy" je nasledujúci:
name="title">
href="#zagolovok">Prejsť na názov
A v prehliadači takto:
Ak si všimnete, že po kliknutí na interný odkaz na nadpis sa adresa URL zmenila adresný riadok prehliadač:
Na pôvodnú adresu:
http://www.html
http://www..html#header
A pomocou tejto funkcie môžete odkazovať na konkrétne miesto na stránke z akéhokoľvek zdroja na internete! Povedzme, že ste vytvorili stránku s objemným článkom o niečom (alebo ste ho uverejnili na stránke veľké číslo fotografie) a označili ho internými odkazmi. Keďže ste v , museli ste odkazovať nielen na stránku s článkom (alebo fotografiami), ale aj na určité miesto na nej (alebo určitú fotografiu). Pomocou možnosti s interným odkazom v adrese ľahko dosiahnete, čo potrebujete.
§ 4. Absolútne a relatívne odkazy
Hlavná stránka
Ale s relatívnymi odkazmi je to trochu komplikovanejšie. V takýchto odkazoch je uvedená aj adresa pomerne koreňový priečinok lokality (ten, v ktorom sa nachádza hlavná stránka), alebo relatívne k pôvodnej stránke. Takéto odkazy sú potrebné napríklad vtedy, ak sa stránka nachádza na domáci počítač. Alebo to nie je webová stránka, ale ukazovateľ stránky na iné dokumenty.
Povedzme, že potrebujeme vytvoriť odkaz na stránku client.html, ktorá leží v jednom priečinku s hlavnou stránkou webu. Potom bude relatívny kód odkazu vyzerať takto:
/clienty.html">Klienti
Teraz predpokladajme, že je v rovnakom priečinku ako hlavná stránka poradie priečinkov a už v ňom leží stránka klienty.html. Potom bude relatívny kód odkazu vyzerať takto:
/zakazy/clienty.html">Klienti
Teraz sa pozrime na vytváranie hypertextových odkazov vzhľadom na pôvodnú stránku. Povedzme, že máme stránku cena.html(zdrojová stránka) a z nej treba odkazovať na stránku client.html Tu sú nasledujúce typické možnosti:
1. Stránky price.html a clienty.html sú v jednom priečinku.
clientty.html">Klienti
2. v koreňovom priečinku lokality, stránka cena.html je v priečinku objednávky o úroveň vyššie).
Kód bude vyzerať takto:
../clienty.html">Klienti
Dve bodky označujú, že musíte opustiť aktuálny priečinok na vyššiu úroveň.
3. Stránka klienty.html a priečinok zakazy sú v koreňovom priečinku lokality, priečinok na nábytok je v priečinku objednávky, stránka cena.html je v priečinku mebel(t. j. stránka klienty.html vzhľadom na pôvodnú stránku price.html leží o dve úrovne vyššie).
../../clienty.html">Klienti
To znamená, že každá úroveň je označená dvoma bodkami a lomkou " / ».
4. v koreňovom priečinku lokality, stránka clienty.html je v priečinku objednávky(t. j. teraz je stránka klienty.html relatívna k pôvodnej stránke price.html o úroveň nižšie).
zakazy/clienty.html">Klienti
V tomto prípade sa bodky a lomky nedávajú.
5. Stránka price.html (pôvodná stránka) a priečinok zakazy sú v koreňovom priečinku lokality, priečinok na nábytok je v priečinku objednávky, stránka clienty.html je v priečinku mebel(t. j. teraz je stránka klienty.html relatívna k pôvodnej stránke price.html leží o dve úrovne nižšie).
zakazy/furniture/clienty.html">Klienti
6. V koreňovom priečinku lokality sú tam dva priečinky: zakazy a oplata. stránku clienty.html je v priečinku objednávky, pôvodná stránka price.html leží v priečinku oplata(t.j. obe strany klamú v rôzne priečinky o úroveň nižšie z koreňového priečinka lokality).
../zakazy/clienty.html">Klienti
§ 5. Odkaz na e-mail
Komu vytvoriť e-mailový odkaz, potrebujete namiesto adresy URL v hodnote atribútu href napíšte e-mailovú adresu s protokolom ( mailto:). A potom, keď kliknete na takýto odkaz, otvorí sa okno poštový program s e-mailovou adresou zadanou do poľa „Komu“. V HTML kóde to vyzerá takto:
mailto: [e-mail chránený]">Moja pošta
A tak je to aj v prehliadači.
Dobrý deň, milí čitatelia blogu. Dnes budeme hovoriť o ako vytvoriť hypertextové odkazy v html, naučte sa používať značku „A“ a jej atribúty href a target, naučte sa, ako urobiť z obrázka odkaz.
Hypertextové odkazy sú kľúčovými prvkami webovej stránky. Spájajú rôzne html stránky do kompletnej webovej stránky. Odkazy sa zvyčajne zobrazujú ako podčiarknutý text, keď naň prejdete, kurzor myši sa zmení na ukazovací prst.
Okrem toho môže hypertextový odkaz vyzerať grafický obrázok alebo jej fragment. Po kliknutí na odkaz prehliadač načíta webovú stránku špecifikovanú v atribútoch odkazu. Hypertextové odkazy vám umožňujú odkazovať na interné stránky vašej lokality, ako aj na akékoľvek iné zdroje na internete.
Vytvorte textové hypertextové odkazy
Začnime jednoducho a pozrime sa na vytváranie pravidelných text odkazy. Na vytvorenie textového hypertextového odkazu stačí priložiť akýkoľvek text, ktorý sa má stať odkazom párová značka A. A v atribút href Pre túto značku musíte zadať adresu cieľovej webovej stránky na internete:
Tento kúsok html kódu vytvorí odsek, ktorý obsahuje odkaz. Odkaz ukazuje na webovú stránku page15.html, ktorá sa nachádza v priečinku katalógu uloženom v koreňovom priečinku lokality www.site.ru.
Ak stránka nepoužíva css štýly a nepoužijú sa žiadne ďalšie atribúty, potom sa hypertextové odkazy na stránke štandardne zobrazujú takto:
- pravidelné odkazy sú zobrazené modrou farbou;
- navštívené odkazy sú zvýraznené fialovou farbou;
- aktívny hypertextový odkaz (na ktorý sa práve klikne) je zobrazený červenou farbou, ale keďže čas medzi kliknutím na odkaz a spustením načítania nového dokumentu je dosť krátky, je tento stav odkazu veľmi krátkodobý;
- Text odkazu je podčiarknutý.
Internetové adresy
Kompletná adresa obsahuje internetovú adresu webového servera a cestu k súboru, ktorý sa má načítať. Napríklad:
Tu je www.site.ru adresa webového servera a /catalog/page15.html je cesta k súboru na tomto serveri. Vo všeobecnosti sa úplné internetové adresy zvyčajne používajú iba vtedy, ak je potrebné vytvoriť hypertextový odkaz smerujúci na niektoré zdroje umiestnené na inej webovej lokalite.
Pri vytváraní hypertextových odkazov smerujúcich na súbory, ktoré sú súčasťou tej istej lokality ako aktuálna webová stránka, je najlepšie použiť skrátené internetové adresy. Skrátená adresa obsahuje iba cestu k súboru na serveri, pretože Prehliadač už pozná adresu webového servera.
Skrátené internetové adresy sú absolútne a príbuzný. Absolútna adresa určuje cestu k cieľovému súboru relatívne ku koreňovému priečinku lokality. Takáto adresa začína znakom / (lomka), ktorý označuje koreňový priečinok. Napríklad adresa „/stranka15.html“ ukazuje na súbor page15.html, ktorý je uložený v koreňovom priečinku lokality. Alebo adresa "/catalog/page.html" ukazuje na súbor page.html, ktorý je umiestnený v priečinku katalógu, vnorený v koreňovom priečinku lokality.
Relatívna adresa je cesta k súboru vzhľadom k súboru aktuálnej webovej stránky. Relatívne adresy neobsahujú úvodnú lomku. Pozrime sa na niekoľko príkladov.
Napríklad adresa „page.html“ ukazuje na súbor, ktorý sa nachádza v rovnakom priečinku ako súbor aktuálnej webovej stránky. A adresa "catalog/page.html" otvorí súbor page.html uložený v priečinku katalógu, vnorený do priečinka, kde je uložená aktuálna stránka.
Pomocou dvoch bodiek na začiatku adresy môžete určiť priečinky predchádzajúcej úrovne vnorenia. Takže napríklad adresa „.../stranka.html“ ukazuje na stránku.html uloženú v priečinku, v ktorom je vnorený priečinok s aktuálnou webovou stránkou.
Odkaz na mail
Používaním html jazyk môžete vytvoriť poštové hypertextové odkazy, kliknutím na ktorý spustíte program poštového klienta. Pri zadávaní adresy v atribúte href dať pred e-mailom "mailto:", t.j. niečo takéto: href="mailto: [e-mail chránený] Okrem toho za dvojbodkou by pred poštovou adresou nemali byť medzery.
Ako urobiť z obrázku odkaz
Keďže ide o vložený prvok html stránky, jednoducho vložíme túto značku do značky „A“ namiesto textu:
Okrem toho jednoduchá možnosť vytváranie hypertextového obrázku vám html umožňuje zmeniť časť grafického obrázku na hypertextový odkaz. Okrem toho je možné obrázok rozdeliť na časti, z ktorých každá bude hypertextovým odkazom smerujúcim na jej internetovú adresu. Táto možnosť sa nazýva obrázková mapa.
V súčasnosti sa obrázková mapa používa len zriedka, pretože vyžaduje veľmi veľký počet značiek a html kód sa stáva nepraktickým a mätúcim.
Obrazová mapa sa vytvára v troch fázach:
Úplný html kód, ktorý vytvára obrázkovú mapu, vyzerá takto:
Tu sme vytvorili jednu obdĺžnikovú oblasť smerujúcu na hlavnú stránku webu webcodius, jednu kruhovú oblasť smerujúcu na stránku so všetkými článkami na tej istej lokalite a jednu polygonálnu oblasť bez odkazu.
Kotvy
Kotva resp štítok- je to druh hypertextového odkazu, ktorý označuje samostatný fragment stránky html a umožňuje vám prechádzať obsahom dokumentu.
Možno ste už videli stránky, kde sa hneď za nadpisom nachádzal zoznam názvov sekcií článkov, kliknutím na ktoré sa dostanete do sekcie, ktorá vás zaujíma.
Kotvy sa vytvárajú, podobne ako bežné hypertextové odkazy, pomocou spárovaný štítok A, len namiesto atribútu href je v ňom umiestnený atribút name alebo id, ktorého hodnota nastavuje jedinečný identifikátor štítku. V tomto prípade samotná značka „A“ zvyčajne nemá žiadny obsah:
Existuje druhý spôsob, ako vytvoriť kotvu, ktorá nepotrebuje vytvárať prázdne prvky „A“. Alebo môžete použiť prvky, ktoré sa už na webovej stránke nachádzajú, ako napríklad . Ak to chcete urobiť, pridajte do požadovaného prvku atribút universal id:
Dobrý deň, milí čitatelia blogu! Ako viete, pre úspešnú propagáciu stránky a zvýšenie jej pozície vo výsledkoch Výsledky vyhľadávania, je potrebné vykonať kvalitnú SEO optimalizáciu stránky. Pojem „“, ktorý sa zase delí na interné a externé, je neoddeliteľne spojený s pojmami ako „interné a externé odkazy na stránky“. Preto je pre nás veľmi dôležité vedieť, koľko odkazov má byť na stránke, ako skontrolovať ich počet, ako odstrániť nepotrebné odkazy zo stránky a zavrieť ich z indexovania, ako zvýšiť masu odkazov atď. Na zodpovedanie všetkých týchto a ďalších otázok týkajúcich sa interných a vonkajšie odkazy, poďme najprv pochopiť, čo je odkaz (alebo hypertextový odkaz) v HTML.
V tomto článku vysvetlím, čo je to odkaz, ako vytvoriť hypertextový odkaz v HTML na webovej stránke, ako otvoriť odkaz v novom okne, ako vytvoriť odkaz na e-mailovú adresu (e-mail) a ako aby sa z odkazu stal obrázok. Dotkneme sa aj takých pojmov, ako sú značky html a atribúty hypertextových odkazov, kotva odkazu, kotva html (kotva) a hash odkazy. Takže, začnime.
Čo je to odkaz (hyperlink).
Ak hypertextový odkaz vedie na webovú stránku alebo súbor, ktorý neexistuje (vymazaný, presunutý) alebo je jeho adresa nesprávna, potom sa takýto odkaz nazýva nefunkčný. Na stránke by sa nemali nachádzať nefunkčné odkazy, pretože zavádzajú návštevníkov a po kliknutí na takýto odkaz je nepravdepodobné, že by sa niekto vrátil na vašu stránku. O tom, prečo sa nefunkčné odkazy objavujú, ako ich nájsť a opraviť, si povieme podrobnejšie v samostatnom článku. A teraz pokračujme.
Ako vytvoriť odkaz (hyperlink) v HTML na webovej stránke.
Prepojenie na inú stránku vášho webu alebo iného webu je veľmi jednoduché. Ak chcete vytvoriť hypertextový odkaz, musíte prehliadaču povedať, o aký odkaz ide, a uviesť adresu dokumentu, na ktorý povedie. To sa vykonáva pomocou značky HTML. a požadovaný atribút href:
Tu je adresa URL adresa dokumentu, na ktorý chcete prejsť. A text hypertextového odkazu umiestnený medzi značkami a, sa nazýva kotva odkazu a je viditeľná pre návštevníka webovej stránky. Okrem toho, že text odkazu (kotva) informuje čitateľa o tom, kde sa prechod uskutoční, je veľmi dôležitý aj pri optimalizácii pre vyhľadávače (SEO), pretože je jedným z určujúcich faktorov ovplyvňujúcich hodnotenie vašej stránky podľa Kľúčové slová obsiahnuté v tejto kotve. Zvyčajne sa tento typ hodnotenia nazýva referenčný.
Absolútny odkaz
Používajú sa na ukazovanie na dokument na inej stránke (externý odkaz).
V rámci tej istej stránky je povolené vytvárať absolútne odkazy, správnejšie je však použiť na vytvorenie interného odkazu relatívne adresy, ktoré vyzerajú kratšie. Ale pri analýze rôznych stránok som si všimol, že veľká väčšina webmasterov vytvára interné odkazy s absolútnymi adresami. Tu je plus, pretože ak sa vaša stránka skopíruje, týmto spôsobom získate späť externé odkazy.
Ako vidíte, s absolútne odkazy všetko je jednoduché. S relatívnymi je to ťažšie, pretože pri ich vytváraní musíte pochopiť, akú hodnotu atribútu href musíte zadať, pretože závisí od pôvodného umiestnenia dokumentov. Ako som povedal, nikto sa s tým naozaj netrápi a robí všetky odkazy na stránke absolútne. Ak však máte záujem dozvedieť sa viac o tom, ako správne vytvárať relatívne odkazy pre stránku, môžem vám odporučiť článok od Dmitrija, autora blogu ktonanovenkogo.ru. Podrobnejšie a zrozumiteľnejšie vysvetlenie som ešte nevidel.
Ukážem napríklad, ako bude vyzerať odkaz vedúci na súbor vzhľadom na koreň stránky (stačí odrezať všetko naľavo od tretej lomky v podobnom absolútnom odkaze):
Relatívny odkaz
Na hlavné
Text odkazu (kotva)
Farby a vzhľad vyskakovacieho textu závisia len od nastavení operačný systém a prehliadač.
Ako otvoriť odkaz v novom okne.
Štandardne sa po kliknutí na odkaz otvorí nový dokument v aktuálnom okne. Pri osobnom prezeraní stránok mi to však nevyhovuje. Pri čítaní článku a sledovaní odkazu mi vyhovuje, že sa stránka otvorí v novom okne a ja môžem kedykoľvek pokračovať v čítaní predchádzajúceho článku. Ďalším dôvodom na otvorenie odkazu v novom okne je, že keď prejdete na stránku niekoho iného, je vysoká pravdepodobnosť, že sa čitateľ nevráti. Najmä ak urobí niekoľko prechodov a jednoducho si nepamätá, kde bol pred pár minútami.
Atribút cieľovej značky nám pomôže otvoriť odkaz v novom okne. . Predvolená hodnota je _self , ktorá sa zvyčajne nezapisuje. Ak chcete otvoriť dokument v novom okne, zmeňte hodnotu cieľového atribútu na _blank :
| 1 | <a href = "http://site" target = "_blank" > Nové okno</a> |
Nové okno
Čo ak pri návšteve cudzej stránky, kde sa odkazy otvárajú v aktuálnom okne, ich chcete otvoriť v novom? Stačí na ne kliknúť nie tlačidlom, ale kolieskom myši. V tomto prípade nová stránka otvorí sa v novom okne.
Ako vytvoriť odkaz na e-mail (e-mailovú adresu).
Kliknutím na tento odkaz sa otvorí program na prácu email, ktorý ste predvolene nainštalovali, kde už bude vyplnené pole „Komu“. Ak chcete automaticky vyplniť predmet listu, musíte vytvoriť odkaz na e-mail nasledujúceho formulára:
Namiesto slov „subject_of the letter“ musíte napísať požadovanú tému a samozrejme latinkou. Robíme to preto, lebo mnohé prehliadače a e-mailové programy nefungujú dobre s azbukou a v riadku predmetu je možnosť vidieť všetky druhy nezmyslov. Pomocou tejto nenáročnej rady budete môcť vytvoriť odkaz na e-mail bez obáv zo zbytočných prekvapení.
Ako urobiť z obrázku odkaz.
V tomto prípade je atribút title popis a text napísaný v atribúte alt (alternatívny zdroj informácií) sa zobrazí na stránke, ak sú v prehliadači zakázané obrázky. Ak atribút title slúži predovšetkým na pohodlie čitateľov, potom sa vyhľadávacie nástroje snažia pochopiť, čo je na obrázku zobrazené pomocou atribútu alt. Do týchto značiek sa odporúča písať kľúčové slová, ktoré budú mať veľký význam pri optimalizácii pre vyhľadávače. Hľadanie podľa obrázkov totiž nikto nezrušil.
Ako vytvoriť hypertextový odkaz (html kotvu) na jednej html stránke.
Vyššie sme už zvážili, ako vytvoriť odkaz na webovú stránku, bez ohľadu na to, či je interná alebo externá. Niekedy však musíte vytvoriť hypertextové odkazy na tej istej webovej stránke. Za čo? No napríklad tak, že pri čítaní veľmi dlhého textu máme možnosť rýchlo preskočiť na akúkoľvek jeho časť. Alebo vám príde vhod, keď na začiatku článku bod po bode zverejníte jeho obsah. Potom kliknutím na požadovanú položku okamžite prejdete na materiál, ktorý vás zaujíma. Takéto prechody sa robia pomocou záložiek predinštalovaných v tele článku, ktoré sa nazývajú kotvy html (nezamieňajte si s kotvou textu) a špeciálnych hash odkazov.
Ak chcete vytvoriť kotvu, najprv vytvorte záložku s ľubovoľným názvom (používajú sa iba latinské písmená, čísla, spojovníky a podčiarkovníky) špecifikovaným pomocou atribútu name značky. :
Hore
| 1 | <a href = "javascript:scroll(0,0);" > |
Dmitrij KtoNaNovenkogo radí iný spôsob, ako nastaviť záložky v texte webovej stránky, bez použitia html kotiev. Na tento účel sprístupníme záložku z ľubovoľnej značky HTML na stránke, ktorej predpíšeme univerzálny atribút id. Napríklad vytvoríme záložku zo značky hlavičky h3:
Text nadpisu
Je dôležité napísať latinské písmeno do atribútu id ako prvý znak názvu kotvy, potom môžete použiť akékoľvek iné povolené znaky.
Vráťme sa napríklad k nadpisu „ “ a potom pokračujte.
Pomocou hashových odkazov môžete prejsť na správne miesto nielen v rámci jednej stránky, ale aj prejsť na inú stránku lokality. Za týmto účelom nastavíme html kotvu na správne miesto na správnej stránke a do samotného hash odkazu pred hash symbol napíšeme adresu tejto stránky. Napríklad:
Prepojiť text s kotvou záložiek html
Typy a farby hypertextových odkazov v HTML.
- Nenavštívený odkaz je modrý a podčiarknutý.
- Aktívny odkaz – zmení sa na červenú v čase medzi kliknutím na odkaz a začatím načítavania novej stránky. Samozrejme, v tomto stave nebola dlho.
- Navštívený odkaz - po kliknutí naň zmení farbu na fialovú.
Farbu hypertextových odkazov v html dokumente môžete zmeniť pomocou značky
a nasledujúce atribúty:- Odkaz – farba nenavštívených odkazov.
- Alink – farba aktívneho odkazu.
- Vlink je farba navštívených odkazov.
Všetky vyššie uvedené atribúty je možné kombinovať:
| 1 | <body link = "#1122cc" vlink = "#6611cc" alink = "#d14836" > |
Dúfam, že je teraz jasné, ako vytvoriť hypertextový odkaz na HTML stránke a na e-mail, ako urobiť z obrázku odkaz, čo sú textové kotvy, hash odkazy a html kotvy, čo sú html značky a atribúty odkazov. Snažil som sa čo najlepšie podrobne popísať, čo sú odkazy v HTML a čo sú. Pripomínam, že vkladanie hypertextových odkazov do textu sa vykonáva iba v režime HTML.
Nikdy som nemusel písať také dlhé články, viac ako 10 000 znakov. Ale táto téma odkazov nie je vyčerpaná, na pokračovanie.
Ak bol tento článok pre vás užitočný, kliknite na tlačidlá sociálnych sietí nižšie. Vidíme sa na stránkach!
Hlavným rozlišovacím znakom HTML dokumentov je vytváranie špeciálnych aktívnych odkazov na iné dokumenty, ktoré sa nazývajú hypertextové odkazy.
Keď na ne prejdete myšou, kurzor má podobu ruky a po kliknutí do okna prehliadača sa otvorí ďalšia webová stránka alebo konkrétny dokument. Hypertextové odkazy môžu byť textové alebo obrázkové.
Bude to fungovať, ak sa cieľový dokument nachádza v rovnakom adresári ako aktuálny. Tiež môžete zadať cestu k súboru relatívne ku koreňovému adresáru webovej stránky pomocou znaku "/".
Napríklad:
Napríklad:
Vytváranie hypertextových odkazov v HTML je jednoduchý proces. Štandardne sú podčiarknuté a zvýraznené modrou, kým navštívené sú fialové.
- link - farba odkazov na webovú stránku;
- vlink - farba hypertextových odkazov navštívených webových stránok;
- alink je farba aktívnych odkazov na webovej stránke.
Napríklad:
Zadané atribúty určujú farby odkazov celého dokumentu HTML. Ak tento kód vložíte do značky
, nemusíte zakaždým nastavovať farbu písma.Základné atribúty hypertextových odkazov
1. nadpis – umožňuje vám vytvoriť popisný text, ktorý sa zobrazí, keď umiestnite kurzor myši na hypertextový odkaz.
Napríklad:
2. cieľ – informuje prehliadač, v ktorom okne má odkaz otvoriť.
Môže nadobudnúť nasledujúce hodnoty:
- _blank - odkaz musí byť otvorený na novej karte;
- _self - Hypertextový odkaz HTML musí byť otvorený na aktuálnej karte. Predvolená hodnota;
- _parent - prehliadač by mal načítať odkaz v rodičovskom okne;
- _top - hypertextový odkaz sa načíta cez celý priestor okna prehliadača (rámovanie v tomto prípade zmizne).
Napríklad:
Názov odkazu
Odpoveď na otázku, ktorú často kladú začínajúci webmasteri " ako vložiť hypertextový odkaz do html» prijaté.
Prajeme vám veľa úspechov pri učení sa webového programovania!