Tips

XHTML Course Lesson 6: Anchors

It’s the fifth lesson already and I think we will have less lessons than I first though, but we will see. After you have mastered the Internal and External links about which I told you in lesson 4 and 5, you will now learn about Anchors. They are sort of links, but they link to a certain place on the same page. I wish you good luck and remember: ( =  lt; and ) =  gt;

If you go to certain websites you might find pages which contain so much text, that it takes ages to scroll down, or to search something. You can check out website builders reviewed by Webpage Scientist to have a clearer understanding on this technical issue. But if you want to point to a certain place on that page you could use anchors. On the place where we want to redirect our reader to, we put such an anchor:

(a name=”name”)(/a)For the name you could use any word, but to keep things structural, a useful name with a meaning is recommended.

Now you have placed the anchor on the page you just need to place link to the anchor. It works almost the same as a external link, so it should be easy. A link to an anchor looks like this:

(a href=”#name”)Click here(/a)Don’t forget the ‘#’ symbol in front of the name of the anchor your are pointing to!

There is also a possibility to jump from one page, to another page and also to a certain place on that page. It’s kind of a combination between an internal link and an anchor. Because you already master the internal links, it shouldn’t be very hard, but it could be really handy for your visitors, if you want to point them to a certain text on the page. For a good example we use the same folder structure as we had in lesson 5:

– Website

— index.html

— Slideshow

— slideshow.html

— Images

—- slide.jpg

Now if we are on the index.html page and we want to point to an anchor on the page slideshow.html called ‘anchor1’, then it should look like this:

(a href=”Slideshow/slideshow.html#anchor1″)link to the slideshow web page(/a)Assignment

Create a new web page and name it: longtext.html. Paste a good amount of text into this page so it’s pretty good scroll-able. Now create an anchor to the middle of the page and put a hyperlink to this anchor on the beginning of this page. Finally open the index.html file and place a hyperlink on this page to the anchor on the ‘longtext’ web page, when both hyperlinks are working save both of these files in the folder; ‘website’.