SlideShare uma empresa Scribd logo
1 de 19
Baixar para ler offline
Using Frames in
a Web Page
Tutorial V
FRAMES
are windows appearing within the
browser’s display area, each capable
of displaying the contents of a
different HTML file.
Things to consider before
creating your frames:
– What information will be displayed in
each of the frames?
– How do you want the frames placed on
the Web Page? What is the size of each
frame?
– Which frames will be static—that is,
always showing the same content?
Things to consider before
creating your frames:
– Which frames will change in response to
hyperlinks being clicked?
– What Web pages will users see first
when they access the site?
– Do you want to allow users to resize the
frames and change the layout of the
page?
Creating Frame Layout
<HTML>
<HEAD>
<TITLE> Page Title </TITLE>
</HEAD>
<FRAMESET>
Frame definitions
</FRAMESET>
</HTML>
Syntax:
• <FRAMESET ROWS=”row height,
row height, row height,…..”>
• <FRAMESET COLS=”column width,
column width, column width, …”>
Specifying a Frame Source
To specify the source for the frame’s
content, enter following HTML tag:
<FRAME SRC = document>
where document is the filename or
URL of the page that you want to
display in the frame.
Nesting <FRAMESET> Tags
EXAMPLE:
<HTML>
<HEAD>
<TITLE> The Colorado Experience </TITLE>
</HEAD>
<FRAMESET ROWS=”60, *”>
<!--- Company Logo --->
<FRAME SRC = “Head.htm”>
<!!--- Nested frames ---->
<FRAMESET COLS=”140,*”>
</FRAMESET>
</FRAMESET>
</HTML>
Controlling the Appearance of
Scroll Bars
Syntax:
<FRAME SRC=document
SCROLLING = value>
Where value can be either YES (to
display scroll bars) or NO (to
remove scroll bars)
Frame’s margin
MARGINWIDTH – is the amount of
space that appears to the page’s left
and right.
MARGINHEIGHT – is the amount of
space (in pixels) that appears above
and below the content of the page
margin.
Syntax:
<FRAME SRC=document
MARGINHEIGHT=value
MARGINWIDTH=value>
To keep users from resizing
frames, enter the tag:
<FRAME SRC=document
NORESIZE>
<BASE> tag
it appears within the <HEAD> tags of
your HTML file and used to specify
global options for the page. One
property of the <BASE> tag is the
TARGET property, which identifies
a default target for all of the page’s
hyperlinks.
Magic target names
are special names reserved by HTML
that can be used in place of a frame
name as a target for a hypertext link.
Magic Target
Magic target name Description
_blank Loads the document into a new
window
_self Loads the document into the
same frame or window that
contains the hyperlink tag.
_parent In a layout of nested frames,
loads the document into the
frame that contains the frame
with the hyperlink tag.
_top Loads the document into the full
display area, replacing the
current frame layout.
<NOFRAMES> tag
identifies a section of your HTML file
that contains code to be read by
frame-blind browsers.
Using Frames Extensions
To define a color for your frame borders,
use the following tags:
<FRAMESET BORDERCOLOR=color>
Or
<FRAME BORDERCOLOR=color>
where color is either the color name or
color value.
Using Frames Extensions
To change the width of your frame
borders, use the tag:
<FRAMESET BORDER=value>
where value is the width of the border
in pixels.
Fin

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Html n CSS
Html n CSSHtml n CSS
Html n CSS
 
Web Design Basics and HTML
Web Design Basics and HTMLWeb Design Basics and HTML
Web Design Basics and HTML
 
Dhtml
DhtmlDhtml
Dhtml
 
Html and css presentation
Html and css presentationHtml and css presentation
Html and css presentation
 
Dream weaver
Dream weaverDream weaver
Dream weaver
 
Dream weaver
Dream weaverDream weaver
Dream weaver
 
html & css
html & css html & css
html & css
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSS
 
Web technology
Web technologyWeb technology
Web technology
 
Presentation1
Presentation1Presentation1
Presentation1
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
XHTML
XHTMLXHTML
XHTML
 
3 dot technologies by deepak modi
3 dot technologies by deepak modi3 dot technologies by deepak modi
3 dot technologies by deepak modi
 
3 dot technologies by deepak modi
3 dot technologies by deepak modi3 dot technologies by deepak modi
3 dot technologies by deepak modi
 
DHTML - Dynamic HTML
DHTML - Dynamic HTMLDHTML - Dynamic HTML
DHTML - Dynamic HTML
 
Framework
FrameworkFramework
Framework
 
Boostrap basics
Boostrap basicsBoostrap basics
Boostrap basics
 
Web programming technologies
Web programming technologiesWeb programming technologies
Web programming technologies
 
Introduction to Basic Concepts in Web
Introduction to Basic Concepts in WebIntroduction to Basic Concepts in Web
Introduction to Basic Concepts in Web
 
Web Pages
Web PagesWeb Pages
Web Pages
 

Semelhante a Html tutorial 5

Final_Frames.pptx
Final_Frames.pptxFinal_Frames.pptx
Final_Frames.pptxSajalZawar
 
HTML Foundations, part 1
HTML Foundations, part 1HTML Foundations, part 1
HTML Foundations, part 1Shawn Calvert
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
html for beginners
html for beginnershtml for beginners
html for beginnersKIIZAPHILIP
 
Web Publishing terminology 1
Web Publishing terminology 1Web Publishing terminology 1
Web Publishing terminology 1Beth Lovell
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1Heather Rock
 
Styling text using css
Styling text using cssStyling text using css
Styling text using cssDaniel Francis
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.pptssuser568d77
 
The complete-html-cheat-sheet
The complete-html-cheat-sheetThe complete-html-cheat-sheet
The complete-html-cheat-sheetHARUN PEHLIVAN
 
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
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksAndolasoft Inc
 

Semelhante a Html tutorial 5 (20)

Final_Frames.pptx
Final_Frames.pptxFinal_Frames.pptx
Final_Frames.pptx
 
Html Frames
Html FramesHtml Frames
Html Frames
 
HTML Foundations, part 1
HTML Foundations, part 1HTML Foundations, part 1
HTML Foundations, part 1
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Frames.ppt
Frames.pptFrames.ppt
Frames.ppt
 
Web technologies part-2
Web technologies part-2Web technologies part-2
Web technologies part-2
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
html for beginners
html for beginnershtml for beginners
html for beginners
 
Web Publishing terminology 1
Web Publishing terminology 1Web Publishing terminology 1
Web Publishing terminology 1
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
 
Styling text using css
Styling text using cssStyling text using css
Styling text using css
 
Html frames
Html framesHtml frames
Html frames
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.ppt
 
The complete-html-cheat-sheet
The complete-html-cheat-sheetThe complete-html-cheat-sheet
The complete-html-cheat-sheet
 
The complete-html-cheat-sheet
The complete-html-cheat-sheetThe complete-html-cheat-sheet
The complete-html-cheat-sheet
 
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 and html5 cheat sheets
Html and html5 cheat sheetsHtml and html5 cheat sheets
Html and html5 cheat sheets
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS Tricks
 
Css
CssCss
Css
 

Mais de Maxie Santos

Conditional statement
Conditional statementConditional statement
Conditional statementMaxie Santos
 
Tutorial 9 multimedia web page
Tutorial 9 multimedia web pageTutorial 9 multimedia web page
Tutorial 9 multimedia web pageMaxie Santos
 
Basic internet pnhs inset
Basic internet   pnhs insetBasic internet   pnhs inset
Basic internet pnhs insetMaxie Santos
 

Mais de Maxie Santos (7)

Conditional statement
Conditional statementConditional statement
Conditional statement
 
Computer virus
Computer virusComputer virus
Computer virus
 
Html tutorial 5
Html tutorial 5Html tutorial 5
Html tutorial 5
 
Tut 06 (forms)
Tut 06 (forms)Tut 06 (forms)
Tut 06 (forms)
 
Html tut 04
Html tut 04Html tut 04
Html tut 04
 
Tutorial 9 multimedia web page
Tutorial 9 multimedia web pageTutorial 9 multimedia web page
Tutorial 9 multimedia web page
 
Basic internet pnhs inset
Basic internet   pnhs insetBasic internet   pnhs inset
Basic internet pnhs inset
 

Html tutorial 5

  • 1. Using Frames in a Web Page Tutorial V
  • 2. FRAMES are windows appearing within the browser’s display area, each capable of displaying the contents of a different HTML file.
  • 3. Things to consider before creating your frames: – What information will be displayed in each of the frames? – How do you want the frames placed on the Web Page? What is the size of each frame? – Which frames will be static—that is, always showing the same content?
  • 4. Things to consider before creating your frames: – Which frames will change in response to hyperlinks being clicked? – What Web pages will users see first when they access the site? – Do you want to allow users to resize the frames and change the layout of the page?
  • 5. Creating Frame Layout <HTML> <HEAD> <TITLE> Page Title </TITLE> </HEAD> <FRAMESET> Frame definitions </FRAMESET> </HTML>
  • 6. Syntax: • <FRAMESET ROWS=”row height, row height, row height,…..”> • <FRAMESET COLS=”column width, column width, column width, …”>
  • 7. Specifying a Frame Source To specify the source for the frame’s content, enter following HTML tag: <FRAME SRC = document> where document is the filename or URL of the page that you want to display in the frame.
  • 8. Nesting <FRAMESET> Tags EXAMPLE: <HTML> <HEAD> <TITLE> The Colorado Experience </TITLE> </HEAD> <FRAMESET ROWS=”60, *”> <!--- Company Logo ---> <FRAME SRC = “Head.htm”> <!!--- Nested frames ----> <FRAMESET COLS=”140,*”> </FRAMESET> </FRAMESET> </HTML>
  • 9. Controlling the Appearance of Scroll Bars Syntax: <FRAME SRC=document SCROLLING = value> Where value can be either YES (to display scroll bars) or NO (to remove scroll bars)
  • 10. Frame’s margin MARGINWIDTH – is the amount of space that appears to the page’s left and right. MARGINHEIGHT – is the amount of space (in pixels) that appears above and below the content of the page margin.
  • 12. To keep users from resizing frames, enter the tag: <FRAME SRC=document NORESIZE>
  • 13. <BASE> tag it appears within the <HEAD> tags of your HTML file and used to specify global options for the page. One property of the <BASE> tag is the TARGET property, which identifies a default target for all of the page’s hyperlinks.
  • 14. Magic target names are special names reserved by HTML that can be used in place of a frame name as a target for a hypertext link.
  • 15. Magic Target Magic target name Description _blank Loads the document into a new window _self Loads the document into the same frame or window that contains the hyperlink tag. _parent In a layout of nested frames, loads the document into the frame that contains the frame with the hyperlink tag. _top Loads the document into the full display area, replacing the current frame layout.
  • 16. <NOFRAMES> tag identifies a section of your HTML file that contains code to be read by frame-blind browsers.
  • 17. Using Frames Extensions To define a color for your frame borders, use the following tags: <FRAMESET BORDERCOLOR=color> Or <FRAME BORDERCOLOR=color> where color is either the color name or color value.
  • 18. Using Frames Extensions To change the width of your frame borders, use the tag: <FRAMESET BORDER=value> where value is the width of the border in pixels.
  • 19. Fin