CSS and frames
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 0
Style tag is used to set various attributes of tags. It can be done with in the tag called in line styling, or it can be done in the head area of the HTML.
Apart form this a separate CSS file can be made to style the whole website.
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
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.