I've made an HTML page which I have to send off which looks perfectly fine, I have zipped a folder with all my files in, but when I unzip it and open the page back up, some pictures are out of place and it looks like the page has zoomed out, any ideas why?
My guess is that you are not unzipping all the files in the zip and hence when you open the html file the css is not loading with it.
Unzip all the files to a folder - don't just open the zip file. Make sure they are all in the same directory structure as before (if any). Then open the html.
If that doesn't work, post the zip so we can see what gives.
Related
I have come into an issue where my webpage will not load a background image in any browser if I open it directly into the browser, but if I open it up via a live server addon for VS code it works entirely fine and loads everything correctly. I have videos attatched to the webpage which load entirely fine in both scenarios, and have come to a bit of a deadend...
file's to see if file pathing is incorrect
Where the image should be loaded
The html file calling the class
This is a guess at the moment but it might be, on the second image that you posted, that you have detailed ../../ twice. This is telling the path to back up by two folders then look for the assets folder.
Looking at your file layout. You have an index page then an assets folder which contains a videos folder which contains the image.
You shouldn't need to back up out of the folders using any itteration of ../ from where you index page is located. The correct path might simply be assets/videos/cover_image.jpg
I have zip folder that has my 4 html pages, 1 css style sheet and 1 javascript file. I also have an image folder which stores all my images I use in the webpage. However, When I go to open the browser say for example "home.html" inside the zip folder the images are not appearing.
However, when I have the folder unzipped it works fine.
Why does zipping the folder cause images to go weird?
This is my image:
folder here
Zip file is not a folder. It's a file. It's not the same kind, it should be handled different way.
I'm a student studying a Certificate in Web Development.
I've written a webpage in HTML which contains 2 images which are displaying fine however when I copy the folder containing the files into a ZIP file (so I can email it) the images no longer show when the webpage is opened from the ZIP file. The code for displaying the image is:
<img src="logo.jpg" height="150" alt="Logo for Club Palmy"/>
And the image is definitely in the folder I've copied and pasted into the ZIP file
Why won't it work?
Yes it won't work because what really happens when you open something directly from a zip is that it extracts that "specific" file to a temporary location first and then opens the extracted file.
Winrar extracts the archives to
C:\Users\\AppData\Local\Temp (Windows)
by default.
So what really is happening is that your html document exists but your images don't exist in the same directory i.e. the path mentioned above.
What you should do?
Extract all the files and not try opening them directly from the zip.
I've created a very simple website in a Codecademy exercise that I'd like to upload to the Internet using Github Pages. Because you are unable to export your index.html and main.css files from Codecademy, I copy and pasted them into a word document, with the intent to get them in their proper file formats. However, I have been unable to find a source to convert these plain text files to .html and .css formats. Also, I've created an account on Github and a new repository, but the tutorial doesn't cover how to insert these two files into this repository.
How do I convert code from text in a document to .html and .css file format, and then insert these files into a Github repository? Thanks!
You don't need any special tools to convert plain text files to html or css.
You simply do it yourself as well.
Follow the steps to change .txt files to .html or .css:
Right-click on your index.txt or main.txt
Click on Rename from the list of options shown
Then it will take you to editing the file name
Navigate the cursor and delete txt
Type html in txt's place
Press Enter
Then you might receive a prompt asking if you are sure. Click on Yes/use .html whichever is appropriate for your prompt.
Voila! you have your file extension changed
Follow a similar approach to change the files to css as well
*Please note that my screenshots are from Mac OS and may look different from yours depending on the Operating system you are using
Hosting Webpages on Github:
Github pages website gives you a step by step guide with visual illustrations on how to do it.
If you are looking for a more comprehensive guide, then please refer to this page.
Seems nonsense, but after struggling a lot with Github Pages I have tested (and worked):
duplicate your first html file and rename it as index.html
drag and drop it into the /docs folder
drag and drop the remaining html files to the /docs folder (including the one you
have duplicated, of course with it´s original name)
commit changes
Goto Settings / Github pages and
Go down till “Github Pages”
Clic on the down arrow in [None] and select “main”
Clic on the down arrow in [/root] and select “/docs”
Clic on [Save]
After a few minutes you will see in [Settings] / “Github Pages”
Your site is published at
https://your_account_name.github.io/your_repo_name/
I have a download link, which mysite.com/files/game.jar and that will download. But now I want people to download a folder with a text file and the jar file and a video. How can I do this?
PS: I have upload all the files to my site, but when I do mysite.com/files/game it just shows me all the files inside the 'game' folder.
Thanks!
I would suggest zipping / tarballing it up the folder and linking to that?
Would that not work?
As per my experience I have not seen a way to download a whole directory. You would have to dynamically zip the folder and make the resulting zip downloadable.
You can download single file like:
<a href="/images/test.jpg" download="logo">
Hope, this gives you right path.