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"

<!DOCTYPE HTML> <HTML> <HEAD> <TITLE> Software Development 2014 Exam Solutions</TITLE> <META charset="UTF-8"/> <STYLE> #frame1 { display: block; float: left; width: 65px; height: 530px; margin: 0px 0 0px 0px; border: 1px solid #666; overflow: auto; background-color:#eef; font-family: tahoma, sans-serif; font-size: 10pt; padding: 0 6pt; } #frame1 h1 {margin-top: 0;} #frame2 { display: block; float: right; width: 880px; height: 530px; margin: 0px 0 0px 0px; border: 1px solid #666; overflow: none; background-color:#eef; font-family: tahoma, sans-serif; font-size: 10pt; padding: 0 6pt; } #frame2 h1 {margin-top: 0;} </STYLE> </HEAD> <BODY> <iframe id="frame1" src='questions.html' name="iframe_1" style="position:absolute; top: 100px; left: 1px;"></iframe> <iframe id="frame2" src='introduction.html' name="iframe_2" style="position:absolute; top: 100px; left: 80px;"></iframe> </BODY> </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"

<!DOCTYPE HTML> <HTML> <HEAD> <TITLE> HTML iframe example </TITLE> <META charset="UTF-8"/> <STYLE> body { margin: 4px 0 4px 4px; background-color:#eef; font-family: tahoma, sans-serif; font-size: 10pt; padding: 0 6pt; } h1 {margin-top: 0;} </STYLE> </HEAD> <BODY> <h1>Guide</h1> <p> First thing first! Make sure to refresh the page.<Br> Click on the question on the left to see the corresponding answer in this area. </p> </BODY> </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

<!DOCTYPE HTML> <HTML> <HEAD> <TITLE> HTML iframe example </TITLE> <META charset="UTF-8"/> <STYLE> body { margin: 10px 0px 0px 0px; background-color:#eef; font-family: tahoma, sans-serif; font-size: 10pt; padding: 0 6pt; } h1 {margin-top: 0;} </STYLE> </HEAD> <BODY> <b>Short<br> Answer</b> <br> <a href='answer01.html' target="iframe_2">Que1</a> <br> <a href='answer02.html' target="iframe_2">Que2</a> <br> </BODY> </HTML>

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.

<!DOCTYPE HTML> <HTML> <HEAD> <TITLE> HTML iframe example </TITLE> <META charset="UTF-8"/> <STYLE> body { margin: 10px 0px 0px 0px; background-color:#eef; font-family: tahoma, sans-serif; font-size: 10pt; padding: 0 6pt; } h1 {margin-top: 0;} </STYLE> </HEAD> <BODY> <h1>Detailed questions and their answers</h1> <p> Question: You can type the question here.<Br> Answer: This is the answer to the first question. </p> </BODY> </HTML>

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.