Hvordan sette inn en hyperkobling i HTML? Opprette og bruke hyperkoblinger i HTML. Hvordan lage et bilde til en lenke i HTML, Vkontakte, på forumet og bruke CSS Image som en hyperkobling for

I denne leksjonen skal vi snakke om hvordan du lager en lenke i HTML. Lenker brukes veldig ofte på nettsteder; de lar deg flytte fra en side på et nettsted til en annen. Det særegne med lenker er at de ikke bare kan føre til en nettside, men også til filer, bilder osv.

Lenker kan være interne og eksterne. Interne lenker fører til sider og filer på ett nettsted. Eksterne lenker fører til tredjepartssider, dokumenter og filer. Samtidig er denne typen lenker satt nesten likt.

Hvordan lage en lenke i HTML, eksempler

1. HREF - er ansvarlig for hvor lenken skal føre. En standardlenke er spesifisert som følger: Linktekst.

2. TARGET - er ansvarlig for hvilket vindu dokumentet åpnes i. Misligholde nytt dokumentåpnes i gjeldende nettleservindu. "target"-attributtet lar deg åpne en lenke i et nytt nettleservindu. Dette attributtet har følgende parametere:

• _blank - laster siden i et nytt vindu;
• _self - laster siden i gjeldende vindu;
• _parent - laster siden inn i den overordnede rammen;
• _top - kansellerer alle rammer og laster siden i et nytt vindu.

3. NAVN – brukes til å navigere til et bestemt område på siden. Etter hash-symbolet er nøkkelordet (bokmerke eller tag) angitt i anførselstegn. For å gå til denne etiketten, bruk lenken der denne etiketten er skrevet.

Ekstern lenke eksempel

Gå til nettsiden

Gå til nettstedet Gratis WordPress-leksjoner

Eksempel 4: Bilder som lenker.

Eksempelbilde som referanse

Eksempel på en lenke til et bestemt sted på en side

Gå til tekst

Sidetekst...

I dette eksemplet er siden merket med «liste» ved hjelp av «navn»-attributtet. Kobling til denne etiketten tar deg til et bestemt område på siden.

Last ned fil Skriv et brev

Du kan angi fargen på lenker ved å bruke attributter som er spesifisert i «body»-taggen som parametere. Vurder disse egenskapene:

• lenke - ubesøkt lenke, som standard vises den i blått;
• alink - aktiv lenke, rød som standard;
• vlink - besøkt lenke, lilla som standard.

Et eksempel på å angi farger for lenker...

Dermed har vi funnet ut prinsippet for koblinger i HTML. Lenker kan gis spesifikke stiler. Du kan se om det i leksjonen ved å følge lenken.

Jeg tror du allerede forstår hva jeg mener vi vil snakke i dette kapittelet.. og du vet hva en lenke er, hvis ikke, så klikk her.. Det finnes flere typer lenker, samt "mekanismer" for å klikke på dem. I dette kapittelet vil jeg prøve å snakke i detalj om hvordan du registrerer lenker, samt gå inn på vanskelighetene ved å jobbe med dem.

Lyrisk digresjon:
En gang i hæren kom stabssjefen bort til meg og ga en ordre, jeg siterer:
Ta med meg det dokumentet, selv om jeg ikke vet hvor det er eller hva det er!! Hvorfor står du? La oss løpe!! Jeg er sen!!!

Så hva jeg mener med dette, slik at nettleseren ikke faller i stupor, som jeg gjorde da, må den vite: det nøyaktige navnet på dokumentet, stien til dokumentet og stedet hvor det skal bringes, eller rettere sagt, hvor den skal åpnes.

På dette øyeblikket ved å bruke notisblokk laget vi bare ett HTML-dokument, jeg har det med navnet index.html (hvorfor valgte du et så merkelig navn index.html og hvorfor trengs det, se) Jeg vet ikke hvilket, du kom opp med navnet selv, men jeg tror du brukte det husk og vet hvor det er, med mindre du selvfølgelig er min stabssjef :).. I dette dokumentet skal vi prøve å lage en lenke til et annet dokument som vi ikke har enda .. Så før du kobler til det, må du lage det, siden du vet allerede hvordan du gjør dette.

Åpne notisblokk.

Vi skriver kode på html språk. for eksempel en side med en rekke fotografier.

Vi lagrer den som en html-side i samme arbeidsmappe der det første dokumentet vi opprettet allerede eksisterer. La oss kalle det primer.html for å unngå forvirring, og kanskje omdøpe den første til index.html

Nå vet jeg at du har to html-dokument og index.html og primer.html og at du nå har et minimumssett for videre opplæring.

Tekstlenker.

La oss møte tag (fra anker), kan du legge ved tekst eller et bilde i det, som vil bli en lenke til visse dokumenter. Tag-attributt href spesifiserer navnet og banen til dokumentet som koblingen peker til.

Alt sammen er det skrevet slik:

Her er bildene mine!!

Som du sikkert har forstått, er primer.html navnet på vårt andre html-dokument, og påskriften "Her er bildene mine!!" dette er et stykke tekst fra index.html-filen.

I analogi med bildene, taggen Koblingsbanen til dokumentet som åpnes spesifiseres ved å bruke de samme metodene:

Her er bildene mine!! - Denne oppføringen antyder at i katalogen der vårt første html-dokument er plassert er det en stranica-mappe der primer.html-filen er plassert
Her er bildene mine!! - Dette betyr at primer.html-filen ligger ett nivå høyere fra dokumentet
Her er bildene mine!! - dokumentet ligger på nettstedet www.site.ru..

Vel, la oss prøve det? Nedenfor er et eksempel på to dokumenter som inneholder lenker som peker til hverandre.

Index.html-fil:

Lage en lenke til et tekststykke





Fortell meg, kjære barn: i hvilket øre surrer det?


Til høyre eller venstre?



Primer.html fil:

Har fulgt lenken her





Men jeg gjettet ikke riktig! Jeg surrer i begge ørene.


Vel, jeg spiller ikke sånn...

Fra eksemplet kan du se at lenker er uthevet i farger, som standard er blå en lenke, og rød er en allerede besøkt lenke, disse fargene kan endres ved å bruke åpningstaggen som allerede er godt kjent for oss< body >og dens attributter.

lenke - lenkefarge.
alink - fargen på den klikkede, aktive lenken.
vlink - fargen på den besøkte lenken.

Det er skrevet slik:

Hvis du fortsetter å snakke om fargen på en tekstlenke, er det verdt å nevne at du om nødvendig kan tvinge både hele lenken og dens individuelle deler (setninger, ord, bokstaver) til å fremheves i farger ved å bruke en kjent merkelapp og fargen på den. Egenskap. Dette gjelder imidlertid ikke bare farge, du kan også angi størrelse, stil og skrift på teksten separat. Men husk at fargemanipulasjon må gjøres inne i taggen her og ikke overbord, ellers vil lenkefargen være enten som standard eller som spesifisert i taggen

Index.html-fil:

Regnbue



Se på setningen som vil hjelpe deg å huske fargestedene i regnbuen


R
EN
D
U
G
EN




Primer.html fil:

Regnbue




Hver
jeger
ønsker
vet
Hvor
sitter
fasan



Gå tilbake til hovedsiden

En av sidene dine på nettstedet må hete index.html. Det er filen med dette navnet som robotprogrammet vil se etter på nettstedet ditt når en person skriver inn navnet på nettstedet ditt. Siden index.html-siden åpnes først, gjør den til hovedsiden. Du kan kalle resten av sidene hva du vil... det er ikke flere nyanser med navn.

Om registeret... Når du skriver sti og navn på dokumenter, husk at for eksempel: Side.html, side.html og PAGE.html er navnene på forskjellige dokumenter! Det samme gjelder navn på bokmerker og bilder. Vurder alltid sak når du skriver kode; det er stor sannsynlighet for at slike navn ikke vil bli gjenkjent av en eller annen nettleser. Gjør det til en regel å skrive og kalle alt for lite med latinske bokstaver, da vil risikoen for menneskelig faktor og programvariasjoner reduseres til null.

Tre klikk-regel...

Prøv å danne et "tre av lenker" på en slik måte at en besøkende kan komme seg fra hvilken som helst side til et hvilket som helst sted på nettstedet med et minimum antall klikk. Mer enn tre overganger til ønsket sted på siden er ikke lenger bra.Endeløs lasting av unødvendige sider for en person kan føre til nervøst sammenbrudd og for tidlig stenging av siden. Spar folks tid, penger og nerver.

Hovedtrekket til et HTML-dokument er tilstedeværelsen i det av hyperkoblinger (eller ganske enkelt lenker) til andre dokumenter, nettsteder, filer, bilder osv. Det er muligheten til å sette inn lenker til objekter utenfor siden som har gjort Internett så populært og praktisk å bruke. Derfor, når du lager nettstedet ditt, husk alltid "magien" med lenker.

I denne leksjonen vil vi snakke om hvordan du oppretter en lenke til et nettsted, til dens individuelle side eller fil. Du vil lære hvordan du endrer teksten til en lenke, hvordan du åpner den i et nytt vindu, hvordan du lager en lenke til et bilde, hva eksterne og interne lenker er og mye mer. I tillegg har du allerede informasjon om å jobbe med lenker, som vi har vært inne på i tidligere leksjoner (for eksempel snakket vi om hvordan du kan endre fargen på en lenke i).

Totalt sett vil denne opplæringen gjøre din forståelse av koblingsoppretting komplett og tilstrekkelig. Du vil forstå hvordan du lager en hyperkobling i HTML og hvorfor. Og du vil lære å kontrollere egenskapene.

Vilkår § 1. Link til fil, link til side, link til side

Mange spørsmål om hvordan en kobling til en fil er forskjellig fra en kobling til et nettsted eller dens individuelle side tvang meg til å svare på den helt i begynnelsen av denne leksjonen. Svaret er: ingenting. Alle lenker som er oppført er eksterne i forhold til den opprinnelige siden og er opprettet på samme måte.

For ikke å la tankene mine løpe løpsk, skal jeg vise deg alt med et eksempel.

I nettleseren vil vi se dette:

I nettleseren vil vi se dette:

Som du kan se, er alle typer lenker laget nøyaktig likt. Den eneste forskjellen er adressen til objektet det skal refereres til. La oss nå gå videre til hoveddelen av leksjonen.

§ 2. Opprette eksterne lenker

Lenker skiller seg fra hverandre i eksterne og interne, samt tekst og grafikk. Eksterne lenker fører utenfor html-siden, interne lenker fører til ulike deler av samme side. Tekstlenker er tekst (som standard er den uthevet i blått og understreket), og grafiske lenker inneholder et bilde som et objekt du må klikke for å gå til. Alle disse typene lenker lages i HTML ved hjelp av en tag (forkortelse for anker). La oss se nærmere på det.

For å opprette en ekstern lenke til et nettsted, side eller fil, bruk href tag-attributtet. Dette attributtet tar som sin verdi URL-en til et nettsted, en side eller en fil (vi diskuterte dette ovenfor). Mellom taggene er den synlige delen av lenken (lenkeanker), det vil si det vi ser på nettleserskjermen. Linkankeret kan enten være ren tekst (tekstlenke) eller grafisk representasjon(lenke-bilde). En bildelenke opprettes ved å sette inn en kjent kode mellom og -taggene. Generelt ser syntaksen for å lage en kobling slik ut:

For å lage en tekstkobling til hjemmesiden til dette nettstedet, må du for eksempel skrive følgende HTML-kode:

http://www.seoded.ru/">Hovedsiden til nettstedets nettsted

I nettleseren vil det se slik ut:

Som jeg skrev helt i begynnelsen av denne leksjonen, kan fargen på lenketeksten (ankeret) endres ved å bruke . Generelt kan du bruke de samme reglene på lenketeksten som på hovedteksten på siden, dvs. fremheve den med fet skrift, kursiv, bruk overskrifter osv.

§ 2.1 Grafiske lenker (bildeleker)

Som jeg sa ovenfor, for å lage en bildelenke, må du bruke . Et eksempel på en slik lenke ser slik ut:

