HTML5 Intermediate

Scripting

???.

The noscript Element

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

The script Element

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

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.

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 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

notepad

Creating A Folder For Our Intermediate Files

Let's create a folder for our HTML5 Intermediate 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 _HTMLIntermediate 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.1 Strict//EN"  
         "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<!-- Our HTML follows -->
<html xmlns="https://www.w3.org/1999/xhtml/">
<head>
<title>
  HTML Doctor - HTML and CSS Tutorials - Intermediate HTML Lesson 1 - What Is XHTML?
</title>
</head>
<body>
<h1>Our First XHTML File</h1>
<h2>Introducing the DOCTYPE tag</h2>
<p>In this lesson we start using Strict XHTML</p>
</body>
</html>

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 _HTMLIntermediate 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.

notepad

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:\_HTMLIntermediate folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

notepad

Reviewing The Code

Lesson 1 Complete

Validate the HTML from the lessons and your own HTML using the W3C Validator available at the link. Just cut and paste your code in and use the appropriate <!DOCTYPE>.

Well that's the heavy stuff out of the way. From the next tutorial onwards we will be using the XHTML 1.0 Strict <!DOCTYPE> for all our lessons.

Related Tutorials/Quizzes

The <noscript> non script statement tag

The <script> script statement tag

What's Next?

In the next lesson we bring more structure to our web pages using the <div> and <span> tags.

HTML5 Reference

The <!--...--> comment tag

The <!DOCTYPE> document type tag