Kuinka lisätä hyperlinkki HTML:ään? Hyperlinkkien luominen ja käyttäminen HTML:ssä. Kuinka tehdä kuvasta linkki HTML:ssä, Vkontaktessa, foorumilla ja käyttämällä CSS-kuvaa hyperlinkkinä

Tällä oppitunnilla puhumme linkin tekemisestä HTML:ään. Linkkejä käytetään hyvin usein verkkosivustoilla; niiden avulla voit siirtyä verkkosivuston sivulta toiselle. Linkkien erikoisuus on, että ne voivat johtaa verkkosivun lisäksi tiedostoihin, kuviin jne.

Linkit voivat olla sisäisiä ja ulkoisia. Sisäiset linkit johtavat yhden sivuston sivuille ja tiedostoille. Ulkoiset linkit johtavat kolmannen osapuolen sivustoille, asiakirjoihin ja tiedostoihin. Samanaikaisesti tämäntyyppiset linkit on asetettu lähes identtisesti.

Linkin tekeminen HTML:ään, esimerkkejä

1. HREF - vastaa siitä, minne linkin tulee johtaa. Vakiolinkki määritetään seuraavasti: Linkin teksti.

2. TARGET - vastaa siitä, mihin ikkunaan asiakirja avautuu. Oletus uusi asiakirja avautuu nykyiseen selainikkunaan. "Target"-attribuutin avulla voit avata linkin uudessa selainikkunassa. Tällä määritteellä on seuraavat parametrit:

• _blank - lataa sivun uuteen ikkunaan;
• _self - lataa sivun nykyisessä ikkunassa;
• _parent - lataa sivun pääkehykseen;
• _top - peruuttaa kaikki kehykset ja lataa sivun uuteen ikkunaan.

3. NIMI – käytetään navigoimiseen tietylle alueelle sivulla. Hash-symbolin jälkeen avainsana (kirjanmerkki tai tagi) ilmaistaan ​​lainausmerkeissä. Siirry tähän tarraan käyttämällä linkkiä, johon tämä tarra on kirjoitettu.

Esimerkki ulkoisesta linkistä

Siirry verkkosivulle

Siirry sivustolle Ilmaiset WordPress-tunnit

Esimerkki 4: Kuvat linkkeinä.

Esimerkkikuva viitteenä

Esimerkki linkistä tiettyyn paikkaan sivulla

Siirry tekstiin

Sivun teksti...

Tässä esimerkissä sivu on nimetty "lista" käyttämällä "name"-attribuuttia. Linkittäminen tähän tunnisteeseen vie sinut sivun tietylle alueelle.

Lataa tiedosto Kirjoita kirje

Voit määrittää linkkien värin käyttämällä attribuutteja, jotka on määritetty "body"-tunnisteessa parametreina. Harkitse näitä ominaisuuksia:

• linkki - vierailematon linkki, oletusarvoisesti se näytetään sinisenä;
• alink - aktiivinen linkki, oletuksena punainen;
• vlink - vierailtu linkki, oletuksena violetti.

Esimerkki linkkien värien asettamisesta...

Näin ollen olemme selvittäneet periaatteen, jolla linkit luodaan HTML:ssä. Linkeille voidaan antaa tiettyjä tyylejä. Näet siitä oppitunnilla linkin takaa.

Luulen, että ymmärrät jo mitä tarkoitan puhumme Tässä luvussa.. ja tiedät mikä linkki on, jos ei, niin napsauta tästä.. Linkkejä on useita, samoin kuin "mekanismeja" niiden napsauttamiseksi. Tässä luvussa yritän puhua yksityiskohtaisesti linkkien rekisteröimisestä sekä niiden kanssa työskentelyn monimutkaisuudesta.

Lyyrinen poikkeama:
Kerran armeijassa esikuntapäällikkö tuli luokseni ja antoi käskyn, lainaan:
Tuo minulle se asiakirja, vaikka en tiedä missä se on tai mikä se on!! Miksi seisot? Juostaan!! Olen myöhässä!!!

Joten mitä tarkoitan tällä, jotta selain ei joutuisi umpikujaan, kuten tein silloin, sen on tiedettävä: asiakirjan tarkka nimi, asiakirjan polku ja paikka, johon se tuodaan, tai pikemminkin missä se avataan.

Päällä Tämä hetki notepadilla loimme vain yhden HTML-dokumentin, minulla on se nimellä index.html (miksi valitsit niin oudon nimen index.html ja miksi sitä tarvitaan, katso) En tiedä kumman, keksit itse nimen kanssa, mutta luulen, että käytit sitä muista ja tiedä missä se on, ellet tietenkään ole kansliapäällikköni :).. Tässä asiakirjassa yritämme luoda linkin toiseen asiakirjaan, jota meillä ei vielä ole .. Joten ennen kuin linkität siihen, sinun on luotava se, koska tiedät jo, miten tämä tehdään.

Avaa muistilehtiö.

Kirjoitamme koodin päälle html kieli. esimerkiksi sivu, jossa on useita valokuvia.

Tallennamme sen html-sivuna samaan työkansioon, jossa ensimmäinen luomamme dokumentti on jo olemassa. Kutsutaan sitä nimellä primer.html sekaannusten välttämiseksi ja nimetään ehkä ensimmäinen uudelleen nimellä index.html

Nyt tiedän, että sinulla on kaksi html-dokumenttia index.html ja primer.html ja että sinulla on nyt vähimmäismäärä jatkokoulutukseen.

Tekstilinkit.

Tavataan tag (ankkurista), voit liittää siihen tekstiä tai kuvan, josta tulee linkki tiettyihin asiakirjoihin. Tag-attribuutti href määrittää nimen ja polun asiakirjaan, johon linkki osoittaa.

Kaiken kaikkiaan se on kirjoitettu näin:

Tässä minun kuviani!!

Kuten luultavasti ymmärsit, primer.html on toisen html-dokumenttimme nimi ja teksti "Tässä ovat minun valokuvani!!" tämä on tekstinpätkä index.html-tiedostosta.

Analogisesti kuvien kanssa tunniste Linkkipolku avattavaan asiakirjaan määritetään samoilla menetelmillä:

Tässä minun kuviani!! - Tämä merkintä tarkoittaa, että hakemistossa, jossa ensimmäinen html-dokumenttimme sijaitsee, on stranica-kansio, jossa primer.html-tiedosto sijaitsee
Tässä minun kuviani!! - Tämä tarkoittaa, että primer.html-tiedosto sijaitsee yhden tason ylempänä asiakirjasta
Tässä minun kuviani!! - asiakirja sijaitsee verkkosivustolla www.site.ru..

No, kokeillaan? Alla on esimerkki kahdesta dokumentista, jotka sisältävät toisiinsa osoittavia linkkejä.

Index.html-tiedosto:

Linkin tekeminen tekstiin





Kerro minulle, rakas lapsi: missä korvassa se surina?


Oikealla vai vasemmalla?



Primer.html-tiedosto:

Seurasi linkkiä täällä





Mutta en arvannut oikein! Mulla surina molemmissa korvissa.


No, en pelaa noin...

Esimerkistä näet, että linkit on korostettu väreillä, oletuksena sininen on linkki ja punainen on jo vierailtu linkki, näitä värejä voidaan muuttaa meille jo hyvin tutulla avaustunnisteella< body >ja sen ominaisuudet.

linkki - linkin väri.
alink - napsautetun aktiivisen linkin väri.
vlink - vieraillun linkin väri.

Se on kirjoitettu näin:

Jatkettaessa puhetta tekstilinkin väristä, on syytä mainita, että voit tarvittaessa pakottaa sekä koko linkin että sen yksittäiset osat (lauseet, sanat, kirjaimet) korostamaan värillä tutulla tunnisteella ja sen värillä attribuutti. Tämä ei kuitenkaan koske vain värejä, vaan voit myös asettaa tekstin koon, tyylin ja fontin erikseen. Muista kuitenkin, että värinkäsittely on tehtävä tunnisteen sisällä tässä eikä yli laidan, muuten linkin väri on joko oletusarvoisesti tai tunnisteessa määritettynä

Index.html-tiedosto:

Sateenkaari



Katso lause, joka auttaa sinua muistamaan sateenkaaren värien paikat


R
A
D
U
G
A




Primer.html-tiedosto:

Sateenkaari




Joka
metsästäjä
toiveita
tietää
Missä
istuu
fasaani



Palaa pääsivulle

Sivuston yhden sivun nimi on oltava index.html. Robottiohjelma etsii tämännimistä tiedostoa verkkosivustoltasi, kun henkilö kirjoittaa verkkosivustosi nimen. Koska index.html-sivu avataan ensin, tee siitä pääsivu. Voit kutsua muita sivuja miksi haluat... nimissä ei ole enää vivahteita.

Tietoja rekisteristä... Kun kirjoitat dokumenttien polkua ja nimiä, muista, että esimerkiksi: Sivu.html, sivu.html ja SIVU.html ovat eri dokumenttien nimiä! Sama koskee kirjanmerkkien ja kuvien nimiä. Harkitse aina kirjainkokoa koodia kirjoittaessasi; on suuri todennäköisyys, että selain ei tunnista tällaisia ​​nimiä. Tee säännöksi kirjoittaa ja kutsua kaikkea pieneksi latinalaisilla kirjaimilla, silloin inhimillisten tekijöiden ja ohjelmien oikkujen riski pienenee nollaan.

Kolmen napsautuksen sääntö...

