Linking External Files to HTML

Why Separate Files?

Before we start linking, it's important to understand why we do this. Keeping everything in one giant HTML file gets messy very quickly. By separating our code, we gain several advantages.

To get a quick overview of these benefits, let's start with a short reading.

As you just read, this approach keeps our code clean and makes it much easier to update the look of our entire application by changing just one CSS file.

Step 1: Create the Project File Structure

First, we need to create the files we're going to link. It's a best practice to organize these files into dedicated folders.

In your project folder (the one containing your index.html file), please create the following:

1. A new folder named css.
   • Inside the css folder, create a new, empty file named style.css.
2. A new folder named js.
   • Inside the js folder, create a new, empty file named script.js.

Your project directory should now look like this:

DevProject/
├── index.html
├── css/
│   └── style.css
└── js/
    └── script.js

This simple organization makes your project much tidier and is the standard structure for web projects.

Step 2: Linking Your CSS File

To apply styles to our HTML, we need to tell the browser where to find our style.css file. We do this using the <link> tag inside the <head> section of our HTML document.

This video provides an excellent, beginner-friendly walkthrough of the process.

Now, let's apply this to your index.html file. Add the following <link> tag inside your <head> section, right after the <title> tag:

<head>
  <meta charset="UTF-8">
  <title>AI Writing Assistant</title>
  <link rel="stylesheet" href="css/style.css">
</head>

Verify the Connection

As the video emphasized, it's crucial to check that the link works.

1. Open your style.css file.
2. Add the following code and save the file:

   body {
     background-color: #f0f8ff; /* A light blue color called AliceBlue */
   }
   

3. Now, open your index.html in a web browser. The background should be a very light blue. If it is, congratulations, your CSS file is correctly linked! If not, double-check the folder names and the href path in your <link> tag for typos.

Step 3: Linking Your JavaScript File

Next, we'll connect our script.js file. This is where we will eventually write code to handle button clicks and communicate with our AI backend. The process is similar to linking CSS, but we use a <script> tag.

The modern best practice is to place the <script> tag just before the closing </body> tag. This allows the browser to load and display all the visible HTML content first, so the user sees your page quickly, even if the JavaScript file is large or slow to load.

This short video demonstrates how to link the JavaScript file.

Let's apply this to your index.html. Add the following <script> tag at the very bottom of your <body> section, right after the <footer> and before </body>:

  <footer>
    <p>&copy; 2024 AI Writing Assistant</p>
  </footer>

  <script src="js/script.js"></script>
</body>

Verify the Connection

Just like with CSS, let's confirm our JavaScript file is connected.

1. Open your js/script.js file.
2. Add the following code and save it:

   alert('Hello! JavaScript is connected.');
   

3. Refresh your index.html in the browser. You should see a pop-up alert box with the message. If you do, your JavaScript file is linked correctly! You can now remove the alert() line from your script.js file.

Your Project So Far

Excellent! You now have a complete, foundational structure for your web application. Your HTML file provides the semantic content, and it's now connected to separate files for styling and functionality.

This image gives a great visual summary of how the three files (.html, .css, and .js) are connected.

DevProject/
├── index.html
└── assets/
    ├── css/
    │   └── style.css
    └── js/
        └── script.js

Conclusion

In this lesson, you've mastered the final and crucial step of setting up a professional web project structure. This marks the end of our "HTML Fundamentals" module. You've gone from a blank page to a semantically structured, fully connected HTML document ready for styling and interactivity.

Key Takeaways:

• Separation of Concerns is a core principle: HTML is for content, CSS for style, and JavaScript for behavior.
• We use the <link> tag in the <head> to connect an external CSS stylesheet. The key attributes are rel="stylesheet" and href="path/to/file.css".
• We use the <script> tag, usually at the end of the <body>, to connect an external JavaScript file. The key attribute is src="path/to/file.js".
• Organizing files into css and js folders is a standard practice for keeping your project tidy.

You are now perfectly set up for the next stage of our journey. In the next module, "Styling Web Pages with CSS," we will start using the style.css file you just created to bring your application's design to life, starting with how to apply styles to different HTML elements.