Print this chapterPrint this chapter

Submodule 7.1: The model of event-driven programming

The HTML file

As you can see below, the HTML file has a link to the CSS file on the <head> and a link to the JavaScript file at the end of the <body>.

By referencing the CSS and JavaScript in the HTML we are able to combine these files together!

Moreover, we have use id attributes to the areas that we will need in our JavaScript. With the id we are able to get each of these elements in the JavaScript and tell them what we want them to do. 

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>My first HTML-CSS and JavsScript combination</title>
 
     <link rel="stylesheet" type="text/css" href="css/mystyle.css">
   </head>
   <body>
     <h3>My first HTML-CSS and JavsScript combination!</h3>
     <p><input size="20" id="yourName"> is my name. </p>
     <button id="helloButton" >Tell me Hello!</button>
     <p>Hello <span id="viewName"></span>!</p>
 
     <script type="text/javascript" src="js/myscript.js"></script>
   </body>
</html>