Yritä muodostaa "linkkipuu" siten, että sivuston vierailija pääsee miltä tahansa sivulta mihin tahansa sivuston paikkaan mahdollisimman pienellä määrällä klikkauksia. Yli kolme siirtymistä haluttuun paikkaan sivulla ei ole enää hyvä.Ihmiselle tarpeettomien sivujen loputon lataaminen voi johtaa hermoromahdukseen ja sivuston ennenaikaiseen sulkemiseen. Säästä ihmisten aikaa, rahaa ja hermoja.

HTML-dokumentin pääominaisuus on hyperlinkkien (tai yksinkertaisesti linkkien) läsnäolo muihin asiakirjoihin, sivustoihin, tiedostoihin, kuviin jne. Internetistä on tullut niin suosittu kyky lisätä linkkejä sivun ulkopuolisiin objekteihin. ja kätevä käyttää. Siksi, kun luot verkkosivustoasi, muista aina linkkien "taika".

Tällä oppitunnilla puhumme linkin luomisesta verkkosivustolle, sen yksittäiselle sivulle tai tiedostoon. Opit kuinka muuttaa linkin tekstiä, miten se avataan uuteen ikkunaan, miten linkitetään kuvaan, mitä ulkoiset ja sisäiset linkit ovat ja paljon muuta. Lisäksi sinulla on jo tietoa linkkien kanssa työskentelystä, jota käsittelimme aiemmilla oppitunneilla (keskustelimme esimerkiksi siitä, kuinka voit muuttaa linkin väriä).

Kaiken kaikkiaan tämä opetusohjelma tekee ymmärryksesi linkkien luomisesta täydellisen ja riittävän. Ymmärrät kuinka luoda hyperlinkki HTML-kielellä ja miksi. Ja opit hallitsemaan sen ominaisuuksia.

Ehdot § 1. Linkki tiedostoon, linkki sivustolle, linkki sivulle

Lukuisat kysymykset siitä, kuinka linkki tiedostoon eroaa linkistä sivustolle tai sen yksittäiselle sivulle, pakotti minut esittämään vastauksen tähän oppitunnin alussa. Vastaus on: ei mitään. Kaikki luetellut linkit ovat alkuperäisen sivun ulkopuolisia ja luodaan samalla tavalla.

Jotta ajatukseni eivät pääse valloilleen, näytän sinulle kaiken esimerkin avulla.

Selaimessa näemme tämän:

Selaimessa näemme tämän:

Kuten näet, kaiken tyyppiset linkit luodaan täsmälleen samalla tavalla. Ainoa ero on viitattavan kohteen osoite. Siirrytään nyt oppitunnin pääosaan.

§ 2. Ulkoisten linkkien luominen

Linkit eroavat toisistaan ​​ulkoisiin ja sisäisiin sekä tekstiin ja grafiikkaan. Ulkoiset linkit johtavat html-sivun ulkopuolelle, sisäiset linkit saman sivun eri osiin. Tekstilinkit ovat tekstiä (oletusarvoisesti se on korostettu sinisellä ja alleviivattu), ja graafiset linkit sisältävät kuvan objektina, jota sinun on napsautettava päästäksesi siihen. Kaikki tämäntyyppiset linkit luodaan HTML-kielellä tagilla (lyhenne sanoista ankkuri). Katsotaanpa sitä tarkemmin.

Jos haluat luoda ulkoisen linkin sivustoon, sivuun tai tiedostoon, käytä href-tunnisteattribuuttia. Tämä attribuutti ottaa arvokseen sivuston, sivun tai tiedoston URL-osoitteen (keskustelimme tästä edellä). Tunnisteiden välissä on linkin näkyvä osa (linkkiankkuri), eli se, mitä näemme selaimen näytöllä. Linkkiankkuri voi olla joko pelkkää tekstiä (tekstilinkki) tai graafinen kuva(linkki-kuva). Kuvalinkki luodaan lisäämällä tuttu tunniste tunnisteiden ja väliin. Yleensä linkin luomisen syntaksi näyttää tältä:

Jos haluat esimerkiksi luoda tekstilinkin tämän sivuston kotisivulle, sinun on kirjoitettava seuraava HTML-koodi:

http://www.seoded.ru/">Sivuston verkkosivuston pääsivu

Selaimessa se näyttää tältä:

Kuten kirjoitin aivan tämän oppitunnin alussa, linkkitekstin (ankkurin) väriä voidaan muuttaa käyttämällä . Yleensä linkkien tekstiin voi soveltaa samoja sääntöjä kuin sivun päätekstiin, eli korostaa sitä lihavoidulla, kursiivilla, käyttää otsikoita jne.

§ 2.1 Graafiset linkit (kuvalinkit)

Kuten edellä sanoin, kuvalinkin luomiseksi sinun on käytettävä . Esimerkki tällaisesta linkistä näyttää tältä:

Ja selain näyttää:

Oletusarvoisesti selain ympäröi kuvan graafisessa linkissä kehyksen kanssa. Jos tätä ei haluta, IMG-tunnisteen border-attribuutiksi tulee asettaa 0:

border="0">

Kotisivu

§ 3. Sisäiset linkit

Sisäisiä linkkejä käytetään mukavasti navigointiin paljon sisältöä sisältävillä sivuilla. Heidän avullaan tein "Oppitunnin sisällön" (katso tämän sivun alussa). Sisäiset linkit luodaan samalla periaatteella kuin ulkoiset linkit. Vain href-attribuutin arvo määrittää linkin "ankkurin". "Ankkuri" luodaan name-attribuutilla:

name="ankkurinimi">teksti

Ja "ankkurin" nimi asetetaan mielivaltaisesti. Tässä on syytä sanoa, että kaikki selaimet eivät ymmärrä "ankkurien" venäläisiä nimiä, joten suosittelen latinalaisten aakkosten käyttöä. Tunnisteiden välissä olevaa tekstiä "ankkurin" luomiseksi ei vaadita, eikä sitä useimmiten määritetä.

"Olen tuhkarokko" sijaitsee sivulla niissä paikoissa, joihin käyttäjän tulee mennä linkkiä napsautettuaan.

Kuten edellä sanoin, sisäisen linkin href-attribuutissa osoitteen sijasta halutun "ankkurin" nimi on merkitty pakollisella hash-symbolilla (#) sen edessä. Katsotaanpa sitä esimerkin avulla.

Loin "ankkurin" nimeltä zagolovok ja sijoitin sen sivukoodiin tämän oppitunnin otsikon (Hyperlinkit HTML:ssä) viereen. Ankkurikoodi on seuraava:

name="zagolovok">

href="#zagolovok">Otsikkoon

Ja selaimessa näin:

Jos huomasit, että napsautat otsikon sisäistä linkkiä, selaimen osoiterivin URL-osoite muuttui:

Alkuperäiseen osoitteeseen:

http://www..html

http://www..html#zagolovok

Ja käyttämällä tätä ominaisuutta, voit linkittää tiettyyn sijaintiin sivulla mistä tahansa Internetin resurssista! Oletetaan, että loit sivun, jolla on pitkä artikkeli jostakin (tai olet julkaissut sivulle suuren määrän valokuvia) ja merkitsit sen sisäisillä linkeillä. Kun olet kohteessa , sinun ei tarvinnut linkittää vain artikkelin (tai valokuvien) sivulle, vaan tiettyyn paikkaan siinä (tai tiettyyn valokuvaan). Käyttämällä vaihtoehtoa, jossa on sisäinen linkki osoitteessa, voit helposti saavuttaa tarvitsemasi.

§ 4. Absoluuttiset ja suhteelliset viittaukset

Kotisivu

Mutta suhteellisilla linkeillä se on hieman monimutkaisempaa. Tällaisissa linkeissä osoite ilmoitetaan joko suhteessa sivuston juurikansioon (se, jossa pääsivu sijaitsee) tai suhteessa lähdesivuun. Tällaisia ​​linkkejä tarvitaan esimerkiksi, jos sivusto sijaitsee osoitteessa kotitietokone. Tai tämä ei ole sivusto, vaan sivu, joka on osoitin muihin asiakirjoihin.

Oletetaan, että meidän on viitattava sivulle klienty.html, joka on samassa kansiossa kotisivu sivusto. Sitten suhteellinen linkkikoodi näyttää tältä:

/klienty.html">Asiakkaat

Oletetaan nyt, että samassa kansiossa pääsivun kanssa on zakazy-kansio ja klienty.html-sivu on jo siinä. Sitten suhteellisesta linkkikoodista tulee tällainen:

/zakazy/klienty.html">Asiakkaat

Katsotaanpa nyt hyperlinkkien luomista suhteessa lähdesivuun. Oletetaan, että meillä on sivu hinta.html (lähdesivu) ja siitä meidän on linkitettävä sivulle klienty.html. Siellä on seuraavat tyypilliset vaihtoehdot:

1. Sivut hinta.html ja klienty.html sijaitsevat samassa kansiossa.

klienty.html">Asiakkaat




2. sivuston juurikansiossa hinta.html-sivu sijaitsee zakazy-kansiossa yhden tason ylempänä).

Koodi näyttää tältä:

../klienty.html">Asiakkaat

Kaksi pistettä osoittavat, että sinun on siirryttävä nykyisestä kansiosta korkeammalle tasolle.




3. Klienty.html-sivu ja zakazy-kansio sijaitsevat sivuston juurikansiossa, mebel-kansio on zakazy-kansiossa, hinta.html-sivu on mebel-kansiossa (eli klienty.html-sivu suhteessa kohteeseen alkuperäinen price.html-sivu on kaksi tasoa korkeampi ).

../../klienty.html">Asiakkaat

Toisin sanoen jokainen taso on merkitty kahdella pisteellä ja kauttaviivalla "/".




