HTML Link and Script Tags

H
andrewgbliss
8 months ago

This article will cover how to bring in other files such as CSS and JavaScript into an HTML file.

. . .

Github repo

https://github.com/EntryLevelDeveloperTraining/html-workshop

Why use Link and Script tags?

HTML is pretty useful on it's own, however just having HTML can make your webpage look bland and mediocre. By default, the style of a webpage, looks the same for every webpage. That is why developers use CSS (Cascading Style Sheets) and JavaScript.

What is CSS?

CSS stands for Cascading Style Sheets. It is used for styling a website. You can use different colors, padding, layouts, rounded corners, and a bunch of other awesome styles. We can create a stylesheet file and then reference that in our HTML page.

What is JavaScript?

JavaScript is code that you can write to make you webpage more interactive. You can handle buttons clicks, show animations, show videos, and make a bunch of other cool applications. We can create a JavaScript file and then reference that in our HTML page.

Getting Started

Let's first create a new html page called link-tags.html

<!DOCTYPE html>
<html>

<head>
  <title>Welcome</title>
</head>

<body>
  <h1>Links Tags</h1>
  <a href="/">Home</a>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, laborum. Sit nihil culpa non minus corrupti qui
    voluptas quaerat ea, ab iste repellendus autem velit omnis veniam deserunt facere tempore.</p>
</body>

</html>

This is a basic HTML page with a few elements. Let's create a stylesheet that will style the p tag. So let's create a directory called assets, and then a folder under that called css, and then a file under that called styles.css. So the folder structure will look like this.

assets/css/styles.css

Creating the stylesheet file

So create that file and then add this CSS:

p {
  padding: 10px;
  border: 1px solid black;
}

This is saying that for every p tag on the HTML page we are going to apply padding of 10 pixels and a border of 1 pixel with a sold black line.

Now that we have that file we can bring that into our HTML page using a Link tag.

Link Tag

To use a Link tag we need to go to the head tag in our HTML and add the tag there:

<head>
  <link href="assets/css/styles.css" rel="stylesheet" />
  <title>Welcome</title>
</head>

So in between the head tag and above the title tag. Save the file and refresh the page.

Now you can see that the p tag has a border around it with some padding.

Script tag

Now let's create a JavaScript file, under the assets folder create a folder called js. Then under that create a file called main.js.

So the folder structure will look like this:

assets/js/main.js

Then just add this code to the file:

console.log('Hello World');

Now to bring this file we need to use a script tag.

<head>
  <link href="assets/css/styles.css" rel="stylesheet" />
  <script src="assets/js/main.js" type="text/javascript"></script>
  <title>Welcome</title>
</head>

So in the head tag just under the link tag add the script tag that references the file you just created. Now open up the console and you should be able to see the words Hello World.

Conclusion

So that is how you use link and script tags to bring in outside CSS and JavaScript files. For more information about those technologies we have separate courses just for those.


H
andrewgbliss
8 months ago