My html structure is like below, and the folder path is correct:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Application</title>
<link rel="stylesheet" type="text/css" href="../app/assets/appStyle.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">
<link rel="text/javascript" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js">
</head>
When I try the pages from the browser, they work. However, when I try them from localhost, it does not load css or the minified semantic ui. Could anybody help please? I have been struggling with this for 3 hours. Any help or hint is appreciated.
EDITED: I have a function like below, for routing in my app.js file. Can it be a reason?
// Make the user route to application.html
app.get('*',function(req,res){
res.sendFile(path.join(__dirname + '/public/pages/application.html'));
});
I think problem is here
<link rel="stylesheet" type="text/css" href="../app/assets/appStyle.css">
If you want to check that stylesheet is working properly, right click
the browser and click View page source.
Click the stylesheet link and check is it load the stylesheet
correctly.
If it is not working properly check your path and correct that.
You are using <link> tag for Javascript. <link> tag is not supported by browsers to load JS.
Please refer to this StackOverflow question: Can I load javascript code using <link> tag?.
<link rel="text/javascript" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js">
Use script tag to load JS.Try replacing above lines with:
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>
Let me know if this works.
Related
I'm using w3.css framework from https://www.w3schools.com/w3css/default.asp which is an alternative to Bootstrap.
IntelliJ idea does not show up code completion for this framework.
Does anyone know how to set it up in IntelliJ idea?
I did add the link to the head of page also but still no result.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>W3.CSS framework</title>
</head>
Did you try downloading the library locally per instructions in https://www.jetbrains.com/help/webstorm/2021.3/style-sheets.html#ws_html_code_completion?
Once you do this, completion should be there:
I don't have a direct access to the code itself right now, But I've got some client whose website was developed in angularjs, and all the code gives an output on the DOM (I can see the pages with all the elements and everything is loaded just fine), but when I tried to make a crawling test via Google - it looked like the website wasn't scanned yet, even though it's been already a month.. and then I saw something weird - that when I 'view source' the pages themselves, all I get is this piece of code -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="ahrefs-site-verification" content="xxxyyy">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#1976d2">
<link rel="stylesheet" href="styles.32f34f185b7564580e93.css"></head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
<script type="text/javascript" src="runtime.34e0ced836cdde276d53.js"></script><script type="text/javascript" src="polyfills.700c13e3feb6da6eca5f.js"></script><script type="text/javascript" src="main.e89588fe3aa7c32000ef.js"></script></body>
<script src="https://wchat.freshchat.com/js/widget.js" async=""></script>
</html>
I guess the problem is happening in these lines -
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
Do you have at least any speculation why this might happen?
Since you're dealing with a SPA, SEO is not that straightforward. Google crawls your index.html which contains the app-root of your Angular app and my experience is that it will not execute the JS which contains your SPA routes. Your only options for optimizing SEO in SPA's is prerendering your routes, through an external service like Prerender.io or create your own prerender or use a Server Side Rendering technology for your SPA.
Since you are using Angular you should take a look at Angular Universal.
edit: if you don't want the complete hassle of prerendering all your routes but just want an acceptable result in Google for your index.html at least set a proper title tag <title>Proper Title - Wonderful website</title> and the meta description tag <meta name="description" content="Description of max 160 chars">
You might try Inspect Element instead of View Source
I don't know whether the project has been deployed in dev mode or production mode but doing an Inspect element will help you to access the DOM elements.
You can check this article to understand the difference between view source and Inspect Element
I have an issue with a website I built from angular. In index.html, there are references to javascript files, but my problem is this: in the HTML, the paths are relative to the file but the browser looks for the files in the root dir:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RasaBE</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-->
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>
This works fine when everything is in the root folder of my website, but I wanted to have everything in a subfolder /bo/. So index.html is in localhost/bo/index.html and so are all the scripts. Since it's a relative path in the code I'd expect my browser to look for localhost/bo/script.js, but instead it looks for localhost/script.js.
A screenshot to show what's wrong:
I tested this in Chrome and I have the same issue. It's a bit complicated to change the paths directly since it's compiled from angular, and I'd probably have to change it every time it compiles. Is this an issue with Firefox and the way it deals with relative paths?
I should also add that host/bo/inline.bundle.js exists and can be found by the browser but the it looks for it in the root folder instead of the same folder as index.html.
This "base" element sets the default location for the page.
Remove
<base href="/">
OR
<base href="/bo/">
If you want your Angular Webapp run from every subfolder without touching the code
Change
<base href="/">
To
<base href=".">
Removing the "base" element won't work since Angular throws then an error complaining about the missing element.
It turns out it was all because of the tag that is added by angular, editing it to <base href="/bo/"> makes it work. since it's just one line to change I consider it fixed.
I have a website that I'm constructing from following a tutorial. I've applied the correct code for the application, and all of its parts and files are in order. But when I try to load the webpage, I notice that the CSS isn't being applied to the webpage. Here is what I have so far with the code for the HTML and CSS.
body {
font-family: "Arial Rounded MT Bold", sans-serif;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="x-UTF-16LE-BOM">
<meta http-equiv="X-UA-Compatible" content="IE-Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vesco Portfolio</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link href="https://fonts.google.com/specimen/Roboto+Condensed?selection.family=Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Welcome to Vesco!</h1>
<script src="js/jquery.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
Is there a possibility that my browser (or computer) is bad or has malware on it? Or should I just try using a different browser (I'm using Google Chrome and Firefox)?
Is the directory it is in currentDirectory>css>style.css try /css/style.css, the other problem is what does the whole css file look like have you added anything to the top of it. The only thing it should have is #charset "UTF-8";. The last thing it could be is that you need to clear your cache. If you don't clear your cache the page will still render the old css sheet without the change. So go to history and clear history. Also clear cache works if you have the developer options enabled on whatever browser you are using. The best way to know if the selector is working is to change the color
like:
`body { color: red; } then troubleshoot.
I've done the same thing and usually it is either cache or path is not quite right.
I've been having issue linking in the JQuery api into my html page. I've spent a lot of time trying to figure it out myself, but haven't made any progress, and would really appreciate anyone's help! Like I mentioned in the title, it works fine when I link to a hosted version of JQuery, but when I try to use a local version, I have no success (I need to work locally for what I'm using it for). Side Note: I downloaded the files directly from JQuery's site, and put them in the root folder for simplicity.
Please see the code below...
This does not work properly:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="jquery-2.2.3.js"></script>
</head>
<body>
</body>
But this does work properly:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
</body>
Maybe it's the order the scripts are coming in - your working version has jQuery first, then mobile, while the non-working one has the opposite. If that doesn't fix it, double-check that your file paths are all correct - the way it's written, your html file must be in the same folder as the scripts. If it's not, try prepending a slash: <script src="/jquery-2.2.3.js"> to force it to look at the root folder.
One way to confirm whether that's the issue is to check your browser dev tools. If you're in chrome, right click -> inspect element, and find the Network tab. Reload your page while you've got that open and see if your page is successfully loading the scripts. If you see the names of those scripts in red, it means they weren't found or couldn't be loaded.
Last thought: if you're working on your local site via opening a file:// path, the JS you can use will be restricted; this is a security feature. To get around it, run your site on a local server. Mac OS X has a built-in one, or you can use PHP or python to get one up and running immediately from the command line, or install a library like pow or serve. Google around for 'local web server setup', there are tons of options.