Importing CSS and JavaScriptS2C Home « Importing CSS and JavaScript

In the HTML Basic and Intermediate Tutorials we used notepad to edit and save our files. I'll just reiterate the basic tools and setup for people that are jumping straight into the advanced tutorials. The HTML Basic and Intermediate Tutorials introduced a number of HTML tags and in these lessons we will finish our tour of HTML.

In this lesson we find out how to import external CSS files using the <link> tag. We then look at importing external JavaScript files into our HTML documents using the <script> tag. We also use the <meta> tag to insert meta information into our HTML documents. Finally we take a look at inline styles using the <style> tag and how to deal with JavaScript being turned off using the <noscript> tag.

The <link> Tag

The <link> tag allows us to link to external resources for our HTML documents and must reside within the <head></head> element. Most often used for importing style sheets and images.

The <meta> Tag

The <meta> tag allows us to insert generic meta information into our HTML documents and must reside within the <head></head> element.

The <noscript> Tag

The <noscript> tag allows us to perform non script based rendering when JavaScript is turned off in the browser.

The <script> Tag

The <script> tag allows us to put JavaScript into our HTML documents.

The <style> Tag

The <style> tag allows us to put style information into our HTML documents and must reside within the <head></head> element.

The Basic Tools

All we need to get going is a basic text editor such as Notepad for windows. So for instance using Windows XP:

click Start>>All Programs>>Accessories>>Notepad


Creating A Folder For Our Advanced Files

Let's create a folder for our HTML Advanced lessons

double click My Computer icon

double click C:\ drive (or whatever your local drive is)

right click the mouse in the window

from the drop down menu Select New

click the Folder option and call the folder _HTMLAdvanced and press enter.

Saving Our First File

Ok, with Notepad or a simlilar text editor open, copy and paste the following HTML code in :-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
<!-- Using Meta, Link, Script and Style Tags -->
<html xmlns="">
  HTML Tutorials - Advanced HTML Lesson 1 - Importing CSS and JavaScript
<meta name="Description" content="Title info used in search engine descriptions.">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="../global.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery.js"></script>
<style type="text/css">.red {color: red;} </style>
<h1 class="red">Importing Files and Using Meta Information</h1>
<h2>Introducing the meta, link, script and style tags</h2>
<p>We import CSS files using the link tag and JavaScript files using the script tag.</p>
<p>We also use the meta tag to allow entry of generic meta information.</p>
<p>We use the style tag for inline CSS, such as making our H1 heading red.</p>
  <p>Find out how to turn on JavaScript: 
	  <a href="">here</a>.</p>

Click file from the toolbar and then click the save option.

In the Save in: tab at the top make sure you are pointing to the _HTMLAdvanced folder we created above.

In the File name: text area type lesson_1_webpage.html and then click the Save button and close the Notepad.

save import

The .html file extension lets the system know that this is a hypertext document, you must save the file with this extension to view the document in your default web browser. If you do not save the file with the .html file extension Notepad and other text editors save the file with the .txt file extension. This will stop you viewing the file in a web browser.

Viewing Our Saved File

From the C:\_HTMLAdvanced folder, double click on the saved file and it will appear in your default web browser and look something like the following image if JavaScript is ENABLED in your browser.


Or something like the following image if JavaScript is DISABLED in your browser.


You Might See a Subtle Difference?

If you look at the two screenprints above, you will notice that the second screen print has an extra line of text at the bottom. Basically the contents of the paragraph within the <noscript></noscript> element from our HTML are visible because JavaScript is switched off. When this happens any code within a <noscript> </noscript> element will be executed. You can look at how to turn on/off Javascript at the link within the <noscript></noscript> element in the HTML code above. I'll leave you to check this out at your convenience.

Reviewing The Code

Ok, firstly let's have a look at the <meta> tag and its' usage. The attributes within the <meta> tag, generally take the form of key-value pairs. The key can be name to provide a name for the following content or http-equiv to describe an equivalent HTTP-Header and the value we wish to use for it, as in our HTML code above. The value part of the key-value pair is always set to content and describes the meta information for the key specified. Sometimes a third attribute scheme is used which is either a specific data format or URL that points to a data format to apply to the data within the content attribute. Meta information is used by browsers, search engines etcetera, to extract useful information about your documents.

The <link> tag allows us to link to external resources such as images and stylesheets for use in our HTML documents.

The <script> tag allows us to link to external JavaScript files as well use JavaScript inline. We are only showing how to link externally here as we will cover the rest in the JavaScript tutorials.

The <style> tag allows us to put inline style information into our HTML documents. We have used it here to make our H1 heading red. We will cover this further in our CSS tutorials.

Lesson 1 Complete

Try to import other CSS and JavaScript files from the website and have a go at switching JavaScript on and off. We will look at these aspects in a lot more detail in the CSS and JavaScript tutorials, but no harm done getting a feel for them now.

Related Tutorials

HTML Basic Tutorials - Lesson 1 - Starting Out

HTML Intermediate Tutorials - Lesson 1 - What is XHTML?

What's Next?

In the next lesson we complete our look at the HTML text tags.

HTML Reference

The <link> link to external resource tag

The <meta> generic meta information tag

The <noscript> non script statement tag

The <script> script statement tag

The <style> style information tag

go to home page Homepage go to top of page Top