Menu
I am trying to link my HTML home page to an external css stylesheet and an external javascript(.js) file. For whatever reason depending on which order I list them in the HTML file, only one of them will work. I used a simple alert box in the Javascript file to test if it is working and it only does when the javascript file is linked first. Here is my work...(I am an HTML noob by the way also)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8 />
<link rel="stylesheet" href="trinity.css" />
<Script src="churchJavaScript.js"></script>
<title>Trinity Temple</title>
</head>
<body>
<div id="CompleteWrapper">
<header id="headerSection">
<h1> Trinity Temple</h1>
<h3> And I sent messengers unto them, saying, I am doing a great work, so that I cannot come down: </br>
why should the work cease, whilst I leave it, and come down to you? Nehemiah 6:3 </h3>
</header>
<nav id="navSection">
<ul>
<li>Home</li>
<li><a href="serviceInformation.html">Service Information</a></li>
<li><a href="aboutUs.html">About Us</a></li>
<li><a href="directory.html">Directory</a></li>
<li><a href="contactUs.html">Contact Us</a></li>
</ul>
</nav>
<section id="sectionSection">
<h3> Welcome to Trinity Temple Church of God In Christ! </h3></br>
<hr width = 75% size= "1" color="#b20000" />
testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br>
testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br>
testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br>
testing tolaslksdflksdflksdflkslksadfsadfsdafsdadslkjdslksfdlkdslkdslk</br>
testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br>
testing tolaslksdflksdflksdflkslkdslkddddddjdslksfdlkdslkdslk</br>
testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br>
</section>
<aside id="asideSection">
</aside>
<footer id="footerSection" >
2900 Josephine St. </br>
Denver, CO 80207
</footer>
</div>
</body>
</html>
here is the javascript code in the external file...
window.addEventListener("load", todaysDate, false);
function todaysDate(){
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var completeDate = document.getElementById("footerSection");
footerSection.innerHMTL = "Today's Date: " +completeDate;
alert(month + "/" + day + "/" + year);
}
window.addEventListener("load", todaysDate, false);
Also, here is the code in the service information html doc...
<!doctype html>
<html >
<head lang="en">
<meta charset="utf-8"/>
<script src="churchJavaScript.js"> </script>
<link rel="stylesheet" href="trinity.css"/>
<title> Service Information</title>
</head>
<body>
<div id="CompleteWrapper">
<header id="headerSection">
<h1> Trinity Temple</h1>
<h3> And I sent messengers unto them, saying, I am doing a great work, so that I cannot come down: </br>
why should the work cease, whilst I leave it, and come down to you? Nehemiah 6:3 </h3>
</header>
<nav id="navSection">
<ul>
<li><a href="index.html">Home</a></li>
<li>Service Information</li>
<li><a href="aboutUs.html">About Us</a></li>
<li><a href="directory.html">Directory</a></li>
<li><a href="contactUs.html">Contact Us</a></li>
</ul>
</nav>
<section id="sectionSection">
<h2> Service Information </h2></br>
<hr width = 75% size= "1" color="#b20000" />
<h3>Sunday</br></h3>
Sunday School: Sunday 9am - 10:30am </br>
Sunday Service: Sunday 10:30 - 1:00pm</br>
</br>
<h3>Wednesday</br></h3>
Bible Study: 6:30pm - 8:30pm
</br>
</section>
<aside id="asideSection">
</aside>
<footer id="footerSection" >
2900 Josephine St. </br>
Denver, CO 80207
</footer>
</div>
</body>
</html>
938
To link a CSS file with your HTML file, you have to write the next script on your HTML file inside the head tag. To link a Js file with your HTML, you only have to add the source of the script inside the body tag or outside; it doesn't matter.
To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.
HTML, CSS and JavaScript work together to form the front-end design of a website by applying information that affects content, style and interactivity of a site.
The typical answer is: Add JavaScript code by the end of the </body> tag and. Add CSS code in-between the <head> tags.
Try this inside your <head> section:
<script type="text/javascript" src="churchJavaScript.js"></script>
<link href="trinity.css" rel="stylesheet" type="text/css" />
Make sure trinity.css, churchJavaScript.js and your html file are in the same folder.
It's slightly better for performance on desktop websites to put the js before the css. Read why here.
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
