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.
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"
web page with my uploaded image here
I was trying to find the path my computer was using. I tried the basic code that
I learned in a program I'm currently in, but it didn't seem to work. The path is desktop/my-skillcrush-project/101-skillcrush-project-images/images-icons/html-icon.png
The program directed to download the zip file of the image on my computer and create a folder. With the root directory associated with the file including the image.Then to use this code. <img src="img/html-icon.png" alt="HTML icon"/ (closing tag disappears when I try to type it. Sorry, it's in my code.) and that was it. It seems too simple in my opinion. How should the files be saved so that it will show up??????
What is wrong
The problem is, in the src, you put a relative path. In HTML, a relative path is a path without a slash(/) at the beginning. So, HTML was expecting a folder called desktop in the 101-skillcrush-project-code folder which had all of the other folders and the image.
What you should do
You do not need to put the full(absolute) path for the image. You can put the relative path. That is, relative to where the index.html is located.
Solution
So, in the src of the image, you can put 101-skillcrush-project-images/image-icons/HTML Icon.png.
More Info
HTML File Paths on W3 Schools
HTML File Paths on GeeksforGeeks
It definitely is much easier if you make a clear structure for all of your html assets. That also makes it much easier to handle your paths. So for example start with a root folder - lets name it html, where you put all your html pages in. Inside html create a sub folder for e.g. for your images and css. Folder structure can look like that:
/html image path from html folder: <img src="img/html-icon.png">
|- img save "html-icon.png" here
|- css
|- js
|- fonts
|- etc
To access an image from another folder e.g. css folder, you first have to go one level up with .. and then, go into the img folder. e.g. <img src="../img/html-icon.png">
If you have your images somewhere outside your "web folder" the paths can get a pain. So just organize your assets - it is much more effective and much easier for you to find and work with it.
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
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 :
I have an HTML file, index.html, for my website, in a folder. This folder contains the index.html file, and another folder called "Stylesheets", with the stylesheet.css file inside. How do I link to it? I know how to do a link tag, but the href bit is giving me a bit of trouble. I've tried
href="../stylesheets/stylesheet.css"
and a few variants of it with the dots. Any ideas? I've tried a couple google searches but the question is a bit too complex to describe in a simple google query. Please Help!
Your path - href="../stylesheets/stylesheet.css" is basically doing the opposite of what you want.It's not going one folder further as you wish.
To accomplish what you want, you are going to have this path:
href="stylesheets/stylesheet.css"
Here you can read more about File Paths.
Use href="stylesheets/stylesheet.css" or href="./stylesheets/stylesheet.css"
Both mean the look for stylesheet.css file inside the stylesheet folder inside the current folder.