Zip File Problem

So I had to make a website for a school project (I’m not a designer and this is the first time I’d messed with code) and the instructor wants it submitted as a .zip file archive. Okay, fine, I have a vague understanding of what that is, so I right-clicked on my desktop, selected ‘New’, then ‘Compressed (zipped) Folder’ and gave it a name. Then I put all the files pertaining to my website (just some .htm files and a few pictures) into it.

Just to be safe, I opened the .htm files from the .zip folder and guess what? None of the links or images work. They work just fine when I open them out of the normal folder I also have them in. Also, when I right-click on an .htm file in the .zip folder, I’m not given the option to ‘Open With’ like I am if I right-click on the same .htm file in the normal folder. Just plain old ‘Open’.

What gives?

A zip-file is an archive of more or less compressed files. Although Windows lets you browse it like a folder, it doesn’t exist as a folder. I assume the targets of links you tried and images you were expecting were all stored in the zip-file, in which case they’re not accessible as regular files.

Your instructor will unpack the zip-archive to a folder on his computer, and the files will work as they did, unless you did something foolish like using absolute, rather than relative, paths.

Yes they were. Are.

Thanks for the explanation. It seems my vague understanding was vaguer than I’d thought.

Since I have no idea about absolute vs. relative paths, I’ll assume I didn’t use them and will send the assignment on its merry way.

Absolute: uuu.dingbat.cam\my_folder\pictures\john.jpg or
c:\johns_files\my_html\pictures\john.jpg

Relative: …\pictures\john.jpg

One works when you move your files to a new location, the might not.

Absolute path:
< a href=“C:\Users\Jragon\Documents\MyWebpage est.pic”>
< a href=“C:\Users\Jragon\Documents\MyWebpage\directory est.htm”>
< a href=“C:\Users\Jragon\Documents\MyWebpage\directory\otherTest.htm” >

or

<a href=“http://www.jragon.com”>

Relative path (assuming we’re in the file test.htm)
<a href=“…/test.pic”>
<a href="/otherTest.htm>

In other words, relative paths express the path assuming it’s only in one location, absolute paths express in terms of the current file.