4. sivuston juurikansiossa klienty.html-sivu on zakazy-kansiossa (eli nyt klienty.html-sivu suhteessa alkuperäiseen price.html-sivuun on yhden tason alempana).

zakazy/klienty.html">Asiakkaat

Tässä tapauksessa pisteitä ja kauttaviivoja ei käytetä.




5. Price.html-sivu (alkuperäinen sivu) ja zakazy-kansio sijaitsevat sivuston juurikansiossa, mebel-kansio on zakazy-kansiossa, klienty.html-sivu on mebel-kansiossa (eli nyt klienty .html-sivu on suhteessa alkuperäiseen hintaan.html-sivu sijaitsee kaksi tasoa alempana).

zakazy/mebel/klienty.html">Asiakkaat




6. Sivuston juurikansiossa on kaksi kansiota: zakazy ja oplata. Klienty.html-sivu on zakazy-kansiossa, alkuperäinen hinta.html-sivu on oplata-kansiossa (eli molemmat sivut ovat eri kansioissa yhden tason sivuston juurikansion alapuolella).

../zakazy/klienty.html">Asiakkaat

§ 5. Linkki sähköpostiin

Jotta voit luoda linkin sähköpostiin, sinun on korvattava href-attribuutin arvossa oleva URL-osoite protokollaa osoittavalla sähköpostiosoitteella (mailto:). Ja sitten kun napsautat tätä linkkiä, ikkuna avautuu sähköpostiohjelma Vastaanottaja-kenttään syötetyllä sähköpostiosoitteella. HTML-koodissa se näyttää tältä:

mailto: [sähköposti suojattu]">postini

Ja selaimessa se on niin.

Hei rakkaat blogisivuston lukijat! Kuten tiedät, verkkosivuston menestyksekkääksi mainostamiseksi ja sen aseman parantamiseksi hakutuloksissa on välttämätöntä suorittaa verkkosivuston laadukas SEO-optimointi. Käsite "", joka puolestaan ​​​​jaetaan sisäiseen ja ulkoiseen, liittyy erottamattomasti sellaisiin käsitteisiin kuin "sisäiset ja ulkoiset sivustolinkit". Siksi meille on erittäin tärkeää tietää kuinka monta linkkiä sivustolla tulisi olla, kuinka tarkistaa niiden lukumäärä, kuinka poistaa tarpeettomat linkit sivustolta ja estää niiden indeksointi, kuinka lisätä linkkien massaa jne. Jotta voimme vastata kaikkiin näihin ja muihin sisäisiä ja ulkoisia linkkejä koskeviin kysymyksiin, ymmärrämme ensin, mikä linkki (tai hyperlinkki) on HTML:ssä.

Tässä artikkelissa kerron sinulle, mikä linkki on, kuinka tehdä hyperlinkki HTML-kielellä verkkosivustolle, kuinka avata linkki uuteen ikkunaan, miten luodaan linkki sähköpostiosoitteeseen (sähköpostiin) ja miten laita linkki kuvaan. Käsittelemme myös sellaisia ​​käsitteitä kuin html-tunnisteet ja hyperlinkkiattribuutit, linkkiankkuri, html-ankkuri ja hash-linkit. Joten aloitetaan.

Mikä on linkki (hyperlinkki).

Jos hyperlinkki johtaa verkkosivulle tai tiedostoon, jota ei ole olemassa (poistettu, siirretty) tai sen osoite on virheellinen, tällaista linkkiä kutsutaan rikkinäiseksi linkiksi. Sivustolla ei saa olla rikkinäisiä linkkejä, koska ne johtavat kävijöitä harhaan, ja linkkiä napsautettuaan henkilö ei todennäköisesti palaa sivustollesi. Puhumme enemmän siitä, miksi rikkinäiset linkit näkyvät, kuinka ne voidaan löytää ja korjata, erillisessä artikkelissa. Nyt jatketaan.

Linkin (hyperlinkin) tekeminen HTML-kielellä verkkosivustolle.

On erittäin helppoa linkittää toiselle sivulle omalla tai toisella sivustolla. Hyperlinkin luomiseksi sinun on kerrottava selaimelle, mikä linkki on, ja ilmoitettava sen asiakirjan osoite, johon se johtaa. Tämä tehdään HTML-tunnisteen avulla ja pakollinen href-attribuutti:

Tässä URL on sen asiakirjan osoite, johon siirrytään. Ja tunnisteiden välissä oleva hyperlinkkiteksti Ja, kutsutaan linkkiankkuriksi ja se näkyy verkkosivun vierailijalle. Sen lisäksi, että linkkiteksti (ankkuri) kertoo lukijalle, mihin siirtymä tehdään, se on myös erittäin tärkeä hakukoneoptimoinnissa (SEO), koska se on yksi sivustosi sijoitukseen vaikuttavista tekijöistä. tämän ankkurin sisältämille avainsanoille. Tyypillisesti tämäntyyppistä sijoitusta kutsutaan linkkisijoitukseksi.

