Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML Accessibility Websites HTML: Part 2

Sean Flanagan
Sean Flanagan
33,232 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.

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

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,232 Points

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

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,232 Points

Hi Jeff. I'm using Windows 7.

Sean Flanagan
Sean Flanagan
33,232 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.

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

Sean Flanagan
Sean Flanagan
33,232 Points

Here Dustin:

C:\Users\user\Downloads\Accessibility-Websites\Accessibility\gear.png

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!

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.

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,232 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,232 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,232 Points

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

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,232 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.