This tutorial is now complete. Please report any errors to Divinderjit Singh Chattrath.

PREVIOUS KNOWLEDGE REQUIRED

Basic HTML tags

Please visit my HTML tutorial to learn about these tags before proceeding with this tutorial.

 

STEP 1

Our first goal is to create two iFrames that are presented side by side on the computer screen.

Make sure to save the following file as "index.html"

 

Open this file in a browser. There will be two frames. At this stage these frames will show "Page cannot be displayed" message because the required files "questions.html" and introduction.html" has not been created yet.

STEP 2

The next step is to make these files. The "introduction.html" file can be a anything displaying information about this website or how to use it, but the "questions.html" file should have questions or question numbers that are hyperlinked and opens in the frame that initially shows the "introduction.html" 

Note that the "questions.html" file will be displayed in the smaller frame on left and the "introduction.html" file will be displayed in the bigger frame on the right hand side.

 Save the following file as "introduction.html"

 

Save the following file as "questions.html". It is a good idea to just write question numbers in this files and not write the whole questions because we have limited space in the left (smaller) iframe. If you want to write the whole questions then you should redesign the iframes. Also note that the name of the target iframe (iframe_2) should be same as you have named this iframe in the "index.html" file

 

Save the following file as "answer01.html". This file is a simple HTML file. You are required to use your HTML skills to write a question and an answer to that question using images, videos, bullets, tables, marquee etc. (now is time to be creative). You will also have to make "answer02.html" file.

 

 

Please note:
All the following files should be in one folder:
index.html introduction.html questions.html answer01.html

 

Assignment:

Make the assignment using multiple webpages that you will first design on the paper and then on computers using HTML, iFrames and CSS. The assignment should have minimum two iframes but to get better report students' are advised to have more iframes. Make the assignment on some other subject if possible but if you cannot think of an assignment which will cover all features taught in class, then make up something as you like. For example an assignment of "CARS" or "AFL" etc. It should include all features that the teacher has taught in class. For example Tables, bullets, background, colors, marquee, headings, lines, links, videos, images, etc.

 

FAQs / Problems / Situations

1. When I click on the link in left (smaller) frame, the answer01.html file opens up in the new browser instead of opening up in the right (bigger) frame.

 Solution: name of the target frame (iframe_2) in "questions.html" file should be same as in the index file.