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.
Related
I am having a hard time rendering/ successfully hosting images on Github.
My github repository has the following link tree structure: michaelamay/projects/post.html
and there is an image folder with the structure: michaelamay/projects/images/
In my code i add that to the src in 3 different ways, none of which are working (see image below in line 24,25,28, and 31)
This is how the rendering looks. Just a picture icon shows.
Here is the main page of the repository.
Inside the images folder.
Does anyone have any idea why that is happening? I insert an image from a website and it renders fine but not when called locally from the folders its located.
Given that the file path of the post.html file is michaelamay/projects/_layouts/post.html. If you are trying to access michaelamay/projects/images/img_forest.jpg, the path should be given as:
<img src="../images/img_forest.jpg">
This is because the 'images' folder is not under either 'projects/_layouts' or the root of the project structure.
For more information, you can check this link.
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.
When I try to upload an image file form my computer in my html file it doesn't show up in browser. But if I link a image file from the web it works. I've copied the file path correctly and made sure the extensions were correct. Is it something wrong with the file itself?Code In Question
In the picture you've attached you're placing an absolute filepath inside src while it should be relative, considering the file might be in the same folder as the HTML, but not in the same user folder/operating system etc.
To fix your issue I have an example below.
Folder layout:
website
index.html
images
myimage.jpg
Referencing:
How to reference to myimage.jpg relatively is by putting images/myimage.jpg inside the src attribute. The way you're doing it is website/images/myimage.jpg, but another user might not have the website in a folder called website but website2 for example.
I'm building a multiple page website, and i would like to know what is the best way to organize folders for each page?
1
This is what i did:
I created a main folder named: www.mywebsite.com
2
And in that folder i created a folder for each page:
3
in the assets folder i have js, css, img
Is this the correct way of doing it or is there any better way, i know i can import, in my sass file other sass files and create a main file, but im not sure is that a good way?
You don't need a folder for every page. Just put your html in root folder and make a directory for js, images and css.
Your pages don't need sub folders, they're just for assets that are going to be called in i.e.e an images folder for your images and an assets folder for your CSS or JS files. If you add your pages to a sub folder then you'd need to add that into the URL: string i.e. mywebsite/home/home.html. Also, your server is looking in the root folder for home.html, or index.html (dependent on server), so it won't know where to point when you just type in mywebsite.com
Don;t forget to account for the folder paths when calling any of these in your HTML files i.e. your menu can just call '/home.html', '/about.html' etc While anything in a sub folder will need to be referenced as such i.e. 'images/image.png'
There's no need for that much folders - you can put all files in the root folder or in separate folders (that lie in the root folder) for html, css, js, php and so on
Suppose I have a folder named Imp and in it,I have a webpage folder and a images folder.I have my webpage in webpage folder and my images in images folder. So, how can I give the path of an image s4.jpg present in images folder from a webpage in webpages folder..i mean what should I write in the src attribute of img tag?
You have two kind of path to access your image :
Relative src="../images/s4.jpg" (up to parent is relative from where your page is display, here the page is run from direct sub directory).
Absolute src="/images/s4.jpg".
If In documents folder of c drive you have made a folder imp and in the imp, you have made another folder named - "images"
then your code should be -
<img src="../imp/images/filename.ext>