Ehdoton linkki

Niitä käytetään osoittamaan asiakirjaan toisella sivustolla (link is external).

On myös mahdollista tehdä absoluuttisia linkkejä yhden sivuston sisällä, mutta sisäisten linkkien luomiseen on oikeampaa käyttää suhteellisia osoitteita, jotka näyttävät lyhyemmiltä. Mutta kun analysoin eri sivustoja, huomasin, että suurin osa verkkovastaavista luo sisäisiä linkkejä absoluuttisilla osoitteilla. Tällä on etunsa, koska jos sivusi kopioidaan, saat tällä tavalla toimivia käänteisiä linkkejä.

Kuten näet, absoluuttisilla linkeillä kaikki on yksinkertaista. Suhteellisten kanssa se on vaikeampaa, koska niitä luodessasi sinun on ymmärrettävä, mikä href-attribuutin arvo tulee määrittää, koska se riippuu asiakirjojen alkuperäisestä sijainnista. Kuten jo sanoin, kukaan ei todellakaan vaivaudu tähän ja tekee kaikista sivuston linkeistä absoluuttisia. Jos olet kuitenkin kiinnostunut oppimaan lisää suhteellisten linkkien luomisesta verkkosivustolle, voin suositella artikkelia Dmitryltä, blogin ktonanovenkogo.ru kirjoittajalta. En ole koskaan nähnyt yksityiskohtaisempaa ja ymmärrettävämpää selitystä.

Näytän sinulle esimerkiksi, miltä sivuston juureen liittyvään tiedostoon johtava linkki näyttää (leikkasimme yksinkertaisesti kaiken kolmannen vinoviivan vasemmalla puolella samanlaisessa absoluuttisessa linkissä):

Suhteellinen viittaus

Pääasiaan

Linkin teksti (ankkuri)

Ponnahdusikkunan tekstin värit ja muotoilu riippuvat vain asetuksista käyttöjärjestelmä ja selain.

Kuinka avata linkki uuteen ikkunaan.

Oletuksena, kun napsautat linkkiä, uusi asiakirja avautuu nykyiseen ikkunaan. Tämä ei kuitenkaan ole minulle henkilökohtaisesti kätevää verkkosivustoja selaillessani. Kun luet artikkelia ja seuraan linkkiä, minulle on kätevää, että sivu avautuu uuteen ikkunaan ja voin jatkaa edellisen artikkelin lukemista milloin tahansa. Toinen syy avata linkki uudessa ikkunassa on se, että kun siirryt jonkun muun sivustolle, on suuri todennäköisyys, että lukija ei palaa takaisin. Varsinkin jos hän tekee useita siirtymiä eikä yksinkertaisesti muista, missä hän oli muutama minuutti sitten.

Tunnisteen target-attribuutti auttaa meitä avaamaan linkin uuteen ikkunaan . Oletuksena sillä on arvo _self , jota ei yleensä määritellä. Jos haluat avata asiakirjan uudessa ikkunassa, muuta kohdeattribuutin arvoksi _blank:

1	Uusi ikkuna

Uusi ikkuna

Mitä sinun tulee tehdä, jos vieraillessasi jonkun muun sivustolla, jossa linkit avautuvat nykyisessä ikkunassa, haluat avata ne uudessa ikkunassa? Sinun tarvitsee vain napsauttaa niitä ei painikkeella, vaan hiiren rullalla. Tässä tapauksessa uusi sivu avautuu uuteen ikkunaan.

Kuinka tehdä linkki sähköpostiin (sähköpostiosoite).

Napsauta tätä linkkiä, jolloin ohjelma avautuu työskentelyä varten sähkopostilla oletuksena asennettuna, jossa Vastaanottaja-kenttä on jo täytetty. Jotta kirjeen aihe täytetään automaattisesti, sinun on tehtävä linkki tämän tyyppiseen sähköpostiin:

Dmitry KtoNaNovenkogo neuvoo toista tapaa asettaa kirjanmerkit verkkosivun tekstiin ilman html-ankkureita. Tätä varten teemme kirjanmerkin mistä tahansa sivulla saatavilla olevasta HTML-tunnisteesta ja määritämme sille universaalin id-attribuutin. Laitetaan esimerkiksi h3-otsikkotunniste kirjanmerkkeihin:

Otsikkoteksti

On tärkeää sisällyttää latinalainen kirjain id-attribuutissa ankkurin nimen ensimmäiseksi merkiksi, jolloin voit käyttää muita sallittuja merkkejä.

Palataanpa esimerkiksi takaisin otsikkoon " " ja jatketaan sitten.

Voit käyttää hash-linkkejä siirtyäksesi haluttuun paikkaan, ei vain yhdellä sivulla, vaan myös siirtyäksesi sivuston toiselle sivulle. Tätä varten asetamme html-ankkurin oikeaan paikkaan oikealla sivulla ja itse hash-linkissä kirjoitamme tämän sivun osoitteen hash-symbolin eteen. Esimerkiksi:

