i den här handledningen lär du dig hur du skapar länkar till andra sidor i HTML.
skapa länkar i HTML
en länk eller hyperlänk är en anslutning från en webbresurs till en annan. Länkar tillåter användare att flytta sömlöst från en sida till en annan, på vilken server som helst i världen.
en länk har två ändar, kallade ankare. Länken startar vid källankaret och pekar på destinationsankaret, vilket kan vara vilken webbresurs som helst, till exempel en bild, ett ljud-eller videoklipp, en PDF-fil, ett HTML-dokument eller ett element i själva dokumentet och så vidare.
som standard visas länkar som följer i de flesta webbläsare:
- en obesökt länk är understruken och blå.
- en besökt länk är understruken och lila.
- en aktiv länk är understruken och röd.
du kan dock skriva över detta med CSS. Läs mer om stylinglänkar.
HTML-Länksyntax
länkar anges i HTML Med taggen <a>.
en länk eller hyperlänk kan vara ett ord, en grupp av ord eller en bild.
allt mellan den inledande taggen <a> och den avslutande taggen </a> blir den del av länken som användaren ser och klickar i en webbläsare. Här är några exempel på länkarna:
exempel
prova den här koden ”
<a href="https://www.google.com/">Google Search</a><a href="https://www.tutorialrepublic.com/">Tutorial Republic</a><a href="images/kites.jpg"> <img src="kites-thumb.jpg" alt="kites"></a>attributet href anger målet för länken. Dess värde kan vara en absolut eller relativ URL.
en absolut URL är den URL som innehåller alla delar av URL-formatet, till exempel protokoll, värdnamn och sökväg för dokumentet, t.ex. https://www.google.com/, https://www.example.com/form.php, etc. Medan relativa webbadresser är sidrelaterade sökvägar, t.ex. contact.html, images/smiley.png och så vidare. En relativ URL innehåller aldrig prefixet http:// eller https://.
ställa in mål för länkar
attributet target talar om för webbläsaren var det länkade dokumentet ska öppnas. Det finns fyra definierade mål, och varje målnamn börjar med ett understreck(_) tecken:
-
_blank— öppnar det länkade dokumentet i ett nytt fönster eller flik. -
_parent— öppnar det länkade dokumentet i det överordnade fönstret. -
_self— öppnar det länkade dokumentet i samma fönster eller flik som källdokumentet. Detta är standardvärdet, därför är det inte nödvändigt att uttryckligen ange detta värde. -
_top— öppnar det länkade dokumentet i hela webbläsarfönstret.
prova följande exempel för att förstå hur länkens mål i princip fungerar:
exempel
prova den här koden ”
<a href="/about-us.php" target="_top">About Us</a><a href="https://www.google.com/" target="_blank">Google</a><a href="images/sky.jpg" target="_parent"> <img src="sky-thumb.jpg" alt="Cloudy Sky"></a>tips: om din webbsida är placerad i en iframe kan du använda target="_top" på länkarna för att bryta ut ur Iframe och visa målsidan i hela webbläsarfönstret.
skapa Bokmärkesankare
du kan också skapa bokmärkesankare så att användare kan hoppa till ett visst avsnitt på en webbsida. Bokmärken är särskilt användbara om du har en mycket lång webbsida.
att skapa bokmärken är en tvåstegsprocess: lägg först till attributet id på elementet där du vill hoppa och använd sedan attributvärdet id föregås av hashtecknet (#) som värdet på attributet href för taggen <a>, som visas i följande exempel:
exempel
prova den här koden ”
<a href="#sectionA">Jump to Section A</a><h2>Section A</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>Tips: Du kan till och med hoppa till ett avsnitt på en annan webbsida genom att ange webbadressen till den sidan tillsammans med ankaret (dvs. #elementId) i attributet href, till exempel <a href="mypage.html#topicA">Go to TopicA</a>.
skapa nedladdningslänkar
du kan också skapa filnedladdningslänken på exakt samma sätt som att placera textlänkar. Peka bara måladressen till filen du vill vara tillgänglig för nedladdning.
i följande exempel har vi skapat nedladdningslänkarna för ZIP -, PDF-och JPG-filer.
exempel
prova den här koden ”
<a href="downloads/test.zip">Download Zip file</a><a href="downloads/masters.pdf">Download PDF file</a><a href="downloads/sample.jpg">Download Image file</a>Obs!: När du klickar på en länk som pekar på en PDF-eller bildfil hämtas inte filen direkt till din hårddisk. Det öppnar bara filen i din webbläsare. Vidare kan du spara eller ladda ner den till din hårddisk permanent.