SlideShare une entreprise Scribd logo
1  sur  14
Télécharger pour lire hors ligne
HTML Frames

www.eshikshak.co.in
Introduction
• Frames divide a browser window into several
  pieces or panes, each pane containing a
  separate XHTML/HTML document.
• You can then load and reload single panes
  without having to reload the entire contents
  of the browser window.
• A collection of frames in the browser window
  is known as a frameset.

                   www.eshikshak.co.in
Introduction
• The window is divided up into frames in a
  similar pattern to the way tables are
  organized: into rows and columns.
• The simplest of framesets might just divide
  the screen into two rows, while a complex
  frameset could use several rows and columns.



                   www.eshikshak.co.in
Frame Drawbacks
• Some browsers do not print well from framesets.
• Some smaller devices cannot cope with frames,
  often because their screen is not big enough to
  be divided up.
• Some time your page will be displayed differently
  on different computers due to different screen
  resolution.
• The browser's back button might not work as the
  user hopes.
• There are still few browsers who do not support
  farme technology.
                     www.eshikshak.co.in
• To create a frameset document, first you need
  the <frameset> element, which is used
  instead of the <body> element.
• The frameset defines the rows and columns
  your page is divided into, which in turn specify
  where each individual frame will go.
• Each frame is then represented by a <frame>
  element.

                    www.eshikshak.co.in
Creating Frames - <frameset>
                Element
• The <frameset> tag replaces the <body> element in
  frameset documents.
• The <frameset> tag defines how to divide the window
  into frames.
• Each frameset defines a set of rows or columns. If you
  define frames by using rows then horizontal frames are
  created. If you define frames by using columns then
  vertical frames are created.
• The values of the rows/columns indicate the amount of
  screen area each row/column will occupy.
• Each frame is indicated by <frame> tag and it defines
  what HTML document to put into the frame.

                       www.eshikshak.co.in
Example
<html>
<head>
<title>Frames example</title>
 </head>
<frameset rows="10%,80%,10%“>
    <frame src="/html/top_frame.htm" />
    <frame src="/html/main_frame.htm" />
    <frame src="/html/bottom_frame.htm" />
<noframes>
     <body> Your browser does not support
frames. </body> </noframes>
</frameset>
</html>
                www.eshikshak.co.in
The <frameset> Element Attributes
• cols: specifies how many columns are contained in the frameset
  and the size of each column. You can specify the width of each
  column in one of four ways:
   – Absolute values in pixels. For example to create three vertical frames,
     use cols="100, 500,100".
   – A percentage of the browser window. For example to create three
     vertical frames, use cols="10%, 80%,10%".
   – Using a wildcard symbol. For example to create three vertical frames,
     use cols="10%, *,10%". In this case wildcard takes remainder of the
     window.
   – As relative widths of the browser window. For example to create
     three vertical frames, use cols="3*,2*,1*". This is an alternative to
     percentages. You can use relative widths of the browser window. Here
     the window is divided into sixths: the first column takes up half of the
     window, the second takes one third, and the third takes one sixth.



                               www.eshikshak.co.in
The <frameset> Element Attributes
• rows: attribute works just like the cols attribute and can take the
  same values, but it is used to specify the rows in the frameset. For
  example to create two horizontal frames, use rows="10%, 90%".
  You can specify the height of each row in the same way as
  explained above for columns.
• border: attribute specifies the width of the border of each frame in
  pixels. For example border="5". A value of zero specifies that no
  border should be there.
• frameborder: specifies whether a three-dimensional border should
  be displayed between frames. This attrubute takes value either 1
  (yes) or 0 (no). For example frameborder="0" specifies no border.
• framespacing: specifies the amount of space between frames in a
  frameset. This can take any integer value. For example
  framespacing="10" means there should be 10 pixels spacing
  between each frames.

                             www.eshikshak.co.in
Loading Content - <frame> Element
• The <frame> element indicates what goes in
  each frame of the frameset.
• The <frame> element is always an empty
  element, and therefore should not have any
  content, although each <frame> element
  should always carry one attribute, src, to
  indicate the page that should represent that
  frame.

                   www.eshikshak.co.in