Linkitä teksti html-ankkurikirjanmerkkiin

Hyperlinkkien tyypit ja värit HTML:ssä.

• Vierailematon linkki on sininen ja alleviivattu.
• Aktiivinen linkki - muuttuu punaiseksi linkkiä hiiren napsautuksen ja uuden sivun latauksen alkamisen välisenä aikana. On selvää, että hän on tässä tilassa vain lyhyen aikaa.
• Vierailtu linkki – muuttaa värinsä violetiksi napsautettuaan sitä.

Voit muuttaa HTML-dokumentin hyperlinkkien väriä käyttämällä tunnistetta ja sen seuraavia määritteitä:

• Linkki – vierailemattomien linkkien väri.
• Alink – aktiivisen linkin väri.
• Vlink – vierailtujen linkkien väri.

Kaikki yllä olevat attribuutit voidaan yhdistää:

1

Toivon, että nyt on selvää, kuinka luodaan hyperlinkki HTML-sivulle ja sähköpostiin, miten kuvasta tehdään linkki, mitä ovat tekstiankkurit, hash-linkit ja html-ankkurit, mitä ovat html-tunnisteet ja linkkiattribuutit. Yritin parhaani mukaan kertoa yksityiskohtaisesti, mitä HTML-linkit ovat ja mitä ne ovat. Haluan muistuttaa, että hyperlinkkien lisääminen tekstiin tapahtuu vain HTML-tilassa.

En ole koskaan aiemmin kirjoittanut näin pitkiä artikkeleita, yli 10 000 merkkiä. Mutta tämä ei ole linkkien aiheen loppu, jatketaan.

Jos tästä artikkelista oli sinulle hyötyä, napsauta alla olevia sosiaalisen median painikkeita. Nähdään taas sivuilla!

Hyvää päivää kaikille, rakkaat ystäväni ja lukijani. Toivon, että olet päättänyt osallistua kilpailuun ja kirjoitat jo blogimatkastasi. No, haluaisin jatkaa html-kielen tutkimusta ja tänään haluaisin kertoa teille yhdestä tärkeimmistä komponenteista, nimittäin hyperlinkeistä.

Kyllä, ilman tällaisia ​​hyperlinkkejä Internet ei olisi niin kätevä. Ei, minä valehtelen. Navigointi ei olisi ollenkaan helppoa. Voitko kuvitella Internetiä ilman niitä? Minä henkilökohtaisesti en.

Ja tänään opimme lisäämään hyperlinkin html:ään. Mutta ensin haluaisin kysyä sinulta: Tiedätkö, mitä hyperlinkki edes on ja miten se eroaa tavallisesta linkistä? Täällä kaikki on itse asiassa yksinkertaista: linkki on yksinkertainen tieto, joka viittaa asiakirjaan. Samalla et voi napsauttaa tätä tekstiä (mitään ei tapahdu), mutta tiedät mistä etsiä tietoa.

Esimerkki: Voit selvittää hiusten korostamisen Photoshopissa osoitteessa //site/adobe-photoshop/kak-vydelit-volosy/

Hyperlinkki on sama teksti, vain sen ydin on, että voit napsauttaa tätä tekstiä ja päästä halutulle sivulle, sivustolle tai muulle objektille. Lisäksi itse teksti voi olla mitä tahansa, kun taas osoite kirjoitetaan erikseen sisällä ja voi olla täysin erilainen. Mutta olipa asia miten oli, puhekielessä niitä kutsutaan edelleen yksinkertaisesti linkeiksi. Tässä on esimerkki hyperlinkistä:

Voit lukea yhdestä opetusohjelmastani kuinka korostaa hiuksia oikein Photoshopissa.

Joka tapauksessa. Hyvä teoria. Nyt siirrytään harjoitteluun ja katsotaan, ketkä ovat vastuussa kaikista näistä asioista.

Parillinen tagi on vastuussa hyperlinkistä, mutta se ei sinänsä edusta mitään. Se menee aina attribuutin yhteydessä. Ja tässä tapauksessa meidän on kirjoitettava jatkuvasti tämä sama href. Attribuuttiarvoon laitamme linkin itse haluttuun resurssiin. Ja itse sisältöön kirjoitamme itse tekstin, josta pitäisi tulla napsautettava (toimii napsautettuna). Katso esimerkkiä ja uskon, että ymmärrät kaiken.

Yandex hakukone

Kuten ymmärrät, tässä esimerkissä kirjoitin, että kun napsautat tekstiä "Yandex-hakukone", henkilö ohjataan href-attribuutin arvoon kirjoitettuun osoitteeseen.

Luulen, että monet teistä tietävät, että on olemassa sisäisiä ja ulkoisia linkkejä. Sisäiset linkit suoritetaan yhdessä hakemistossa, eli sivustossa, ja ulkoiset linkit johtavat johonkin kolmannen osapuolen resurssiin. Ja nyt näytän sinulle, kuinka tehdä molemmat.

Sisäiset siirtymät Tiedosto samassa kansiossa

Mutta tällainen siirto toimii, jos tiedosto, johon linkität, sijaitsee samassa kansiossa kuin tiedosto, johon linkität. Muissa vaihtoehdoissa kaikki on hieman erilaista.

Tiedosto toiseen kansioon

Avaa pushkin.html-tiedosto Notepad++:ssa

Etsi nyt sana valokuva ja kääri se tunnisteisiin.

Nyt huomio! Attribuuttiarvossa määritetään polku suhteessa muokattavaan tiedostoon eli itse pushkin.html. Sinun pitäisi päätyä johonkin tämän kaltaiseen:

Kuva

Mitä olemme nyt tehneet? Ja teimme seuraavaa: koska kuvan polku on erillisessä img-kansiossa, joka sijaitsee samassa kansiossa kuin pushkin.html-tiedosto, niin attribuutin arvoon on ensin kirjoitettava kansion nimi ja sitten kauttaviivalla (/) asiakirjan koko nimi (tapauksessamme valokuvat).

Tallenna ja suorita pushkin.html-tiedosto selaimessasi. Näet, että sana "Photo" on korostettu sinisellä ja siitä on tullut napsautettavaa, mikä tarkoittaa, että tätä linkkiä napsauttamalla pääsemme tiedostoon fofo.jpg, joka sijaitsee img-kansiossa.

Niin miten? Kaikki kunnossa? Jos jotain tapahtuu, älä epäröi kysyä.

Ulkoiset siirtymät

Ja tietysti emme voi olla mainitsematta ulkoisia linkkejä, joiden napsautuksen jälkeen meidät ohjataan täysin eri sivustolle. Mutta tässä ei ole mitään monimutkaista. Koko pointti on, että lisäät sivuston tai verkkosivun täydellisen osoitteen href-arvoon. Esitin yllä esimerkin Yandexin kanssa. Mutta tässä toinen esimerkki:

Opiskelen sosiaalisten projektien mestariksi.

Tästä pääsemme tietyn sivuston tietylle sivulle.

Avautuu uuteen ikkunaan

Oletusarvoisesti, kun napsautat linkkiä, dokumentti avautuu samaan ikkunaan kuin sivusi, ts. sivusi sulkeutuu. Ja tämä ei ole hyvä. Erityisesti mainostetuissa sisältöprojekteissa tai blogeissa on suositeltavaa, että kun napsautat linkkiä, asiakirja avautuu uuteen ikkunaan tai välilehteen sulkematta sivuasi.

Kohde-attribuutti, jonka arvo on "_blank", auttaa meitä tässä. Tässä ei ole mitään monimutkaista. Sinun tarvitsee vain lisätä tämä avaustunnisteen sisään href-attribuutin arvon jälkeen. Otetaan se ote tiedostosta lukomorye.html, jossa teimme linkin pushkin.html-sivulle, mutta nyt kirjoitamme juuri tämän määritteen. Sen pitäisi näyttää tältä:

Runosta Ruslan ja Ljudmila (Kirjoittaja - A.S. Pushkin)

No, tässä kaikki on selvää. Nyt kun napsautat sisältöä, haluttu sivu avautuu uuteen ikkunaan. Tämä asia on erittäin tarpeellinen, koska jos et rekisteröi sitä, käyttäjä yksinkertaisesti poistuu sivultasi. Ja niin joka tapauksessa hän pysyy siinä vain, jos hän ei sulje sitä erikseen. Yritä tehdä kaikki itse, tee vain kaikesta kaunista omin käsin. Ei tarvitse kopioida ja liittää.

Jotenkin näin. Näyttää siltä, ​​​​että olen kertonut sinulle kaikki tärkeimmät asiat, mutta jos haluat siirtyä tähän suuntaan ja oppia HTML:ää ja CSS:ää luodaksesi ammattimaisia ​​verkkosivustoja, blogeja ja jopa verkkokauppoja, muista katsoa erinomainen videokurssi tästä aiheesta. Oppitunnit ovat todella erinomaisia ​​ja ne on todella kerrottu ihmisille, jotka ovat vielä vähän perehtyneet verkkosivustojen rakentamiseen tai eivät ole perehtyneet ollenkaan.

No, tämä päättää tämän päivän oppituntimme. Toivon, että pidit artikkelistani ja olet iloinen, jos sinusta tulee vakiolukijani. Älä siis unohda tilata blogini päivityksiä, jotta et jää paitsi mistään mielenkiintoisesta. No, toivon sinulle menestystä kaikissa pyrkimyksissäsi. Hei hei!

Terveisin Dmitri Kostin.