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
Related
I want the path to the file to look like this: "/assets/style/home.css"
But even though VSCode recognizes this path, and takes me there when I click it, the CSS doesn't appear on the page. It only appears when the path has the two dots: "../assets/style/home.css"
Any ideas on how can I fix this? This is what the entire path looks like:
It's like that with every single path I use in this project, actually. I have to use the two dots for everything.
The "../" means that it is to return a directory, as your HTML file is inside the PAGES directory it is necessary to use the "../".
To call the css file like this "/assets/style/home.css" you need to move the assets folder into the PAGES folder
The "../" before the file path is used to move up one directory level. It seems that the HTML file linking to the CSS file is in a subdirectory and the CSS file is in a directory one level up. If you want to use the path "/assets/style/home.css" the file should be in the same directory as the HTML file or a subdirectory of the HTML file.
You could also consider using absolute path instead of relative path, it would work regardless of where the HTML file is.
Upvote if it helps.
Your code should work if RANDOMWEBSITE is the root folder of the web server.
It will work in VSCode if you open the folder RANDOMWEBSITE, but perhaps your webserver is configured to use a different root folder above your directory.
For example the root folder might be html, and your website is at html/RANDOMWEBSITE/. In this case it would look for the css file in html/assets/style/home.css, rather than html/RANDOMWEBSITE/assets/style/home.css.
Check what the root folder of the webserver is set to and reconfigure, or alternativly remove the RANDOMWEBSITE folder from your folder tree and work within the existing root folder.
You have to do that because .html is isn't "in the same line" as css. You can imagine that it's something like a crossroad if turn right but then you realise that you want to go left firstly you have to go back and than you can turn left. If you want do do "/assets/etc" you need to move you .html file to "randomwebsite/.html"
I am creating a school project website and is organizing my files to different folders. From root folder to css, script, etc... This is the structure I made.
But I couldn't access my index page from subpages. If I am to go from index to about us for example:
<a href="pages/about-us.html">
It would take me to the about page. But going back to index, I tried:
<a href="root/index.html">
and
<a href ="index.html">
But no luck. Surely, it would work if I would copy paste the exact location in my PC. But I will upload this for my professor to see. Also, not to mention the images too that I need to link from a folder up from the subpages. If that make sense.
Bottomline: How do I link files from different folders whether one folder up or one folder down?
Thank you in advance. :)
Using ../ allows you to jump back a directory (folder) and ../../ would jump back two directories. If your at the root directory you can access a file with /index.html. Have a look at the Dealing with files - MDN documentation for more detailed information.
I'm new and don't really know how to phrase my question.
so in VSCode I'm trying to learn how to organize my files better.
I created new folders called Views, Styles and Img. Then I moved my loginform.html files into views, loginform.css into styles and the pictures into Img folder.
Now that means since I moved the html, css and images into views, styles and img folders I need to rewrite or reassign the code path in the html for any images or css links.
For ex the html file with img tag now reads (I added the Img folder path)
But the ouput still is giving me a 404 message and the html is not loading
What are all the steps I need within the html and css files to take when I move files into new folders. Sorry for the long explanation, I couldn't think of a way to shorten it lol
From what i understand your arborescence looks like this :
root
|Views/
|----loginform.html
|Styles/
|----loginform.css
|Img/
|----image1.jpg
|----image2.jpg
If you want to refer to loginform.css from loginform.html, you'll need to write :
href="../Styles/loginform.css"
Notice the "../" at the beginning, which means "get out of the 'Views' folder and then go to styles/loginform.css". You can even combine multiple ../ , for example "../../../" goes 3 parent folders back.
Your mistake, with href="Styles/loginform.css", is that there are no folder named "Styles" in your Views folder (where your HTML is sitting). You first need to get out of the Views folder.
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 currently learning to use yootheme's uikit. I'm currently running it off of Apache 2.4.16 on my Mac, but the index.html page won't bring up the main uikit.css (or any css) buried two or more folder levels deep (as all the css files within uikit's directory are).
Here is my folder structure:
MainSiteFolder
index.html
uikit/
css/
uikit.css
fonts/
js/
And here is the line I included in the head of index.html (copied and pasted):
<link rel="stylesheet" href="uikit/css/uikit.css" />
If I pull out that css file and put it in any other folder I create (or the root directory), I can change the reference to "otherFolder/uikit.css" and it works perfectly... but I'd like to be able to keep things organized within multiple folders until I nail down which of the many uikit css files I plan to use.
Is there something I've missed that removes my ability to load css files that are more than one folder lever deep? Or do I need to just put everything into one css folder, despite the loss of convenience organization would bring?
EDIT: Must have been something strange with my browser (or Apache?) not realizing there were files in the folder. I don't know the reason, but removing the entire folder, and recreating it inside the directory, then uploading the files individually got it working. Though it still baffles me why it didn't work in the first place. Some sort of missing reference or something perhaps.
Use:
../
To go to a higher directory, like:
href="../uikit/css/uikit.css"
To go 'up' one level of directories. ../../ goes up 2 levels, and so on ...
Alternatively , start at the root directory, in Windows it is C: not sure what it would be on your system, but something followed by a :