Links (again)

We are going to use links today the way we linked to the image in Lesson 11, by linking to it in its directory. Take a look at this code.

<a href="./pages/settings.html">Settings</a>

What does this code do? It puts a link on the page. On the page we’d read Settings and it would link to another page on our site.

This is where it’s different than what we did before. Before we linked to other web addresses or to different points on the same page.

Each page on our site isn’t its own website. Its part of the site. The main page of our site is called the index. That’s the main front page of your site. We’ll make an index file in just a minute.

What do these links tell us? The first is saying to go to open the settings.html document in the pages directory (folder) that’s in the current directory (whatever folder your index file is in.

Save an empty file in your Projects directory as index.html.

Add code like this.

<html> <body> <ul> <li><a href="./lessons/lesson1.html">Lesson 1</a></li> <li><a href="./lessons/lesson2.html">Lesson 2</a></li> </ul> </body> </html>

The links will take you to your previous lessons. Make sure you are still using quotation marks and the full file name, which includes the .html part.

One more attribute you can add to your links is called the target. What if you wanted your new page to open in its own tab? Just add the target attribute of blank, and it will open it on a blank page, so to speak. It looks like this.

target = “_blank”   You add it inside the tag just like other attributes. You just put in a space and then just list the next attribute.

<a href="./lesons/lesson1.html" target="_blank" >Lesson 1</a>

You can watch the video to get more out of the lesson.