Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Accessibility Websites HTML: Part 2

Sean Flanagan
Sean Flanagan
33,235 Points
Posted by Sean Flanagan
Sean Flanagan
33,235 Points

Unzipping Files and Using Relative Paths

Hi. I have difficulty unzipping files that I've downloaded. I'm trying to use the images in the projects folder on this page.

Can anyone coach me on unzipping files please? Thanks.

Jeff Busch
Jeff Busch
19,287 Points

Hi Sean

What OS are you using. In Windows Explorer (file manager) you should be able to double click and that's it. Or right click and choose unzip, or extraxct here (Debian Linux). I don't know what to do on a Mac,

Jeff

11 Answers

Luke Glazebrook
Luke Glazebrook
13,564 Points

Hi Sean!

All you have to do is double click the file that you downloaded and simply drag the files out of it onto your desktop or wherever you want! After you have done this you will be able to drag them into workspaces and use them in your project.

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

Thank you all for your support. Sorry I've been a pain.

Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

On Windows machines: right-click the folder, click Extract All.

For a Mac simply double-click. :smiley:

(Luke's solution works also.)

For the issue you're having with linking to your image, If index.html is in the accessibility folder simply remove images from the file path: <img src="gear.png" alt="" />. I'm also going to recommend reviewing Nick's video: Websites: Part 2.

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

Hi Jeff. I'm using Windows 7.

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

Jeff, Dustin, Luke, I've managed to move the gear image to a new folder, but I can't display it using a relative path. Here's my HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Widget, Inc.</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <h1>Widget</h1>
                <ul id="nav">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Company</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </div>

            <div id="content">
                <div id="about">
                    <p>Widget has always offered the best quality and price in the industry, but now it's made of even higher quality materials. Widget is also the most environmentally friendly product ever made.                </p>
                    <div id="cta">
                        <h3 id="just_10">The new widget is just $10.</h3>
                        <a href="#" id="buy_now">Buy Now</a>
                    </div>
                </div>
            </div>

            <div id="widget_pic">
                <img src="images/gear.png" alt="A drawing of a widget, which looks similar to a gear or a cog.">
            </div>
        </div>
    </body>
</html>

Any help would be appreciated.

Dustin Matlock
Dustin Matlock
33,856 Points

Sean, I've updated the thread title to also reflect relative paths. Could you share your file structure?

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

Here Dustin:

C:\Users\user\Downloads\Accessibility-Websites\Accessibility\gear.png
Luke Glazebrook
Luke Glazebrook
13,564 Points

You need to make sure to have the images uploaded to workspaces and not on your local computer. That is why it won't work for you!

Dustin Matlock
Dustin Matlock
33,856 Points

Sean, my post above has been updated to include both questions for clarity and neatness. Let us know if there's anything else you're having trouble with. I'm hoping the video clears up the difference between relative and absolute file paths for you.

Jake Cooper
PLUS
Jake Cooper
Courses Plus Student 56,854 Points
Jake Cooper
Jake Cooper
Courses Plus Student 56,854 Points

Sometimes Win7 gets a bit touchy about its processes and the user permissions of the owner of the file your trying to extract from and/or to.

Weirdly this doesn't always happen or is in the least inconsistent to my limited knowledge of windows 7 and its internal 'goings on' but this trick has fixed many issues that stumped 'EVERYONE'.....so give it a try:

  • "right-click" on .ZIP file and select 'Properties' in the context menu. (This should bring up the file properties window)
  • At the bottom of this screen 'uncheck' the box 'read only' if its marked and if you see a button just below and to the right stating 'unblock', click it.

Try unzip etc now and the problem should be solved. Even if it doesn't work this time remember it for the future as it fixes many small issues with regard to file ownership and user permissions.

Might be totally off base but hope it helps.

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

Okay, I'm trying again. I right-clicked the zipped folder. The menu included the options "Extract files..." and "Extract here". There's no "Extract all." I'm not giving up.

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

Jake, I right-clicked Properties and switched to the General tab. Read-only is already unticked. Presumably I need to click OK. I'll do this now.

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

I clicked Unblock. And I copied the HTML to Workspaces. The image of the widget still won't appear in the preview.

Jake Cooper
Jake Cooper
Courses Plus Student 56,854 Points

OK so you're halfway through the solution here :) If it was previously being blocked then try this and make sure each step satisfied in process to ensure end result. Firstly unblock the .ZIP file, proceed to extract files Secondly repeat unblock on the extracted folders and files. *potential pitfall files that have been extracted in a folder that has a filing system more than one layer deep sometimes do not get immediate permissions update (meaning if the extracted contents of your .ZIP has a folder within a folder, those files within it might not get the news about the changed / updated ownership state) Thirdly if upon navigating into the extracted folders they still wont behave correctly even after the unblock routine and interrogating individually it might be the containing folder needs to be unblocked. Other potential influences could be that you need to open your WinRAR or Winzip using 'Run as Administrator' option.

All these things have impacted my workflow too in the past so don't worry about being a pain, for me its nice to know I'm not the only that suffers these peculiarities.

Somewhere between Running as Administrator, unblocking, unchecking 'read-only' and then going to see if Windows did actually do what it said, sometimes it doesn't (2 level folder bla bla above), is where you will find Victory.

You're on the right track though, its basically 'File Permissions vs User Permissions vs Your Sanity' :)

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

Yes!!!! I've done it, finally!!! I've uploaded the images to Workspaces and the cog image I wanted showed on the browser. Thank you Luke for your instructions, which I followed to the letter.. As a gesture of thanks, all of you are welcome to chat to me via my Skype username, which is on my Treehouse profile. Dustin, Luke, Jeff, Jake, thank you all very much. You've been terrific, seriously.