Og nettleseren vil vise:

Som standard omgir nettleseren bildet i en grafisk lenke med en ramme. Hvis dette ikke er ønsket, bør grenseattributtet til IMG-taggen settes til 0:

border="0">

Hjemmeside

§ 3. Interne lenker

Interne lenker brukes til å navigere komfortabelt gjennom sider med mye innhold. Det var med deres hjelp jeg laget "Leksjonens innhold" (se på begynnelsen av denne siden). Interne lenker opprettes etter samme prinsipp som eksterne lenker. Bare verdien til href-attributtet spesifiserer "ankeret" til lenken. "Ankeret" opprettes av navneattributtet:

name="ankernavn">tekst

Og navnet på "ankeret" er satt vilkårlig. Det er verdt å si her at ikke alle nettlesere forstår de russiske navnene på "ankre", så jeg anbefaler å bruke det latinske alfabetet. Teksten mellom tagger for å lage et "anker" er ikke nødvendig og er oftest ikke spesifisert.

"Jeg er meslinger" er plassert på de stedene på siden brukeren skal gå etter å ha klikket på lenken.

Som jeg sa ovenfor, i href-attributtet til en intern lenke, i stedet for adressen, er navnet på ønsket "anker" angitt med det obligatoriske hash-symbolet (#) foran. La oss se på det med et eksempel.

Jeg opprettet et "anker" kalt zagolovok og plasserte det i sidekoden ved siden av tittelen på denne leksjonen (Hyperkoblinger i HTML). Ankerkoden er som følger:

name="zagolovok">

href="#zagolovok">Til tittel

Og i nettleseren slik:

Hvis du la merke til, etter å ha klikket på den interne lenken til tittelen, endret URL-adressen i nettleserens adresselinje:

Til opprinnelig adresse:

http://www..html

http://www..html#zagolovok

Og ved å bruke denne funksjonen kan du koble til et bestemt sted på siden fra en hvilken som helst ressurs på Internett! Det vil si, la oss si at du opprettet en side med en lang artikkel om noe (eller la ut et stort antall bilder på siden) og merket den med interne lenker. Mens du var i , måtte du koble ikke bare til siden med artikkelen (eller fotografiene), men til et bestemt sted på den (eller et spesifikt fotografi). Ved å bruke alternativet med intern lenke i adressen kan du enkelt oppnå det du trenger.

§ 4. Absolutte og relative referanser

Hjemmeside

Men med relative koblinger er det litt mer komplisert. I slike lenker er adressen angitt enten i forhold til rotmappen til nettstedet (den der hovedsiden er plassert) eller i forhold til kildesiden. Slike lenker er nødvendig, for eksempel hvis nettstedet er plassert på hjemmedatamaskin. Eller dette er ikke et nettsted, men en side som er en pekepinn til andre dokumenter.

La oss si at vi må referere til siden klienty.html, som er i samme mappe med hjemmeside nettstedet. Da vil den relative koblingskoden se slik ut:

/klienty.html">Kunder

La oss nå anta at det i samme mappe med hovedsiden er en zakazy-mappe og klienty.html-siden allerede er i den. Da blir den relative koblingskoden slik:

/zakazy/klienty.html">Kunder

La oss nå se på å lage hyperkoblinger i forhold til kildesiden. La oss si at vi har en side price.html (kildeside) og fra den må vi koble til siden klienty.html. Det er følgende typiske alternativer:

1. Sidene price.html og klienty.html ligger i samme mappe.

klienty.html">klienter




2. I rotmappen til nettstedet er price.html-siden i zakazy-mappen ett nivå høyere).

Koden vil se slik ut:

../klienty.html">Kunder

To prikker indikerer at du må flytte ut av gjeldende mappe til et høyere nivå.




3. klienty.html-siden og zakazy-mappen er plassert i rotmappen til nettstedet, mebel-mappen er i zakazy-mappen, price.html-siden er i mebel-mappen (dvs. klienty.html-siden i forhold til den opprinnelige price.html-siden er to nivåer høyere ).

../../klienty.html">Kunder

Det vil si at hvert nivå er indikert med to prikker og en skråstrek "/".




4. i rotmappen til nettstedet, ligger klienty.html-siden i zakazy-mappen (dvs. nå klienty.html-siden i forhold til den opprinnelige price.html-siden ligger ett nivå lavere).

zakazy/klienty.html">Kunder

I dette tilfellet brukes ikke prikker og skråstreker.




5. Price.html-siden (opprinnelig side) og zakazy-mappen er plassert i rotmappen til nettstedet, mebel-mappen er i zakazy-mappen, klienty.html-siden er i mebel-mappen (dvs. nå klienty .html-siden er i forhold til den opprinnelige price.html-siden ligger to nivåer under).

zakazy/mebel/klienty.html">Kunder




6. I rotmappen til nettstedet er det to mapper: zakazy og oplata. Siden klienty.html er i zakazy-mappen, den opprinnelige price.html-siden er i oplata-mappen (det vil si at begge sidene er i forskjellige mapper ett nivå under nettstedets rotmappe).

../zakazy/klienty.html">Kunder

§ 5. Link til e-post

For å opprette en lenke til e-post, må du erstatte URL-en i href-attributtverdien med en e-postadresse som angir protokollen (mailto:). Og så når du klikker på denne linken, åpnes et vindu postprogram med e-postadressen oppgitt i "Til"-feltet. I HTML-kode ser det slik ut:

mailto: [e-postbeskyttet]">Min e-post

Og i nettleseren er det sånn.

Hei, kjære lesere av bloggsiden! Som du vet, for å lykkes med å markedsføre et nettsted og øke sin posisjon i søkeresultatene, er det nødvendig å utføre SEO-optimalisering av høy kvalitet av nettstedet. Konseptet "", som igjen er delt inn i interne og eksterne, er uløselig knyttet til slike konsepter som "interne og eksterne nettstedslenker". Derfor er det veldig viktig for oss å vite hvor mange lenker som skal være på nettstedet, hvordan du sjekker antallet, hvordan du fjerner unødvendige lenker fra nettstedet og blokkerer dem fra indeksering, hvordan øker lenkemassen, etc. For å svare på alle disse og andre spørsmål angående interne og eksterne lenker, la oss først forstå hva en lenke (eller hyperkobling) er i HTML.

I denne artikkelen vil jeg fortelle deg hva en lenke er, hvordan du lager en hyperkobling i HTML på et nettsted, hvordan du åpner en lenke i et nytt vindu, hvordan du oppretter en lenke til en e-postadresse (e-post) og hvordan du lage en lenke til et bilde. Vi vil også berøre slike begreper som html-tags og hyperlenkeattributter, lenkeanker, html-anker og hash-lenker. Så la oss begynne.

Hva er en lenke (hyperkobling).

Hvis en hyperkobling fører til en nettside eller fil som ikke eksisterer (slettet, flyttet) eller adressen er feil, kalles en slik kobling en ødelagt kobling. Det skal ikke være ødelagte koblinger på nettstedet, da de villeder besøkende, og etter å ha klikket på en slik lenke er det usannsynlig at en person kommer tilbake til nettstedet ditt. Vi vil snakke mer om hvorfor ødelagte koblinger vises, hvordan du finner og fikser dem, i en egen artikkel. La oss nå fortsette.

Hvordan lage en link (hyperlink) i HTML på en nettside.

Det er veldig enkelt å koble til en annen side på ditt eller et annet nettsted. For å lage en hyperkobling, må du fortelle nettleseren hva koblingen er og angi adressen til dokumentet den skal føre til. Dette gjøres ved hjelp av en HTML-tag og det nødvendige href-attributtet:

Her er URL adressen til dokumentet du skal gå til. Og hyperkoblingsteksten som ligger mellom kodene Og, kalles et lenkeanker og er synlig for besøkende på nettsiden. I tillegg til at lenketeksten (ankeret) informerer leseren om hvor overgangen skal gjøres, er den også svært viktig i søkemotoroptimalisering (SEO), siden den fungerer som en av de avgjørende faktorene som påvirker rangeringen av nettstedet ditt. for søkeordene i dette ankeret. Vanligvis kalles denne typen rangering lenkerangering.

Absolutt link

De brukes til å peke til et dokument på et annet nettsted (linken er ekstern).

Det er også mulig å lage absolutte lenker innenfor ett nettsted, men det er mer riktig å bruke relative adresser, som ser kortere ut, for å lage interne lenker. Men mens jeg analyserte forskjellige nettsteder, la jeg merke til at det store flertallet av webmastere lager interne lenker med absolutte adresser. Dette har sin fordel, for hvis siden din er kopiert, vil du på denne måten motta fungerende tilbakekoblinger.

Som du kan se, med absolutte lenker er alt enkelt. Det er vanskeligere med relative, fordi når du oppretter dem, må du forstå hvilken verdi av href-attributtet som skal spesifiseres, siden det avhenger av den opprinnelige plasseringen av dokumentene. Som jeg allerede har sagt, er det ingen som bryr seg om dette og gjør alle lenkene på siden absolutte. Men hvis du er interessert i å lære mer om hvordan du oppretter relative lenker for et nettsted, kan jeg anbefale en artikkel av Dmitry, forfatter av bloggen ktonanovenkogo.ru. Jeg har aldri sett en mer detaljert og forståelig forklaring.

For eksempel vil jeg vise deg hvordan en kobling som fører til en fil i forhold til nettstedroten vil se ut (vi kuttet ganske enkelt av alt til venstre for den tredje skråstreken i en lignende absolutt lenke):

Relativ lenke

Til hoved

Linktekst (anker)

Fargene og utformingen av popup-teksten avhenger kun av innstillingene operativsystem og nettleser.

Hvordan åpne en lenke i et nytt vindu.

Som standard, når du klikker på en lenke, åpnes et nytt dokument i det gjeldende vinduet. Men når jeg surfer på nettsider, er dette ikke praktisk for meg personlig. Når du leser en artikkel og følger en lenke, er det praktisk for meg at siden åpnes i et nytt vindu, og jeg kan fortsette å lese den forrige artikkelen når som helst. En annen grunn til å åpne en lenke i et nytt vindu er at når du går til andres side, er det stor sannsynlighet for at leseren ikke kommer tilbake. Spesielt hvis han gjør flere overganger og rett og slett ikke husker hvor han var for noen minutter siden.

Målattributtet til taggen vil hjelpe oss med å åpne lenken i et nytt vindu . Som standard har den verdien _self , som vanligvis ikke er spesifisert. For å åpne dokumentet i et nytt vindu, endre verdien av målattributtet til _blank :

1	Nytt vindu

Nytt vindu

Hva bør du gjøre hvis du vil åpne dem i et nytt vindu når du besøker andres nettsted, der lenker åpnes i det gjeldende vinduet? Du trenger bare å klikke på dem, ikke med en knapp, men med musehjulet. I dette tilfellet ny sideåpnes i et nytt vindu.

Hvordan lage en lenke til en e-post (e-postadresse).

Ved å klikke på denne lenken åpnes programmet for arbeid med via epost, installert som standard, hvor "Til"-feltet allerede er fylt ut. For at emnet for brevet skal fylles ut automatisk, må du lage en lenke til en e-post av denne typen:

Dmitry KtoNaNovenkogo anbefaler en annen måte å sette bokmerker i teksten på en nettside, uten å bruke html-ankre. For å gjøre dette lager vi et bokmerke fra en hvilken som helst HTML-tag som er tilgjengelig på siden, og tildeler den det universelle id-attributtet. La oss for eksempel bokmerke en h3-tittelkode:

Titteltekst

Det er viktig å inkludere en latinsk bokstav i id-attributtet som det første tegnet i ankernavnet, så kan du bruke alle andre tillatte tegn.

La oss for eksempel gå tilbake til overskriften " ", og fortsett.

Du kan bruke hash-lenker for å gå til ønsket plassering, ikke bare på én side, men også for å gå til en annen side på nettstedet. For å gjøre dette setter vi html-ankeret på rett sted på høyre side, og i selve hash-lenken skriver vi adressen til denne siden før hash-symbolet. For eksempel:

