I dag skal vi gjøre bilder om til klikkbare lenker. Du vet at Internett er helt basert på hyperkoblinger, som lar deg flytte fra en side til en annen med et museklikk. I denne forbindelse har det å bruke bilder som lenker en fordel fremfor vanlige tekstlenker, da det gjør det mulig å vakkert og organisk passe alt inn i nettstedets design.

Bilder brukes ofte som bestillingsknapper på kommersielle ressurser, samme modell brukes i reklamebannere, og du har sett andre eksempler på Internett mange ganger.

Jeg skal snakke om hvordan du gjør et bilde til en lenke ved hjelp av tradisjonell HTML-kode og en alternativ CSS-variant. Vi vil også berøre å gjøre et bilde om til en lenke for det sosiale nettverket VKontakte (alt er ikke så enkelt der). Og i den siste delen av artikkelen vil jeg snakke om fora, hvor de ofte bruker annen koding enn HTML og setter inn bilder og lenker på en annen måte.

Hvordan lage et bilde til en lenke i HTML

HTML bruker en enkel mekanisme for å generere lenker. Det er en spesiell kode som angir en lenke. Objektene inne i den er referanser. Nødvendig tag-attributt er href-parameteren, som spesifiserer målsiden som koblingen vil føre til.

Den resulterende koden for å sette inn lenkebildet ser slik ut:

Det fremgår tydelig av teksten at kuda-vedet-ssylka er adressen til landingssiden, og gde-lezhit-kartinka/kartinka.png er stien til bildefilen og dens navn.

For å tilpasse et slikt bilde kan du bruke alle standard html- og css-funksjoner som lar deg endre størrelse, plassering og spesifisere alle slags attributter.

For tag Attributtet target="_blank" brukes ofte, som åpner lenken i en ny fane.

Et merke inneholder ofte alt=”alternativ tekst vist hvis bildet ikke lastes inn”, title=”bildetittel”, høyde=”høyde i piksler”, bredde=”bredde i piksler”.

Den resulterende koden kan være noe sånt som dette (bloggens logo fører til bloggens hjemmeside):

Og slik fungerer det:

Bildelink til CSS

Når det gjelder CSS, er det en integrert del av et moderne nettsted. Stilark hjelper til med å kvitte seg med unødvendig repetisjon av lignende deler av kode ved å spesifisere egenskapene til visse elementer én gang, og deretter bare angi navnene deres.

1. Lag en objektklasse og skriv den i stilarket (filen style.css).

Den generelle koden ser slik ut:

#link-img ( display: block; width: 323px; height: 232px; background:url(https://gde-lezhit-kartinka/kartinka.png) no-repeat; )

I dette tilfellet er link-img klassen til objektet, bredde og høyde er størrelsen på bildet, bakgrunn er bakgrunnen til objektet (vi setter bildet som bakgrunn).

id=”link-img” viser at lenken ikke er en vanlig, men tilhører denne klassen, som et resultat av at objektet tar egenskapene til denne klassen (høyde, bredde og bakgrunn). Legg merke til at åpnings- og lukkebrikkene er tomme inni. Vi spesifiserte ikke noe, siden alt nødvendig allerede er inneholdt i egenskapene til klassen og det nødvendige bildet er spesifisert av bakgrunnen til objektet.

Hvordan lage et bilde til en lenke på VKontakte

I sosiale nettverk er prosedyren for å lage lenker fra bilder forskjellig fra vanlige nettsteder av den grunn at du ikke har tilgang til kildekoden og vi kan ikke bruke html-tagger, så prosedyren minner om å danse med en tamburin.

Så la oss fremtrylle å legge til lenker til bilder (eller bilder til lenker, som du vil) på veggen eller i meldinger i VKontakte-grupper.

Trinn 1. Forbereder bildet

I VK kan du bare gjøre et stort bilde klikkbart, minimumsstørrelsen er 537 x 240 piksler noe mindre vil vises ved siden av lenken, men vil ikke føre til ønsket side.

Støttede formater er jpg, gif og png.

Trinn 2. Lim inn lenken i VK

Når du legger til en lenke i meldingsboksen, henter det sosiale nettverket automatisk data fra nettstedet og viser sidetittelen (jeg nevnte dette i artikkelen), en liten beskrivelse og et forhåndsvisningsbilde (hvis det finnes).

Trinn 3. Sett inn et bilde

Det er forstått at den automatisk genererte blokken for koblingen på VKontakte ikke er egnet (det er ikke noe bilde, det er lite eller du liker det ikke) - det må endres.

For å gjøre dette, velg "Velg illustrasjon"-knappen (kamera).

Et vindu vil dukke opp for valg av fil her vil du forresten se kravene til formatet og størrelsen på bildene. Klikk "Velg fil" og velg det du forberedte i det første trinnet.

Etter å ha valgt, vil du kunne gjøre små justeringer - trim av overflødig og roter den. Klikk "Lagre endringer".

Etter dette vil formatet på de publiserte nyhetene endres. Hvis du gjorde alt riktig, vil bildet ta opp hele meldingens bredde og bli en lenke. Klikk "Send" og nyt resultatet.

Hvordan lage et bilde til en link på forumet

I de fleste tilfeller, når du oppretter innlegg på fora, brukes visuelle redaktører, der du kan sette inn et bilde med en knapp og gjøre det om til en kobling med en annen.

Men hvis dette ikke er mulig, spiller BB-koder inn - dette er en typisk forummarkering, funksjonelt lik HTML (de fleste funksjoner er like), men har en annen syntaks.

Interessant nok blir alle disse BB-kodene til slutt oversatt til HTML, siden nettlesere ikke kan lese dem.

Bildet i BB-koden er indikert slik:

Alt dette gjøres selvfølgelig i tekstmodusen til redaktøren, og ikke i den visuelle. Det er hele hemmeligheten.

Visuelle redaktører

Ved å bruke ulike grafiske nettsteds- og sidedesignere er det enklere og raskere å implementere alt beskrevet ovenfor, bare klikk på et par knapper. Både i WordPress og i HTML-redaktører og på fora er operasjonsprinsippet det samme, og knappene er like.

1. Sett inn et bilde ved hjelp av disse knappene (eksempelet med forumet var ovenfor, her viser jeg WordPress):

(7 stemmer, gjennomsnitt: 5 av 5)

Denne leksjonen er veldig enkel, nettmestere, selv nybegynnere, vil ikke trenge det, siden det å lage en lenke og lage et bilde til en lenke er det grunnleggende om HTML, men for bloggere som tar sine første skritt, er jeg sikker på at dette emnet vil være nyttig.

Bloggere står ofte overfor behovet for å gjøre et bilde til en lenke, slik at siden vi spesifiserte i lenken åpnes når de klikkes eller klikkes på det. Det være seg en overgang til en annen side på nettstedet, eller et klikk på et bilde - en lenke til en annen ressurs. For eksempel, hvis du trenger å henge et reklamebanner på en nettside, må bildet nesten helt sikkert føre til ressursen du annonserer for.

Hvordan lage en lenke

For å lage en lenke må du plassere den i en HTML-konstruksjon. I HTML er en lenke betegnet med a-taggen, og attributtet til denne taggen spesifiserer banen til siden du vil gå til.
Resultatet er en enkel HTML-konstruksjon. Vi tar denne eksempellenken som grunnlag.

Nettstedbyggerens notatbok

For å lage en lenke som åpnes i et annet nettleservindu, i tillegg til hovedstrukturen, må du legge til attributtet target = "_blank", som forteller nettleseren vår å åpne lenken i et nytt vindu, her er et eksempel:

Hvordan lage et bilde til en lenke

Du må legge til alt=""-attributtet til bildet, som viser alternativ tekst i stedet for bildet hvis det av en eller annen grunn ikke er lastet inn. Forresten, en veldig nyttig egenskap, mer om det nedenfor. Dessuten, hvis du ikke legger til dette attributtet til bildet, vil W3C-validatoren vurdere dette som en feil og tilby å legge det til bildekoden.

— Pass på å signere alt="text"-attributtet og det anbefales å bruke title="", som alternativ tekst er det best å bruke nøkkelordene til artikkelen der bildet er plassert. Søkemotorer Utmerket indeksering av bilder og beskrivelser for dem.

Hold markøren over bildet, eller du kan klikke på det, siden du har lest artikkelen til slutten, så kan du være interessert i denne artikkelen.

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 linker, la oss først finne ut hva en kobling (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-tagger og hyperlenkeattributter, lenkeanker, html-anker og hash-lenker. Så la oss begynne.

Hva er en link (hyperlink).

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 lenker 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 det også svært viktig i søkemotoroptimalisering(SEO), siden det fungerer som en av de avgjørende faktorene som påvirker rangeringen av nettstedet ditt søkeord, inneholdt 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 det er 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 referanse

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 følger en lenke nytt dokumentåpnes i gjeldende vindu. 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 lage et bokmerke fra 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 deretter fortsette.

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!

Det viktigste kjennetegnet ved HTML-dokumenter er opprettelsen av spesielle aktive lenker til andre dokumenter, som kalles hyperkoblinger.

Når du holder musen over dem, tar markøren formen av en hånd, og når du klikker, åpnes en annen nettside eller et spesifikt dokument i nettleservinduet. Hyperkoblinger kan være enten tekst eller bilder.

Det vil fungere hvis det endelige dokumentet er plassert i samme katalog som det gjeldende. Du kan også spesifisere banen til filen i forhold til rotkatalogen til nettstedet ved å bruke tegnet "/".

For eksempel:

sidenavn

For eksempel:

sidenavn

Å lage hyperkoblinger i HTML er en enkel prosess. Som standard er de understreket og uthevet i blått, og besøkte er uthevet i lilla.

• lenke – farge på lenker til nettsider;
• vlink – farge på hyperkoblinger til besøkte nettsider;
• alink – fargen på aktive lenker på en nettside.

For eksempel:

De angitte attributtene bestemmer koblingsfargene til hele HTML-dokumentet. Hvis du setter inn denne koden i taggen, trenger du ikke å angi skriftfargen hver gang.

Grunnleggende attributter for hyperkoblinger

1. tittel – lar deg lage en verktøytipstekst som dukker opp når du holder musepekeren over en hyperkobling.

For eksempel:

Linknavn

2. mål – forteller nettleseren i hvilket vindu koblingen skal åpnes.

Den kan ha følgende verdier:

• _blank – lenken må åpnes i en ny fane;
• _self – HTML-hyperkobling må åpnes i gjeldende fane. Standardverdi;
• _parent – ​​nettleseren skal laste lenken i foreldrevinduet;
• _top – hyperkoblingen lastes gjennom hele området i nettleservinduet (innramming i dette tilfellet forsvinner).

For eksempel:

Linknavn

Dermed har svaret på spørsmålet ofte stilt av nybegynnere webmastere "hvordan sette inn en hyperkobling i HTML" mottatt.

Vi ønsker deg suksess med å lære webprogrammering!

Hei kjære lesere av denne bloggen. Du har sikkert lagt merke til mer enn en gang bilder på Internett som du kan klikke på og dermed gå til en side. Hvordan implementeres dette fra innsiden? Hvordan lage en bildelenke i html? Veldig enkelt.

Link bilde i html

Her må du gjøre det veldig enkelt. Bildeinnsettingskoden er img. Det er singel. Koblingskoden er en . Den er sammenkoblet. Følgelig trenger du bare å sette inn img i den sammenkoblede lenkekoden. Og slik vil det omtrent se ut:

Så det er bare to tagger og to nødvendige attributter - adressen som overgangen vil finne sted når du klikker, og adressen til selve bildet. Andre attributter, som stilklasser eller åpning av en lenke i et nytt vindu, kan spesifiseres etter ønske.

Men dette er ikke den eneste måten å lage en bildelenke i HTML. Det er en annen der du ikke trenger å sette inn bildet direkte i html-koden.

Metode nummer 2

Her har vi ikke satt inn noe bilde i koden. Så hvordan får vi det? Gjennom css og legge til en bakgrunn til lenken. Men først må du gjøre koblingen om til et blokkelement og gi den samme dimensjoner som bildet som vil fungere som bakgrunnsbilde. Følgende kode forutsetter at bildet har en oppløsning på 200 x 200 piksler.

EN(
Display: blokk;
Bredde: 200px;
Høyde: 200px;
Bakgrunn: url(bane til bilde) ingen repetisjon;
}

Her spesifiserte vi klare dimensjoner på elementet, satte deretter et bakgrunnsbilde og ba nettleseren om ikke å gjenta det. Dette vil være nøyaktig den samme bildelenken som i forrige versjon, bortsett fra at den vil ha blokkegenskaper.

Hvilken metode å velge

Det kommer an på målene. For eksempel er grafiske elementer - sosiale nettverksknapper, grafiske navigasjonsknapper og så videre bedre utformet på den andre måten, siden da vil søkemotoren ikke vurdere disse bildene som en del av sideinnholdet, og dens semantikk kan forbedres.

Bilder i innholdsdelen må selvfølgelig tvert imot settes inn ved hjelp av img-taggen, fordi den også kan gis et alternativt tekstattributt, og dette vil forbedre tekstens relevans litt.

Hvordan arbeide