I am using the latest updated version of Chrome.
I am trying out external CSS and images for the first time, the heirarchy works like this:
>parent folder
-index.html (html file uploaded)
>images
-file1.jpeg
-file2.jpeg
>css
-styles.css (css file)
When I go to test what I wrote, it's only showing the index.html folder with plain HTML despite using the proper link href="css/styles.css" and img src="images/file1.jpeg" tags. How do I include these external folders when testing website work?
Here is the head section of the index page
<head>
<title>West Coast Emirates</title>
<meta name ="description" content = "A look at Arsenal's 12/13 season in the Barclay's Premier League"/>
<link href="css/styles.css" type="text/css" rel="stylesheet"/>
</head>
I am opening the html file in a browser, no servers or anything just a word processor and chrome
Related
I am trying to import a css file in the same directory as my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="./styles.css">
</head>
I believe I am correct in using ./ to go through my directory. I have also tried using ../
However, in my dev tools in chrome, I am getting this error:
Failed to load resource: the server responded with a status of 404 (NOT FOUND)
Any help would be appreciated. Thanks!
It is definitely the link that's the error.
You will need to check your file path, is this project just simply on your desktop? Is it a ASP.NET app?
Depending on where/what project it is, you should be safe to use .. to traverse up one folder
It really depends how your directory folder is structured, but if you have your HTML and CSS files in the same folder, you can just use <link rel="stylesheet" href="/styles.css"> (note that there's no dot), then your html file will look in the root folder of your project, also make sure the name styles.css is the same as your css file
Since you put the html file and the css file in the same folder, there is no need to use ./ or ../ because this step is written only if the css file is in another folder next to the html file
open-source public files work best. So instead, go to https://gist.github.com and sign up if you haven't already, name the file (with extension, e.g. style.css), and paste your CSS3 code, click 'create secret gist', and click raw. copy the link and that will be your external CSS file.
-Good luck!
I have a HTML file and a CSS file located in different directories in my PC.
in the head tag I use a link tag to reference my css file
<link href="C:\Users\UserName\Desktop\Web_testing\BGsample SS.css"
type="text/css" rel="stylesheet" />
this doesn't work
try using the file:/// protocol.
href='file:///C:\Users\UserName\Desktop\Web_testing\BGsample SS.css'
If that doesn't work (and you say it doesnt), then my guess is that it won't work at all due to it being prevented by security features in the browser.
It depends on where you are loading the main HTML content from, but if the main HTML is loaded from the internet then I can understand why the browser might object to loading the CSS from the client machine's local file system.
One final thing to try: You might try setting up a web server on your machine, putting the mystyles.css file into the web folder, and loading it into the page using:
href='http://localhost/mystyles.css'
I can't really suggest much else, I don't think.
Check your paths, Best practices is to always use a relative paths. Ex
If your stylesheet is called style.css the link should be:
<link rel="stylesheet" type="text/css" href="style.css" />
If you have the css file in a subdirectoy (and the subdirectory is called styledirectory) the link becomes:
<link rel="stylesheet" type="text/css" href="styledirectory/style.css" />
If the css file is in the parent directory of the html file the links becomes:
<link rel="stylesheet" type="text/css" href="../style.css" />
.. goes up 1 directory, if you need two you could do: ../../
Sample Folder structure
Assuming structure is like that then,
<link rel="stylesheet" type="text/css" href="styles/BGsampleSS.css" />
Name files without spaces too.
You should be using '../' to move back in your path, and then into the directory with the CSS file.
Please always follow the CSS External Style Sheet way. In your case the CSS file cannot be located. Try adding \ before SS.css
<link rel="stylesheet" type="text/css" href="C:\Users\UserName\Desktop\Web_testing\BGsample\SS.css">
I'm just transferring all my files over from xampp's htdocs to my server and now I just need to add a favicon.
I have the icon saved as 'favicon1.ico' and it is a proper icon size 16x16, but I cant get it to work.
This is the code I have for it:
<html>
<title>Server Test</title>
<head>
<h1> Hello World </h1>
<link rel="shortcut icon" href="O:\Intranet\favicon1.ico"/>
</head>
<body>
</body>
</html>
That is the correct location of the icon in the href so I dont see why this shouldn't work.
I've never added a favicon to a site before so that is where my main problem of not knowing exactly what it should look like lies.
Your Favicon path uses a windows style File path as pointed out in the comments.
Ensure the following
favicon1.ico file is present in the package that you are transferring onto the server.
Ensure that the file is accessible over http (try using a browser to navigate to it). The path should be something like http://server:port/app-uri/favicon1.ico
After that as suggested in one of the comments use a relative path such as ./favicon1.ico in the HTML source.
Also I suggest reading up on the concept of favicon http://www.w3.org/2005/10/howto-favicon
Code below should work. Try this.
<link rel="icon" type="image/png" href="http://yoursite.com/favicon1.ico">
Notice that href points to the address of your icon depending where you put the icon.
I have a Chromebook and I am using the app: HTML Viewer with this app: http://drive-html-viewer.pansy.at/
This is the HTML file: https://shiftedit.net/edit#162629/0B94fPcefbkHSXzJpNFc5cmlWMnc
CSS files: https://shiftedit.net/edit#162629/0B94fPcefbkHSVmhVb0M5d2hrSTg
https://shiftedit.net/edit#162629/0B94fPcefbkHSN2o3c1I3WTd4ZG8
and the page shows up fine in basic HTML format but when I try to apply a CSS style sheet it doesnt recognize it ? this is part of the code with the stylesheet link:
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>
Scissors
</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="rps.css" />
</head>
<body>
help?
I was running into the same problem when opening an HTML file from within my Chromebook; the styles would not display. When I opened the same file from my PC, the styles would display just fine.
After a lot of searching I finally ran into this article that helped me figure it out. Basically, since the Chromebook files are in Google Drive, I needed to include a direct link to the file, even though my HTML and CSS files were stored in the same folder.
Did not work on Chromebook:
<link rel="stylesheet" href="style.css">
Worked on Chromebook:
<link rel="stylesheet" href="https://googledrive.com/host/put-the-fileID-here">
You can get a file's ID by right-clicking the file in Google Drive and selecting "Get Link". Copy everything that comes after "id=".
Never used HTML Viewer, but are you sure the path to those two css files are correct?
The solution is...
From a chromebook, open the Files App
Locate the index.html you wish to view
Double-click on the index.html file
The file will open in the Chrome browser
Copy all of the local address, except for "index.html"
Open/Edit index.html
Paste the local address into the "link" tag in the "head"
example:
link rel="stylesheet" type="text/css" href="externalfile:drive-6a0d36c37ed3c1d0c03bd5ca216484a83b9d68ae/root/CodedWebsite/style.css"
Hope this helps anyone in the future!
I'm kind of a newbie to html and definitely to CSS. I'm learning from the book Foundation Website Creation with CSS, XHTML, and JavaScript, which I understand is old at the time of this question, but still hoping I can help many. Here is my markup:
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Welcome to Papa Pepperoncini's</title>
<link href="C:\Users\Kevin Turner\Desktop\html\indexcss.css" rel="stylesheet" type="text/css"/>
</head>
Why isn't my stylesheet linking? Am I allowed to make this link? What should I do? I believe it's working in Chrome, but not in IE or Firefox, perhaps you could help me understand this also.
Thanks,
Kevin
Don't use C:\Users\Kevin Turner\Desktop\html\indexcss.css. This is not a correct URL. Usually you'd use a relative URL path. If your the file including the css is in the same directory, just write the filename.
This should work if the file is in the same directory (folder) as your html-file:
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Welcome to Papa Pepperoncini's</title>
<link href="indexcss.css" rel="stylesheet" type="text/css"/>
</head>
To explain what a relative URL path is, imagine you've got a folder structure like this:
--- html/
----- index.html
----- css/
------- maincss.css
and you want to include the maincss.css-file in your index.html. Then you'd do
<link rel="stylesheet" type="text/css" href="css/maincss.css" />. Because maincss.css is in the css/ directory (folder), which is relative to the directory you're in (html/).
You can use file:///c:/Users/Kevin%20Turner/Desktop/html/indexcss.css
Source. But ONLY if the css-file is located on the computer that you are loading the page on!
So. if the CSS-file is in the same directory as the file including it (probably index.html), your code would be:
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Welcome to Papa Pepperoncini's</title>
<link href="indexcss.css" rel="stylesheet" type="text/css"/>
</head>
And the other, with the file:/// URI and the file is located on the computer loading the html-page, would look like
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Welcome to Papa Pepperoncini's</title>
<link href="file:///c:/Users/Kevin%20Turner/Desktop/html/indexcss.css" rel="stylesheet" type="text/css"/>
</head>
Standard CSS link declaration goes something like this:
<head>
<link rel = "stylesheet" type = "text/css" href = "cssdoc.css">
</head
There is probably something wrong with the path you entered. In the future, consider having both the HTML doc that you're editing. and the CSS document on desktop(or just in the same folder). that way you don't have to type in the full path every time (assuming you're just using a simple Notepad-like editor)
Before the your local URL type file:///
You shouldn't link to a local file because on your live website this won't work. Even if your filesystem is set up the same way, the HTTP server probably won't serve it. It also depends on how your HTML is being served locally (by a server or just with files).
Anyway, you should link to the CSS file relative to the html file or preferably the document root (the folder that is serving your website files). If you can figure out your document root, you could use:
<link href="/indexcss.css">
...assuming that your document root is at something like
C:\Users\Kevin Turner\Desktop\html\
If your html file (with the <head>) is in the same folder as indexcss.css, you can just use
<link href="indexcss.css">
Make sure that you understand the document root and relative/absolute paths.
As your file is stored locally, make sure you use the file:/// URI scheme:
<link rel="stylesheet" type="text/css" href="file:///C:\Users\Kevin Turner\Desktop\html\indexcss.css" />
Still not working?
Some (or most?) browsers block access to your local file system, even when the webpage itself runs locally. This is a security measure to prevent webpages from accessing and modifying your local files.
Chrome, for instance, will return an error saying something like Not allowed to load local resource. To fix this on Windows, you have to launch Chrome with the --allow-file-access-from-files flag. Simply close Chrome, right click and modify the shortcut, add the flag at the end of the shortcut target. So your target would be something like this: C:\path\to\chrome\chrome.exe --allow-file-access-from-files. This will allow Chrome to access your local stylesheets.