Koble tekst til html-ankerbokmerke

Typer og farger på hyperkoblinger i HTML.

• En ubesøkt lenke er blå og understreket.
• Aktiv lenke – blir rød i løpet av tiden mellom museklikket på lenken og starten av lasting av en ny side. Det er tydelig at hun er i denne tilstanden bare en kort stund.
• Besøkt lenke – endrer fargen til lilla etter å ha klikket på den.

Du kan endre fargen på hyperkoblinger i et HTML-dokument ved å bruke en kode og dens følgende attributter:

• Link – farge på ubesøkte lenker.
• Alink – fargen på den aktive lenken.
• Vlink – farge på besøkte lenker.

Alle de ovennevnte attributtene kan kombineres:

1

Jeg håper det nå er klart hvordan man lager en hyperkobling på en HTML-side og til en e-post, hvordan man gjør et bilde til en lenke, hva tekstankere, hash-lenker og html-ankere er, hva html-tagger og lenkeattributter er. Jeg prøvde, så godt jeg kunne, å fortelle i detalj hva lenker i HTML er og hva de er. La meg minne deg på at innsetting av hyperkoblinger i tekst bare gjøres i HTML-modus.

Jeg har aldri skrevet så lange artikler før, mer enn 10 000 tegn. Men dette er ikke slutten på emnet lenker, som fortsetter.

Hvis denne artikkelen var nyttig for deg, vennligst klikk på knappene for sosiale medier nedenfor. Vi sees igjen på sidene!

God dag til alle, mine kjære venner og lesere. Jeg håper du har bestemt deg for å delta i konkurransen min og allerede skriver om bloggreisen din. Vel, jeg vil gjerne fortsette studiet av html-språket, og i dag vil jeg gjerne fortelle deg om en av de viktigste komponentene, nemlig hyperkoblinger.

Ja, uten slike hyperkoblinger ville ikke Internett vært så praktisk. Nei, jeg lyver. Det ville ikke være lett å navigere i det hele tatt. Kan du forestille deg Internett uten dem? Jeg personlig gjør ikke det.

Og i dag vil vi lære hvordan du setter inn en hyperkobling i html. Men først vil jeg spørre deg: Vet du hva en hyperkobling til og med er og hvordan den skiller seg fra en vanlig lenke? Alt er faktisk enkelt her: en lenke er en enkel informasjon som refererer til et dokument. Samtidig kan du ikke klikke på denne teksten (ingenting skjer), men du vet hvor du skal lete etter informasjon.

Eksempel: Du kan finne ut hvordan du fremhever hår i Photoshop på //site/adobe-photoshop/kak-vydelit-volosy/

En hyperkobling er den samme teksten, bare essensen er at du kan klikke på denne teksten og komme til ønsket side, nettsted eller et hvilket som helst annet objekt. Dessuten kan selve teksten være hva som helst, mens adressen er skrevet separat inni og kan være helt annerledes. Men uansett, i dagligtale kalles de fortsatt bare lenker. Her er et eksempel på en hyperkobling:

Du kan lese om hvordan du fremhever hår riktig i Photoshop i en av veiledningene mine.

Uansett. God teori. La oss nå gå videre til praksis og se hvilke som er ansvarlige for alle disse sakene.

Den sammenkoblede taggen er ansvarlig for hyperkoblingen, men i seg selv representerer den ikke noe. Det går alltid sammen med et attributt. Og i dette tilfellet må vi hele tiden skrive denne samme href. I attributtverdien legger vi lenken til selve ønsket ressurs. Og i selve innholdet skriver vi selve teksten, som skal bli klikkbar (fungerer når den klikkes). Se på eksemplet og jeg tror du vil forstå alt.

Yandex søkemotor

Som du forstår, skrev jeg i dette eksemplet at når du klikker på et tekststykke "Yandex-søkemotor", vil en person bli dirigert til adressen skrevet i verdien av href-attributtet.

Jeg tror mange av dere vet at det finnes interne og eksterne lenker. Interne koblinger utføres i én katalog, det vil si nettstedet, og eksterne lenker fører til en tredjepartsressurs. Og nå skal jeg vise deg hvordan du gjør begge deler.

Interne overganger Fil i samme mappe

Men en slik overgang vil fungere forutsatt at filen du lenker til ligger i samme mappe som filen du plasserer lenken i. For andre alternativer er alt litt annerledes.

Fil i en annen mappe

Åpne pushkin.html-filen i Notepad++

Finn nå ordet bilde og pakk det inn i tagger.

Nå oppmerksomhet! I attributtverdien spesifiserer vi banen i forhold til filen som redigeres, det vil si selve pushkin.html. Du bør ende opp med noe sånt som dette:

Foto

Hva har vi gjort nå? Og vi gjorde følgende: siden banen til bildet ligger i en egen img-mappe, som ligger i samme mappe som pushkin.html-filen, må vi først skrive navnet på mappen i attributtverdien, og deretter gjennom en skråstrek (/) det fulle navnet på dokumentet (i vårt tilfelle fotografier).

Lagre og kjør filen pushkin.html i nettleseren din. Du vil se at ordet "Foto" har blitt uthevet i blått og er blitt klikkbart, noe som betyr at ved å klikke på denne lenken kommer vi til filen fofo.jpg, som ligger i img-mappen.

Så hvordan? Alt klart? Hvis noe skjer, ikke nøl med å spørre.

Eksterne overganger

Og selvfølgelig kan vi ikke unnlate å nevne eksterne lenker, etter å ha klikket på, vil vi bli ført til et helt annet nettsted. Men det er ikke noe komplisert her. Hele poenget er at du legger inn hele adressen til nettstedet eller nettsiden i href-verdien. Jeg viste et eksempel med Yandex ovenfor. Men her er et annet eksempel:

Jeg skal studere for å bli en master i sosiale prosjekter.

Her kommer vi til en bestemt side på et bestemt nettsted.

Åpnes i et nytt vindu

Som standard, når du klikker på en lenke, åpnes dokumentet i samme vindu som siden din, dvs. siden din vil stenge. Og dette er ikke bra. Spesielt for promotert innholdsprosjekter eller blogger anbefales det at når du klikker på en lenke, åpnes dokumentet i et nytt vindu eller fane uten å lukke siden.

Målattributtet med verdien "_blank" vil hjelpe oss med dette. Det er ikke noe komplisert her. Du trenger bare å sette dette inn i åpningstaggen etter href-attributtverdien. La oss ta det utdraget fra filen lukomorye.html, der vi laget en lenke til pushkin.html-siden, først nå skal vi skrive akkurat denne egenskapen. Det skal se slik ut:

Fra diktet Ruslan og Lyudmila (forfatter - A.S. Pushkin)

Vel, alt er klart her. Nå, når du klikker på innholdet, åpnes ønsket side i et nytt vindu. Denne tingen er veldig nødvendig, fordi hvis du ikke registrerer den, vil brukeren ganske enkelt forlate siden din. Og så, i alle fall, vil han forbli på den, bare hvis han ikke spesifikt lukker den. Prøv å gjøre alt selv, bare gjør alt vakkert med egne hender. Du trenger ikke å kopiere og lime inn.

På en eller annen måte sånn. Det virker som om jeg fortalte deg alle de viktigste tingene, men hvis du vil bevege deg i denne retningen og lære HTML og CSS for å lage profesjonelle nettsteder, blogger og til og med nettbutikker, så sørg for å se et utmerket videokurs om dette emnet. Leksjonene er virkelig gode og er virkelig fortalt for folk som fortsatt er lite kjent med nettstedbygging eller ikke er kjent i det hele tatt.

Vel, dette avslutter leksjonen vår for i dag. Jeg håper du likte artikkelen min og vil bli glad hvis du blir min faste leser. Så ikke glem å abonnere på bloggoppdateringene mine slik at du ikke går glipp av noe interessant. Vel, jeg ønsker deg suksess i alle dine bestrebelser. Ha det!

Med vennlig hilsen, Dmitry Kostin.