Download presentation
Presentation is loading. Please wait.
1
Frame in HTML Dr. Varun Tiwari Associate Professor
Trinity Institute of Professional Studies
2
OBJECTIVES To understand the concept of Frame and Frameset in HTML. To bring out solution of divination web browser by using Frame in HTML. To create a current live project by using Frame. To understand about the frameset rows and cols. To put together a simple web pages with 3 frames How to use the TARGET attribute of links to load pages in different frames
3
FRAME HTML frames are used to divide your browser window Into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns. Frames are individual segments of a window, each having its own page loading in it and being able to work separately or with the other frames as you set them up to work. This gives greater flexibility than just simply dumping everything onto one page.
4
FRAME tag The FRAME tag does not need a closing tag. This tag is also easier to understand. Honestly. SRC Attribute: this is the file you want to load into the frame. So you will see that each frame tag above has a separate HTML file in it - these are complete HTML files. Name Attribute: Is it really important that you give EACH frame a unique name. You will see one reason why shortly. FRAME name defined as rows form “top” , “main or content”, “bottom” and cols form “left” , “center” and “right”.
5
FRAMESET Tag Everything that defines a set of frames, goes between FRAMESET tags. In FRAMESET tags and the subsequent FRAMEs are set up in the <head> of your document, not in the body. It is not necessary to have anything in the body at all. If you want to divide up your page into horizontal segments then you need to define a ROWS attribute. If you want to divide your page up into vertical segments then you need to define a COLS attribute. So above we have rows="60,*,50". There are three parts to this definition, each separated by a comma. This means I intend to divide up the screen into 3 separate parts from top to bottom. The first and last parts are, in this example, defined by absolute numbers - aiming for 60px and 50px. The middle section just has an asterisk and this means 'everything else'. The reason one of your sections ought to have an asterisk is that people have different screen resolutions and then people can change the size of their browser windows and you easily cannot control or predict this. With this definition, our top and bottom frames will always be 60 and 50, but the middle frame will resize with the screen resolution or the window size. Note: You can use percentages when defining segments, however this does mean your site will not look the same on everyone's computer, which is not ideal.
6
Targeting Different Frames
One great usage for frames is to keep the links to your different pages always on-screen, instead of letting them scroll down your page and have to scroll back up again to find your other pages. In the example above I have only set up one 'live' link, but the bottom frame serves to keep links to to other pages on-screen. This leads to another advantage of frames: when you add or remove pages from your site, you need only change one page ( unless you have links elsewhere in your site). This reduces greatly maintenance time on a website. Let's look at the code for the link in that example:- <a href="c1.html" target=“contentFrame">Welcome to My Site!</a>
7
Attributes of Frame and Frameset
Frameset Attributes Description Rows Pixel, %age, * indicate remaining space Cols As above Border Width of border Framespacing Space b/w the frames Frame Attributes SRC Page displayed in the frame Marginheight Space to be left at the top and left side of frame Marginwidth Space to be left along the sides of frames Name Name of frame Noresize Frame un-sizeable Scrolling Yes, no , auto Vertical , horizontal scrollbars Width of frames Target Attributes _parent Page loaded containing the current frame _top Load into the whole browser window _blank New browser window _self Loaded in the same window Default target
8
Working of Live Project (CoronaVirus by using Frame and Frameset)
Material/Content Should be………… Example 1:Total six files available 3 jpg picture files and 3 files contain the information about the Corona. 1 file contain what is corona? 2 file contain prevention of coronavirus and 3 file contain symptoms of coronavirus. Lets create html file. 1. 2. 3. 4. 5. 6.
11
First Frame File C1.html content
12
Second Frame File C2.html content
13
Third Frame File C3.html content
14
Mainfile1 according to Frameset Rows (frow.html)
15
Output of frow.html
16
Mainfile2 according to Frameset Cols (fcol.html)
17
Output of fcol.html
18
Example 2: By using Target Attributes: Step 1: Firstly Design Corona menu page: (coronamenu.html)
19
Step 2: Now Design Corona main page: (coronamain.html)
20
Step 3: Now Design framemain page: (framemain.html)
21
Output of framemain.html
22
Output of framemain.html
23
Output of framemain.html
24
Output of framemain.html
25
All files save in same folder
All files save in same folder. Here I have been creating a folder name coro.
26
Thank You
Similar presentations
