Hur gör man en länk i HTML?

Innehållsförteckning:

Hur gör man en länk i HTML?
Hur gör man en länk i HTML?
Anonim

Webbplatser, bloggar, webbsidor - redan bekanta begrepp i vår tid. Med utvecklingen av Internet har webbplatser för webbsidor blivit otroligt populära, och det är inte förvånande: för vissa människor är det en nödvändighet att ha en egen webbplats, för andra är det en trevlig underhållning. I det första fallet talar vi vanligtvis om företag, företag, privata entreprenörer, när de gör reklam för någon produkt eller tjänst som efterfrågas. Den andra handlar om bloggare.

Förutom detta finns det internetanvändare som helt enkelt söker efter information, läser bloggar, tittar på videor och så vidare.

För att skapa en kvalitetswebbplats finns det många alternativ. Vi kommer att fokusera på webbprogrammering genom HTML.

Vad är HTML

HTML står för Hyper Text Mark-Up Language. Översatt från engelska betyder detta "Hypertext Markup Language".

Med andra ord är HTML en uppsättning koder med vilka du kan skapa huvudelementen på webbplatsen, dess ram, somhur ord är uppbyggda av meningar.

HTML-koder skrivs uteslutande med latinska bokstäver och kallas taggar, och varje kod är omgiven av vinkelparenteser. Vissa taggar är parade, andra är oparade.

Parat betyder att de måste användas i par utan att misslyckas. Till exempel anger öppningstaggen var den börjar på en webbsida, och den avslutande taggen anger var den slutar. Den senare skiljer sig från den förra genom närvaron av ett snedstreck efter öppningsvinkelparentesen. Till exempel är den inledande taggen,är den avslutande taggen.

Oparade taggar behöver ingen partner.

Många taggar kan ha attribut – ytterligare element som ger det en mer specifik betydelse. Till exempel taggen.

webbdesign
webbdesign

Där HTML används

Den klassiska förståelsen av var HTML behövs är webbplatsbyggande.

I praktiken kan detta räcka, eftersom HTML låter dig skapa huvudelementen på webbplatsen, menyer (inklusive flera nivåer), ställa in bakgrunden, infoga text, bilder, ljud, video, redigera teckensnitt och mycket mer.

Det finns dock andra språk som låter dig lägga till mer intressanta och ofta nödvändiga element på en webbsida:

  • CSS ställer in stilar för hela webbplatsen utan att ständigt behöva föreskriva stilegenskaper för individuella element med hjälp av taggar - till exempel textens färg och typsnitt.
  • Skriptspråket låter dig utveckla och bädda in miniprogram (skript) på webbplatsen, allt frånbanala estetiska saker (byter färg på länken när du håller musen över) och slutar med funktionella (samlar kundernas e-postadresser, telefonnummer).
  • Med PHP kan du utveckla din egen gästbok eller kommentarsystem.

Också HTML används för att skapa e-postmeddelanden för distribution.

e-postlista på internet
e-postlista på internet

Vad är en länk

De låter dig navigera till en annan webbsida, både inuti och extern.

HTML-länkar används ofta:

  • För att gå till en extern webbresurs.
  • För att gå igenom sidorna på webbplatsen.
  • För att gå till google formulär.

En länk till källan i HTML anges också ofta, särskilt eftersom du måste ange författaren när du kopierar material från en annan webbplats. Annars kan kopiering utan tillskrivning falla under definitionerna av upphovsrättsintrång, innehållsstöld och bakslag. Dessutom minskar användningen av lånat, icke-unika material SEO-prestandan, och att ange en länk till källan minskar riskerna.

Länktyper

I klassisk mening är en länk adressen till en webbresurs som du kan gå till genom att klicka på den.

typer av länkar
typer av länkar

Förutom detta finns det hyperlänkar: text och bilder. I dessa fall är HTML-länken "dold" under någon mening (ord) eller bild, och för att följa den måste du klicka på texten eller bilden.

Andra typer av länkar:

  • Obesökt - en länk som ännu inte har klickats på under en viss session. Om du till exempel följde den här länken igår, sedan stängde av din dator och slog på den igen idag, är länken nu obesökt igen, eftersom en ny session har startat.
  • Active - i detta tillstånd sparas länken under en mycket kort tid: intervallet mellan att klicka på länken och att följa den.
  • Besökt – en länk som redan har besökts minst en gång under en session.

För vanliga textlänkar tenderar besökta länkar att ändra färg om inget annat anges.

En hyperlänkad bild ändrar inte sitt utseende, oavsett om den besöks eller inte.

Hur infogar man en vanlig länk

Många webbresurser uppfattar webbplatsadressen som en länk, gör den omedelbart klickbar och markera den med färg. Till exempel, om adressen skickas i ett meddelande eller via e-post, klicka på den, kan du gå till webbplatsen.

Om du skapar en webbplats själv med HTML måste du infoga en länk med en speciell tagg. Det kommer att se ut så här: webbadress. Länktext i HTML måste anges i sin helhet, med protokoll.

Hur man infogar en texthyperlänk

Det sades tidigare att en texthyperlänk har samma funktion som en vanlig länk, men ser mer estetiskt tilltalande ut: istället för en webbplatsadress, som ofta är onödigt lång, anges ett ord eller en fras. Till exempel, i meningen "Sök information här", kan du gömma länken iordet "här". Den kommer att markeras och genom att klicka på den kommer användaren till önskad webbplats.

infoga en hyperlänk
infoga en hyperlänk

Hur man gör en HTML-länk har redan diskuterats tidigare. Du kan infoga en texthyperlänk med samma tagg. Den enda skillnaden är att du mellan taggarna måste ange texten under vilken länken ska döljas: synlig text.

Hur man infogar en bildhyperlänk

Det är lite mer komplicerat här. Vi använder samma tagg, men istället för text måste du ange sökvägen till bilden.

Vägen är platsen för bilden. Om bilden (fotot) finns på en fildelningstjänst måste du ange alla mappar längs vägen till bilden genom ett snedstreck. Du kan också inkludera en länk till en bild om det är möjligt.

Att tagga

utöver src, är andra attribut också tillämpliga, vilket gör att du kan justera bildens höjd, bredd och plats och mycket mer. Några av dem:

  • Src - anger sökvägen till bilden.
  • Lowsrc - identisk med föregående attribut, men specificerat för bilder med låg kvalitet.
  • Höjd - bildhöjd.
  • Width - dess bredd.
  • Alt - bildbeskrivning. När du håller muspekaren över ett foto eller en bild kommer texten som anges i detta attribut att dyka upp.
  • Border - bestämmer tjockleken på kanten runt bilden.

Attribut anges efter taggen och ingår idess sammansättning. Attributet måste följas av dess värde. Till exempel, för attributen anger "höjd" eller "bredd" (höjd, bredd) höjden på bilden på webbsidan. Måttenheten är pixlar, om inte annat anges.

Det kommer att se ut så här: <a href="webbsidesadress"

. Dessa attribut hjälper till att ställa in lämplig storlek för bilden. Kant hjälper till att skapa en osynlig kant runt bilden.

efter en länk
efter en länk

Ovanstående attribut gäller separat för taggen för bildinfogning. Till exempel:.

Vad är ankarlänkar

Att skapa ankarlänkar är en mycket användbar färdighet. Ofta finns det behov av att lägga ut en webbsida med ett långt textblock eller med flera underavsnitt på en sida. I det här fallet kan du omedelbart börja med en lista med länkar till undersektioner av texten eller webbsidan, och när du klickar på dem kommer användaren att gå direkt till det begärda avsnittet.

Att skapa ankarlänkar kräver mer användning av attributtaggar än andra typer av länkar.

länkankare
länkankare

Först måste du ställa in det totala värdet för varje informationsblock eller underavsnitt av text med hjälp av topattributet och sedan associera det med motsvarande länk.

Deras funktioner är mer omfattande, därför är det lämpligt att först behärska skapandet av enklare länkar och sedan gå vidare till bildandet av ankarlänkar.

Tips

Placering av olika informationsblock på en webbsida
Placering av olika informationsblock på en webbsida

Hjälp från erfarnaprogrammerare:

  • Du kan göra det så att information om en länk visas vid hovring i HTML. För detta kan alt-attributet, som vi också använder för grafiska element, komma väl till pass.
  • Det är möjligt att göra en lista över länkar med HTML. Detta kan särskilt vara användbart för ankarlänkar, såväl som när du behöver göra en lista över webbresurser som kan följas av en länk direkt från den aktuella webbsidan.
  • Med hjälp av CSS och JavaScript, samt vissa HTML-funktioner, kan du skapa en annan design av textlänkar och hyperlänkar än vanligt. Till exempel, när du håller muspekaren över en länk kan den ändra färg och återgå till den föregående när markören är borta från den. Detta kan göras med ett anpassat JavaScript-skript. Dessutom kan länkfärgen ställas in på något annat än blått för obesökt eller lila för besökt. Det här är CSS:s jobb.
  • missbruk inte länkar. En webbsida med många olämpliga länkar ser slarvig och slarvig ut.
  • Se till att användaren förstår att hyperlänken med bilden verkligen är en bild och inte bara en bild.

Slutsats

Det är väldigt enkelt att länka till en sida i HTML. Det är viktigt att följa alla huvudpunkterna i detta språk, eftersom även ett litet misstag kan leda till att det inte blir något resultat, och koden kommer inte att fungera.

Rekommenderad: