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 miten linkitän html:ssä. Linkkejä käytetään hyvin usein verkkosivustoilla, niiden avulla voit navigoida sivuston sivulta toiselle. Linkkien ominaisuus on, että ne voivat johtaa verkkosivun lisäksi myös tiedostoihin, kuviin jne.
Linkit voivat olla sisäisiä tai ulkoisia. Sisäiset linkit ohjaavat saman sivuston sivuille ja tiedostoille. Ulkoiset linkit johtavat kolmannen osapuolen sivustoille, asiakirjoihin ja tiedostoihin. Samanaikaisesti tämäntyyppiset linkit asetetaan käytännössä samalla tavalla.
Linkin tekeminen HTML:ään, esimerkkejä
1. HREF— vastaa siitä, minne linkin tulee johtaa. Vakiolinkki määritellään seuraavasti: Linkin teksti.
2. KOHDE— vastaa ikkunasta, jossa asiakirja avataan. Oletus uusi asiakirja avautuu nykyiseen selainikkunaan. "Target"-attribuutilla 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. Punnan merkkiä seuraa avainsana (kirjanmerkki tai etiketti) lainausmerkeissä. Siirry tähän tarraan käyttämällä linkkiä, johon tämä tarra on kirjoitettu.
Esimerkki ulkoisesta linkistä Siirry sivustolle
Siirry sivustolle
Ilmaiset WordPress-tunnit
Esimerkki 4: Kuvat linkkeinä.
Esimerkkikuva linkkinä
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 ohjaa sivun tietylle alueelle.
Lataa tiedosto
Kirjoittaa kirjettä
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 on vierailtu linkki, oletuksena violetti.
Esimerkki linkin väristä ...
Näin ollen selvitimme, kuinka linkit luodaan HTML:ssä. Linkkejä voidaan muokata. Näet sen oppitunnilla klikkaamalla linkkiä.
Luulen, että ymmärrät jo mitä keskustellaan tässä luvussa.. ja tiedät mikä linkki on, jos ei, napsauta tästä.. Linkkejä on useita, samoin kuin "mekanismeja" niiden seuraamiseen. Tässä luvussa yritän kertoa sinulle yksityiskohtaisesti linkkien rekisteröinnistä sekä omistautua niiden kanssa työskentelyn monimutkaisuuteen.
Lyyrinen poikkeama:
Kerran armeijassa esikuntapäällikkö tuli luokseni ja antoi käskyn, lainaan:
Tuo minulle se asiakirja, vaikka en tiedä missä ja mikä se on!! Mitä seisot? Juostaan!! Olen myöhässä!!!
Joten miksi olen niin, että selain, kuten minä silloin, ei lankea umpikujaan, sen on tiedettävä: asiakirjan tarkka nimi, polku asiakirjaan ja paikka, minne se tuodaan, tai pikemminkin minne avataksesi sen.
Päällä Tämä hetki notepadilla loimme vain yhden HTML-dokumentin, minulla on se nimellä index.html (miksi valitsin niin oudon nimen index.html ja miksi minun pitää katsoa) En tiedä millä, sinä itse keksit nimen, mutta luulen, että muistat ja tiedät missä se sijaitsee, ellet tietenkään ole kansliapäällikköni :). Tässä asiakirjassa yritämme luoda linkin toiseen asiakirjaan, jota meillä ei vielä ole .. Joten ennen kuin viittaat siihen, sinun on luotava se, kiitos, että tiedät sen jo.
- Avaa muistilehtiö.
- Kirjoitamme koodin html kieli. Esimerkiksi sivu, jolla on useita kuvia.
- Tallennamme sen html-sivuna samaan työkansioon, jossa ensimmäinen luomamme dokumentti on jo olemassa. Kutsutaan sitä primer.html:ksi ja ehkä myös 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ä lisäoppimista varten.
Tekstilinkit.
Tutustu tunniste (ankkurista - ankkuri), 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 kuvatunnisteen kanssa
linkkipolku avattavaan dokumenttiin kirjoitetaan samalla tavalla:
Tässä minun kuviani!!- Ja tämä tarkoittaa, että primer.html-tiedosto sijoitetaan yhden tason ylemmäs asiakirjasta
Tässä minun kuviani!!- asiakirja sijaitsee verkkosivustolla www.site.ru..
No yritetäänkö? Alla on esimerkki kahdesta asiakirjasta kerralla, joihin on rekisteröity toisiinsa osoittavat linkit.
index.html-tiedosto:
Kerro minulle, rakas lapsi: missä korvassani surina?
SISÄÄN laki tai vasemmalle?
primer.html-tiedosto:
Esimerkki osoittaa, 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.linkki- 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 värin korostamaan sekä koko linkin että sen yksittäiset osat (lauseet, sanat, kirjaimet) tutulla tunnisteella. ja sen ominaisuus väri. Tämä ei kuitenkaan koske vain värejä, vaan myös erikseen voit määrittää tekstin koon, tyylin ja fontin. 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 tagissa kirjoitettuna
index.html-tiedosto:
link="#008000" alink="#ff0000" vlink="#ffff00">
Etsi lause, joka auttaa sinua muistamaan sateenkaaren värien paikat.
R
A
D
klo
G
A
primer.html-tiedosto:
link="#008000" alink="#ff0000" vlink="#ffff00">
Joka
metsästäjä
toiveita
tietää
Missä
istuu
fasaani
Palaa pääsivulle
Yksi sivuistasi sivustollasi Välttämättä pitäisi kutsua index.html Robottiohjelma etsii sivustollasi olevan tämännimisen tiedoston, kun henkilö kirjoittaa sivustosi nimen. Sivusta lähtien index.html avautuu ensin, tee siitä tärkein. Voit kutsua muita sivuja miksi haluat ... nimissä ei ole enää vivahteita.
Tapauksesta Polun ja dokumentin nimiä kirjoittaessasi muista, että esim. Sivu.html, sivu.html ja SIVU.html ovat eri dokumenttien nimiä! Sama koskee kirjanmerkkien nimiä ja piirustuksia. Käytä aina kirjainkoolla, kun kirjoitat koodia, sillä on suuri mahdollisuus, että tietty selain ei tunnista tällaisia nimiä. Tee säännöksi kirjoittaa kaikki ja kutsua sitä pieneksi latinalaisilla kirjaimilla, silloin inhimillisen tekijän ja ohjelmien oikkujen riski pienenee nollaan.
Kolmen napsautuksen sääntö.
Yritä muodostaa "linkkipuu" siten, että sivuston vierailija pääsee kaikilta sen sivuilta mihin tahansa sivuston paikkaan mahdollisimman pienellä klikkausmäärällä. Yli kolme siirtymistä oikeaan paikkaan sivustolla ei ole enää hyvä .. Sivujen loputon lataaminen, joita henkilö ei tarvitse, voi johtaa hermoromahdukseen ja sivuston ennenaikaiseen sulkemiseen. Säästä ihmisten aikaa, rahaa ja hermoja.
HTML-dokumentin pääominaisuus on, että se sisältää hyperlinkkejä(tai yksinkertaisesti linkkejä) muihin asiakirjoihin, sivustoihin, tiedostoihin, kuviin jne. Se oli kyky lisätä linkkejä sivuille sen ulkopuolella oleviin objekteihin, mikä teki Internetistä niin suositun ja kätevän käyttää. Siksi, kun luot sivustoasi, muista aina linkkien "taika".
Tällä oppitunnilla puhumme miten linkki luodaan sivustolle, sen erilliselle sivulle tai tiedostoon. Opit kuinka muuttaa linkin tekstiä, miten se avataan uuteen ikkunaan, miten linkistä tehdään kuva, 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 linkin värin muuttamisesta kohdassa ).
Yleisesti ottaen tämä oppitunti tekee ideastasi linkin rakentamisesta täydellisen ja riittävän. Ymmärrät kuinka luoda hyperlinkki HTML-kielellä ja miksi. Ja opi hallitsemaan sen ominaisuuksia.
Ehdot
§ 1. Linkki tiedostoon, linkki sivustoon, linkki sivulle
Lukuisat kysymykset tiedostolinkin ja sivuston tai sen yksittäisen sivun linkin eroista pakottivat minut antamaan vastauksen tähän oppitunnin alussa. Vastaus on: ei mitään. Kaikki luetellut linkit ovat ulkoisia alkukirjain sivu ja ne luodaan samalla tavalla.
Jotta ajatus ei leviäisi pitkin puuta, näytän kaiken esimerkillä.
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 osoite kohde, johon viitataan. Siirrytään nyt oppitunnin pääosaan.
§ 2. Ulkoisten linkkien luominen
Linkit eroavat toisistaan ulkoinen Ja kotimainen, sekä päällä teksti Ja graafinen. Ulkoiset linkit johtavat html-sivun "rajojen" ulkopuolelle, sisäiset linkit eri osiin sama sivuja. Tekstilinkit ovat tekstiä (oletusarvoisesti se on korostettu sinisellä ja alleviivattu), ja graafiset linkit objektina, jota sinun on klikattava päästäksesi, sisältävät jonkinlaisen kuvan. Kaikki tämäntyyppiset linkit luodaan HTML-kielellä tagilla (lyhenne englanninkielisestä ankkurista - ankkuri). Tarkastellaanpa sitä tarkemmin.
Ulkoisen linkin luomiseen sivustolle, sivulle tai tiedostoon käytetään tag-attribuuttia - href. Tämä attribuutti saa arvonsa URL-osoite sivusto, sivu tai tiedosto (puhuimme tästä edellä). Tunnisteiden ja välissä on linkin näkyvä osa (linkkiankkuri), eli se, mitä näemme selaimen näytöllä. Linkin ankkuri 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, kirjoita seuraava HTML-koodi:
http://www.seoded.ru/"> Sivuston kotisivu
Selaimessa se näyttää tältä:
Kuten kirjoitin aivan tämän opetusohjelman alussa, linkkitekstin (ankkurin) väriä voidaan muuttaa käyttämällä . Yleensä linkkien tekstiin voi soveltaa samaa kuin sivun päätekstissä eli lihavointia, kursiivia, 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 kuvalinkissä olevan kuvan kehyksellä. Jos tätä ei haluta, niin määrite rajaa tag img tulee asettaa arvoon 0:
border="0">
Pääsivu
§ 3. Sisäiset linkit
Sisäisiä linkkejä käytetään mukavaan 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 tavalla kuin ulkoiset linkit. Vain attribuutin arvossa href linkin "ankkuri" on merkitty. Ankkuri luodaan attribuutilla nimi:
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ä oleva teksti "ankkurin" luomiseksi on valinnainen ja useimmiten sitä ei ole määritelty.
"Olen tuhkarokko" sijaitsee sivulla niissä paikoissa, joihin käyttäjän tulee mennä linkkiä napsautettuaan.
Kuten edellä sanoin, attribuutissa href sisäisessä linkissä osoitteen sijaan halutun "ankkurin" nimi ilmoitetaan pakollisella hash-symbolilla ( # ) hänen edessään. Otetaan esimerkki.
Loin "ankkurin" nimeltä otsikko ja asetti sen sivun koodiin tämän oppitunnin otsikon viereen ("Hyperlinkit HTML:ssä"). "Ankkuri" koodi on seuraava:
name="title">
href="#zagolovok">Siirry otsikkoon
Ja selaimessa näin:
Jos huomaat, että napsautat otsikon sisäistä linkkiä, selaimen osoiterivillä oleva URL on muuttunut:
Alkuperäiseen osoitteeseen:
http://www.html
http://www..html#header
Ja käyttämällä tätä ominaisuutta, voit linkittää tiettyyn paikkaan sivulla mistä tahansa Internetin resurssista! Oletetaan, että loit sivun, jolla on pitkä artikkeli jostain (tai olet julkaissut sivulle suuren määrän valokuvia) ja merkitsi sen sisäisillä linkeillä. Kun olet paikassa , sinun ei tarvinnut viitata vain sivuun, jossa oli artikkeli (tai valokuvia), 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
Pääsivu
Mutta suhteellisilla linkeillä se on hieman monimutkaisempi. Tällaisissa linkeissä osoitetaan joko suhteellisesti sivuston juurikansio (se, jossa pääsivu sijaitsee) tai suhteessa alkuperäiseen sivuun. Tällaisia linkkejä tarvitaan esimerkiksi, jos sivusto sijaitsee osoitteessa kotitietokone. Tai se ei ole verkkosivusto, vaan sivuosoitin muihin asiakirjoihin.
Oletetaan, että meidän on linkitettävä sivulle client.html, joka valehtelee yhdessä kansiossa Kanssa Pääsivu sivusto. Sitten suhteellinen linkkikoodi näyttää tältä:
/clienty.html">Asiakkaat
Oletetaan nyt, että samassa kansiossa pääsivun kanssa kansion järjestys ja jo sen sisällä on klienty.html-sivulla. Suhteellinen linkkikoodi tulee tällöin tältä:
/zakazy/clienty.html">Asiakkaat
Katsotaanpa nyt hyperlinkkien luomista alkuperäiseen sivuun verrattuna. Oletetaan, että meillä on sivu hinta.html(lähdesivu) ja sieltä sinun on linkitettävä sivulle client.html Tässä ovat seuraavat tyypilliset vaihtoehdot:
1. Hinta.html ja clienty.html-sivut ovat yhdessä kansiossa.
clientty.html">Asiakkaat
2. sivuston juurikansiossa, sivu hinta.html on tilauskansiossa yhden tason ylöspäin).
Koodista tulee tällainen:
../clienty.html">Asiakkaat
Kaksi pistettä osoittavat, että sinun on poistuttava nykyisestä kansiosta korkeammalle tasolle.
3. Klienty.html-sivu ja zakazy-kansio ovat sivuston juurikansiossa, huonekalukansio on tilauskansiossa, sivu hinta.html on mebel-kansiossa(eli asiakas.html-sivu suhteessa alkuperäiseen price.html-sivuun on kaksi tasoa ylöspäin).
../../clienty.html">Asiakkaat
Eli jokainen taso on merkitty kahdella pisteellä ja vinoviivalla " / ».
4. sivuston juurikansiossa, sivu clienty.html on tilauskansiossa(eli nyt klienty.html-sivu on suhteessa alkuperäiseen price.html-sivuun yhden tason alaspäin).
zakazy/clienty.html">Asiakkaat
Tässä tapauksessa pisteitä ja kauttaviivoja ei laita.
5. Hinta.html-sivu (alkuperäinen sivu) ja zakazy-kansio ovat sivuston juurikansiossa, huonekalukansio on tilauskansiossa, sivu clienty.html on mebel-kansiossa(eli nyt klienty.html-sivu on suhteessa alkuperäiseen price.html-sivuun sijaitsee kaksi tasoa alempana).
zakazy/furniture/clienty.html">Asiakkaat
6. Sivuston juurikansiossa on kaksi kansiota: zakazy ja oplata. clienty.html-sivu on tilauskansiossa, alkuperäinen price.html-sivu sijaitsee kansiossa oplata(eli molemmat sivut valehtelevat eri kansioissa yksi taso alaspäin sivuston juurikansiosta).
../zakazy/clienty.html">Asiakkaat
§ 5. Linkki sähköpostiin
Jotta luo sähköpostilinkki, tarvitset attribuutin arvon URL-osoitteen sijaan href kirjoita sähköpostiosoite protokollan kanssa ( mailto:). Ja sitten kun napsautat tällaista 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 niin se on selaimessa.
Hei rakkaat blogisivuston lukijat! Kuten tiedät, sivuston menestyksekkääksi mainostamiseksi ja sen aseman parantamiseksi hakutuloksissa on välttämätöntä suorittaa sivuston 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 sulkea ne indeksoinnista, 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 selitän, mikä linkki on, kuinka hyperlinkki tehdään HTML-kielellä verkkosivustolle, miten linkki avataan uuteen ikkunaan, miten luodaan linkki sähköpostiosoitteeseen (sähköpostiin) ja miten tehdä linkistä kuva. Käsittelemme myös sellaisia käsitteitä kuin html-tunnisteet ja hyperlinkin attribuutit, linkkiankkuri, html-ankkuri (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 rikki. Sivustolla ei saa olla rikkinäisiä linkkejä, koska ne johtavat vierailijoita harhaan, ja tällaisen linkin napsauttaminen ei todennäköisesti palaa sivustollesi. Puhumme yksityiskohtaisemmin siitä, miksi rikkinäiset linkit näkyvät, kuinka löytää ja korjata ne, erillisessä artikkelissa. Ja nyt jatketaan.
Linkin (hyperlinkin) tekeminen HTML-kielellä verkkosivustolle.
Linkittäminen sivustosi toiselle sivulle tai toiselle sivustolle on erittäin helppoa. 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 mennään. Ja tunnisteiden välissä olevan hyperlinkin teksti Ja, kutsutaan linkkiankkuriksi ja se näkyy verkkosivun vierailijalle. Sen lisäksi, että linkkiteksti (ankkuri) kertoo lukijalle, mihin siirtymä tehdään, se on erittäin tärkeä myös hakukoneoptimoinnissa (SEO), koska se on yksi sivustosi sijoitukseen vaikuttavista tekijöistä. tämän ankkurin sisältämät avainsanat. Tyypillisesti tämän tyyppistä sijoitusta kutsutaan referenssiksi.
Ehdoton linkki
Niitä käytetään osoittamaan toisella sivustolla olevaan asiakirjaan (ulkoinen linkki).
Absoluuttisia linkkejä saa tehdä saman sivuston sisällä, mutta on oikeampaa käyttää suhteellisia osoitteita sisäisen linkin luomiseen, jotka näyttävät lyhyemmiltä. Mutta kun analysoin eri sivustoja, huomasin, että suurin osa verkkovastaavista luo sisäisiä linkkejä absoluuttisilla osoitteilla. Tässä on plussaa, koska jos sivusi kopioidaan, niin saat tällä tavalla takaisin toimivat ulkoiset linkit.
Kuten näet, ehdottomilla viittauksilla kaikki on yksinkertaista. Suhteellisten kanssa se on vaikeampaa, koska niitä luodessasi sinun on ymmärrettävä, mikä href-attribuutin arvo sinun on määritettävä, koska se riippuu asiakirjojen alkuperäisestä sijainnista. Kuten sanoin, kukaan ei todellakaan välitä tästä ja tekee kaikista sivuston linkeistä absoluuttisia. Jos olet kuitenkin kiinnostunut oppimaan lisää suhteellisten linkkien luomisesta sivustolle, voin suositella artikkelia Dmitryltä, ktonanovenkogo.ru-blogin kirjoittajalta. En ole vielä nähnyt yksityiskohtaisempaa ja ymmärrettävää selitystä.
Näytän esimerkiksi, miltä tiedostoon johtava linkki suhteessa sivuston juureen näyttää (leikkaa vain kaikki kolmannen vinoviivan vasemmalla puolella vastaavassa absoluuttisessa linkissä):
Suhteellinen linkki
Pääasiaan
Linkin teksti (ankkuri)
Ponnahdusikkunan tekstin värit ja ulkonäkö 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 kätevää, kun katselen sivustoja henkilökohtaisesti. 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 tule takaisin. Varsinkin jos hän tekee useita siirtymiä eikä yksinkertaisesti muista, missä hän oli muutama minuutti sitten.
Target tag -attribuutti auttaa meitä avaamaan linkin uuteen ikkunaan. . Se on oletuksena _self , jota ei yleensä kirjoiteta. Avaa asiakirja uudessa ikkunassa muuttamalla kohdeattribuutin arvoksi _blank:
| 1 | <a href = "http://site" target = "_blank" > Uusi ikkuna</a> |
Uusi ikkuna
Entä 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).
Napsauttamalla tätä linkkiä avautuu työskentelyohjelma sähköposti, jonka olet oletuksena asentanut, jossa Vastaanottaja-kenttä on jo täytetty. Kirjeen aiheen automaattinen täyttäminen edellyttää linkin lähettämistä seuraavan lomakkeen sähköpostiin:
Sanojen "kirjeen aihe" sijaan sinun on kirjoitettava haluttu aihe ja tietysti latinalaisin kirjaimin. Teemme tämän, koska monet selaimet ja sähköpostiohjelmat eivät toimi hyvin kyrillisen kanssa ja aiherivillä on mahdollisuus nähdä kaikenlaista hölynpölyä. Käyttämällä tätä ei hankalaa neuvoa voit luoda linkin sähköpostiin pelkäämättä turhia yllätyksiä.
Kuinka tehdä kuvasta linkki.
Tässä title-attribuutti on työkaluvihje, ja alt-attribuutilla (vaihtoehtoinen tietolähde) kirjoitettu teksti näkyy sivulla, jos kuvat on poistettu käytöstä selaimessa. Jos title-attribuutti palvelee ennen kaikkea lukijoiden mukavuutta, niin hakukoneet yrittävät ymmärtää, mitä kuvassa näkyy alt-attribuutilla. Näihin tageihin on suositeltavaa kirjoittaa avainsanoja, joilla on suuri merkitys hakukoneoptimoinnissa. Kukaan ei loppujen lopuksi peruuttanut hakua kuvien perusteella.
Kuinka tehdä hyperlinkki (html-ankkuri) yhdelle html-sivulle.
Yllä olemme jo pohtineet, kuinka luodaan linkki verkkosivuston sivulle, olipa se sisäinen tai ulkoinen. Mutta joskus sinun on tehtävä hyperlinkkejä samalle verkkosivulle. Minkä vuoksi? No esimerkiksi niin, että kun luemme hyvin pitkää tekstiä, meillä on kyky hypätä nopeasti mihin tahansa sen osaan. Tai se on hyödyllistä, kun artikkelin alussa julkaiset sen sisällön kohta kohdalta. Napsauta sitten haluamaasi tuotetta, siirryt välittömästi sinua kiinnostavaan materiaaliin. Tällaiset siirtymät tehdään käyttämällä artikkelin runkoon esiasennettuja kirjanmerkkejä, joita kutsutaan html-ankkureiksi (ankkuri, ei pidä sekoittaa tekstiankkuriin) ja erityisillä hash-linkeillä.
Luodaksesi ankkurin, tee ensin kirjanmerkki millä tahansa nimellä (käytetään vain latinalaisia kirjaimia, numeroita, yhdysmerkkejä ja alaviivoja), joka on määritetty tagin name-attribuutilla :
Ylös
| 1 | <a href = "javascript:scroll(0,0);" > |
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. Teemme esimerkiksi kirjanmerkin h3-otsikkotunnisteesta:
Otsikkoteksti
On tärkeää kirjoittaa latinalainen kirjain id-attribuutissa ankkurin nimen ensimmäiseksi merkiksi, jolloin voit käyttää muita sallittuja merkkejä.
Palataanpa esimerkiksi otsikkoon " " ja jatketaan sitten.
Voit käyttää hash-linkkejä siirtyäksesi oikeaan 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-linkkiin, ennen hash-symbolia, kirjoitamme tämän sivun osoitteen. Esimerkiksi:
Linkitä teksti html-kirjanmerkkiankkuriin
Hyperlinkkien tyypit ja värit HTML:ssä.
- Vierailematon linkki on sininen ja alleviivattu.
- Aktiivinen linkki – muuttuu punaiseksi linkin napsautuksen ja uuden sivun latauksen alkamisen välillä. Tietenkään hän ei ole ollut tässä tilassa pitkään.
- Vierailtu linkki - muuttaa värinsä violetiksi napsautettuaan sitä.
Voit muuttaa html-dokumentin hyperlinkkien väriä tunnisteen avulla
ja seuraavat attribuutit:- Linkki - vierailemattomien linkkien väri.
- Alink - aktiivisen linkin väri.
- Vlink on vierailtujen linkkien väri.
Kaikki yllä olevat attribuutit voidaan yhdistää:
| 1 | <body link = "#1122cc" vlink = "#6611cc" alink = "#d14836" > |
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. Olen yrittänyt parhaani mukaan kuvata yksityiskohtaisesti, mitä linkkejä HTML:ssä on ja mitä ne ovat. Haluan muistuttaa, että hyperlinkkien lisääminen tekstiin tapahtuu vain HTML-tilassa.
Koskaan ei ole tarvinnut kirjoittaa näin pitkiä artikkeleita, yli 10 000 merkkiä. Mutta tämä linkkien aihe ei ole loppu, jatketaan.
Jos tämä artikkeli oli hyödyllinen sinulle, napsauta alla olevia sosiaalisten verkostojen painikkeita. Nähdään sivuilla!
Hyvää päivää kaikille, rakkaat ystäväni ja lukijani. Toivon, että päätit osallistua kilpailuun ja kirjoittaa blogipolustasi. 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. Se ei olisi navigoinnin kannalta kätevää ollenkaan. Voitko kuvitella internetin 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 on ja miten se eroaa tavallisesta linkistä? Täällä kaikki on todella yksinkertaista: linkki on yksinkertainen kirjoitus johonkin asiakirjaan viittaavasta tiedosta. Samalla et voi napsauttaa tätä tekstiä (mitään ei tapahdu), mutta tiedät mistä etsiä tietoa.
Esimerkki: Voit oppia valitsemaan hiukset Photoshopissa osoitteessa //website/adobe-photoshop/kak-vydelit-volosy/
Hyperlinkki on sama teksti, vain sen ydin on se, että voit napsauttaa tätä tekstiä ja päästä halutulle sivulle, sivustolle tai mihin tahansa muuhun kohteeseen. Lisäksi itse teksti voi olla mikä tahansa, kun taas osoite on jo kirjoitettu sisällä erikseen ja voi olla täysin erilainen. Mutta olipa asia kuinka tahansa, puhekielessä niitä kutsutaan yksinkertaisesti linkeiksi. Tässä on esimerkki hyperlinkistä:
Voit lukea kuinka valita hiukset oikein Photoshopissa yhdessä minun.
Joka tapauksessa. Hyvä teoria. Jatketaan nyt harjoittelua ja katsotaan, ketkä ovat vastuussa kaikista näistä asioista.
Paritunniste vastaa hyperlinkistä, mutta sinänsä se ei edusta mitään. Se menee aina attribuutin yhteydessä. Ja tässä tapauksessa meidän on jatkuvasti määrättävä tämä erittäin href. Laitamme attribuutin arvoon linkin haluttuun resurssiin. Ja itse sisältöön kirjoitamme itse tekstin, jonka pitäisi tulla napsautettavaksi (työskennellä napsautuksella). 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 samaan kansioon
Mutta tällainen siirtymä toimii edellyttäen, että tiedosto, johon linkität, sijaitsee samassa kansiossa kuin tiedosto, johon laitat linkin. Muissa vaihtoehdoissa kaikki on hieman erilaista.
Tiedosto toiseen kansioon
- Avaa pushkin.html-tiedosto Notepad++:ssa
- Etsi nyt sana valokuva ja kääri se tunnisteisiin<href> .
- Ja nyt huomio! Attribuuttiarvoon kirjoitamme polun suhteessa muokattavaan tiedostoon eli itse pushkin.html:ään. Sinulla pitäisi olla jotain tämän kaltaista:
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 vinoviivan (/) kautta asiakirjan koko nimi (tapauksessamme kuvissa).
Tallenna ja suorita pushkin.html-tiedosto selaimessasi. Näet, että sana "Photo" on korostunut sinisellä ja siitä on tullut napsautettavaa, mikä tarkoittaa, että tätä linkkiä napsauttamalla pääsemme fofo.jpg-tiedostoon, joka sijaitsee img-kansiossa.
No miten? Kaikki kunnossa? Kysy rohkeasti jos tarvitset jotain.
Ulkoiset siirtymät
Ja tietenkään emme voi olla mainitsematta ulkoisia linkkejä, joiden napsautuksen jälkeen pääsemme täysin eri sivustolle. Mutta tässä ei ole mitään monimutkaista. Koko asia on, että lisäät href-arvon sivuston tai verkkosivun täydellisen osoitteen. Esitin yllä esimerkin Yandexin kanssa. Mutta tässä sinulle toinen esimerkki:
Aion opiskella sosiaalisten projektien maisteriksi.Tästä pääsemme tietyn sivuston tietylle sivulle.
Avautuu uuteen ikkunaan
Oletuksena, kun napsautat linkkiä, dokumentti avautuu samaan ikkunaan kuin sivusi, ts. sivusi kaatuu. 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 liittää tämä avaustunnisteen sisään href-attribuutin arvon jälkeen. Otetaan se ote lukomorye.html-tiedostosta, johon 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 käsilläsi. Ei tarvitse kopioida ja liittää.
Jotenkin näin. Näyttää siltä, että hän kertoi kaikki tärkeimmät asiat, mutta jos haluat siirtyä tähän suuntaan ja oppia HTML- ja CSS-kieliä ammattimaisten verkkosivustojen, blogien ja jopa verkkokauppojen luomiseksi, niin muista tarkistaa loistava videokurssi tästä teemasta. Oppitunnit ovat todella erinomaisia ja ne on todella kerrottu ihmisille, jotka ovat vielä vähän perehtyneet verkkosivustojen rakentamiseen tai eivät ollenkaan.
No, tähän päättyy tämän päivän oppituntimme. Toivon, että pidit artikkelistani, ja olen iloinen, jos sinusta tulee säännöllinen lukijani. Joten älä unohda tilata blogipäivitykseni, jotta et menetä jotain mielenkiintoista. No, toivon sinulle menestystä kaikissa pyrkimyksissäsi. Hei hei!
Ystävällisin terveisin Dmitri Kostin.
