I'm building my first website and the structure is as follows:
a folder named website containing two subfolders named html and css. The html folder contains one file named home.htm and the css folder contains two files named general_style.css and home_style.css.
In home.htm i have put the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My title</title>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet"
href="../css/general_style.css"
type="text/css">
<link rel="stylesheet"
href="../css/home_style.css"
type="text/css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- code goes here -->
</body>
</html>
This works fine in Firefox on my desktop, but not in Chrome on my smartphone. On the smartphone only the html is shown and the icons from https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css.
All the code from my own css files is not shown neither are the icons from https://kit.fontawesome.com/a076d05399.js.
Can somebody help me out here?
PS: both html and css files are validated with no errors or warnings.
I can't say why it is not working. But I can tell you that if you're planning on building websites and testing them on various devices, you might want to run a local web server. This way, all your files can be hosted in your computer and you can access your site from any device connected to your network, using the local IP address of the computer that hosts the files. (ex: 192.168.0.x/home.html would show you your site if you open it in your mobile browser, without having to manually transfer any files.)
This is also the preferred method since it is closer to how users will access your website in the future.
You might want to look up "how to run a local web server" to find some guide that suits you. There are many methods and software tools to choose from.
If you are on a Mac, here's a quick and easy way to run one:
Go to /Library/Web Server/Documents and paste a folder with all your code and assets. Name it something simple, with no spaces
Open the terminal and type sudo apachectl start. It will prompt you for your password. Type it and press enter. (it might seem like its not typing because it wont show you anything, but it is working.)
Open your browser and type localhost in the address bar. You should see some big serif bold letters that read "It works!".
You're all set! Now just visit localhost/folder-name/home.html and it should show you your site! (hint: you might want to rename your home.html to index.html. If you do so, you will be able to visit localhost/folder-name/ and the server will automatically load index.html
Remember that if you are going to access this from your mobile phone or any other device, you must be connected to the same network. Also, entering localhost will not work. From other devices you must provide the local IP address of the computer running the server. Something like this: 192.168.0.5/folder-name/home.html/. You can find the computer's local IP in your Network Preferences.
(This works because macOS comes with the Apache webserver software preinstalled, and has set the /Library/Web Server/Documents/ folder to be hosted by apache. What we do in the terminal is just turn apache on. You can turn it off by typing "sudo apachectl stop" in the terminal).
You are trying to run your code on mobile browser?
Since it works on your computer Firefox browser smoothly but it wont work on mobile phone, this might be because you dont have the CSS files on your mobile device and have them on your desktop. I think that is a issue.
Related
I am having a weird problem.
I am trying to build my github page site. So I am writing my html locally and then push it online to see it.
The problem is that Chrome doesn't recognize my css file when I am opening it locally. When I push the changers online or I am using another browser it work just fine
Here is how I import it on my index.html file:
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
And when I go to the chrome dev tools
css have turned to chinese
Microsoft edge load the css file normally.
I have tried a couple of different things like:
Using another editor
Creating the file in different directory
trying different filenames
Clearing Chromes Cache
Nothing seems to work
I have loaded again a local a site like this and it worked fine.
Any ideas?
Make sure the file encoding is UTF-8. You can use iconv or just in your text editor > save as.
So I've been working on a website for college and I'm starting to learn PHP but for that I installed xampp and tried to access the website from localhost.
By my understanding, the HTML file and images, even (some) images defined in CSS are loading but the entire CSS file is not, like float and flexbox and some padding, borders, and different types of positioning isn't working as intended. It's definitely finding the CSS file so I don't think there's a problem in my <link> tag in the <header>.
HTML header:
<head>
<meta charset="utf-8">
<title>Home - akiro</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
As Doc-Han Stated this is most likely caching, and its an issue I think most of us have run into during the UI development process.
One thing you can do to get around this, is to open and do your debugging in an incognito window which wont cache files and can be reopened to load new sets if session caching does occur.
Alternatively some code editors have an in-built web server instead for this reason. I've been using Adobe brackets for a couple years now and love it. It serves the pages using an internal Node server and as a result, they have it set up for real time code updates. Changes to the code are reflected in real time which i find helps a lot in dealing with UI development flow for me avoiding issues like this and just the saved 3-5 seconds of refreshing each time i make a change (which adds up when your making 5000 changes Im certain other editors offer something like this as well.
This is just because with Xampp the browser caches your CSS files. This means that if making changes to the file, the browser will still access the cached file rather than the new one. A simple trick is to open the CSS from the local server and refresh the page so that the new CSS will be used.
example open localhost:8080/project/css/style.css and refresh that page
Quite some possibilities why it's not working as expected:
As Doc-Han stated; an old version of the css my have been cached.
You're loading the css from a relative path: style.css. This means the css should be in the same folder as the html file. Maybe the css should be loaded from '/style.css' or '/resources/style.css' or another location
Maybe the css contains some simple typo's so you're applying 'flaot' instead of 'float'
Inspect your page through your browsers developer tools. Open the console. Check if there are there any errors. Check if the css did load, also check if the right version was loaded. Check if the styling rules are applied to the right html elements or are applied at all.
If it is a caching problem in Chrome you can open the dev tools, open the Application tab, click the 'clear storage' menu item and clear site data. Now reload the page. In the network tab you can also click 'disable cache' and reload the page.
Just clear your browser's caches and done!
I just had the same problem but opposite and troubleshooting with Google brought me here.
My server was working perfectly in localhost but when I tried visiting it live via Ngrok or port forwarding, I got broken pages without CSS. I read a comment in this post about visiting the CSS file directly and then refreshing and in doing so realized I couldn't visit a lot of my CSS files, and then realized I set rules in my .htaccess for rewriting. Only leaving this comment so if anyone makes my mistake and finds themselves here like I found myself here, check your .htaccess.
I don't know if this is good place to ask this question but i just started studying reactjs and stuck in the beginning, here is the question.
I have installed node and Installed http-server from the npm command on the command prompt npm install -g http-server and went to the directory where is my static files and run command http-server and then to the browser hit localhost:8081.
Nothing happens/shows on browser but on command prompt it shows that its running and working properly, everytime i refresh browser then it shows on command prompt working. So why nothing happens on browser ?
here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<title>Demo</title>
<script src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="example">
</div>
<script type="text/babel">
ReactDOM.render(
<h1>Something</h1>, document.getElementById('example'));
</script>
</body>
</html>
If you are looking for an alternative/easy way to set up a react application without having to worry about the messy configuration settings from the beginning, then I recommend using facebooks create-react-app starter code.
I realize this does not help you if you wished to learn the setup process, but for jumping right into react routing and learning that it is a great resource! I start most of my web-applications using this. It can also be easily modified to implement express for when you delve even further into the world of web-dev. I believe the starter code is also set up with web-pack and supports hot-loading, so any changes you make will automatically be refreshed/reflected after hitting save and you do not need to restart/republish to the server!
On top of that, this book is also a great resource for learning react, the DOM, JS, Express, and the like. I read and worked through the last edition (published 2017?) and found it super useful, hopefully this newer edition holds the same reputation.
Web-pack in itself is another large topic, and I endorse you to read up on it's capabilities, functions, high level design/implementation and the like as it is really interesting! Happy transpiling!
It looks like there is an ongoing issue with http-server. However, we can fix this using this tweak.
Try accessing your file in localhost with the filename after running http-server command.
For example, if your file name is somefile.html, try accessing this file like http://localhost:8081/somefile.html
I'm trying to use Font-Awesome icon fonts via the BootstrapCDN link which I'm pretty sure I have the latest version of:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
I've put this link in the <head> part of my html file and I am trying to get it to work with this simple html code of:
<!DOCTYPE html>
<html>
<head>
<title>Font-Awesome Icons</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<p><i class="fa fa-camera-retro"></i> Camera Icon<i class="fa fa-facebook"></i> Facebook Icon</p>
</body>
</html>
However it's not rendering. I've tried this code in the latest versions of FireFox (27), Safari(7) and Chrome(33). I've checked that the fa class is on each of the icons I'm trying to call up and also that the fa- prefix is being used as opposed to the old icon- prefix. I've checked my implementation of the code with this video http://headwaythemes.com/using-font-awesome-with-headway/ (although meant for a WordPress theme, in principal the code should work the same) and looked around on stack overflow but previous questions like Fontawesome not loading haven't yielded me any help in solving my issue.
I don't have the fontawesome.otf installed but surely it isn't that if I can see the glyphs when visiting http://fortawesome.github.io.
Should I just download and host the font-awesome files along with my entire future website so I don't have to worry about updating the BoostrapCDN link as well? - Even though I only plan to use a few icons?
The reason it is not loading is because the URI is starting with "//". That signifies that it is a protocol relative path, meaning it will use whatever protocol that page is using. If you open your html locally, then your browser will use file as the protocol, thus trying to access the font-awesome css with "file://". If you access your html using a local or remote http web server, then you would access the page using the http protocol, thus accessing the css with "http://".
Solution:
Change the path of the css or mimic it on your local machine.
Run a local or remote http server and access the page.
For more info:
URI starting with two slashes ... how do they behave?
Such an easier way to deal with this - just add 'http:' in front for the cdn line, and it will work on your local machine, i.e. like this:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Ta-daa!
What Pulkit answered is absolutely correct. Just to add, if you want to create a quick local server, just go to the directory of the html and css pages, and then go to the terminal and type -
$python -m SimpleHTTPServer
Then, go to your browser and go to 127.0.0.1:8000
If it doesn't show up, try changing the homepage of your website to index.html
I have been learning to code HTML and javascript and have run into a slightly confusing (and very frustrating issue) around loading scripts and css using relative paths when accessing the page using an IP address. Both Chrome 30.0.1599.69 and IE10 seem to have no problem but Firefox 24 does, and only when using an IP address rather than the name.
Folder structure is:
Dashboard/index.html
Dashboard/css/dashboard.css
Dashboard/js/dashboard.css
Dashboard/leaflet/
etc
The HTML looks like:
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<meta charset="utf-8" />
<!-- css loading -->
<link rel="stylesheet" href="leaflet/leaflet.css" />
<link rel="stylesheet" href="css/dashboard.css" />
<!-- script loading -->
<script src="leaflet/leaflet.js"></script>
<script src="js/dashboard.js"></script>
<script src="d3.v3/d3.v3.js"></script>
</head>
<body>
etc...
The above works fine when opened via localhost (using python simpleHTTPServer) in all browsers (http://localhost:8888/Dashboard/ in the browser bar). When I move the Dashboard folder and subfolders to the default webpage area (C:\Inetpub\wwwroot\) in Windows Server 2003/IIS 6.0 and attempt to access the page it also works fine - until I try it with the IP address using Firefox.
For example, http://mywebpage/Dashboard/index.html brings up the page and loads all the css, js files etc correctly. Using the console I can see:
[10:57:32.081] GET http://mywebpage/Dashboard/css/dashboard.css [HTTP/1.1 200 OK 10ms]
When I try it with an IP (as the name only resolves on our network and I want to display the page when outside) I get the following error in Firefox:
[10:57:25.135] GET http://XXX.XXX.XXX.XXX/css/Dashboard.css [HTTP/1.1 404 Not Found 7ms]
Not only that but the URL looks different in the Firefox address bar: XXX.XXX.XXX.XXX/Dashboard\index.html# < note the backslash and # appearing.
I do not have this issue in Chrome or IE10. So it seems that Firefox does not look relative to the path of the html document but rather the server when using an IP address to access, whereas Chrome and IE10 do look relative to the page regardless of using a name or an IP. Firefox also decides to display a backslash and add a # at the end.
I have found that coding the links with the folder name does seem to resolve the Firefox IP address issue, <link rel="stylesheet" href="Dashboard/leaflet/leaflet.css" /> however it messes up Chrome, as the folder name gets added anyway in the network path (seen in the console): http://XXX.XXX.XXX.XXX/Dashboard/Dashboard/leaflet/leaflet.css. Why does Firefox behave like this and why only when an IP is used?
-Update-
I have tested this on a colleagues machine and the behaviour is not replicated, frustratingly, so I am starting to think it is something wrong with my Firefox install.
-Update 2-
A reinstall and Firefox is behaving as expected with localhost, servername and IP access to the webpage. So hopefully this will no longer be an issue! I am still using relative paths, a leading "/" makes it look in the root folder of the server and affects debugging with localhost.
With the way you have the code now, it will always be looking for a folder named leaflet, etc, inside the current folder (as opposed to the root/base folder). Try changing it to this:
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<meta charset="utf-8" />
<!-- css loading -->
<link rel="stylesheet" href="/leaflet/leaflet.css" />
<link rel="stylesheet" href="/css/dashboard.css" />
<!-- script loading -->
<script src="/leaflet/leaflet.js"></script>
<script src="/js/dashboard.js"></script>
<script src="/d3.v3/d3.v3.js"></script>
</head>
<body>
A reinstall and Firefox is behaving as expected with localhost, servername and IP access to the webpage. So hopefully this will no longer be an issue! I am still using relative paths, a leading "/" makes it look in the root folder of the server and affects debugging with localhost.