1 PROJECT 3 WEB/HTML PROJECT USING NOTEPAD Management Information Systems, 9 th edition, By Raymond McLeod, Jr. and George P. Schell © 2004, Prentice Hall, Inc.

2 Learning Objectives Understand the advantages and disadvantages of developing a Web page using the text editor Notepad. Understand fonts, colors, and other formatting techniques. Learn how to control page lines with paragraphs, breaks, and other techniques. Learn how to create lists and tables. Learn to create links to , other parts of the same Web page, and to other Web pages. Understand how images are inserted into Web pages.

3 Introduction This project uses the text editor Notepad to create a Web page using the same Web page as Project 2 A step-by-step example illustrates the techniques and concepts that will be needed for the project The example is not the assignment; the assignment comes after the example By working through the example provided you will learn how to complete the assignment An image of the completed example is shown in Figure P3.1

4 EXAMPLE This example creates a Notepad document that will be saved in a hypertext markup language (HTML) format to be used as a Web page and contains the standard set of Web features that occur on almost all Web pages: lists, images, links, and a table The company name is prominently displayed at the center and top of the Web page in large, red letters, followed by a list of locations where pizza can be purchased In “Why order from us?” a disc (small circle) is the default bullet for an unordered list but other shapes can be used

5 EXAMPLE(cont.) “Why order from us?” is an ordered list as opposed to the unordered list of locations The table is shown after the locations containing the prices of pizza according to the topping and size The image of a chef holding a tray of pizza is just an image found from another application The user has 3 links on the Web page: “Contact Us” is a link to send “Link to My School” is a hyperlink to your school’s Web page “Go To Top of Page,” is for navigation on this Web page itself

6

7 SECTIONS OF AN HTML DOCUMENT HTML documents are comprised of two sections: The “head” section conveys information to the Web browser software such as the title of the Web page The “body” section is what the user sees displayed on the screen and contains the part most people think of as the Web page: images, tables, lists, and links all occur in the body

8 MAKING THE NOTEPAD DOCUMENT A short Notepad document can generate the Web page. Figure P3.2 shows the document that creates the Web page Begin by opening Notepad and creating a new document Click the “Start” command (bottom, left-hand side of the screen) and then choose the “Programs” subcommand. Type in lines 1-5 of Figure P3.5 Make a list of locations where the pizza is sold. A blank line is left after a paragraph but in line 12 use the command for another line break ( ) to cause an additional blank line to be inserted Create an unordered list in line 13 and give it the title “Locations” Create three list items using the command for the commuter parking lot, recreation center, and 100 North Main Street After creating another blank line on the Web page (line 18) create a table for pizza prices. The table in Figure P3.1 has five rows and four columns

9

10 SAVING THE EXAMPLE You must save the document as an HTML file. The default type of document in Notepad is a text document and the.txt file extension will be automatically added to the file name if the file is saved in “text” mode A Web browser will not interpret text document types. Choose “File” followed by “Save As” and Figure P3.3 will appear Enter a file name such as “UniversityPizza.htm” but without the quotation marks Figure P3.4 shows that the file type chosen (i.e., “Save as type”) must be “All Files” and the encoding is “ANSI.” If you fail to choose “All Files” as the file type the Web page will probably not work and, even worse, the extension “.txt” will be added to the end of your file name

11 VIEW THE WEB PAGE Once the Web page has been saved you can view it to see if it works correctly You do not need to close the Notepad program; it can remain open while you view your file with the Web browser Open your Web browser and choose the “File” command followed by the “Open” subcommand Type in the file name or “Browse” to it and click the “OK” button. Your Web page will appear in the browser If you need to make any corrections, choose the Notepad editor again. Edit the document’s HTML code and save the document again

12 ADVANTAGES AND DISADVANTAGES What you see displayed on a Web page is not what the Web browser uses to create the page Learning the HTML language is fairly easy but it is tedious and typing mistakes can have disastrous effects There are two advantages to coding HTML in Notepad: the code is efficient and the manager understands more about how Web pages work The disadvantage of using the text editor Notepad is the learning of HTML commands and the coding process, while coding HTML in Notepad is time- consuming

13

14

15 ASSIGNMENT 1. You are required to make a product sheet for cell phones. Your company name will be your name followed by the phrase “Cell Phone Service.” For example, if your name is George Washington the company name would be “George Washington Cell Phone Service.” The company name must be the first entry on the page and the words must be substantially larger than other text as well as being blue in color. 2. Next you must create an unordered (i.e., unnumbered) list of locations where the cell phones will be sold. There must be four locations; make up three locations for yourself but one location must be the room where your class meets. 3. Make a table of cell phone plans with prices like the table shown below. You may keep the border lines around the cells or you may eliminate them as you wish. Pay attention to centering of the values in the cells and the formatting of the text in cells. Minutes Price Day Night $30 / month $60 / month 500 1,000

16 ASSIGNMENT(cont.) 4. Add a cell phone image to the Web page. If you cannot find a cell phone image then use another image that you feel is appropriate. Center the image on the page. (Note: you can capture an image from a Web page by pointing to it with the mouse, clicking the right mouse button, and then choosing the “Save Picture As” option from the menu that appears. Make sure you save the image file in the same directory as the HTML file.) 5. Add an ordered list of suggested phone types such as Nokia, Ericsson, Motorola, Samsung, or others. The list should be ordered from the phone type your company feels is best to the one least preferred by your company. 6. Make three links on the page. The first link should go to your e- mail address. The second link should go to your school’s Web site. The third link should go to the top of the page. All three of these links should be aligned to the right-hand side of the page.

17 END OF CHAPTER 3