F-1 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Extended Learning Module F Building A Web Page with HTML A great module on your CD.

F-2 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Presentation Overview Hypertext Markup Language (HTML) Hypertext Markup Language (HTML) Basic Text Formatting Basic Text Formatting Creating Headings Creating Headings Adjusting Text Color Adjusting Text Color Adjusting Text Size Adjusting Text Size Changing The Background Color Changing The Background Color Adding Links To A Web Site Adding Links To A Web Site Adding Images Adding Images Using A Textured Background Using A Textured Background Creating and Using Lists Creating and Using Lists

F-3 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Important Web Site Issues: Important Web Site Issues:  Keep private personal information off of your Web Site.  Consider your target audience and their ethics.  Simple solutions are elegant. Introduction

F-4 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Hypertext Markup Language (HTML) Hypertext markup language (HTML) - the language you use to create a Web site. Hypertext markup language (HTML) - the language you use to create a Web site. HTML document - a file that contains your Web site content and HTML formatting instructions. HTML document - a file that contains your Web site content and HTML formatting instructions.

F-5 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Hypertext Markup Language

F-6 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Hypertext Markup Language

F-7 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Hypertext Markup Language (HTML) HTML tag - specifies the formatting and presentation of information on a Web site. HTML tag - specifies the formatting and presentation of information on a Web site. Structure tags - HTML tags that set up the necessary sections and specify that the document is indeed an HTML document. Structure tags - HTML tags that set up the necessary sections and specify that the document is indeed an HTML document.

F-8 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Hypertext Markup Language (HTML) Beginning structure tag - Beginning structure tag - Ending structure tag - Ending structure tag - Head tags - & Head tags - & Body tags - & Body tags - & Starting tag - Starting tag - Ending tag - Ending tag -

F-9 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Hypertext Markup Language Working with and Viewing Your Web Site Locally Web space - a storage area where you keep your Web site. Web space - a storage area where you keep your Web site. The most efficient way to build a Web site is to do so locally. The most efficient way to build a Web site is to do so locally. When finished, you can then transfer it to your Web space. When finished, you can then transfer it to your Web space.

F-10 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Basic Text Formatting Basic formatting tags - HTML tags that allow you to specify formatting for text. Basic formatting tags - HTML tags that allow you to specify formatting for text. The three most commonly used basic HTML formatting tags are: The three most commonly used basic HTML formatting tags are:  Bold -  Bold -  Underline -  Underline -  Italics -  Italics -

F-11 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Creating Headings Heading tags – HTML tags that make certain information, such as titles, stand out on your Web site. Heading tags – HTML tags that make certain information, such as titles, stand out on your Web site.  - very large  - very small

F-12 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Basic Text Formatting and Headings

F-13 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Basic Text Formatting and Headings

F-14 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Adjusting Text Color To adjust the color of your text, you use the tag whose format is, followed by to return the remaining text to the default of black. To adjust the color of your text, you use the tag whose format is, followed by to return the remaining text to the default of black. For a Web site with green text include in your HTML document right after the tag. For a Web site with green text include in your HTML document right after the tag.

F-15 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Adjusting Text Size To adjust the size of your text, you use the tag whose format is, followed by to return the remaining text to the default size (which is usually 3). To adjust the size of your text, you use the tag whose format is, followed by to return the remaining text to the default size (which is usually 3). Larger numbers create larger text. Larger numbers create larger text.

F-16 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Adjusting Text Color and Text Size

F-17 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Adjusting Text Color and Text Size

F-18 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Changing the Background Color To change the background color, you use the tag whose format is. To change the background color, you use the tag whose format is. To change the background color to green, you would insert the following line in your HTML document immediately after the tag: To change the background color to green, you would insert the following line in your HTML document immediately after the tag:

F-19 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Changing the Background Color

F-20 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved On Your Own Creating a Basic Web Site (p. 10)

F-21 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Adding Links To A Web Site Link (Hyperlink) – clickable text or an image that takes you to another site or page on the Web. Link (Hyperlink) – clickable text or an image that takes you to another site or page on the Web. Three types of links include: Three types of links include:  Links to other Web sites or pages  Links to downloadable files  Links to

F-22 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Adding Links To A Web Site Links to Other Web Sites or Pages The general tag format for a link in an HTML document is The general tag format for a link in an HTML document is text to appear on screen text to appear on screen The Web site address appears within the quote marks after the equal sign (=). The Web site address appears within the quote marks after the equal sign (=). The text that will appear as a link on the displayed Web site appears after the greater than sign (>) and before the ending tag of. The text that will appear as a link on the displayed Web site appears after the greater than sign (>) and before the ending tag of.

F-23 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Adding Links To A Web Site Links to Downloadable Files Use the link HTML tag and provide the filename in quote marks after the equal sign (=) instead of a Web site address. Use the link HTML tag and provide the filename in quote marks after the equal sign (=) instead of a Web site address. When the person viewing your Web site clicks on this link, he or she will see a screen that prompts either to open the file or to save it to disk. When the person viewing your Web site clicks on this link, he or she will see a screen that prompts either to open the file or to save it to disk.

F-24 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Adding Links To A Web Site Links to Use the following format to provide a link to Use the following format to provide a link to E- mail us with your thoughts and questions E- mail us with your thoughts and questions

F-25 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Adding Links To A Web Site

F-26 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Adding Links To A Web Site

F-27 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Adding Images The basic tag format for inserting an image or photo to your Web site is The basic tag format for inserting an image or photo to your Web site is Wherever that statements appears in your HTML document is where the photo or image will appear in your Web site. Wherever that statements appears in your HTML document is where the photo or image will appear in your Web site.

F-28 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Adding Images

F-29 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Adding Images

F-30 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Adding Images Sizing Images To size an image, you insert the HEIGHT and WIDTH parameters into the image tag. To size an image, you insert the HEIGHT and WIDTH parameters into the image tag. Size an image according to the number of pixels. Size an image according to the number of pixels. Pixels are the smallest display elements on a screen. Pixels are the smallest display elements on a screen.

F-31 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Adding Images Positioning Images The default placement for an image is left- justified. The default placement for an image is left- justified. Right justify an image by inserting the ALIGN parameter in the image statement. Right justify an image by inserting the ALIGN parameter in the image statement.

F-32 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Team Work Creating a Web Site with Links and Images (p. 15)

F-33 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Using a Textured Background The format for textured background is. The format for textured background is. Extension is usually jpg or gif. Extension is usually jpg or gif.

F-34 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Using a Textured Background

F-35 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Creating and Using Lists Numbered Lists Use the following three HTML tags to create a numbered list: Use the following three HTML tags to create a numbered list:  - starts the numbered list (the O in OL stands for ordered)  - ends the numbered list  - for each item in the list (LI stands for list item)

F-36 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Creating and Using Lists Numbered Lists The default numbering for numbered lists is Arabic. Change the default by adding the TYPE parameter. Examples include: The default numbering for numbered lists is Arabic. Change the default by adding the TYPE parameter. Examples include:  - lower case letters  - upper case letters  - lower case Roman numerals  - upper case Roman numerals

F-37 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Creating and Using Lists Unnumbered Lists Use the tags and (the U in UL stands for unordered) instead of the tags and in order to create an unnumbered list. Use the tags and (the U in UL stands for unordered) instead of the tags and in order to create an unnumbered list.

F-38 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Creating and Using Lists

F-39 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Creating and Using Lists

F-40 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Creating and Using Lists Team Work Creating a Web Site with Lists (p. 18)

F-41 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved On Your Own Creating Your Own Web Site (p. 19)

F-42 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Summary Student Learning Outcomes 1. Define an HTML document and describe its relationship to a Web site. 2. Describe the purpose of tags in hypertext markup language (HTML). 3. Identify the two major sections in an HTML document and describe the content within each. 4. Describe the use of basic formatting tags and heading tags. 5. Describe how to adjust text color and size within a Web site.

F-43 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Summary Student Learning Outcomes 6. Describe how to change the background of a Web site. 7. List the three types of links in a Web site and describe their purposes. 8. Describe how to insert and manipulate images in a Web site. 9. Demonstrate how to insert lists in a Web site.

F-44 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Summary Assignments & Exercises 1. Finding Free Images and Backgrounds on the Web. 2. Build a Numbered list of Links. 3. Make Modifications to Figure F Building a Web Site with Microsoft Word. 5. Building a Table in HTML. 6. Web Space at Your School.