Module 4: Advanced HTML

Contents Overview 1 Creating Frames Using HTML 2 Lab 4.1: Creating Frames Using HTML 11 Creating Frames Using FrontPage 2000 20 Creating Forms Using HTML 24 Practice: Creating a Simple Form 35 Formatting Forms 44 Creating Forms Using FrontPage 2000 46 Lab 4.2: Creating a Form Using FrontPage 2000 49 Introduction to Style Sheets 51 Using Style Sheets 53 Practice: Creating Style Sheets Using HTML 64 Publishing a Web Page 66 Demonstration: Publishing a Web Site 75 Lab 4.3: Publishing a Web Site 77 Review 79 Module 4: Advanced HTML Information in this document is subject to change without notice. The names of companies, products, people, characters, and/or data mentioned herein are fictitious and are in no way intended to represent any real individual, company, product, or event, unless otherwise noted. Complying with all applicable copyright laws is the responsibility of the user. No part of this document may be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without the express written permission of Microsoft Corporation. If, however, your only means of access is electronic, permission to print one copy is hereby granted. Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property.  2000 Microsoft Corporation. All rights reserved. Microsoft, ActiveX, BackOffice, FrontPage 2000, Internet Explorer 5, MS-DOS, Windows, and Windows NT are either registered trademarks or trademarks of Microsoft Corporation in the U.S.A. and/or other countries. The names of companies, products, people, characters, and/or data mentioned herein are fictitious and are in no way intended to represent any real individual, company, product, or event, unless otherwise noted. Other product and company names mentioned herein may be the trademarks of their respective owners. Program Manager: Steve Merrill Development Lead: Basabjit Chakrabarty (NIIT) Instructional Designers: Sangeeta Nair, Vijayalakshmi Narayanaswamy (NIIT); Veena Nambier, Yatinder Walia (NIIT) Technical Contributors: Scott Swigart (3 Leaf Solutions); Gary Gumbiner (Great Barrier Technologies, Inc.) Graphic Artist: Scott Serna (Creative Assets) Editing Manager: Jennifer Linn Editor: Reid Bannecker Production Manager: Miracle Davis Production Coordinator: Linda Lu Cannon (The Write Stuff) Build Coordinator: Eric Wagoner Testing Lead: Eric Meyers Testing: Bryan Urakawa, Chris and Edward Lead Product Manager, Internet Services: Hilary Vandal Manufacturing Manager: Rick Terek Operations Coordinator: John Williams Manufacturing Support: Laura King; Kathy Hershey Lead Product Manager, Release Management: Bo Galford Group Manager, Courseware Infrastructure: David Bramble General Manager: Robert Stewart Module 4: Advanced HTML iii Instructor Notes This module teaches students the advanced concepts of HTML. It explains how to create forms and frames using HTML and Microsoft ® FrontPage ® 2000. It introduces students to style sheets and describes how to use them. Finally, the module explains how to publish a Web site using FrontPage 2000. After completing this module, students will be able to: ! Create frames using HTML and FrontPage 2000. ! Create forms using HTML and FrontPage 2000. ! Create style sheets using HTML. ! Publish a Web Page using FrontPage 2000. Materials and Preparation This section provides you with the required materials and preparation tasks that are needed to teach this module. Required Materials To teach this module, you need the following materials: ! Microsoft PowerPoint ® file 1912A_04.ppt ! Module 4, “Advanced HTML” ! Lab 4.1, “Creating Frames Using HTML” ! Lab 4.2, “Creating a Form Using FrontPage 2000” ! Lab 4.3, “Publishing a Web Site” Preparation Tasks To prepare for this module, you should: ! Read all of the materials for this module. ! Complete the demonstrations, practices, and labs in this module. Presentation: 170 Minutes Lab: 75 Minutes Module Strategy Use the following strategy to present this module: ! Creating Frames Using HTML Introduce frames. Then explain the guidelines and drawbacks of using frames. Explain the various frame tags such as, the FRAMESET, FRAME, and NOFRAMES tags. Then, explain how to create frames using HTML. Finally, have the students will do a lab on creating frames using HTML ! Creating Frames Using FrontPage 2000 Demonstrate how to create frames with FrontPage 2000. Have the students do a practice on creating frames with FrontPage 2000. ! Creating Forms Using HTML Introduce forms and explain the uses of a form. Explain the FORM tag and the various form controls such as, text boxes, push buttons, check boxes, radio buttons, drop-down menus, and hidden controls. Finally, explain how to create a form, using HTML. ! Formatting Forms First, explain how to design forms using properties such as; tab order, labels, and access keys. ! Creating Forms Using FrontPage 2000 Demonstrate how to create a form with FrontPage 2000. Have the students do a lab on creating an information request form with FrontPage 2000. ! Introduction to Style Sheets This topic provides an overview to style sheets. Explain the uses of style sheets. ! Using Style Sheets Explain how to define inline styles, and how to set the font and color properties in the style definition. Then, explain how to embed style sheets in an HTML document. Also, explain how to link style sheets to a HTML document. Finally, explain how to create new style classes. ! Publishing a Web Page First, list the pre-requisites for publishing a Web page. Then, explain the production process. Also, demonstrate how to publish a Web site using FrontPage 2000. Then, have the students complete a Web site publishing lab. Module 4: Advanced HTML 1 # ## # Overview # Overview ! Creating Frames Using HTML ! Creating Frames Using FrontPage 2000 ! Creating Forms Using HTML ! Formatting Forms ! Creating a Form Using FrontPage 2000 ! Introduction to Style Sheets ! Using Style Sheets ! Publishing a Web Page ! Review If you want to present information on your Web page in a more flexible and useful manner, you can use frames. To add user interaction to your Web page, you can use forms. You can also define the appearance of your Web page using style sheets. In this module, you will learn how to use frames, forms, and style sheets to enhance the appearance of your Web pages. After you have created your Web site, you need to publish it so that users can access your site. You will learn how to publish a Web site at the end of this module. After completing this module, you will be able to: ! Create frames using HTML and Microsoft ® FrontPage ® 2000. ! Create forms using HTML and FrontPage 2000. ! Create style sheets using HTML. ! Publish a Web page using FrontPage 2000. The sample application files for this module are located in the \Inetpub\wwwroot\1912\Sampapps\Ch04 folder. The files for the sample site “Exotic Excursions” are located in the \Inetpub\wwwroot\1912\Sampsite folder. Slide Objective To provide an overview of the module topics and objectives. Lead-in In this module, you will learn how to create Web pages that use frames, forms, and style sheets. Note 2 Module 4: Advanced HTML # ## # Creating Frames Using HTML ! What Are Frames? ! Using Frames: Guidelines and Drawbacks ! The <FRAMESET> Tag ! The <FRAME> Tag ! The <NOFRAMES> Tag ! Lab 4.1: Creating Frames Using HTML Frames give you a quick and easy mechanism to organize the content on your page. You can create frames in a Web page using HTML tags. The key tags used in defining frames are: ! <FRAMESET> ! <FRAME> ! <NOFRAMES> In the next few topics, you will look at what frames are, and how to use the preceding HTML tags to create frames. You will also look at the guidelines for using frames on your Web page. Slide Objective To provide an overview of the topics covered in this section. Lead-in Frames give you a quick and easy mechanism to organize the content on your page. In this section, you will look at what frames are, and how to create frames using HTML. Module 4: Advanced HTML 3 What Are Frames? ! Frame divides a Web page into multiple, scrollable regions ! Features: $ A frame can be assigned an individual URL $ A frame can be assigned a name to be referred by other URLs $ A frame can be resized dynamically (View Default.htm from Sampsite) A frame divides a Web page into multiple, scrollable regions. With frames, certain content, such as a header, a footer, or navigation bar, can remain constant, while the main content of the page changes. Each region or frame has certain features: ! It can be given an individual URL. Therefore, each region or frame can load information independent of the other frames on the page. ! It can be given a name. This allows each region or frame to be targeted by other URLs. ! It can resize dynamically if the user changes the size of the browser window. Slide Objective To explain the need for frames, and describe their features. Lead-in A frame divides a Web page into parts. Delivery Tip As an example, show a page that uses frames. In Internet Explorer, open Default.htm in the \Inetpub\wwwroot\1912\Sam psite folder. Click the links in the frame on the left to show how the right frame gets updated with the relevant page. 4 Module 4: Advanced HTML Using Frames: Guidelines and Drawbacks ! Guidelines $ Use frames to display information that requires one area of the page to remain static, while the other area changes $ Use borderless frames wherever possible $ Provide white spaces in the pages that display the frames (View Default.htm from Sampsite) ! Drawbacks $ Frames divide the browser window into smaller sections $ Some browsers do not support borderless frames $ Some browsers do not support frames Guidelines for using frames Here are some general guidelines for using frames: ! Use frames to display information that requires one area of the page to remain static, while the other area changes. Frames are best used when one frame contains items to choose from and another frame displays the results of the choice. ! Use borderless frames wherever possible. This is because some browsers do not support frames. As a result, the borders are replaced with either white spaces or they overlap. ! Provide plenty of white spaces in the pages that display the frames. Frames can display a lot of information. Make sure to insert spaces between sentences, images, and other elements to ensure that the frames do not appear cluttered with information. This makes the information in both frames more readable. Slide Objective To discuss the guidelines and drawbacks of using frames. Lead-in Let’s look at some key guidelines for using frame. Delivery Tip Explain the guidelines by using an example Web page. From Internet Explorer, open Default.htm in the \Inetpub\wwwroot\1912\Sam psite folder. Module 4: Advanced HTML 5 For example, the following illustration shows a page with frames that uses all of the preceding guidelines: Drawbacks of using frames Frames are an important feature of Web page design. However, they have some drawbacks: ! Frames divide the Web browser window into smaller sections. With certain areas of the page reserved, there is less space available for the actual content. ! A page with frames cannot be properly bookmarked. This is because contents of the individual frames in a page may not get saved exactly in the state as that when the user bookmarked the page. ! Some browsers do not support borderless frames. They draw a border around each frame, which spoils the intended appearance of the page. ! Some browsers do not support frames. To overcome the preceding drawbacks, most Web sites use tables instead of frames. Note 6 Module 4: Advanced HTML The <FRAMESET> Tag ! The frameset is the main container of a frame ! Attributes of a frameset $ ROWS – defines horizontal frames ROWS="row_height_value_list" $ COLS – defines vertical frames COLS="column_width_list“ (View Frameset.htm from Sampapps) <FRAMESET ROWS="100, *"> <FRAME SRC="Frame1.htm"> <FRAME SRC="Frame2.htm"> </FRAMESET> <FRAMESET ROWS="100, *"> <FRAME SRC="Frame1.htm"> <FRAME SRC="Frame2.htm"> </FRAMESET> The basic tags that you use to create a page with frames are the <FRAMESET> and </FRAMESET> tags. You cannot use the <BODY> and </BODY> tags to create a page with frames. The reason is that a page with frames is a container into which other Web pages are loaded. The frameset itself is defined in one HTML file, with an additional file for the contents of each frame. For example, a frameset that defines a header, navigation bar, and main content, would require a total of four files. The <FRAMESET> and </FRAMESET> tags define the location and size of a frame on an HTML page. Attributes of the <FRAMESET> tag The <FRAMESET> tag has two attributes: ! ROWS The ROWS attribute defines horizontal frames. It is followed by a comma- delimited list of the size for each frame on the page. You can specify actual pixel sizes, percentages, or relative sizes. Pixel sizes are useful for static frames, such as headers and navigation bars, and do not adjust in response to different browser sizes. The other methods are more flexible. In the following example code, the first frame is 120 pixels, the third frame is 20% of the total height, and the second frame is given the remainder of the available space: <FRAMESET ROWS="120, *, 20%"> The following example code creates two frames that split the full size of the browser window. The top frame is always twice as large as the bottom frame. <FRAMESET ROWS="2*, *"> Slide Objective To explain how to use the <FRAMESET> tag. Lead-in The frameset is the main container of a frame. Delivery Tip Explain the usage of ROWS attribute by providing various examples. [...]... frameset and each frame’s contents get saved as separate pages Module 4: Advanced HTML 23 ! Preview the Web page 1 On the File menu, click Preview in Browser to view the Web page in the browser window 2 Click the links in the navigation bar, and note that the contents appear in the main frame 24 Module 4: Advanced HTML # Creating Forms Using HTML Slide Objective ! The Tag ! Overview of Form Controls... content of the tag is displayed Module 4: Advanced HTML 11 Lab 4.1: Creating Frames Using HTML Slide Objective To introduce the lab Lead-in In this lab, you will create a Web page with frames using HTML Explain the lab objectives To create a Web page with frames, using HTML Objectives After completing this lab, you will be able to create a page with frames using HTML Prerequisites Before working... < /HTML> 13 14 Module 4: Advanced HTML Exercise 2 Creating a Home Page In this exercise, you will create the main frame for the frameset page created in Exercise 1 The main frame is the home page for Clark Escrow Inc ! Create the main frame 1 Create a basic HTML document in Notepad Specify the title of the page as Home Page of Clark Escrow Inc 2 Specify the contents of the home page in the HTML document... To see an example of what your code should look like, see Appendix A or the Student CD-ROM Home Page of Clark Escrow Inc. Welcome to the home page of Clark Escrow, Inc < /HTML> Module 4: Advanced HTML 15 Exercise 3 Creating a Page with Links In this exercise, you will create the table of... < /HTML> Module 4: Advanced HTML 17 Exercise 4 Creating the Product Category Pages In this exercise, you will create the product category pages for the links listed in the table of contents page created in Exercise 3 The product category pages consist of the list of products under each of the categories listed in the table of contents page ! Create the Home Appliances contents page 1 Create a basic HTML. .. HREF="Main.htm">Home Page < /HTML> Module 4: Advanced HTML ! Create the Electronic Goods contents page 1 Create a page that displays a list of electronic goods that are available for order The list should consist of the following items: Television, VCR, CD player, and DVD player To see an example of what your code should look like, see Appendix A or the Student CD-ROM Electronic... Explorer USING FRAMES < /HTML> Note You cannot specify the COLS and the ROWS attributes together in a tag This is because at any point of time, you can only specify either the horizontal or the vertical space that the frame will take 7 8 Module 4: Advanced HTML The ... ! Radio button ! Drop-down menu ! Check box ! Hidden You will learn about each of these in detail, in the next few topics Module 4: Advanced HTML Using Text Controls Slide Objective To explain the various text controls supported by HTML ! ! There are 3 types of text controls in HTML Password ! Lead-in Single-line text box Scrolling text box . General Manager: Robert Stewart Module 4: Advanced HTML iii Instructor Notes This module teaches students the advanced concepts of HTML. It explains how to create. lab. Module 4: Advanced HTML 1 # ## # Overview # Overview ! Creating Frames Using HTML ! Creating Frames Using FrontPage 2000 ! Creating Forms Using HTML