Linked Windows and Frames and Linked Windows Linked

  • Slides: 19
Download presentation
Linked Windows and Frames and Linked Windows

Linked Windows and Frames and Linked Windows

Linked Windows Information pointed to by hyperlink displayed in another window n Target attribute

Linked Windows Information pointed to by hyperlink displayed in another window n Target attribute of anchor-tag n target=window_name – If a window with name window_name exists, the document pointed to replaces the current contents of window_name – If window with name window_name doesn't exist, a new window is opened with that name and filled with new document Frames and Linked Windows 2

Linked Windows n Target attribute of anchor-tag base target=window_name – Each anchor-tag without a

Linked Windows n Target attribute of anchor-tag base target=window_name – Each anchor-tag without a target attribute will display the document it points to in window specified by window_name Frames and Linked Windows 3

Examples of Linked Windows target 1. html <html><head><title>Target Parent Window </title> </head> <body> <h

Examples of Linked Windows target 1. html <html><head><title>Target Parent Window </title> </head> <body> <h 1>Target Parent Window</h 1> <p><a href="target 2. html" target="first_window">Open</a> a new window called first_window. <a href="target 3. html" target="second_window">Open</a> a new window called second_window. </p> <p><a href="target 4. html" target="first_window">Load</a> some new text into first_window. </p></body></html> Frames and Linked Windows 4

Examples of Linked Windows target 2. html <html><head><title>Target First Window </title> </head> <body> <h

Examples of Linked Windows target 2. html <html><head><title>Target First Window </title> </head> <body> <h 1>Target First Window</h 1></body></html> target 3. html <html><head><title>Target Second Window </title> </head> <body> <h 1>Target Second Window</h 1></body></html> target 4. html <html><head><title>Target First Window </title> </head> <body> <h 1>Target First Window</h 1> <p>But this time with new text. </body></html> Frames and Linked Windows 5

Examples of Linked Windows target 5. html <html><head><title>Target Parent Window</title> <base target="first_window"></head><body> <h 1>Target

Examples of Linked Windows target 5. html <html><head><title>Target Parent Window</title> <base target="first_window"></head><body> <h 1>Target Parent Window</h 1> <p><a href="target 2. html" >Open</a> a new window called first_window. <a href="target 3. html" target="second_window">Open</a> a new window called second_window. </p> <p><a href="target 4. html" >Load</a> some new text into first_window. </p></body> </html> Frames and Linked Windows 6

Frames n Frame definition document – Contains layout of each frame and names of

Frames n Frame definition document – Contains layout of each frame and names of HTML documents that will fill that frame Frames and Linked Windows 7

Frame Notation n <frameset>…</frameset> – Replace <body> tag – A frameset is the set

Frame Notation n <frameset>…</frameset> – Replace <body> tag – A frameset is the set of frames defined by the <frameset> tags in the frame definition document Frames and Linked Windows 8

Frame Notation <html> <head> <title>Page Title</title> </head> <frameset> Frame definition goes here </frameset> </html>

Frame Notation <html> <head> <title>Page Title</title> </head> <frameset> Frame definition goes here </frameset> </html> Frames and Linked Windows 9

Frame Notation n <frameset cols="width, …"> – Width in pixels – Width in percent

Frame Notation n <frameset cols="width, …"> – Width in pixels – Width in percent of total width – Width of as much space as possible <frameset cols="100, 50%, *"> <frameset cols="*, *, *"> Frames and Linked Windows 10

Frame Notation <frameset rows="width, …"> n <frame src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=”<document url>"> n – Associates html document

Frame Notation <frameset rows="width, …"> n <frame src=”<document url>"> n – Associates html document with each frame <frameset rows="*, *"> <frame src="doc 1. html"> <frame src="doc 2. html"> </frameset> Frames and Linked Windows 11

Frame Notation n Attributes of <frame>-tag – scrolling="auto" Default in Netscape n If frame

Frame Notation n Attributes of <frame>-tag – scrolling="auto" Default in Netscape n If frame contents take up more space than is available on frame, scrollbars are added n – scrolling="yes" – scrolling="no" Frames and Linked Windows 12

Frame Notation n Attributes of <frame>-tag – noresize n By default, users can move

Frame Notation n Attributes of <frame>-tag – noresize n By default, users can move borders of frames. This locks the frame borders. – marginheight=50 n Margin size in pixels which appears above and below document within a frame – marginwidth=60 n Margin size in pixels which appears on right and left of document within a frame Frames and Linked Windows 13

Frame Notation n <noframe>…</noframe> – In browser which doesn't support frames, you get only

Frame Notation n <noframe>…</noframe> – In browser which doesn't support frames, you get only a blank page – This tag gives you content in this case Frames and Linked Windows 14

Frame Notation n <noframe>…</noframe> <html> <head> <title>Page Title</title> </head> <frameset> Frame definition goes here

Frame Notation n <noframe>…</noframe> <html> <head> <title>Page Title</title> </head> <frameset> Frame definition goes here <noframe> Include any text, hyperlinks, and tags you want here </noframe> </frameset> </html> Frames and Linked Windows 15

Frame Notation <frameset rows="*, 80"> <frameset cols="30%, *"> <frame src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="file 1. html"> <frame src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="file

Frame Notation <frameset rows="*, 80"> <frameset cols="30%, *"> <frame src="file 1. html"> <frame src="file 2. html"> </frameset> <frame src="file 3. html"> </frameset> Frames and Linked Windows 16

Frame Notation n Naming frames n Destination pages to be stored in named frames

Frame Notation n Naming frames n Destination pages to be stored in named frames – <frame src="file. html" name = "frame_name"> – <a href="file. html" target="frame_name"> n Magic target names – target="_blank" n Document referenced by <a>-tag is loaded into a new unnamed window Frames and Linked Windows 17

Frame Notation n Magic target names – target="_self" n Document referenced by <a>-tag is

Frame Notation n Magic target names – target="_self" n Document referenced by <a>-tag is loaded into window or frame in which <a>-tag resides – target="_parent" n Document referenced by <a>-tag is loaded into parent of current document – If it has no parent, target="_self" is used – target="_top" n Document referenced by <a>-tag is loaded into full browser window Frames and Linked Windows 18

Inline Frames n Microsoft Internet Explorer <iframe src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="file. htm" width=75 height=200 align=right> Your browser

Inline Frames n Microsoft Internet Explorer <iframe src="file. htm" width=75 height=200 align=right> Your browser doesn’t support inline frames. To view this <a href="file. htm"> document </a> correctly, you’ll need a copy of Internet Explorer. </iframe> Frames and Linked Windows 19