INFS 2150 / 7150 Introduction to Web Development & HTML Programming

Size: px

Start display at page:

Download "INFS 2150 / 7150 Introduction to Web Development & HTML Programming"

Evangeline Gibson
6 years ago
Views:

1 Objectives INFS 2150 / 7150 Introduction to Web Development & HTML Programming Using Frames in a Web Site Create s for a Web site Control the appearance and placement of s Control the behavior of hyperlinks on a Web page with s Use reserved target names to specify a target for a hypertext link Modify the appearance of your borders Create and implement floating s 1 2 Considerations for a Web Site Advantages to Using Frames A Web site grows in size and complexity, each page is dedicated to a particular topic or group of topics. one page might contain a list of hypertext links one page might display contact information for the company or organization one page might describe the business philosophy As more pages are added to a Web site, a designer may what to display information from several pages at the same time. Such considerations contributed to the creation of 3 s. Frames can give more flexibility in designing your Web presentation. You can place information in different Web pages, removing redundancy. Frames can make your site easier to manage. Frames allows you to update only a few files rather than the whole. Web designers advocate creating both d and nond versions for a Web site and giving users the option of which one to use. 4 Disadvantages to Using Frames Introducing Frames <set> and <> are deprecated in HTML5. The browser has to load multiple HTML files before a user can view the contents of the site increasing the waiting time for potential customers. Some older browsers cannot display s. Some users simply do not like using s. Some web authors feel that s are too constricting, limiting flexibility in designing the layout of a Web page. There is concern that s can use up valuable screen space. The source code is removed from the user. A is a section of the browser window capable of displaying the contents of an entire Web page. For example: the on the left may display the contents of a Web page containing a list of hyperlinks the on the right may display a Web page with product information 5 6 1

An Example of Frames Activating a Hyperlink within Frames This figure shows a common use of s: displaying a table of contents in one, while showing individual pages from the site on the another.

7 8 Planning Your Frames Planning Your Frames Continued Before you start creating your s, it is a good idea to plan their appearance and how they are to be used.

Which s will be static, that is, always showing the same content? 9 Which s will change in response to hyperlinks being clicked? What Web pages will users first see when they access the site?

2 An Example of Frames Activating a Hyperlink within Frames This figure shows a common use of s: displaying a table of contents in one, while showing individual pages from the site on the another. This figure shows a list of hyperlinks that remain on the screen while the user navigates through the contents of the site. 7 8 Planning Your Frames Planning Your Frames Continued Before you start creating your s, it is a good idea to plan their appearance and how they are to be used. There are several issues to consider: What information will be displayed in each of the s? How do you want the s placed on the Web page? What is the size of each? Which s will be static, that is, always showing the same content? 9 Which s will change in response to hyperlinks being clicked? What Web pages will users first see when they access the site? Should users be permitted to resize the s to suit the needs? 10 An Example of a Frame Layout Creating a Frame Layout This figure shows an example of a layout. It is recommended to draw an example of what you would like your Web page to look like before you get started. The <set> tag is used to store the definitions of the various s in the file. These definitions will typically: include the size and location of the include the Web pages the s display The <set> code does not include an opening and closing <body> tag. the reason for this is that this HTML file displays the contents of other Web pages; technically, it is not a Web page

3 Specifying Frame Size and Orientation To create a layout, you will use the rows and cols attributes of the <set> tag. the rows attribute creates a row of s the cols attribute creates a column of s A set is defined by rows or columns. You can layout your s in rows or columns, or both. Each is a rectangular portion of the browser window, to render a web page (which may then set up another set). 13 Frames in Rows or Columns This figure shows layouts in either rows or columns, but s may also be defined in both rows and columns. 14 The Frame Syntax Row Height and Column Width The syntax for <set> tag is: <set rows= row 1 height, row 2 height, row 3 height,... > row height is the height of each row or <set cols= column 1 width, column 2 width, column 3 width,... > column width is the width of each column or <set cols=... rows=... > column widths and row heights specified in the same way 15 Row heights and column widths can be specified in three ways: in pixels as a percentage of the total size of the set by an asterisk (*) 16 Defining Rows and Columns Using an Asterisk (*) Frames of Different Sizes The asterisk instructs the browser to allocate any unclaimed space in the set to the particular row or column. for example, the tag <set rows= 160,* > creates two rows of s. Specify at least one of the rows or columns of your <set> tag with an asterisk to ensure that the s fill up the screen. You can use multiple asterisks. The browser divides the remaining display space equally among the s with the asterisks. for example, the tag <set rows= *,*,* > creates three rows of s with equal heights. This figure shows s of different sizes. 160 pixels wide 25% of the width of the display area whatever space is left

4 Creating Two Rows of Frames Specifying a Frame Source In this code, the top row is used for the company logo, and the second row is used for the remaining content of the Web page. A that is 85 pixels high should provide enough space to display the logo. The rest of the display area is occupied by the second row. tag creates two rows of s: the first 85 pixels high and the second occupying the remaining display area To specify a source for a, use the <> tag with the syntax: < src= URL > The URL is the filename and location of the page that you want to load. You must insert the <> tag between the opening and closing <set> tags Logo and Placement Inserting a Frame for the Head.htm File This figure shows a preview of the YCS logo and its placement. Because this is the first <> tag, the browser displays head.htm in the first row. logo rest of the s Note that using the comment tag and indenting the <> tag a few spaces helps make your HTML code easier to follow and interpret. source for the first Nesting <set> Tag Remember that a set is defined by rows or columns, but not both. To create s using both rows and columns, one set must be nested inside another. The interpretation of the rows and cols attributes changes slightly. for example, a row height of 25% does not mean 25% of the display area, but rather 25% of the height of the into which that row has been inserted (or nested) 23 Creating a Nested Set of Frames in the Second Frame Row This specifies a width of 140 pixels for the first column, and whatever remains in the display area will be allotted to the second column. two columns of s nested in the second row 24 4

5 Nested Frames Sources for the Two Frames in the Second Row links.htm home.htm This figure shows the code for two new s. It is not necessary to indent the code, however, it can make the code easier to read and interpret. This figure shows the content of two pages and their placement on the Web page. table of content s pages 25 the YCS home page will appear in the fourth the table of contents will appear in the third 26 Result of Web Site with Nested Frames Web Site with Frames The design of the layout could use some refinement. heading extends beyond the border, causing a vertical scroll bar to be displayed The appearance of scroll bars may or may not be appropriate for the web pages. table of contents home page Controlling the Appearance of Your Frames Controlling the Appearance of Scroll Bars You can control three attributes of a : scroll bars the size of the margin between the source document and the border whether or not the user is allowed to change the size of the By default, scroll bars are displayed when the content of the source page cannot fit within the. You can override the default setting using the scrolling attribute. The scrolling syntax is: < src= URL scrolling= scrolling > scrolling can either be yes (to always display scroll bars) or no (to never display scroll bars) If you don t specify a setting for the scrolling attribute, the browser displays scroll bars when necessary

6 Removing the Scroll Bars from the Logo Frame Controlling Frame Margins If the complete text cannot be displayed after removing the scroll bars from a, you will need to modify the margin. set the scrolling attribute to no to remove the scroll bars The following should be consider for margins: the browser determines the amount of space between the content of the page and the border occasionally, the browser sets the margin between the border and the content too large the margin should be big enough to keep the source s text or images from running into the s borders the margin should not take up too much space, because you typically want to display as much of the source as possible Specifying Margins Syntax Specifying the Margin Sizes for the Frames The syntax for specifying margins for a is: < src= URL marginheight= value marginwidth= value > marginheight is the amount of space, in pixels, above and below the content of the page in the marginwidth is the amount of space to the left and right of the page If you specify only one, the browser assumes that you want to use the same value for both. Setting margin values is a process of trial and error as you determine what combination of margin sizes looks best. The margin height is set to 0 pixels. The margin width is set to 10 pixels, to keep the page from running into the borders of its. height of the margin text for the logo will be 0 pixels height of the margin for the home page will be 0 pixels and the width of the margin will be 10 pixels Result of Web Site with Resized Frame Margins Controlling Frame Resizing By default, users can resize borders in the browser by simply dragging a border. Some Web designers prefer to freeze, or lock, s, so that users cannot resize them. this ensures that the Web site displays as the designer intended The syntax for controlling resizing is: < src= URL noresize> The noresize attribute is included within the <> tag to prevent users from modifying the size of the

7 Working with Frames and Hypertext Links Files and Hyperlinks in a Web Site By default, clicking a hyperlink within a opens the linked file inside the same. You can display hyperlinks in many ways: in a different in a new window in the entire window When you want to control the behavior of hyperlinks in a d page, there are two required steps: give each on the page a name point each hyperlink to one of the named s home.htm philosph.htm lessons.htm tours.htm staff.htm Assigning a Name to a Frame Assigning a Name to Each Frame To assign a name to a, add the name attribute to the tag. The syntax for this attribute is: < src= URL name= _name > _name is any single word you assign to the case is important in assigning names: information is considered a different name than INFORMATION Once the s are named, the next task is to specify the target for each hyperlink. the name Specifying a Link Target Assigning a Target to a Hyperlink You can use the target attribute to open a page in a specific. The syntax for this is: <a href= URL target= _name > _name is the name you ve assigned to a on your Web page When a page contains dozens of hyperlinks that should all open in the same, HTML provides a way to specify a target for all the hyperlinks within a single page. Make sure to test your hyperlinks. the Web page will appear in the pages

8 Using the <base> Tag Use the <base> tag to specify the default target for hyperlinks in a layout. Appears in the HEAD section of the HTML file. Used to specify global options for the page. One of the attributes of the <base> tag is the target attribute, which identifies a default target for all of the hyperlinks in a page. The syntax for this attribute is: <base target= _name > _name is the name of the target 43 Using the <base> Tag Continued The <base> tag is useful when your page contains a lot of hypertext links that all point to the same target. Rather than adding the target attribute to each <a> tag, you can enter the information once with the <base> tag. You can still use the <base> tag even if your file contains links that point to a different target than the one specified in the <base> tag. The target in the <a> tag overrides any target specified in the <base> tag. 44 Specifying a Default Target for all Hyperlinks the target of all links will be the pages 45 Using Reserved Target Names Reserved target names are special names that can be used in place of a name as the target. They are useful in situations: where the name of the is unavailable when you want the page to appear in a new window when you want the page to replace the current browser window All reserved target names begin with the underscore character ( _ ) to distinguish them from other target names. Reserved target names are case-sensitive, they must be entered in lowercase. 46 Reserved Target Names Using the _self Target Name This figure describes the reserved target names. You can use the reserved target name, _self, which overrides the target specified in the <base> tag and instructs the browser to open the page in the same that contains the hypertext link. page will appear in the containing the hyperlink

9 Using the _top Reserved Target Name Using the <nos> Tag To target a link to the full display area, you will use the _top reserved target name. The _top target is often used when a d page is accessed from another. It s also used when you are linking to pages that lie outside your Web site altogether. page will appear in the full display area Use the <nos> tag to allow your Web site to be viewable using browsers that do or do not support s. When a browser that supports s processes this code, it ignores everything within the <nos> tags and concentrates solely on the code within the <set> tags. When a browser that doesn t support s processes this code, it doesn t know what to do with the <set> and <nos> tags, so it ignores them. When you use the <nos> tag, you must include <body> tags, this way, both types of browsers are supported within a single HTML file The <nos> Syntax Frameless Version of a Web Site The syntax for the <nos> tag is: <html><head> <title>page Title</title> </head> <set> Frame Definitions </set> <nos> <body> Page Layout </body></nos></html> Inserting the Nos Code Frames and Browsers Web site will contain no s To test your Web page, use a browser that does not support s. Another way of supporting browsers that do not display s is to create a Web page that contains links to the d and nond versions of your Web site. It is important to correctly identify the target for hyperlinks within s. by default, the target of the hyperlink will be the current Use the _top target to hyperlinks to documents that lie outside of the Web presentation

10 Working with Frame Borders Setting the Border Color There are additional attributes you can apply to the <> tag that allow you to change border size and appearance. For example: you can remove borders from your s to free up more space for text and images you can change the color of the border so that it matches or complements the color scheme for your Web site To change the color of a s border, use the bordercolor attribute. The attribute can be applied either to an entire set of s, using the <set> tag, or to individual s, using the <> tag. The syntax for this attribute is: <set bordercolor= color > or < bordercolor= color > color is either a color name or a color value Setting the Border Color Continued Web Site with Brown Frame Border Applying the bordercolor attribute to the <set> tag affects all of the s and nested s within the set. If you apply the bordercolor attribute to a single <> tag, that particular color of the border changes in Internet Explorer, but in Mozilla Firefox, all of the borders change. View the page using different browsers and browser versions Setting the Border Width The border Attribute Another way of modifying borders is to change their widths using the border attribute. The border attribute can be used only in the <set> tag, and not in individual <> tags. The syntax for the border attribute is: <set border= value > value is the width of the borders in pixels 59 Adding border= no to a <set> tag removes the borders from the s in your page. by removing the borders, more space for the text and images in each of the Web pages is created Internet Explorer also supports the spacing attribute, which has the same effect as the border attribute. Firefox does not support the spacing attribute

Removing the Frame Borders Web Site without Frame Borders Some Web designers prefer not to show borders in order to give the illusion of having a single Web page rather than three separate ones,

11 Removing the Frame Borders Web Site without Frame Borders Some Web designers prefer not to show borders in order to give the illusion of having a single Web page rather than three separate ones, while other Web designers believe that hiding borders can confuse users as they navigate the Web site. setting the width of the border to zero has the effect of removing the border Creating Floating Frames The Floating Frames Syntax Another way of using s is to create a floating. A floating, or internal, is displayed as a separate box or window within a Web page. The can be placed within a Web page in much the same way as an inline image. 63 The syntax for a floating is: <i src= URL border= option ></i> URL is the name and location of the file you want to display in the floating the border attribute determines whether the browser displays a border ( yes ) or not ( no ) around the in addition to these attributes, you can use some of the other attributes you used with fixed s, such as the marginwidth, marginheight, and name attributes 64 Attributes Associated with the <i> Tag Creating a Floating Frame This figure shows some of the other attributes associated with the <i> tag. Attribute align="alignment" border="value" border="type" classid="url" height="value" width="value" Description How the is aligned with the surrounding text (use "left" or "right" to flow text around the inline.) The size of the border around the, in pixels Specifies whether to display a border ("yes") or not ("no") The class identifier of the object The height and width of the, in pixels HTML code to create a floating hspace="value" vspace="value" The horizontal and vertical space around the, in pixels marginheight="value" marginwidth="value" The size of the internal margins of the, in pixels. name="text" The name of the scrolling="type" Specifies whether the can be scrolled ("yes") or not ("no") src="url" The location and filename of the page displayed in the

Viewing a Floating Frame An Example of a Web Site with Frames If you want to use floating s in your Web page, you must make sure that your users are running at least Internet Explorer 6.

12 Viewing a Floating Frame An Example of a Web Site with Frames If you want to use floating s in your Web page, you must make sure that your users are running at least Internet Explorer 6.0 or Firefox 3.0. Users of other browsers and browser versions might not be able to view floating s. floating Changing Web Page Content Summary When changing Web page content, you may want to reload or refresh the Web page: for Firefox, you will need to close and then open the file for the changes to the s to take effect. Simply clicking the Reload button, your changes are not displayed for Internet Explorer 3.0 and above, in which you can view changes to the page by clicking the Refresh button 69 Learned how to display multiple Web pages in a Web browser using s. Learned how to create a layout and specify the source document for each. Learned how to control the behavior and appearance of each. Learned how to specify which will contain the results of an activated hyperlink Learned how to support "-blind" browsers. Discussed extensions of s supported by some browsers

Objectives. Tutorial 8 Designing ga Web Site with Frames. Introducing Frames. Objectives. Disadvantages to Using Frames. Planning Your Frames

Objectives. Tutorial 8 Designing ga Web Site with Frames. Introducing Frames. Objectives. Disadvantages to Using Frames. Planning Your Frames Objectives Tutorial 8 Designing ga Web Site with Frames Explore the uses of frames in a Web site Create a frameset consisting of rows and columns of frames Display a document within a frame Format the