An interactive computer page is one that does something; it reacts to a command.
In this exercise we are going to insert some riddles and the computer will give us answers to the riddles on our command. The command will be a click of the mouse.
We will start off with one riddle but once you get the hang of it you can extend your folder to thousands of riddles.
While Microsoft Word is a good program for typing letters and other documents, it does not produce pages that interact with each other. For this we are going to use notepad, a program that comes with Microsoft Windows. While Notepad can be used to type letters and other documents, it can also use computer languages that will produce pages that will interact with each other.
The language we are going to use for this exercise is HTML (hypertext markup language). This is a computer language that interacts with a browser such as Internet Explorer to enable your computer to do things such as link pages together so that you can easily go from one page to another and back again. It also produces files in a form that can be loaded onto the internet but we are not worried about that at this stage.
Getting started; a new folder:
To begin we need a new folder for our files.
Click on “Start”
Scroll to Documents (or my documents). Click on documents to open the document menu.
Right click (but not on any file or folder) and scroll down to “new”.
Click on “folder”. A box labeled “new folder” will appear. Place your cursor in the box and right click.
Scroll down to “Rename” and click.
Delete “new folder” and type “Interactive Riddles” or simply overtype the old name with the new.
Opening notepad:
Click on “Start”
Scroll to “Programs” (or “All Programs”), then to “accessories” and then to “notepad”. Click on “notepad”.
Adding some HTML:
HTML is a language that is defined by the use of tags. This is code enclosed within angle brackets (called delimiters).
Each HTML document begins with 
and ends with 
. Note the forward slash in the closing tag.
The document is divided into two sections; the head and the body.
All HTML documents have the following code:
The opening tag for an html document.
The opening tag for the head.
The closing tag for the head.
The opening tag for the body.
The closing tag for the body.
The closing tag for an html document.
Inserting a title and some text:
The title of the document is written in the head section and is enclosed between opening and closing title tags.
The text is written in the body section of the document between the opening and closing body tags.
The following code includes the title of the document: “Riddles” and includes the first riddle: What lies shaking at the bottom of the ocean?
Type the following in notepad. It is useful to indent the content so that you can easily see the three main
sections: html / head / body.
Saving:
You have to tell the computer to save this as an html file.
To do this you add .html at the end of the files name.
Since we are calling the file “riddles” we will save it as riddles.html
Important: Don’t forget the .html at the end of the file name. The code will not work without it.
Click “save” on the file menu and scroll to your Interactive Riddles folder.
Type “riddles.html” in the box for file name.
In the “Save as type” box use the blue arrow at the right to choose “All Files”.
The default value of ANSI in the encoding box works fine so leave it.
Now click “Save”.
Display Your Document:
Click on “Start”
Scroll to “Programs” or “All Programs” and then to “Internet Explorer”. You will be working offline so you do not have to be connected to the internet. Click on Internet Explorer.
Click on “file” in the top, left-hand corner and scroll to “open”.
Click on open and a dialogue box will appear. Click on browse.
Browse to Documents → Interactive Riddles → riddles.html.
Click on “riddles.html”.
The first riddle should appear on the screen.
Click on your notepad document in the taskbar at the bottom of the screen. Your notepad document will appear on the screen.
A Second Page: Answering your riddle.
In notepad click “file” then “new”.
Type the following:
Save this file as “answer1.html in the Interactive Riddles folder. Don’t forget the .html at the end.
Note the two 
tags after the riddle. This tells the browser to move down two lines before displaying the answer. Without the tags the riddle and answer would appear on the same line. Note also that the tag is a stand alone tag. This means that there is only one tag to indicate the break rather than an opening and closing tag.
Repeat the procedure under “Display Your Document” to see what this looks like on the screen.
Linking the pages:
Go back to your answer1.html file in notepad by clicking on it in the taskbar at the bottom of the screen.
Create a line break by typing after “A nervous Wreck”
Type the following, on a new line after “A nervous wreck.” and before the body closing tag “”.
Save your file by clicking “save” in the file menu or by clicking on the disc icon at the top of the screen.
Go back to your Internet Explorer page by clicking on it in the taskbar at the bottom of the screen.
Refresh the Internet Explorer page by clicking on the two curved arrows icon at the top of the screen. This reloads the page with the changes you have made to the code.
You should have “Back to riddles page.” coloured blue on the screen. Click on it.
The Internet explorer should take you back to your original riddles page.
Try typing something on this page. You will notice that nothing happens.
Click on “view” at the top of the screen and scroll down to “source”. Click on “source”.
You will see the notepad code displayed.
At the end of the riddle type a line break tag; “"
On the next line, just above the closing
tag, type the following:
Save your file.
Click on the Internet explorer version of the page in the taskbar.
Refresh the page by clicking on the two curved arrows icon at the top of the screen.
The word “Answer” should appear in blue at the bottom of your document. Click on it.
You should then go to the IE page that answers the riddle.
By alternately clicking on “Answer” and “Back to riddles page.” You can switch between the two pages indefinitely.
Any Problems?
Check that your notepad pages are as follows:
Page 1 (saved as “riddles.html”)
Page 2 (saved as “answer1.html”)
