HTML Paths Exercise

If you need a review of how paths work before doing this exercise, you can find one here.

Otherwise, please download the files you will need for this exercise.

When the zip file downloads, double-click it if the system doesn’t automatically do it.

This will leave you with a folder called GuitarManiaSampleSite. 

Inside it you will see a home page (the index.html file) and three subfolders respectively called images, models, and css.

The css folder contains three stylesheet files that control the appearance of the site.

The models folder contains five html pages about individual guitar models.

And, as you might imagine, the images folder contains all the images we’re using on the site.

Open the index.html file in a web browser. It should look like this:


Your First Task: Links to Pages

This index page has code for links in each section, but these links aren’t going anywhere yet. Instead, they just have a # sign, which is a common practice: it makes a link to nowhere, which is useful for testing.

   <section class="grid_3 box">
     <a href="#">
       <img src= "images/custom.jpg">
       <h3>Les Paul Custom</h3>

Your first task, then, is to put in the path to the appropriate files. For example, in the above chunk of code, we need to link to the file named custom.html in the pages folder.

If a section doesn’t have link code, don’t worry about it. We don’t yet have the associated pages for those.

Your Second Task: Broken Image Fixing

In a web browser, open up the custom.html file from the models folder.

You will notice that that its formatting is very… underwhelming.

The image is missing (hence the broken image icon). Its path is wrong.

Please fix it in this page, then copy the image code to all the pages in the models folder, changing the actual image file name in each. Each page should look like this (with the correct image, of course):

Your Third Task: Stylesheet Connecting

In our custom.html page there is no formatting.

This is because the links to the stylesheets are not yet set. Please copy the following three lines from the index.html page:

<link href= "css/normalize.css" rel="stylesheet">
<link href= "css/fluid_grid.css" rel="stylesheet" media="screen and (min-width: 800px)">
<link href= "css/main.css" rel="stylesheet">

Paste them into the same place in the custom.html file (ie, in between the opening and closing HEAD tags).

Now fix the paths to the stylesheets. When you’ve got that working, copy the ammended code to the other pages in the models folder. Each page should look like this:

Your Fourth Task: Home Linking

Finally, in our models pages, we need the GuitarMania logo/header to be a link back to the index.html page.

I haven’t put in any code for that. Please figure out how to do so.

Your Final Task: FTP

Now please FTP the site to the following URL (if at Langara):

Guitar Images © Gibson Brands, Inc. Used with Permission.