Screen Printing

TUTORIALS » HTML / JavaScript » HTML essentials (guided tutorials)

Links in HTML

Page 3 of 4


Anchors

Although it is not a very recommended practice, sometimes you will need to write pages that are too long to fit in a single "screen" of a web browser, so the users will need to scroll down several times to read the whole page.

In cases like that you can create anchors, which are like invisible bookmarks inside a web page that you can point links to.

To define an anchor you also use the
<a>
tag, but instead of using the href parameter you have to use the name parameter. Take a look at the folloing example:
<a name="your_anchor_name"></a>
Where your_anchor_name is the name you specified for your anchor.

To create a link to an anchor inside the same file, the syntax is:
<a href="#your_anchor_name">Click here</a>
To create a link to an anchor inside another file, you use:
<a href="file_name.html#your_anchor_name">Click here</a>

  1. Create a new .html file, name it many_parragraphs.html and write:
    <a name="page_top"></a>
    
    
    <a href="#section1">Section One</a> 
    _ _ _ 
    
    <a href="#section20">Section Twenty</a>
    <br /><br />
    
    
    <a name="section1"></a>
    <h3>Section One</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut neque. Sed adipiscing. Praesent est mauris, mattis ac, dapibus in, sagittis at, neque. Duis ac ipsum vitae leo molestie viverra. Duis iaculis dolor ut arcu. Nunc vel dolor sit amet pede lacinia scelerisque. Proin pretium. Sed hendrerit, sem ut tristique placerat, dolor tortor iaculis odio, eu varius lectus arcu ac ipsum. Vestibulum lacus. Quisque vel metus a mauris egestas rhoncus. Proin lobortis leo vehicula libero. Vestibulum imperdiet facilisis nibh. Vivamus eu dui. Sed facilisis velit eget elit. Etiam eleifend placerat metus. Aenean ipsum. Etiam lacus lectus, adipiscing non, pretium sed, ultrices sit amet, arcu. <a href="#page_top">Top</a></p>
    _ _ _
    
    <a name="section20"></a>
    <h3>Section Twenty</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut neque. Sed adipiscing. Praesent est mauris, mattis ac, dapibus in, sagittis at, neque. Duis ac ipsum vitae leo molestie viverra. Duis iaculis dolor ut arcu. Nunc vel dolor sit amet pede lacinia scelerisque. Proin pretium. Sed hendrerit, sem ut tristique placerat, dolor tortor iaculis odio, eu varius lectus arcu ac ipsum. Vestibulum lacus. Quisque vel metus a mauris egestas rhoncus. Proin lobortis leo vehicula libero. Vestibulum imperdiet facilisis nibh. Vivamus eu dui. Sed facilisis velit eget elit. Etiam eleifend placerat metus. Aenean ipsum. Etiam lacus lectus, adipiscing non, pretium sed, ultrices sit amet, arcu. <a href="#page_top">Top</a></p>
    Yes, you should end up with a total of 20 links at the top of the page and 20 paragraphs, each one with its proper anchor name and title (I am too lazy to write it all for you).
  2. Preview your file and test the behavior of the links at the top.
You just created anchors and links to navigate inside a single .html file.
Now let's link to an anchor on an external file.

  1. Create a new .html file in the SAME folder as many_paragraphs.html and name it linker.html.
  2. Write
    <a href="many_paragraphs.html">Simple link</a>
      <br />
      <br />
    <a href="many_paragraphs.html#section10">Link to anchor 10</a>
  3. Preview your new file on your browser and test the behavior of both links.
This time you created an .html file with a simple link to another file and a link to an anchor in another file.

Do you want to learn how to set links to open in a new window so you don't lose the page you are surfing? Continue to the last page of this tutorial.

More pages of this tutorial → Links in HTML  <1234>

Comments & Questions