Link til overskrifter i artikel (HTML, WordPress)

Hjem/Alle indlæg, Homepage, Script/kode, Server, Wordpress/Link til overskrifter i artikel (HTML, WordPress)

Link til overskrifter i artikel (HTML, WordPress)




Laver du hjemmesider eller benytter du wordpress, Joomla eller andre CMS systemer, som giver mulighed for at benytte html?. For at lave disse interne link til overskrift i artikel, skal du benytte eksempelvis id html tag omkring teksten og derefter oprette et link som henviser til dit id tag.

Du kan benytte denne metode til at oprette interne links i dine artikler, så man hurtigere kan springe frem i teksten. Dette er f. eks nyttigt, hvis du laver en introduktion eller indholdsfortegnelse i starten af artiklen, og derefter linker punkterne i indholdsfortegnelsen til de passende overskrifter.

Eksempel på indholdsfortegnelse med link til overskrifter i artikel:

Link til overskrifter

Hvis du vil forsøge at bruge funktionen, så kan du finde den her: http://www.vislo.dk/langsom-computer-hurtigere-computer-tips-tricks/

Til sidst i URL adressen tilføjer man et hashtag+ID. I dette eksempel er ID’et fjernprogrammer og URLen vil derfor se ud som nedenstående: Prøv evt. at klikke på linket, så kan du at siden bliver indlæst og vist fra punktet Fjern startup programmer

http://www.vislo.dk/langsom-computer-hurtigere-computer-tips-tricks/#fjernprogrammer

 

Link til overskrifter i artikel med HTML

 

Du kan benytte alle html tag til dette, det kræver kun at du tilføjer et id og et navn til ID’et udfor det punkt du ønsker at lave et link til. Når det er gjort så skal du blot vælge at linke et stykke tekst til eksempelvis #fjernprogrammer

 

Eksempel og forklaring af indlæg / opsætning:

Vi har tilføjet indholdet, så du faktisk kan trykke på steps herunder, men bemærk at der ikke er særlig meget tekst i punkterne, så det er ikke sikkert placeringen vil være præcis

Indholdsfortegnelsen:

  •  Step1(Dette punkt skal linke til Step1)
  • Step2 (Dette punkt skal linke til Step2)
  • Step3 (opret et link til step 3 og angiv link som værende #step3. eksempel: <a href=”#step3″>Step3</a>

 

Step1 (Du ønsker at tilføje et id tag i html. Hvis step1 i html for eksempel hedder <h1>step1</h1>, så skal du rette til følgende: <h1 id=”step1>Step1</h1>)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula accumsan consequat. Sed placerat nisi turpis, sed ullamcorper augue pulvinar vitae. Cras ut tellus ac nibh posuere tincidunt fringilla ac libero. Donec luctus, lorem ut rhoncus tristique, mi nulla adipiscing ligula, ut hendrerit mauris ipsum eget magna. In hac habitasse platea dictumst. Morbi at risus et sapien adipiscing blandit a quis justo. Quisque at sodales mauris. Nam volutpat eu metus eget dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris auctor tortor in ligula sollicitudin, id elementum lacus dapibus. Praesent sed mauris nibh. Sed ut egestas justo, vitae ornare lorem.

Step2 (Du ønsker at tilføje et id tag i html. Hvis step2 i html for eksempel hedder <h1>step2</h1>, så skal du rette til følgende: <h1 id=”step2>Step2</h1>)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula accumsan consequat. Sed placerat nisi turpis, sed ullamcorper augue pulvinar vitae. Cras ut tellus ac nibh posuere tincidunt fringilla ac libero. Donec luctus, lorem ut rhoncus tristique, mi nulla adipiscing ligula, ut hendrerit mauris ipsum eget magna. In hac habitasse platea dictumst. Morbi at risus et sapien adipiscing blandit a quis justo. Quisque at sodales mauris. Nam volutpat eu metus eget dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris auctor tortor in ligula sollicitudin, id elementum lacus dapibus. Praesent sed mauris nibh. Sed ut egestas justo, vitae ornare lorem.

Step3 (her gør du det samme som step1-2, du skal blot huske at ændre id til step3 eller hvad du ønsker.)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula accumsan consequat. Sed placerat nisi turpis, sed ullamcorper augue pulvinar vitae. Cras ut tellus ac nibh posuere tincidunt fringilla ac libero. Donec luctus, lorem ut rhoncus tristique, mi nulla adipiscing ligula, ut hendrerit mauris ipsum eget magna. In hac habitasse platea dictumst. Morbi at risus et sapien adipiscing blandit a quis justo. Quisque at sodales mauris. Nam volutpat eu metus eget dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris auctor tortor in ligula sollicitudin, id elementum lacus dapibus. Praesent sed mauris nibh. Sed ut egestas justo, vitae ornare lorem.

 Kildekode i HTMl for ovenstående:

Herunder finder du den rene html kode for at udføre, præcis den samme handling som i eksemplet herovre. Alt tekst og ekstra html koder er fjernet, så du kun ser de koder som det kræver for at få dette til at virke:

// Linket til overskriftet (id)\\

<a href="#step1">Step1</a>
<a href="#step2">Step2</a>
<a href="#step3">Step3</a>

//Her angiver vi at step1 har id step1 og step2 har id step2 \\

<strong id="step1">Step1 </strong>

<strong id="step2">Step2 </strong>

<strong id="step3">Step3 </strong>

Dette var vores vejledning til Link til overskrifter med HTML, samt CMS systemer som wordpress, Joomla, Drupal osv.

By | 2017-03-10T20:35:20+00:00 august 4th, 2014|Alle indlæg, Homepage, Script/kode, Server, Wordpress|Kommentarer lukket til Link til overskrifter i artikel (HTML, WordPress)

Del denne historie, Vælg din platform!

About the Author:

Jeg er uddannet IT-supporter ,siden da har jeg haft en fuldtidsstilling i en ServiceDesk og i min fritid roder jeg lidt med Vislo og andre webtjenester. Jeg er meget interesseret i diverse technologier indenfor computerens verden og elsker udfordringer. Hvis i har brug for hjælp eller har spørgsmål, så skal i være velkommen til at kontakte os.