Loading Content - <frame> Element

<frame src="/html/top_frame.htm" />
<frame src="/html/main_frame.htm" />
<frame src="/html/bottom_frame.htm" />




                            www.eshikshak.co.in
The <frame> Element Attributes
•   src: indicates the file that should be used in the frame. Its value can be
    any URL. For example, src="/html/top_frame.htm" will load an HTML file
    avaible in html directory.
•   name: attribute allows you to give a name to a frame. It is used to indicate
    which frame a document should be loaded into. This is especially
    important when you want to create links in one frame that load pages into
    a second frame, in which case the second frame needs a name to identify
    itself as the target of the link.
•   frameborder: attribute specifies whether or not the borders of that frame
    are shown; it overrides the value given in the frameborder attribute on
    the <frameset> element if one is given, and the possible values are the
    same. This can take values either 1 (yes) or 0 (no).
•   marginwidth: allows you to specify the width of the space between the
    left and right of the frame's borders and the frame's content. The value is
    given in pixels. For example marginwidth="10".



                                 www.eshikshak.co.in
The <frame> Element Attributes
• marginheight: allows you to specify the height of the space
  between the top and bottom of the frame's borders and its
  contents. The value is given in pixels. For example marginheight="
  10".
• noresize: By default you can resize any frame by clicking and
  dragging on the borders of a frame. The noresize attribute prevents
  a user from being able to resize the frame. For example noresize="
  noresize".
• scrolling: controls the appearance of the scrollbars that appear on
  the frame. This takes values either "yes", "no" or "auto". For
  example scrolling="no" means it should not have scroll bars.
• longdesc: allows you to provide a link to another page containing a
  long description of the contents of the frame. For example
  longdesc="framedescription.htm"


                            www.eshikshak.co.in
Browser Support - <noframes> Element
• If a user is using any old browser or any browser which
  does not support frames then <noframes> element
  should be displayed to the user.
• In XHTML you must place a <body> element inside the
  <noframes> element because the <frameset> element
  is supposed to replace the <body> element, but if a
  browser does not understand the <frameset> element
  it should understand what is inside the <body>
  element contained in the <noframes> element.
• You can put some nice message for your user having
  old browsers. For example Sorry!! your browser does
  not support frames.

                       www.eshikshak.co.in

Contenu connexe

Tendances

Html table
Html tableHtml table
Html tableJayjZens
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Chris Poteet
 
HTML Text formatting tags
HTML Text formatting tagsHTML Text formatting tags
HTML Text formatting tagsHimanshu Pathak
 
Event In JavaScript
Event In JavaScriptEvent In JavaScript
Event In JavaScriptShahDhruv21
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object ModelWebStackAcademy
 
HTML frames and HTML forms
HTML frames and HTML formsHTML frames and HTML forms
HTML frames and HTML formsNadine Cruz
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptEdureka!
 
JavaScript - Chapter 5 - Operators
 JavaScript - Chapter 5 - Operators JavaScript - Chapter 5 - Operators
JavaScript - Chapter 5 - OperatorsWebStackAcademy
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmleShikshak
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet pptabhilashagupta
 
Images and Tables in HTML
Images and Tables in HTMLImages and Tables in HTML
Images and Tables in HTMLAarti P
 

Tendances (20)

Html forms
Html formsHtml forms
Html forms
 
Html table
Html tableHtml table
Html table
 
Javascript
JavascriptJavascript
Javascript
 
Id and class selector
Id and class selectorId and class selector
Id and class selector
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
CSS
CSSCSS
CSS
 
HTML Text formatting tags
HTML Text formatting tagsHTML Text formatting tags
HTML Text formatting tags
 
Css selectors
Css selectorsCss selectors
Css selectors
 
Html frames
Html framesHtml frames
Html frames
 
Html forms
Html formsHtml forms
Html forms
 
Event In JavaScript
Event In JavaScriptEvent In JavaScript
Event In JavaScript
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model
 
HTML frames and HTML forms
HTML frames and HTML formsHTML frames and HTML forms
HTML frames and HTML forms
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 
JavaScript - Chapter 5 - Operators
 JavaScript - Chapter 5 - Operators JavaScript - Chapter 5 - Operators
JavaScript - Chapter 5 - Operators
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
css.ppt
css.pptcss.ppt
css.ppt
 
Basic html structure
Basic html structureBasic html structure
Basic html structure
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
Images and Tables in HTML
Images and Tables in HTMLImages and Tables in HTML
Images and Tables in HTML
 

En vedette

HTML Frameset & Inline Frame
HTML Frameset & Inline FrameHTML Frameset & Inline Frame
HTML Frameset & Inline FrameNisa Soomro
 
DEFINE FRAME AND FRAME SET WITH A EXAMPLE
DEFINE FRAME AND FRAME SET WITH A EXAMPLEDEFINE FRAME AND FRAME SET WITH A EXAMPLE
DEFINE FRAME AND FRAME SET WITH A EXAMPLEVaibhav Sinha
 
Html - Tables, Forms and Frames by Telerik Academy
Html - Tables, Forms and Frames by Telerik AcademyHtml - Tables, Forms and Frames by Telerik Academy
Html - Tables, Forms and Frames by Telerik AcademyOgnyan Penkov
 

En vedette (6)

HTML Frameset & Inline Frame
HTML Frameset & Inline FrameHTML Frameset & Inline Frame
HTML Frameset & Inline Frame
 
DEFINE FRAME AND FRAME SET WITH A EXAMPLE
DEFINE FRAME AND FRAME SET WITH A EXAMPLEDEFINE FRAME AND FRAME SET WITH A EXAMPLE
DEFINE FRAME AND FRAME SET WITH A EXAMPLE
 
Html frames
Html framesHtml frames
Html frames
 
Html - Tables, Forms and Frames by Telerik Academy
Html - Tables, Forms and Frames by Telerik AcademyHtml - Tables, Forms and Frames by Telerik Academy
Html - Tables, Forms and Frames by Telerik Academy
 
Html 5 Forms
Html 5 FormsHtml 5 Forms
Html 5 Forms
 
HTML practicals
HTML practicals HTML practicals
HTML practicals
 

Similaire à Html frames (20)

Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
Html frames
Html framesHtml frames
Html frames
 
HTML-Part2
HTML-Part2HTML-Part2
HTML-Part2
 
Presentation1
Presentation1Presentation1
Presentation1
 
Frames and its components
Frames and its components Frames and its components
Frames and its components
 
Final_Frames.pptx
Final_Frames.pptxFinal_Frames.pptx
Final_Frames.pptx
 
Frames.ppt
Frames.pptFrames.ppt
Frames.ppt
 
2b. Web Technology HTML Basics-2
2b. Web Technology HTML Basics-22b. Web Technology HTML Basics-2
2b. Web Technology HTML Basics-2
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
Ashish
AshishAshish
Ashish
 
frames
framesframes
frames
 
computer language - Html frames
computer language - Html framescomputer language - Html frames
computer language - Html frames
 
Frames.ppt
Frames.pptFrames.ppt
Frames.ppt
 
Unit 3 (frames)
Unit 3 (frames)Unit 3 (frames)
Unit 3 (frames)
 
Handout6 html frames
Handout6 html framesHandout6 html frames
Handout6 html frames
 
5. Frames & Forms.pdf
5. Frames & Forms.pdf5. Frames & Forms.pdf
5. Frames & Forms.pdf
 
ADF - Layout Managers and Skinning
ADF - Layout Managers and SkinningADF - Layout Managers and Skinning
ADF - Layout Managers and Skinning
 
Html5
Html5Html5
Html5
 

Plus de eShikshak

Modelling and evaluation
Modelling and evaluationModelling and evaluation
Modelling and evaluationeShikshak
 
Operators in python
Operators in pythonOperators in python
Operators in pythoneShikshak
 
Datatypes in python
Datatypes in pythonDatatypes in python
Datatypes in pythoneShikshak
 
Introduction to python
Introduction to pythonIntroduction to python
Introduction to pythoneShikshak
 
Introduction to e commerce
Introduction to e commerceIntroduction to e commerce
Introduction to e commerceeShikshak
 
Chapeter 2 introduction to cloud computing
Chapeter 2   introduction to cloud computingChapeter 2   introduction to cloud computing
Chapeter 2 introduction to cloud computingeShikshak
 
Unit 1.4 working of cloud computing
Unit 1.4 working of cloud computingUnit 1.4 working of cloud computing
Unit 1.4 working of cloud computingeShikshak
 
Unit 1.3 types of cloud
Unit 1.3 types of cloudUnit 1.3 types of cloud
Unit 1.3 types of cloudeShikshak
 
Unit 1.2 move to cloud computing
Unit 1.2   move to cloud computingUnit 1.2   move to cloud computing
Unit 1.2 move to cloud computingeShikshak
 
Unit 1.1 introduction to cloud computing
Unit 1.1   introduction to cloud computingUnit 1.1   introduction to cloud computing
Unit 1.1 introduction to cloud computingeShikshak
 
Mesics lecture files in 'c'
Mesics lecture   files in 'c'Mesics lecture   files in 'c'
Mesics lecture files in 'c'eShikshak
 
Mesics lecture 8 arrays in 'c'
Mesics lecture 8   arrays in 'c'Mesics lecture 8   arrays in 'c'
Mesics lecture 8 arrays in 'c'eShikshak
 
Mesics lecture 7 iteration and repetitive executions
Mesics lecture 7   iteration and repetitive executionsMesics lecture 7   iteration and repetitive executions
Mesics lecture 7 iteration and repetitive executionseShikshak
 
Mesics lecture 5 input – output in ‘c’
Mesics lecture 5   input – output in ‘c’Mesics lecture 5   input – output in ‘c’
Mesics lecture 5 input – output in ‘c’eShikshak
 
Mesics lecture 6 control statement = if -else if__else
Mesics lecture 6   control statement = if -else if__elseMesics lecture 6   control statement = if -else if__else
Mesics lecture 6 control statement = if -else if__elseeShikshak
 
Mesics lecture 4 c operators and experssions
Mesics lecture  4   c operators and experssionsMesics lecture  4   c operators and experssions
Mesics lecture 4 c operators and experssionseShikshak
 
Mesics lecture 5 input – output in ‘c’
Mesics lecture 5   input – output in ‘c’Mesics lecture 5   input – output in ‘c’
Mesics lecture 5 input – output in ‘c’eShikshak
 
Mesics lecture 3 c – constants and variables
Mesics lecture 3   c – constants and variablesMesics lecture 3   c – constants and variables
Mesics lecture 3 c – constants and variableseShikshak
 
Lecture 7 relational_and_logical_operators
Lecture 7 relational_and_logical_operatorsLecture 7 relational_and_logical_operators
Lecture 7 relational_and_logical_operatorseShikshak
 
Lecture21 categoriesof userdefinedfunctions.ppt
Lecture21 categoriesof userdefinedfunctions.pptLecture21 categoriesof userdefinedfunctions.ppt
Lecture21 categoriesof userdefinedfunctions.ppteShikshak
 

Plus de eShikshak (20)

Modelling and evaluation
Modelling and evaluationModelling and evaluation
Modelling and evaluation
 
Operators in python
Operators in pythonOperators in python
Operators in python
 
Datatypes in python
Datatypes in pythonDatatypes in python
Datatypes in python
 
Introduction to python
Introduction to pythonIntroduction to python
Introduction to python
 
Introduction to e commerce
Introduction to e commerceIntroduction to e commerce
Introduction to e commerce
 
Chapeter 2 introduction to cloud computing
Chapeter 2   introduction to cloud computingChapeter 2   introduction to cloud computing
Chapeter 2 introduction to cloud computing
 
Unit 1.4 working of cloud computing
Unit 1.4 working of cloud computingUnit 1.4 working of cloud computing
Unit 1.4 working of cloud computing
 
Unit 1.3 types of cloud
Unit 1.3 types of cloudUnit 1.3 types of cloud
Unit 1.3 types of cloud
 
Unit 1.2 move to cloud computing
Unit 1.2   move to cloud computingUnit 1.2   move to cloud computing
Unit 1.2 move to cloud computing
 
Unit 1.1 introduction to cloud computing
Unit 1.1   introduction to cloud computingUnit 1.1   introduction to cloud computing
Unit 1.1 introduction to cloud computing
 
Mesics lecture files in 'c'
Mesics lecture   files in 'c'Mesics lecture   files in 'c'
Mesics lecture files in 'c'
 
Mesics lecture 8 arrays in 'c'
Mesics lecture 8   arrays in 'c'Mesics lecture 8   arrays in 'c'
Mesics lecture 8 arrays in 'c'
 
Mesics lecture 7 iteration and repetitive executions
Mesics lecture 7   iteration and repetitive executionsMesics lecture 7   iteration and repetitive executions
Mesics lecture 7 iteration and repetitive executions
 
Mesics lecture 5 input – output in ‘c’
Mesics lecture 5   input – output in ‘c’Mesics lecture 5   input – output in ‘c’
Mesics lecture 5 input – output in ‘c’
 
Mesics lecture 6 control statement = if -else if__else
Mesics lecture 6   control statement = if -else if__elseMesics lecture 6   control statement = if -else if__else
Mesics lecture 6 control statement = if -else if__else
 
Mesics lecture 4 c operators and experssions
Mesics lecture  4   c operators and experssionsMesics lecture  4   c operators and experssions
Mesics lecture 4 c operators and experssions
 
Mesics lecture 5 input – output in ‘c’
Mesics lecture 5   input – output in ‘c’Mesics lecture 5   input – output in ‘c’
Mesics lecture 5 input – output in ‘c’
 
Mesics lecture 3 c – constants and variables
Mesics lecture 3   c – constants and variablesMesics lecture 3   c – constants and variables
Mesics lecture 3 c – constants and variables
 
Lecture 7 relational_and_logical_operators
Lecture 7 relational_and_logical_operatorsLecture 7 relational_and_logical_operators
Lecture 7 relational_and_logical_operators
 
Lecture21 categoriesof userdefinedfunctions.ppt
Lecture21 categoriesof userdefinedfunctions.pptLecture21 categoriesof userdefinedfunctions.ppt
Lecture21 categoriesof userdefinedfunctions.ppt
 

Dernier

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...apidays
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsNanddeep Nachan
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...apidays
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Angeliki Cooney
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKJago de Vreede
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWERMadyBayot
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdfSandro Moreira
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024The Digital Insurer
 

Dernier (20)

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 

