Hur länkar jag till en sida med HTML?
Elementet "ankare" definierar en plats på sidan som du kan länka till.
Medan en meny eller innehållsförteckning kan hjälpa, är det tröttsamt att besöka toppen av en lång webbsida och sedan bläddra ner för att hitta det du letar efter. Spara dina besökare en resa genom att länka direkt till ett ankare istället. Ett ankare kan visas var som helst på sidan och har en kort "fragmentidentifierare" från id-attributet. Lägg till # -symbolen följt av fragmentidentifieraren i slutet av webbadressen och du kan länka direkt till ankaret.
Del 1 av 2: skapa ett destinationsankare
- 1Skapa ett ankarelement. Elementet "ankare" <a> </a> definierar en plats på sidan som du kan länka till. Allt i taggarna <a> och </a>, vanligtvis text eller en bild, kan vara destinationen för länken.
- 2Placera något inuti ankarelementet. Även om det är giltigt HTML för att lämna ankarelementet tomt, kan vissa webbläsare inte hitta det om det inte finns något mellan taggarna <a> och </a>. Skriv bara in texten du vill länka till:
- <a> Mitt Lasagnerecept </a>
- A-taggen ändrar vanligtvis inte textens stil. I det här exemplet kommer "My Lasagna Recipe" att visas som vanlig text.
- 3Lägg till ett id-attribut till ditt ankareelement. Id-attributet ger ankaren en unik identifierare så att du kan länka till den. Placera den i <a> taggen enligt följande:
- <a id="anchor-name-1"> Mitt lasagnerecept </a>
- 4Välj ett värde för ditt ID. I exemplet ovan användes "anchor-name-1", men det är bäst att ge dina ankare ett beskrivande värde, till exempel "lasagne" i det här fallet. Detta värde måste vara unikt för detta id. Om ett annat id i samma dokument har samma värde, kan webbläsaren inte identifiera det enda ankaret du försöker länka till.
- I HTML4 måste värdet börja med en bokstav. Kan använda bokstäver, siffror, bindestreck, understrykningar, kolon och punkt.
- I HTML5 kan du använda vilket tecken som helst utom blanksteg.
- Var försiktig med dina fall. "Polska" och "polska" anses vara samma värde och bör inte visas i samma dokument.
- 5Infoga id i valfritt element istället. Du behöver inte använda <a> taggen varje gång du vill skapa ett ankare. Id-attributet kan faktiskt gå in i alla HTML-element. Alla moderna webbläsare (går ganska länge tillbaka) bör kunna tolka detta. Här är några exempel:
- Ankare i en rubrik: <h2 id = "biblio"> Bibliografi </h2>
- Ankare i en bild: <img id = "logo" src = "L2xvZ28ucG5n" />
- Ankare i ett stycke: <p id = "introparagraph"> (inledande stycke) </p>
- Kom ihåg att varje id bara kan visas en gång per sida.
Id-attributet kan faktiskt gå in i alla HTML-element.
Del 2 av 2: länkning till destinationsankaren
- 1Länk till ankaret från andra håll på samma sida. Det här liknar alla länkar med <a href=""> </a> formatet. Använd istället för en URL som värdet för attributet href symbolen # följt av ankarvärdet. För att länka till lasagnereceptet i exemplet ovan skriver du:
- <a href="#lasagna"> Klicka här för att se mitt lasagnerecept. </a>
- Använd exakt samma fodral som du gjorde när du skapade ankaret. Vissa webbläsare känner inte igen "#Lasagna" som en länk till "lasagne."
- 2Länk till ankaret från en annan webbsida. Du kan också länka till ditt ankare från vilken annan webbplats som helst. Inkludera bara webbadressen följt av # och ankarvärdet. Här är några exempel:
- Länkar från en annan sida i samma domän:
<a href=".html#lasagna"> Gå till min recept sida för att se mitt lasagnerecept. </a> - Länkar var som helst:
<a href="http://wikicooking.org/recipes.html#lasagna"> Kolla in min väns webbplats med ett lasagnerecept. </a>
- Länkar från en annan sida i samma domän:
- 3Förvandla en bild till en länk. Som med en vanlig webbadress kan du länka till ett ankare med en bild:
- <a href="#lasagna"> <img src = "LnBuZw ==" /> </a>
Id-attributet ger ankaren en unik identifierare så att du kan länka till den.
- Detta är ett bra sätt att göra fotnoter. Konventionen är att länka till fotnoter med ett nummer i övre och fyrkantiga parenteser. Till exempel:
Julius Caesar <sup> <a href="#ftn1"> [1] </a> </sup>
länkar till:
<a id="ftn1"> Min berömda romerska och nära vän. </ A > - Om dina ankarlänkar bara tar dig till toppen av sidan, kontrollera om din webbplats inte omdirigerar webbläsaren till en något annan URL. Till exempel kommer vissa webbläsare (felaktigt) att släppa ankaret efter omdirigering från http://exempel.com till http://exempel.com. Du kan åtgärda detta genom att se till att alla dina ankarlänkar pekar på http://example.com/#anchor-name, så att omdirigeringen inte sker.
Ett ankare kan visas var som helst på sidan och har en kort "fragmentidentifierare" från id-attributet.
- Ett vanligt misstag är att använda # -symbolen när du skapar destinationsankaren. Använd bara # när du länkar till ankaret, inuti ett href-attribut.
- Understreck i id-värden kan orsaka problem när du använder CSS för att utforma ditt dokument.
- HTML5 och XHTML stöder inte namnattributet i ankarelement. Använd id-attributet istället som beskrivs i den här artikeln. Om du förväntar dig att besökare på din webbplats använder mycket föråldrade webbläsare (långt över tio år gamla) kan du inkludera två identiska id- och namnattribut (<a id="example-anchor" name="example-anchor"> Exempel Text </a>). HTML4 stöder detta officiellt endast för elementen a, applet, form, frame, iframe, img och map.
Frågor och svar
- Hur kan jag skapa en sida?Du kan skapa en webbsida eller webbplats genom att logga in på Google, välja Google Sites och välja New Google Sites. Gå sedan till Skapa ny webbplats och skapa webbsida.
