Hvordan laver man et link i HTML?

Indholdsfortegnelse:

Hvordan laver man et link i HTML?
Hvordan laver man et link i HTML?
Anonim

Websteder, blogs, websider - allerede kendte begreber i vores tid. Med udviklingen af internettet er websteder til hosting af websider blevet utroligt populære, og det er ikke overraskende: for nogle mennesker er det en nødvendighed at have deres egen hjemmeside, for andre er det en behagelig underholdning. I det første tilfælde taler vi norm alt om virksomheder, virksomheder, private iværksættere, når de reklamerer for ethvert produkt eller en tjeneste, der efterspørges. Den anden handler om bloggere.

Udover dette er der internetbrugere, der blot søger efter information, læser blogs, ser videoer og så videre.

Der er mange muligheder for at skabe et kvalitetswebsted. Vi vil fokusere på webprogrammering gennem HTML.

Hvad er HTML

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

Med andre ord er HTML et sæt koder, som du kan bruge til at oprette hovedelementerne på webstedet, dets ramme, som f.eks.hvordan ord er opbygget af sætninger.

HTML-koder er udelukkende skrevet med latinske bogstaver og kaldes tags, og hver kode er omgivet af vinkelparenteser. Nogle tags er parret, nogle er uparrede.

Parret betyder, at de skal bruges i par uden fejl. For eksempel angiver åbningstagget, hvor det starter på en webside, og det afsluttende tag angiver, hvor det stopper. Sidstnævnte adskiller sig fra førstnævnte ved tilstedeværelsen af et skråstreg efter åbningsvinkelparentesen. For eksempel er det indledende tag,er det afsluttende tag.

Uparrede tags behøver ikke en partner.

Mange tags kan have attributter - yderligere elementer, der giver det en mere specifik betydning. For eksempel tagget.

webdesign
webdesign

Hvor HTML bruges

Den klassiske forståelse af, hvor HTML er nødvendig, er bygning af websteder.

I praksis kan dette være nok, da HTML giver dig mulighed for at oprette hovedelementerne på webstedet, menuer (inklusive flere niveauer), indstille baggrunden, indsætte tekst, billeder, lyd, video, redigere skrifttyper og meget mere.

Der er dog andre sprog, der giver dig mulighed for at tilføje mere interessante og ofte nødvendige elementer til en webside:

  • CSS angiver stilarter for hele webstedet uden konstant at skulle foreskrive stiltræk for individuelle elementer ved hjælp af tags - f.eks. tekstens farve og skrifttype.
  • Scriptsproget giver dig mulighed for at udvikle og integrere miniprogrammer (scripts) på webstedet, lige frabanale æstetiske ting (skifter farven på linket, når du holder musen over) og slutter med funktionelle ting (indsamling af kunde-e-mailadresser, telefonnumre).
  • Med PHP kan du udvikle din egen gæstebog eller kommentarsystem.

Også HTML bruges til oprettelse af e-mails til distribution.

internet mailingliste
internet mailingliste

Hvad er et link

De giver dig mulighed for at navigere til en anden webside, både inde på webstedet og eksternt.

HTML-links er almindeligt anvendte:

  • For at gå til en ekstern webressource.
  • At gå gennem siderne på webstedet.
  • For at gå til google formularer.

Et link til kilden i HTML er også ofte angivet, især da du, når du kopierer materiale fra et andet websted, skal angive forfatteren. Ellers kan kopiering uden tilskrivning falde ind under definitionerne af ophavsretskrænkelse, indholdstyveri og bagslag. Derudover reducerer brugen af lånte, ikke-unikke materialer SEO-ydeevne, og angivelse af et link til kilden reducerer risici.

Typer af links

I klassisk forstand er et link adressen på en webressource, som du kan gå til ved at klikke på den.

typer af links
typer af links

Udover dette er der hyperlinks: tekst og billeder. I disse tilfælde er HTML-linket "skjult" under en sætning (ord) eller et billede, og for at følge det skal du klikke på teksten eller billedet.

Andre typer links:

  • Ubesøgt - et link, der endnu ikke er blevet klikket på under en bestemt session. Hvis du f.eks. fulgte dette link i går, derefter slukkede din computer og tændte den igen i dag, er linket nu ikke besøgt igen, da en ny session er startet.
  • Aktiv - i denne tilstand gemmes linket i meget kort tid: intervallet mellem at klikke på linket og følge det.
  • Besøgt - et link, der allerede er blevet besøgt mindst én gang i løbet af en session.

For almindelige tekstlinks har de besøgte en tendens til at skifte farve, medmindre andet er angivet.

Et hyperlinket billede ændrer ikke dets udseende, uanset om det besøges eller ej.

Sådan indsætter du et almindeligt link

Mange webressourcer opfatter webstedsadressen som et link, gør den straks klikbar og fremhæver den med farve. Hvis adressen f.eks. sendes i en messenger eller via e-mail, ved at klikke på den, kan du gå til webstedet.

I tilfælde af at oprette et websted selv ved hjælp af HTML, skal du indsætte et link ved hjælp af et særligt tag. Det vil se sådan ud: webstedsadresse. Linktekst i HTML skal angives fuldt ud med protokol.

Sådan indsætter du et teksthyperlink

Det blev tidligere sagt, at et teksthyperlink udfører samme funktion som et almindeligt link, men ser mere æstetisk tiltalende ud: i stedet for en webstedsadresse, som ofte er unødvendigt lang, angives et ord eller en sætning. For eksempel i sætningen "Kig efter information her", kan du skjule linket iordet "her". Det vil blive fremhævet, og et klik på det vil tage brugeren til det ønskede websted.

indsættelse af et hyperlink
indsættelse af et hyperlink

Hvordan man laver et HTML-link er allerede blevet diskuteret tidligere. Du kan indsætte et teksthyperlink ved at bruge det samme tag. Den eneste forskel er, at du mellem taggene skal angive den tekst, som linket skal skjules under: synlig tekst.

Sådan indsætter man et billedhyperlink

Det er lidt mere kompliceret her. Vi bruger det samme tag, men i stedet for tekst skal du angive stien til billedet.

Stien er placeringen af billedet. Hvis billedet (billedet) er placeret på en fildelingstjeneste, skal du angive alle mapperne langs stien til billedet gennem en skråstreg. Du kan også inkludere et link til et billede, hvis det er muligt.

At tagge

udover src er andre attributter også anvendelige, så du kan justere højden, bredden og placeringen af billedet og meget mere. Nogle af dem:

  • Src - angiver stien til billedet.
  • Lowsrc - identisk med den forrige attribut, men specificeret til billeder i lav kvalitet.
  • Højde - billedhøjde.
  • Width - dens bredde.
  • Alt - billedbeskrivelse. Når du holder markøren over et billede eller billede, vil teksten, der er angivet i denne attribut, dukke op.
  • Border - bestemmer tykkelsen af rammen omkring billedet.

Attributter er angivet efter tagget og er inkluderet idens sammensætning. Attributten skal efterfølges af dens værdi. For attributterne angiver "højde" eller "bredde" (højde, bredde) f.eks. højden af billedet på websiden. Måleenheden er pixels, medmindre andet er angivet.

Det vil se sådan ud: <a href="websideadresse"

. Disse attributter hjælper med at indstille den passende størrelse til billedet. Kant hjælper med at skabe en usynlig kant rundt om billedet.

ved at følge et link
ved at følge et link

Ovenstående egenskaber gælder separat for billedindsættelsesmærket. For eksempel:.

Hvad er ankerlinks

Oprettelse af ankerlinks er en meget nyttig færdighed. Ofte er der behov for at lægge en webside ud med en lang tekstblok eller med flere underafsnit på én side. I dette tilfælde kan du straks starte med en liste over links til underafsnit af teksten eller websiden, og når du klikker på dem, vil brugeren gå direkte til den anmodede sektion.

Oprettelse af ankerlinks vil kræve mere brug af attributtags end andre typer links.

link anker
link anker

Først skal du indstille den overordnede værdi for hver informationsblok eller underafsnit af tekst ved hjælp af topattributten og derefter knytte den til det tilsvarende link.

Deres funktioner er mere omfattende, derfor er det tilrådeligt først at mestre oprettelsen af enklere links og derefter gå videre til dannelsen af ankerlinks.

Tips

Placering af forskellige blokke af information på en webside
Placering af forskellige blokke af information på en webside

Hjælp fra erfarneprogrammører:

  • Du kan gøre det sådan, at information om et link vises, når du svæver i HTML. Til dette kan alt-attributten, som vi også bruger til grafiske elementer, være praktisk.
  • Det er muligt at lave en liste over links ved hjælp af HTML. Dette kan især være nyttigt for ankerlinks, såvel som når du skal lave en liste over webressourcer, der kan følges af et link direkte fra den aktuelle webside.
  • Ved hjælp af CSS og JavaScript, samt nogle HTML-funktioner, kan du skabe et andet design af tekstlinks og hyperlinks end norm alt. Når du f.eks. holder musemarkøren over et link, kan det skifte farve og vende tilbage til det forrige, når markøren er væk fra det. Dette kan gøres med et brugerdefineret JavaScript-script. Derudover kan linkfarven indstilles til noget andet end blå for ubesøgt eller lilla for besøgt. Dette er CSS' opgave.
  • Misbrug ikke links. En webside med mange upassende links ser sjusket og sjusket ud.
  • Sørg for, at brugeren forstår, at hyperlinket med billedet virkelig er et billede og ikke bare et billede.

Konklusion

Det er meget nemt at linke til en side i HTML. Det er vigtigt at følge alle hovedpunkterne i dette sprog, da selv en lille fejl kan føre til, at der ikke er noget resultat, og koden vil ikke fungere.

Anbefalede: