Ako vložiť hypertextový odkaz do HTML? Vytváranie a používanie hypertextových odkazov v HTML. Ako urobiť z obrázku odkaz v HTML, Vkontakte, na fóre a pomocou CSS obrázku ako hypertextového odkazu

V tejto lekcii si povieme, ako vytvoriť odkaz v HTML. Na webových stránkach sa veľmi často používajú odkazy, ktoré vám umožňujú prejsť z jednej stránky webovej lokality na druhú. Zvláštnosťou odkazov je, že môžu viesť nielen na webovú stránku, ale aj na súbory, obrázky atď.

Odkazy môžu byť interné a externé. Interné odkazy vedú na stránky a súbory v rámci jednej lokality. Externé odkazy vedú na stránky, dokumenty a súbory tretích strán. Zároveň sú tieto typy odkazov nastavené takmer identicky.

Ako vytvoriť odkaz v HTML, príklady

1. HREF – zodpovedá za to, kam má odkaz viesť. Štandardný odkaz je špecifikovaný takto: Text odkazu.

2. CIEĽ – zodpovedá za to, v akom okne sa dokument otvorí. Predvolené nový dokument otvorí sa v aktuálnom okne prehliadača. Atribút „cieľ“ vám umožňuje otvoriť odkaz v novom okne prehliadača. Tento atribút má nasledujúce parametre:

• _blank - načíta stránku v novom okne;
• _self - načíta stránku v aktuálnom okne;
• _parent - načíta stránku do nadradeného rámca;
• _top - zruší všetky rámce a načíta stránku v novom okne.

3. NAME – používa sa na navigáciu do konkrétnej oblasti na stránke. Za symbolom hash je kľúčové slovo (záložka alebo značka) uvedené v úvodzovkách. Ak chcete prejsť na tento štítok, použite odkaz, v ktorom je tento štítok napísaný.

Príklad externého odkazu

Prejdite na webovú stránku

Prejdite na stránku Bezplatné lekcie WordPress

Príklad 4: Obrázky ako odkazy.

Príklad obrázku ako referencie

Príklad odkazu na konkrétne miesto na stránke

Prejdite na text

Text stránky...

V tomto príklade je stránka označená ako „zoznam“ pomocou atribútu „name“. Prepojením s týmto štítkom sa dostanete do konkrétnej oblasti stránky.

Stiahnuť súbor Napíšte list

Farbu odkazov môžete nastaviť pomocou atribútov, ktoré sú špecifikované v značke „body“ ako parametre. Zvážte tieto atribúty:

• odkaz - nenavštívený odkaz, štandardne je zobrazený modrou farbou;
• alink - aktívny odkaz, štandardne červený;
• vlink - navštívený odkaz, štandardne fialový.

Príklad nastavenia farieb pre odkazy...

Tak sme prišli na princíp, na základe ktorého sa vytvárajú odkazy v HTML. Odkazy môžu mať špecifické štýly. Môžete sa o tom dozvedieť v lekcii kliknutím na odkaz.

Myslím, že už chápete, čo tým myslím porozprávame sa v tejto kapitole.. a viete, čo je odkaz, ak nie, tak kliknite sem.. Existuje niekoľko typov odkazov, ako aj „mechanizmov“ klikania na ne. V tejto kapitole sa pokúsim podrobne hovoriť o tom, ako registrovať odkazy, ako aj o zložitosti práce s nimi.

Lyrická odbočka:
Raz v armáde za mnou prišiel náčelník štábu a vydal rozkaz, citujem:
Prineste mi ten dokument, hoci neviem, kde je alebo čo to je!! Prečo stojíš? Poďme bežať!! Meškám!!!

Takže, čo tým myslím, aby prehliadač neupadol do strnulosti, ako som to urobil vtedy, potrebuje vedieť: presný názov dokumentu, cestu k dokumentu a miesto, kam ho priniesť, alebo skôr, kde to otvoriť.

Zapnuté tento moment pomocou poznámkového bloku sme vytvorili iba jeden HTML dokument, ja ho mám s názvom index.html (prečo si zvolil taký divný názov index.html a prečo je to potrebné, pozri) Neviem aký, napadol si s menom sami, ale myslím, že ste ho použili zapamätajte si a viete, kde to je, 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 .. Predtým, ako naň vytvoríte odkaz, ho musíte vytvoriť, pretože už viete, ako to urobiť.

Otvorte poznámkový blok.

Napíšeme kód html jazyk. napríklad stránka so sériou fotografií.

Uložíme ho ako html stránku do rovnakého pracovného priečinka, kde už existuje prvý dokument, ktorý sme vytvorili. Nazvime ho primer.html, aby sme sa vyhli nejasnostiam, a možno prvý premenujeme na index.html

Teraz viem, že máte dva html dokumenty index.html a primer.html a že teraz máte minimálnu sadu pre ďalšie školenie.

Textové odkazy.

Zoznámime sa s tagom (z kotvy), 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 fotky!!

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 s obrázkami, tag Cesta odkazu na otváraný dokument sa zadáva pomocou rovnakých metód:

Tu sú moje fotky!! - Tento záznam znamená, že v adresári, kde sa nachádza náš prvý html dokument, je priečinok stranica, v ktorom sa nachádza súbor primer.html
Tu sú moje fotky!! - To znamená, že súbor primer.html sa nachádza o úroveň vyššie od dokumentu
Tu sú moje fotky!! - dokument sa nachádza na webovej stránke www.site.ru..

No, skúsime to? Nižšie je uvedený príklad dvoch dokumentov obsahujúcich prepojenia smerujúce na seba.

Súbor index.html:

Vytvorenie odkazu na kus textu





Povedz mi, milé dieťa: v ktorom uchu to bzučí?


Napravo alebo naľavo?



Súbor Primer.html:

Sledovali ste odkaz tu





Ale neuhádol som správne! Hučí mi v oboch ušiach.


No ja sa tak nehrám...

Z príkladu môžete vidieť, že odkazy sú zvýraznené farebne, štandardne modrá je odkaz a červená je už navštívený odkaz, tieto farby je možné zmeniť pomocou otváracej značky, ktorá je nám už dobre známa< body >a jeho atribúty.

odkaz - farba odkazu.
alink - farba kliknutého, aktívneho odkazu.
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 prinútiť farebne zvýrazniť celý odkaz aj jeho jednotlivé časti (frázy, slová, písmená) pomocou známej značky a jej farby atribút. To však neplatí len pre farbu, samostatne si môžete nastaviť aj veľkosť, štýl a typ písma 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 bude špecifikovaná v značke

Súbor index.html:

Rainbow



Pozrite sa na frázu, ktorá vám pomôže zapamätať si miesta farieb v dúhe


R
A
D
U
G
A




Súbor Primer.html:

Rainbow




Každý
lovec
želania
vedieť
Kde
sedí
bažant



Vráťte sa na hlavnú stránku

Jedna z vašich stránok na lokalite sa musí volať index.html. Je to súbor s týmto názvom, ktorý program robota vyhľadá na vašej webovej stránke, keď osoba zadá názov vašej webovej stránky. Keďže stránka index.html sa otvorí ako prvá, urobte z nej hlavnú stránku. Ostatné stránky si môžete nazvať ako len chcete... už neexistujú žiadne nuansy s menami.

O registri... Pri písaní cesty a názvov dokumentov pamätajte na to, že napr.: Strana.html, strana.html a PAGE.html sú názvy rôznych dokumentov! To isté platí pre názvy záložiek a obrázkov. Pri písaní kódu vždy zvážte veľkosť písmen, existuje vysoká pravdepodobnosť, že takéto názvy jeden alebo druhý prehliadač nerozpozná. Urobte si pravidlo, že všetko budete písať a volať malým s latinskými písmenami, potom sa riziko ľudského faktora a programových vrtochov 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 stránky na akékoľvek miesto na webe s minimálnym počtom kliknutí. Viac ako tri prechody na požadované miesto na stránke už nie sú dobré.Nekonečné načítavanie pre človeka nepotrebných stránok môže viesť k nervovému zrúteniu a predčasnému uzavretiu stránky. Ušetrite ľuďom čas, peniaze a nervy.

Hlavnou črtou dokumentu HTML je prítomnosť hypertextových odkazov (alebo jednoducho odkazov) na iné dokumenty, stránky, súbory, obrázky atď. Je to schopnosť vkladať odkazy na objekty mimo stránky, vďaka čomu je internet taký populárny. a pohodlné na používanie. Preto pri vytváraní svojej webovej stránky vždy pamätajte na „kúzlo“ odkazov.

V tejto lekcii si povieme, ako vytvoriť odkaz na webovú stránku, na jej individuálnu stránku alebo súbor. Dozviete sa, ako zmeniť text odkazu, ako ho otvoriť v novom okne, ako vytvoriť odkaz na 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).

Celkovo tento tutoriál umožní úplné a dostatočné pochopenie vytvárania odkazov. Pochopíte, ako vytvoriť hypertextový odkaz v HTML a prečo. A naučíte sa ovládať jeho vlastnosti.

Podmienky § 1. Odkaz na súbor, odkaz na stránku, odkaz na stránku

Množstvo otázok o tom, ako sa líši odkaz na súbor od odkazu 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é vzhľadom na pôvodnú stránku a sú vytvorené rovnakým spôsobom.

Aby sa moje myšlienky nerozbehli, ukážem vám 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 rovnako. Jediným rozdielom je adresa objektu, na ktorý sa má odkazovať. Teraz prejdime k hlavnej časti lekcie.

§ 2. Vytváranie externých odkazov

Odkazy sa navzájom líšia na externé a interné, ako aj textové a grafické. Externé odkazy vedú mimo html stránku, interné odkazy vedú na rôzne časti tej istej stránky. Textové odkazy sú textové (v predvolenom nastavení sú zvýraznené modrou a podčiarknuté) a grafické odkazy obsahujú obrázok ako objekt, na ktorý musíte kliknúť, ak chcete prejsť. Všetky tieto typy odkazov sú vytvorené v HTML pomocou značky (skratka pre kotvu). Poďme sa na to pozrieť bližšie.

Ak chcete vytvoriť externý odkaz na lokalitu, stránku alebo súbor, použite atribút značky href. Tento atribút berie ako svoju hodnotu adresu URL lokality, stránky alebo súboru (o tom sme hovorili vyššie). Medzi značkami 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), resp grafické znázornenie(odkaz-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:

Ak chcete napríklad vytvoriť textový odkaz na domovskú stránku tejto lokality, musíte napísať nasledujúci kód HTML:

http://www.seoded.ru/">Hlavná stránka webu

V prehliadači to bude vyzerať takto:

Ako som napísal na samom začiatku tejto lekcie, farba textu odkazu (kotvy) sa dá zmeniť pomocou . Vo všeobecnosti môžete na text odkazov aplikovať rovnaké pravidlá ako na hlavný text stránky, teda zvýrazniť ho tučným písmom, kurzívou, použiť nadpisy 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 grafickom odkaze s rámom. Ak to nie je žiaduce, atribút border tagu IMG by mal byť nastavený na 0:

border="0">

Domovská stránka

§ 3. Interné odkazy

Interné odkazy slúžia na pohodlné prechádzanie stránkami s množstvom obsahu. S ich pomocou som vytvoril „Obsah lekcie“ (pozri na začiatku tejto stránky). Interné odkazy sa vytvárajú na rovnakom princípe ako externé odkazy. Iba hodnota atribútu href určuje „kotvu“ odkazu. "Kotva" je vytvorená atribútom name:

name="názov kotvy">text

A názov „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“ sa nevyžaduje a najčastejšie nie je špecifikovaný.

„Som osýpky“ sa nachádza na tých miestach stránky, kam by sa mal používateľ dostať po kliknutí na odkaz.

Ako som uviedol vyššie, v atribúte href interného odkazu je namiesto adresy názov požadovanej „kotvy“ označený povinným symbolom hash (#). Pozrime sa na to na príklade.

Vytvoril som "kotvu" s názvom zagolovok a umiestnil som ju do kódu stránky vedľa názvu tejto lekcie (Hyperlinky v HTML). Kotviaci kód je nasledujúci:

name="zagolovok">

href="#zagolovok">K názvu

A v prehliadači takto:

Ak ste si všimli, po kliknutí na interný odkaz na nadpis sa adresa URL v paneli s adresou prehliadača zmenila:

Na pôvodnú adresu:

http://www..html

http://www..html#zagolovok

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 dlhým článkom o niečom (alebo ste na stránku zverejnili veľké množstvo fotografií) a označili ste ju internými odkazmi. V , ste potrebovali odkazovať nielen na stránku s článkom (alebo fotografiami), ale aj na konkrétne miesto na nej (alebo konkrétnu fotografiu). Pomocou možnosti s interným odkazom v adrese ľahko dosiahnete, čo potrebujete.

§ 4. Absolútne a relatívne odkazy

Domovská stránka

Ale s relatívnymi odkazmi je to trochu komplikovanejšie. V takýchto odkazoch je adresa uvedená buď vo vzťahu ku koreňovému priečinku lokality (priečinku, v ktorom sa nachádza hlavná stránka), alebo vo vzťahu k zdrojovej stránke. Takéto odkazy sú potrebné napríklad vtedy, ak sa stránka nachádza na domáci počítač. Alebo toto nie je stránka, ale stránka, ktorá je ukazovateľom na iné dokumenty.

Povedzme, že potrebujeme odkazovať na stránku klienty.html, ktorá je v rovnakom priečinku s domovskej stránke stránky. Potom bude relatívny kód odkazu vyzerať takto:

/klienty.html">Klienti

Teraz predpokladajme, že v tom istom priečinku s hlavnou stránkou je priečinok zakazy a stránka klienty.html sa v ňom už nachádza. Potom bude relatívny kód odkazu vyzerať takto:

/zakazy/klienty.html">Klienti

Teraz sa pozrime na vytváranie hypertextových odkazov vzhľadom na zdrojovú stránku. Povedzme, že máme stránku price.html (zdrojová stránka) a z nej potrebujeme odkazovať na stránku klienty.html. Typické možnosti sú tieto:

1. Stránky price.html a klienty.html sa nachádzajú v rovnakom priečinku.

klienty.html">Klienti




2. v koreňovom priečinku webu sa stránka price.html nachádza v priečinku zakazy o úroveň vyššie).

Kód bude vyzerať takto:

../klienty.html">Klienti

Dve bodky označujú, že sa musíte presunúť z aktuálneho priečinka na vyššiu úroveň.




3. Stránka klienty.html a priečinok zakazy sa nachádzajú v koreňovom priečinku lokality, priečinok mebel je v priečinku zakazy, stránka price.html je v priečinku mebel (t. j. stránka klienty.html vzhľadom na pôvodná stránka price.html je o dve úrovne vyššia).

../../klienty.html">Klienti

To znamená, že každá úroveň je označená dvoma bodkami a lomkou „/“.




4. v koreňovom priečinku stránky leží stránka klienty.html v priečinku zakazy (t. j. teraz stránka klienty.html vzhľadom na pôvodnú stránku price.html leží o úroveň nižšie).

zakazy/klienty.html">Klienti

V tomto prípade sa nepoužívajú bodky a lomky.




5. Stránka price.html (pôvodná stránka) a priečinok zakazy sa nachádzajú v koreňovom priečinku webu, priečinok mebel je v priečinku zakazy, stránka klienty.html je v priečinku mebel (t.j. teraz klienty .html stránka je relatívna k pôvodnej price.html stránka leží o dve úrovne nižšie).

zakazy/mebel/klienty.html">Klienti




6. V koreňovom priečinku stránky sú dva priečinky: zakazy a oplata. Stránka klienty.html je v priečinku zakazy, pôvodná stránka price.html je v priečinku oplata (to znamená, že obe stránky sú v rôznych priečinkoch o úroveň nižšie ako koreňový priečinok lokality).

../zakazy/klienty.html">Klienti

§ 5. Odkaz na e-mail

Ak chcete vytvoriť odkaz na e-mail, musíte nahradiť URL v hodnote atribútu href e-mailovou adresou označujúcou protokol (mailto:). A potom, keď kliknete na tento odkaz, otvorí sa okno poštový program s e-mailovou adresou zadanou do poľa „Komu“. V HTML kóde to vyzerá takto:

mailto: [chránený e-mailom]">Moja pošta

A v prehliadači je to tak.

Dobrý deň, milí čitatelia blogu! Ako viete, pre úspešnú propagáciu webovej stránky a zvýšenie jej pozície vo výsledkoch vyhľadávania je potrebné vykonať kvalitnú SEO optimalizáciu webovej 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 zablokovať ich indexovanie, ako zvýšiť masu odkazov atď. Aby sme odpovedali na všetky tieto a ďalšie otázky týkajúce sa interných a externých odkazov, poďme najprv pochopiť, čo je odkaz (alebo hypertextový odkaz) v HTML.

V tomto článku vám poviem, č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 vytvoriť odkaz na obrázok. Dotkneme sa aj takých pojmov, ako sú značky html a atribúty hypertextových odkazov, kotva odkazov, kotva html 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ý odkaz. Na stránke by nemali byť 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 viac v samostatnom článku. Teraz pokračujme.

Ako vytvoriť odkaz (hyperlink) v HTML na webovej stránke.

Odkaz na inú stránku vašej alebo inej lokality 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 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, kde dôjde k prechodu, je veľmi dôležitý aj pri optimalizácii pre vyhľadávače (SEO), pretože slúži ako jeden z určujúcich faktorov ovplyvňujúcich hodnotenie vašej stránky. pre kľúčové slová obsiahnuté v tejto kotve. Tento typ hodnotenia sa zvyčajne nazýva hodnotenie odkazov.

Absolútny odkaz

Používajú sa na ukazovanie na dokument na inej stránke (link is external).

V rámci jednej stránky je tiež možné vytvárať absolútne odkazy, ale na vytváranie interných odkazov je správnejšie použiť 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. Má to svoju výhodu, pretože ak sa vaša stránka skopíruje, tak týmto spôsobom získate fungujúce spätné odkazy.

Ako vidíte, s absolútnymi odkazmi je všetko jednoduché. S relatívnymi je to ťažšie, pretože pri ich vytváraní musíte pochopiť, aká hodnota atribútu href by mala byť špecifikovaná, pretože závisí od pôvodného umiestnenia dokumentov. Ako som už 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 webovú 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.

Napríklad vám ukážem, ako bude vyzerať odkaz vedúci na súbor relatívne ku koreňu stránky (jednoducho odrežeme všetko naľavo od tretej lomky v podobnom absolútnom odkaze):

Relatívna referencia

Na hlavné

Text odkazu (kotva)

Farby a dizajn vyskakovacieho textu závisia len od nastavení operačný systém a prehliadač.

Ako otvoriť odkaz v novom okne.

V predvolenom nastavení sa po kliknutí na prepojenie v aktuálnom okne otvorí nový dokument. Mne osobne to však pri prehliadaní webových stránok 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 späť. Najmä ak urobí niekoľko prechodov a jednoducho si nepamätá, kde bol pred pár minútami.

Cieľový atribút tagu nám pomôže otvoriť odkaz v novom okne . Štandardne má hodnotu _self , ktorá sa zvyčajne neuvádza. Ak chcete otvoriť dokument v novom okne, zmeňte hodnotu cieľového atribútu na _blank :

1

Nové okno

Nové okno

Čo by ste mali urobiť, 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 e-mailom, predvolene nainštalovaný, kde už bude vyplnené pole „Komu“. Aby sa predmet listu vyplnil automaticky, je potrebné vytvoriť odkaz na e-mail tohto typu:

Dmitrij KtoNaNovenkogo radí iný spôsob, ako nastaviť záložky v texte webovej stránky, bez použitia html kotiev. Aby sme to dosiahli, vytvoríme záložku z ľubovoľnej značky HTML dostupnej na stránke a priradíme jej atribút universal id. Uložme si napríklad značku názvu h3:

Text nadpisu

Je dôležité zahrnúť 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 požadované 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 napíšeme adresu tejto stránky pred symbol hash. Napríklad:

Prepojiť text so záložkou kotvy 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 myšou na odkaz a začiatkom načítavania novej stránky. Je jasné, že v tomto stave je len krátko.
• Navštívený odkaz – po kliknutí naň zmení farbu na fialovú.

Farbu hypertextových odkazov v dokumente HTML môžete zmeniť pomocou značky a jej nasledujúcich atribútov:

• Odkaz – farba nenavštívených odkazov.
• Alink – farba aktívneho odkazu.
• Vlink – farba navštívených odkazov.

Všetky vyššie uvedené atribúty je možné kombinovať:

1

Dúfam, že je teraz jasné, ako vytvoriť hypertextový odkaz na HTML stránku 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, ako som mohol, podrobne povedať, čo sú a čo sú odkazy v HTML. Pripomínam, že vkladanie hypertextových odkazov do textu sa vykonáva iba v režime HTML.

Nikdy predtým som nepísal také dlhé články, viac ako 10 000 znakov. Ale toto nie je koniec témy odkazov, na pokračovanie.

Ak bol tento článok pre vás užitočný, kliknite na tlačidlá sociálnych médií nižšie. Vidíme sa opäť na stránkach!

Pekný deň všetkým, moji milí priatelia a čitatelia. Dúfam, že ste sa rozhodli zapojiť do mojej súťaže a už teraz píšete o svojej blogovacej ceste. No, rád by som pokračoval v štúdiu jazyka html a dnes by som vám rád povedal o jednej z najdôležitejších zložiek, a to o hypertextových odkazoch.

Áno, bez takýchto hypertextových odkazov by internet nebol taký pohodlný. Nie, klamem. Zorientovať sa v ňom by nebolo vôbec jednoduché. Viete si predstaviť internet bez nich? Ja osobne nie.

A dnes sa naučíme, ako vložiť hypertextový odkaz do html. Najprv by som sa vás však rád spýtal: Viete, čo je to dokonca hypertextový odkaz a ako sa líši od bežného odkazu? Všetko je tu vlastne jednoduché: odkaz je jednoduchá informácia, ktorá odkazuje na dokument. Zároveň na tento text nemôžete kliknúť (nič sa nestane), ale viete, kde hľadať informácie.

Príklad: Ako melírovať vlasy vo Photoshope nájdete na //site/adobe-photoshop/kak-vydelit-volosy/

Hypertextový odkaz je rovnaký text, len jeho podstatou je, že na tento text môžete kliknúť a dostať sa na požadovanú stránku, web alebo akýkoľvek iný objekt. Navyše samotný text môže byť akýkoľvek, pričom adresa je vo vnútri napísaná samostatne a môže byť úplne iná. Ale nech je to ako chce, v hovorovej reči sa im stále hovorí jednoducho odkazy. Tu je príklad hypertextového odkazu:

O tom, ako správne melírovať vlasy vo Photoshope, si môžete prečítať v jednom z mojich návodov.

Každopádne. Dobrá teória. Teraz prejdime k praxi a pozrime sa, ktoré z nich sú zodpovedné za všetky tieto záležitosti.

Párová značka je zodpovedná za hypertextový odkaz, ale sama o sebe nič nepredstavuje. Vždy ide v spojení s atribútom. A v tomto prípade musíme neustále písať rovnaký href. Do hodnoty atribútu vložíme odkaz na samotný požadovaný zdroj. A do samotného obsahu napíšeme samotný text, ktorý by sa mal stať klikateľný (fungovať pri kliknutí). Pozrite sa na príklad a myslím, že všetko pochopíte.

Vyhľadávací nástroj Yandex

Ako ste pochopili, v tomto príklade som napísal, že keď kliknete na časť textu „vyhľadávač Yandex“, osoba bude presmerovaná na adresu zapísanú v hodnote atribútu href.

Myslím, že mnohí z vás vedia, že existujú interné a externé prepojenia. Interné odkazy sa uskutočňujú v rámci jedného adresára, tj stránky, a externé odkazy vedú k nejakému zdroju tretej strany. A teraz vám ukážem, ako urobiť oboje.

Interné prechody Súbor v rovnakom priečinku

Ale takýto prechod bude fungovať za predpokladu, že súbor, na ktorý odkazujete, sa nachádza v rovnakom priečinku ako súbor, do ktorého umiestňujete odkaz. Pre ostatné možnosti je všetko trochu iné.

Súbor v inom priečinku

Otvorte súbor pushkin.html v programe Notepad++

Teraz nájdite slovo fotografia a zabaľte ho do značiek.

Teraz pozornosť! V hodnote atribútu uvádzame cestu relatívne k editovanému súboru, teda samotný pushkin.html. Mali by ste skončiť s niečím takýmto:

Foto

Čo sme teraz urobili? A urobili sme nasledovné: keďže cesta k fotke leží v samostatnom priečinku img, ktorý sa nachádza v rovnakom priečinku ako súbor pushkin.html, potom do hodnoty atribútu musíme najprv napísať názov priečinka a potom cez lomku (/) celý názov dokumentu (v našom prípade fotografie).

Teraz uložte a spustite súbor pushkin.html vo svojom prehliadači. Uvidíte, že slovo „Foto“ sa zvýraznilo modrou farbou a dalo sa naň kliknúť, čo znamená, že kliknutím na tento odkaz sa dostaneme do súboru fofo.jpg, ktorý sa nachádza v priečinku img.

Tak ako? Všetko jasné? Ak sa čokoľvek stane, neváhajte sa opýtať.

Vonkajšie prechody

A samozrejme nemôžeme nespomenúť externé odkazy, po kliknutí na ktoré sa dostaneme na úplne inú stránku. Ale tu nie je nič zložité. Ide o to, že do hodnoty href vložíte celú adresu webu alebo webovej stránky. Vyššie som ukázal príklad s Yandexom. Ale tu je ďalší príklad:

Budem študovať, aby som sa stal majstrom sociálnych projektov.

Tu sa dostávame na konkrétnu stránku konkrétneho webu.

Otvorí sa v novom okne

Štandardne sa po kliknutí na odkaz dokument otvorí v rovnakom okne ako vaša stránka, t.j. vaša stránka sa zatvorí. A to nie je dobré. Najmä v prípade projektov propagovaného obsahu alebo blogov sa odporúča, aby sa po kliknutí na prepojenie otvoril dokument v novom okne alebo karte bez zatvorenia stránky.

Pomôže nám k tomu atribút target s hodnotou „_blank“. Nie je tu nič zložité. Stačí ho vložiť do otváracej značky za hodnotou atribútu href. Vezmime si ten úryvok zo súboru lukomorye.html, kde sme urobili odkaz na stránku pushkin.html, až teraz napíšeme práve tento atribút. Malo by to vyzerať takto:

Z básne Ruslan a Lyudmila (autor - A.S. Pushkin)

Tu je všetko jasné. Teraz, keď kliknete na obsah, požadovaná stránka sa otvorí v novom okne. Táto vec je veľmi potrebná, pretože ak ju nezaregistrujete, používateľ jednoducho opustí vašu stránku. A tak na ňom v každom prípade zostane, len ak ho konkrétne neuzavrie. Pokúste sa urobiť všetko sami, urobte všetko krásne vlastnými rukami. Nie je potrebné kopírovať a vkladať.

Nejako takto. Zdá sa, že som vám povedal všetky najdôležitejšie veci, no ak sa chcete pohnúť týmto smerom a naučiť sa HTML a CSS vytvárať profesionálne weby, blogy a dokonca aj internetové obchody, tak si určite pozrite výborný video kurz na túto tému. Lekcie sú naozaj vynikajúce a sú skutočne povedané pre ľudí, ktorí sú stále málo oboznámení s tvorbou webových stránok alebo nie sú oboznámení vôbec.

No a týmto sa naša dnešná lekcia končí. Dúfam, že sa vám môj článok páčil a budem rád, ak sa stanete mojim pravidelným čitateľom. Takže sa nezabudnite prihlásiť na odber aktualizácií môjho blogu, aby vám nič zaujímavé neušlo. Nuž, prajem vám veľa úspechov vo všetkých vašich snahách. čau čau!

S pozdravom Dmitrij Kostin.