HTML Structure II (Frame) WEEK 3 HTML Structure II (Frame)

Contents Frame The use of frame How to use frame

Introduction Display more than one web pages at the same time. Must have at least 2 web pages One for the frame At least one page for the contents Advantage Fixed navigation bar can be provided Disadvantage Surfer cannot bookmark individual page Web site of other people or organization is nested inside the current webpage Not all web browser support frame

Web page with 2 Frame 2 3 1 Menu Content (menu.html) (intro.html or other web pages) 2 3 1 index.html

Codes for index.html <frameset rows="*" cols="15%,*" framespacing="0" frameborder="no" border="0"> <frame src=“menu.htm" name=“leftFrame" title="menu" /> <frame src="intro.htm" name=“mainFrame" scrolling="No" noresize="noresize" /> </frameset>

Codes for index.html Menu Content <frameset rows=“*” cols=“15%,*” framespacing=“0” frameborder=“no” border=“0”> Menu Content <frame src= “menu.htm” name= “leftFrame” title=“menu” /> <frame src=“intro.htm” name= “mainFrame" scrolling=“No” noresize=“noresize” /> </frameset>

Attributes of <frameset> BORDER: Sets the border between frames. The value determines the thickness in pixels. BORDERCOLOR: Sets the color of the border. Takes color names or hexadecimal color codes as value. Applicable only if FRAMEBORDER is set. FRAMEBORDER: A '1' or 'yes' value displays a border while '0' or 'no' removes the border. The BORDERCOLOR attribute work only if this attribute is set to display a border.

Attributes of <frameset> FRAMESPACING: Places some space between the edges of the frame and its contents. Value has to be specified in pixels COLS and ROWS: We've met COLS before. ROWS is similar and puts frames in horizontals rows instead of vertical columns. The values taken by these attributes can be a number (which determines the size in pixels) or percentages or wildcard

Attribute of <frame> SRC: required attribute URL of a document to load in the frame. BORDERCOLOR: Defines color for the border. FRAMEBORDER: Places a border. values can be '1' or 'YES' that display a border or '0' or NO' which prevent border display. MARGINWIDTH: Defines the amount of space in pixels between the left and right hand sides of the frame and its contents. MARGINHEIGHT: Defines the amount of space in pixels between the top and bottom edges of the frame and its contents.

Attribute of <frame> NAME: Specifies a name for the frame that can be used for easy reference. This is especially helpful when using scripting languages such as JavaScript or VBScipt. NORESIZE: Frames can be sized by the user if a border is present. By placing this attribute, you can prevent your visitors from resizing frames. This attribute takes no values. SCROLLING: 'YES' will display a scroll bar even though one is not required. ‘NO' will prevent any scroll bars and 'AUTO' lets the browser to decide if the frame needs a scroll bar.

Example of Nested Frame <FRAMESET ROWS="20%, *"> <FRAME SRC="topframe.html“ NAME="top"> <FRAMESET COLS="50%, *"> <FRAME SRC="leftbot.html“ NAME="left_bot"> <FRAME SRC="rightbot.html“ NAME="right_bot"> </FRAMESET>

Target Attribute of <a> _blank: Indicates a new window. _parent: Specifies the parent frame which contains the source link. _self: The new document is loaded in the same frame. _top: This indicates a new document window. It is a good way to break out of frames and load the document in the same window. frame-name: You can use this to specify in which frame the document should be loaded. RESOURCE WINDOW: This loads the document in a new browser window. This is same as _blank.

Example <A HREF="test.html" TARGET="_blank"> Loads test.html in a new browser window</A> <A HREF="test2.html" TARGET="_self"> Loads test2.html in this window</A> <A HREF="test2.html" TARGET=“mainFrame"> Loads test2.html in frame named mainFrame</A>

Lab Exercise Create your class time table as example below Merge and combine cells Used different color for different course