Relative Paths

When referencing other files in your project there is a special syntax used. To demonstrate this, we are going to create a game details page about the video game “Gears of War 3″. To the right is the image we will use for the box art on the page, click it to get the full size. When you see the full size image, right click it and save it to the game-genome folder.

Also in that directory, create a new file called “gow3.html”. You can copy over the data from the first page to give you a quick template. Here is a basic game detail page I came up with:

<!DOCTYPE html>
<html>
  <head>
    <title>The Game Genome Project</title>
  </head>
  <body>
    <h1>The Game Genome Project</h1>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
    <h2>Gears of War 3</h2>
    <img src="gow3.png"/>
    <table>
      <tr>
        <td>Initialism:</td>
        <td>GoW3</td>
      </tr>
    </table>
  </body>
</html>

See the src=“gow3.png” attribute in the image element? That is referencing the image file name, or the “source”. This path looks pretty normal but lets say that we wanted to put all of our images in one folder for ease of access? Create a new folder named “images” inside your game-genome folder and move the box art image there. If you refresh the page you will see the image has broken because our path is now currently incorrect. The way to access this file is to change that image attribute to:

<img src="images/gow3.png"/>

And the image will load as expected. This is because when we include an external file in our document it must be given as a path relative to the current document. To take this further, lets take the gow3.html file and move it to a new folder called “games”, which will also be in the “game-genome” folder. If you take a look at our directory tree in Sublime Text 2, you can see how we will have issues in finding the image file. To go up a file in the directory, we use the syntax “../”. So now our image tag will look like this:

<img src="../images/gow3.png"/>

If you refresh the gow3.html file and it doesn’t load, remember that we just changed its file location so you will have to find it in the “game-genome/games/” directory and open it.

Links Work the Same Way

To create a link between our home page “gamegenome.html” and “games/gow3.html” we have to create two different links. Lets add these links to the <ul> menu we have already created. On the home page, add this to the menu:

<li>
  <a href="games/gow3.html">Gears of War 3</a>
</li>

And on the gears of war 3 detail page, change the home list item to this:

<li>  <a href="../gamegenome.html">Home</a></li>

We now have two pages that link to each other from different directories.

Further Reading

I definitely didn’t go over everything in these few posts but I think that was enough to get moving onto CSS. As always you should be finding more tutorials out there to test the waters. Another class on ureddit.com is currently active and can teach you more in depth about HTML and CSS if you begin to be confused in later lessons.

Link to the Class Page

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s