CODEWITHSUNDEEP
javascripthtmlcss
Lēctia Landau
Lēctia Landau

Reputation: 573

How can I properly add CSS and JavaScript to an HTML document?

This very well might be a very stupid question.

I'm trying to add an empty CSS file, an empty JavaScript file and the jQuery library into the most basic of HTML files, as follows:

<html>
<head>
  <title>Testing</title>
  <link rel="stylesheet" type="text/css" href="theme.css">
  <script language="javascript" type="text/javascript" src="jquery-2.0.3.js" />
  <script src="application.js" />
</head>
<body>
  <h1 class=test>This is a test! Hello, world!</h1>
</body>
</html>

However, it doesn't work. The h1 doesn't display in my browser when the link or any of the scripts are present, but displays normally otherwise.

What am I doing wrong here? Why doesn't this work, and how can I make it work?

Thank you very much,

Eden.

Upvotes: 2

Views: 182

Answers (5)

KarelG
KarelG

Reputation: 5234

two things. script tags should have an end tag. 

<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" /></script>
<script type="text/javascript" src="application.js" /></script>

Another thing, see if you are navigating to the right file. Assume that your directory tree is the next 

directory
  |-yourHTMLpage.html
  |-jquery-2.0.3.js
  |-application.js
  \-theme.css

then the next will work

<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" />
<script type="text/javascript" src="application.js" /></script>
<link rel="stylesheet" type="text/css" href="theme.css">

But in most recent standards, we are using a folder for css and js files, like the next

directory
  |-yourHTMLpage.html
  |-js
     |-jquery-2.0.3.js
     \-application.js
  \-css
     \-theme.css

Then you have to adapt the link, 

<script language="javascript" type="text/javascript" src="js/jquery-2.0.3.js" />
<script type="text/javascript" src="js/application.js" /></script>
<link rel="stylesheet" type="text/css" href="css/theme.css">

Notice the "js/" addition for javascript files and "css/" addition for css files. HTML will navigate from its directory to the said file. But if the file isn't there as the source element is telling, then the page won't load the said file.

Upvotes: 2

Dhaval Bharadva
Dhaval Bharadva

Reputation: 3083

Here is the simple method for include css and javascript file to your page. 

<link rel="stylesheet" type="text/css" href="YOUR FILE PATH">
<script src="YOUR FILE PATH" type="text/javascript"></script>

Upvotes: 0

Lukas Kolletzki
Lukas Kolletzki

Reputation: 2246

Are you sure that the path to the several files is correct? If it is, is the class of the h1 spelled correctly? You should embed the javascript files like this:

<script language="javascript" type="text/javascript" src="jquery-2.0.3.js"> </script>
<script language="javascript" type="text/javascript" src="application.js"> </script>

Upvotes: 0

CCH
CCH

Reputation: 1536

Are the css and js files in the same folder as your html ?

To see what is wrong, try a developper console to see what requests are sent (Press 'F12' on chrome or install the firebug extension on Firefox). There should be a "Network" tab that shows what files are requested and if your browser does or doesn't find them.

Upvotes: 0

Shaun
Shaun

Reputation: 1220

Your <script> tags cannot be self closing. Try changing them to look like <script src="..." type="text/javascript"></script>

Upvotes: 6

Related Questions