What are html Frames?
HTML frames divide a web page into various sections and each section loads its html code separately. This is quite similar to HTML tables, where a webpage is divided into different rows and columns. Each frame has its own content, which load separately.
How to Create html Frames:
- Html frames can be created using html <frameset> element.
- It should be placed after html <header> element.
- Html row attribute defines horizontal frame and html column attribute defines vertical frame.
- Use html src attribute to define source which should be loaded within frame.
(i) Horizontal Frame:
Let’s learn with following example how to create horizontal frames.
<!DOCTYPE html> <html> <head> <title>Horizontal Frame Example</title> </head> <frameset rows=”20%,60%,20%”> <frame name=”top” src=”/First-frame/” /> <frame name=”main” src=”/Second-frame/” /> <frame name=”bottom” src=”/Third-frame/” /> </frameset> </html> |
The result will be displayed as:
(ii) Vertical Frame:
In order to create a vertical frame, simply replace the html rows attribute with html cols attribute keeping everything same.
Example of html vertical frame :
<!DOCTYPE html> <html> <head> <title>Vertical Frame Example</title> </head> <frameset cols=”20%,60%,20%”> <frame name=”top” src=”http://www.first-frame.com/” /> <frame name=”main” src=”http://second-frame.com” /> <frame name=”bottom” src=”http://third-frame.com” /> </frameset> </html> |
The result will be displayed as:
(iii) Mixing Rows and Columns:
You can mix rows and columns of a webpage by nesting secondary frame into primary one. Let’s understand with following example:
<!DOCTYPE html> <html> <head> <title>Horizontal Frame Example</title> </head> <frameset cols=”33%,33%,34%”> <frameset rows=”50%, 50%”> <frame name=”First” src=”http://www.first-frame.com”/> <frame name=”Second” src=”http://www.second-frame.com”/> </frameset> <frame name=”Third” src=”http://www.third-frame.com”/> <frame name=”Fourth” src=”http://www.fourth-frame.com” /> </frameset> </html> |
The result will be displayed as: