Hvordan lage en lenke i HTML?

Innholdsfortegnelse:

Hvordan lage en lenke i HTML?
Hvordan lage en lenke i HTML?
Anonim

Nettsteder, blogger, nettsider - allerede kjente begreper i vår tid. Med utviklingen av Internett har nettsteder for hosting av nettsider blitt utrolig populære, og dette er ikke overraskende: for noen mennesker er det en nødvendighet å ha sitt eget nettsted, for andre er det en hyggelig underholdning. I det første tilfellet snakker vi vanligvis om firmaer, selskaper, private entreprenører, når de annonserer etterspurte produkter eller tjenester. Den andre handler om bloggere.

I tillegg til dette er det Internett-brukere som bare søker etter informasjon, leser blogger, ser videoer og så videre.

For å lage et kvalitetsnettsted er det mange alternativer. Vi vil fokusere på nettprogrammering gjennom HTML.

Hva er HTML

HTML står for Hyper Text Mark-Up Language. Oversatt fra engelsk betyr dette "Hypertext Markup Language".

Med andre ord, HTML er et sett med koder som du kan bruke til å lage hovedelementene på nettstedet, dets ramme, somhvordan ord er bygd opp av setninger.

HTML-koder skrives utelukkende med latinske bokstaver og kalles tagger, og hver kode er omsluttet av vinkelparenteser. Noen tagger er sammenkoblet, noen er ikke sammenkoblet.

Paret betyr at de må brukes i par uten feil. For eksempel indikerer åpningstaggen hvor den starter på en nettside, og den avsluttende taggen indikerer hvor den stopper. Sistnevnte skiller seg fra førstnevnte ved tilstedeværelsen av en skråstrek etter åpningsvinkelparentesen. For eksempel, er åpningskoden,er den avsluttende koden.

Ikke-sammenkoblede tagger trenger ikke en partner.

Mange tagger kan ha attributter – tilleggselementer som gir det en mer spesifikk mening. For eksempel taggen.

webdesign
webdesign

Hvor HTML brukes

Den klassiske forståelsen av hvor HTML er nødvendig er bygging av nettsteder.

I praksis kan dette være nok, siden HTML lar deg lage hovedelementene på nettstedet, menyer (inkludert multi-level), angi bakgrunn, sette inn tekst, bilder, lyd, video, redigere fonter og mye mer.

Det finnes imidlertid andre språk som lar deg legge til flere interessante og ofte nødvendige elementer på en nettside:

  • CSS angir stiler for hele nettstedet uten å måtte foreskrive stilfunksjoner for individuelle elementer ved hjelp av tagger - for eksempel fargen og fonten til teksten.
  • Skriptspråket lar deg utvikle og bygge inn miniprogrammer (skript) på nettstedet, alt frabanale estetiske ting (endrer fargen på lenken når du holder musen over) og avslutter med funksjonelle (samler inn kundenes e-postadresser, telefonnumre).
  • Med PHP kan du utvikle din egen gjestebok eller kommentarsystem.

Også HTML brukes til å lage e-poster for distribusjon.

e-postliste på internett
e-postliste på internett

Hva er en lenke

De lar deg navigere til en annen nettside, både inne på nettstedet og eksternt.

HTML-koblinger er ofte brukt:

  • For å gå til en ekstern nettressurs.
  • For å gå gjennom sidene på nettstedet.
  • For å gå til google-skjemaer.

En lenke til kilden i HTML angis også ofte, spesielt siden du må spesifisere forfatteren når du kopierer materiale fra et annet nettsted. Ellers kan kopiering uten attribusjon falle inn under definisjonene av brudd på opphavsrett, innholdstyveri og tilbakeslag. I tillegg reduserer bruken av lånte, ikke-unike materialer SEO-ytelsen, og å angi en kobling til kilden reduserer risikoen.

Typer lenker

I klassisk forstand er en lenke adressen til en nettressurs som du kan gå til ved å klikke på den.

typer lenker
typer lenker

I tillegg til dette er det hyperlenker: tekst og bilder. I disse tilfellene er HTML-lenken "gjemt" under en setning (ord) eller et bilde, og for å følge den må du klikke på teksten eller bildet.

Andre typer lenker:

  • Ubesøkt - en lenke som ennå ikke har blitt klikket på under en bestemt økt. Hvis du for eksempel fulgte denne koblingen i går, deretter slått av datamaskinen og slått den på igjen i dag, er koblingen ikke besøkt igjen, ettersom en ny økt har startet.
  • Aktiv - i denne tilstanden lagres lenken i svært kort tid: intervallet mellom å klikke på lenken og følge den.
  • Besøkt – en lenke som allerede er besøkt minst én gang i løpet av én økt.

For vanlige tekstlenker har besøkte lenker en tendens til å endre farge med mindre annet er spesifisert.

Et hyperlenket bilde endrer ikke utseendet, enten det er besøkt eller ikke.

Slik setter du inn en vanlig lenke

Mange nettressurser oppfatter nettstedets adresse som en lenke, gjør den umiddelbart klikkbar og marker den med farger. For eksempel, hvis adressen sendes i en messenger eller via e-post, klikker du på den, kan du gå til nettstedet.

Hvis du oppretter et nettsted selv ved hjelp av HTML, må du sette inn en lenke med en spesiell tag. Det vil se slik ut: nettstedsadresse. Linktekst i HTML må spesifiseres i sin helhet, med protokoll.

Slik setter du inn en teksthyperlink

Det ble tidligere sagt at en teksthyperlink har samme funksjon som en vanlig lenke, men ser mer estetisk tiltalende ut: i stedet for en nettstedsadresse, som ofte er unødvendig lang, angis et ord eller en setning. For eksempel, i setningen "Se etter informasjon her", kan du skjule lenken iordet "her". Den vil bli uthevet og klikk på den vil ta brukeren til ønsket side.

sette inn en hyperkobling
sette inn en hyperkobling

Hvordan lage en HTML-kobling har allerede blitt diskutert tidligere. Du kan sette inn en teksthyperkobling ved å bruke den samme taggen. Den eneste forskjellen er at du må spesifisere teksten som lenken skal skjules under mellom taggene: synlig tekst.

Hvordan sette inn en bildehyperlink

Det er litt mer komplisert her. Vi bruker den samme taggen, men i stedet for tekst må du spesifisere banen til bildet.

Stien er plasseringen av bildet. Hvis bildet (bildet) er plassert på en fildelingstjeneste, må du spesifisere alle mappene langs banen til bildet gjennom en skråstrek. Du kan også inkludere en lenke til et bilde hvis mulig.

To tag

i tillegg til src, er andre attributter også gjeldende, slik at du kan justere høyden, bredden og plasseringen av bildet og mye mer. Noen av dem:

  • Src - spesifiserer banen til bildet.
  • Lowsrc - identisk med forrige attributt, men spesifisert for bilder av lav kvalitet.
  • Height - bildehøyde.
  • Width - its width.
  • Alt - bildebeskrivelse. Når du holder markøren over et bilde eller et bilde, vil teksten som er spesifisert i dette attributtet dukke opp.
  • Border - bestemmer tykkelsen på kanten rundt bildet.

Attributter er spesifisert etter taggen og er inkludert idens sammensetning. Attributtet må følges av verdien. For attributtene spesifiserer for eksempel "height" eller "width" (height, width) høyden på bildet på nettsiden. Måleenheten er piksler, med mindre annet er spesifisert.

Det vil se slik ut: <a href="nettsideadresse"

. Disse attributtene hjelper deg med å angi riktig størrelse for bildet. Kant bidrar til å lage en usynlig kant rundt bildet.

følge en lenke
følge en lenke

Attributtene ovenfor gjelder separat for bildeinnsettingskoden. For eksempel:.

Hva er ankerlenker

Å lage ankerlenker er en veldig nyttig ferdighet. Ofte er det behov for å legge ut en nettside med en lang tekstblokk eller med flere underseksjoner på en side. I dette tilfellet kan du umiddelbart starte med en liste over lenker til underseksjoner av teksten eller nettsiden, og når du klikker på dem, vil brukeren gå direkte til den forespurte delen.

Å lage ankerlenker vil kreve mer bruk av attributt-tagger enn andre typer lenker.

lenke anker
lenke anker

Først må du angi den totale verdien for hver informasjonsblokk eller underseksjon av tekst ved å bruke toppattributtet, og deretter knytte den til den tilsvarende lenken.

Deres funksjoner er mer omfattende, derfor er det tilrådelig å først mestre opprettelsen av enklere lenker, og deretter gå videre til dannelsen av ankerlenker.

Tips

Plassering av ulike blokker med informasjon på en nettside
Plassering av ulike blokker med informasjon på en nettside

Hjelp fra erfarneprogrammerere:

  • Du kan gjøre det slik at informasjon om en lenke vises ved hover i HTML. Til dette kan alt-attributtet, som vi også bruker for grafiske elementer, komme godt med.
  • Det er mulig å lage en liste over lenker ved hjelp av HTML. Spesielt kan dette være nyttig for ankerlenker, så vel som når du skal lage en liste over nettressurser som kan følges av en lenke direkte fra gjeldende nettside.
  • Ved hjelp av CSS og JavaScript, samt noen HTML-funksjoner, kan du lage en annen utforming av tekstlenker og hyperlenker enn vanlig. For eksempel, når du holder musepekeren over en lenke, kan den endre fargen og gå tilbake til den forrige når markøren er borte fra den. Dette kan gjøres med et tilpasset JavaScript-skript. I tillegg kan lenkefargen settes til noe annet enn blått for ubesøkt eller lilla for besøkt. Dette er jobben til CSS.
  • Ikke misbruk lenker. En nettside med mange upassende lenker ser slurvete og slurvete ut.
  • Sørg for at brukeren forstår at hyperkoblingen med bildet egentlig er et bilde, og ikke bare et bilde.

Konklusjon

Det er veldig enkelt å lenke til en side i HTML. Det er viktig å følge alle hovedpunktene i dette språket, siden selv en liten feil kan føre til at det ikke blir noe resultat, og koden vil ikke fungere.

Anbefalt: