Lesson One: HTML, CSS, and the JavaScript Link

About JavaScript: JavaScript is a computer programming language that allows you to interact with the users of your website. In the HTML and CSS training you created static pages for displaying information. With JavaScript you will create dynamic pages that allow users to make decisions and adjust information in your site.

  1. Make a folder on the c: drive named jhistorytree
    Open Notepad and add the following text:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Five Events in History</title>
    <link rel="stylesheet" type="text/css" href="histevents.css">
    </head>
    <body>
    <h1>Five Events in History</h1>
    <script src="histevents.js"></script>
    </body>
    </html>
  2. Notice that you have added a link to a CSS file (histevents.css) in the head element of your HTML file. You have also added a link to a JavaScript file (histevents.js) just before the ending <|/body> tag. The link to the script file can be located in numerous areas of the HTML file, however, for this training program you will always locate the script link at the bottom. This practice insures that all the HTML is loaded to the page prior to the execution of your JavaScript code.
  3. When you are confident that your code is correct: Click File, Save As and save your file in the c:\jhistorytree folder as histevents.html.
  4. Double click the histevents file to view your Webpage: Sample

Lesson Two: Adding Design and JavaScript Code