Html frames

  • 2. Introduction • Frames divide a browser window into several pieces or panes, each pane containing a separate XHTML/HTML document. • You can then load and reload single panes without having to reload the entire contents of the browser window. • A collection of frames in the browser window is known as a frameset. www.eshikshak.co.in
  • 3. Introduction • The window is divided up into frames in a similar pattern to the way tables are organized: into rows and columns. • The simplest of framesets might just divide the screen into two rows, while a complex frameset could use several rows and columns. www.eshikshak.co.in
  • 4. Frame Drawbacks • Some browsers do not print well from framesets. • Some smaller devices cannot cope with frames, often because their screen is not big enough to be divided up. • Some time your page will be displayed differently on different computers due to different screen resolution. • The browser's back button might not work as the user hopes. • There are still few browsers who do not support farme technology. www.eshikshak.co.in
  • 5. • To create a frameset document, first you need the <frameset> element, which is used instead of the <body> element. • The frameset defines the rows and columns your page is divided into, which in turn specify where each individual frame will go. • Each frame is then represented by a <frame> element. www.eshikshak.co.in
  • 6. Creating Frames - <frameset> Element • The <frameset> tag replaces the <body> element in frameset documents. • The <frameset> tag defines how to divide the window into frames. • Each frameset defines a set of rows or columns. If you define frames by using rows then horizontal frames are created. If you define frames by using columns then vertical frames are created. • The values of the rows/columns indicate the amount of screen area each row/column will occupy. • Each frame is indicated by <frame> tag and it defines what HTML document to put into the frame. www.eshikshak.co.in
  • 7. Example <html> <head> <title>Frames example</title> </head> <frameset rows="10%,80%,10%“> <frame src="/html/top_frame.htm" /> <frame src="/html/main_frame.htm" /> <frame src="/html/bottom_frame.htm" /> <noframes> <body> Your browser does not support frames. </body> </noframes> </frameset> </html> www.eshikshak.co.in
  • 8. The <frameset> Element Attributes • cols: specifies how many columns are contained in the frameset and the size of each column. You can specify the width of each column in one of four ways: – Absolute values in pixels. For example to create three vertical frames, use cols="100, 500,100". – A percentage of the browser window. For example to create three vertical frames, use cols="10%, 80%,10%". – Using a wildcard symbol. For example to create three vertical frames, use cols="10%, *,10%". In this case wildcard takes remainder of the window. – As relative widths of the browser window. For example to create three vertical frames, use cols="3*,2*,1*". This is an alternative to percentages. You can use relative widths of the browser window. Here the window is divided into sixths: the first column takes up half of the window, the second takes one third, and the third takes one sixth. www.eshikshak.co.in
  • 9. The <frameset> Element Attributes • rows: attribute works just like the cols attribute and can take the same values, but it is used to specify the rows in the frameset. For example to create two horizontal frames, use rows="10%, 90%". You can specify the height of each row in the same way as explained above for columns. • border: attribute specifies the width of the border of each frame in pixels. For example border="5". A value of zero specifies that no border should be there. • frameborder: specifies whether a three-dimensional border should be displayed between frames. This attrubute takes value either 1 (yes) or 0 (no). For example frameborder="0" specifies no border. • framespacing: specifies the amount of space between frames in a frameset. This can take any integer value. For example framespacing="10" means there should be 10 pixels spacing between each frames. www.eshikshak.co.in
  • 10. Loading Content - <frame> Element • The <frame> element indicates what goes in each frame of the frameset. • The <frame> element is always an empty element, and therefore should not have any content, although each <frame> element should always carry one attribute, src, to indicate the page that should represent that frame. www.eshikshak.co.in
  • 11. Loading Content - <frame> Element <frame src="/html/top_frame.htm" /> <frame src="/html/main_frame.htm" /> <frame src="/html/bottom_frame.htm" /> www.eshikshak.co.in
  • 12. The <frame> Element Attributes • src: indicates the file that should be used in the frame. Its value can be any URL. For example, src="/html/top_frame.htm" will load an HTML file avaible in html directory. • name: attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. This is especially important when you want to create links in one frame that load pages into a second frame, in which case the second frame needs a name to identify itself as the target of the link. • frameborder: attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the frameborder attribute on the <frameset> element if one is given, and the possible values are the same. This can take values either 1 (yes) or 0 (no). • marginwidth: allows you to specify the width of the space between the left and right of the frame's borders and the frame's content. The value is given in pixels. For example marginwidth="10". www.eshikshak.co.in
  • 13. The <frame> Element Attributes • marginheight: allows you to specify the height of the space between the top and bottom of the frame's borders and its contents. The value is given in pixels. For example marginheight=" 10". • noresize: By default you can resize any frame by clicking and dragging on the borders of a frame. The noresize attribute prevents a user from being able to resize the frame. For example noresize=" noresize". • scrolling: controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no" or "auto". For example scrolling="no" means it should not have scroll bars. • longdesc: allows you to provide a link to another page containing a long description of the contents of the frame. For example longdesc="framedescription.htm" www.eshikshak.co.in
  • 14. Browser Support - <noframes> Element • If a user is using any old browser or any browser which does not support frames then <noframes> element should be displayed to the user. • In XHTML you must place a <body> element inside the <noframes> element because the <frameset> element is supposed to replace the <body> element, but if a browser does not understand the <frameset> element it should understand what is inside the <body> element contained in the <noframes> element. • You can put some nice message for your user having old browsers. For example Sorry!! your browser does not support frames. www.eshikshak.co.in