F-1 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Extended Learning Module

F-F-11 Management Information Systems Management Information Systems

for the Information Agefor the Information Age

Copyright 2004 Copyright 2004 The McGraw-Hill Companies, Inc. The McGraw-Hill Companies, Inc.

All rights reservedAll rights reserved

Extended Learning Module FExtended Learning Module F

Building A Web Page with HTMLBuilding A Web Page with HTML

A great module on your CD.A great module on your CD.





Presentation OverviewPresentation Overview

Hypertext Markup Language (HTML)Hypertext Markup Language (HTML) Basic Text FormattingBasic Text Formatting Creating HeadingsCreating Headings Adjusting Text ColorAdjusting Text Color Adjusting Text SizeAdjusting Text Size Changing The Background ColorChanging The Background Color Adding Links To A Web SiteAdding Links To A Web Site Adding ImagesAdding Images Using A Textured BackgroundUsing A Textured Background Creating and Using ListsCreating and Using Lists





Important Web Site Issues:Important Web Site Issues: Keep private personal information off of your Keep private personal information off of your

Web Site.Web Site. Consider your target audience and their Consider your target audience and their

ethics.ethics. Simple solutions are elegant.Simple solutions are elegant.

IntroductionIntroduction





Hypertext Markup Language Hypertext Markup Language (HTML)(HTML)

Hypertext markup languageHypertext markup language ( (HTMLHTML) - ) - the language you use to create a Web the language you use to create a Web site. site.

HTML documentHTML document - a file that contains - a file that contains your Web site content and HTML your Web site content and HTML formatting instructions. formatting instructions.





Hypertext Markup LanguageHypertext Markup Language





Hypertext Markup LanguageHypertext Markup Language






HTML tagHTML tag - specifies the formatting and - specifies the formatting and presentation of information on a Web site. presentation of information on a Web site.

Structure tagsStructure tags - HTML tags that set up - HTML tags that set up the necessary sections and specify that the necessary sections and specify that the document is indeed an HTML the document is indeed an HTML document.document.






Beginning structure tag - Beginning structure tag - <HTML><HTML>

Ending structure tag - Ending structure tag - </HTML></HTML>

Head tags -Head tags - <HEAD> <HEAD> && </HEAD> </HEAD>

Body tags - Body tags - <BODY> <BODY> && </BODY> </BODY>

Starting tag - Starting tag - <tag name> <tag name>

Ending tag -Ending tag - </tag name> </tag name>





Hypertext Markup Language Hypertext Markup Language Working with and Viewing Your Web Site Working with and Viewing Your Web Site

LocallyLocally

Web spaceWeb space - a storage area where you - a storage area where you keep your Web site. keep your Web site.

The most efficient way to build a Web site The most efficient way to build a Web site is to do so locally.is to do so locally.

When finished, you can then transfer it to When finished, you can then transfer it to your Web space.your Web space.





Basic Text FormattingBasic Text Formatting

Basic formatting tagsBasic formatting tags - HTML tags that - HTML tags that allow you to specify formatting for text. allow you to specify formatting for text.

The three most commonly used basic The three most commonly used basic HTML formatting tags are:HTML formatting tags are: Bold - Bold - Underline - Underline - Italics - Italics - 





Creating HeadingsCreating Headings

Heading tags – HTML tags that make Heading tags – HTML tags that make certain information, such as titles, stand certain information, such as titles, stand out on your Web site.out on your Web site. <H1> <H1> - very large- very large <H6> <H6> - very small- very small





Basic Text Formatting and Basic Text Formatting and HeadingsHeadings





Basic Text Formatting and Basic Text Formatting and HeadingsHeadings





Adjusting Text ColorAdjusting Text Color

To adjust the color of your text, you use the To adjust the color of your text, you use the tag whose format is tag whose format is COLOR=”color name”>, followed by , followed by to return the remaining text to the default of to return the remaining text to the default of black.black.

For a Web site with green text include For a Web site with green text include COLOR=”green”> in your HTML document in your HTML document right after the right after the <BODY><BODY> tag. tag.





Adjusting Text SizeAdjusting Text Size

To adjust the size of your text, you use the To adjust the size of your text, you use the tag whose format is tag whose format is SIZE =”font size”>, followed by , followed by to return the remaining text to the default to return the remaining text to the default size (which is usually 3). size (which is usually 3).

Larger numbers create larger text.Larger numbers create larger text.





Adjusting Text Color and Adjusting Text Color and Text SizeText Size





Adjusting Text Color and Adjusting Text Color and Text SizeText Size





Changing the Background ColorChanging the Background Color

To change the background color, you To change the background color, you use the use the <BODY BGCOLOR><BODY BGCOLOR> tag whose tag whose format is format is <BODY BGCOLOR=”color <BODY BGCOLOR=”color name”>name”>. .

To change the background color to To change the background color to green, you would insert the following line green, you would insert the following line in your HTML document immediately in your HTML document immediately after the after the <BODY><BODY> tag: tag:<BODY BGCOLOR=”green”><BODY BGCOLOR=”green”>





Changing the Background ColorChanging the Background Color





On Your Own

Creating a BasicWeb Site

(p. 10)(p. 10)





Adding Links To A Web SiteAdding Links To A Web Site

Link (Hyperlink)Link (Hyperlink) – clickable text or an – clickable text or an image that takes you to another site or image that takes you to another site or page on the Web.page on the Web.

Three types of links include:Three types of links include: Links to other Web sites or pagesLinks to other Web sites or pages Links to downloadable filesLinks to downloadable files Links to e-mailLinks to e-mail





Adding Links To A Web SiteAdding Links To A Web SiteLinks to Other Web Sites or PagesLinks to Other Web Sites or Pages

The general tag format for a link in an HTML document The general tag format for a link in an HTML document isis<A HREF=”address or file name”>text to appear on <A HREF=”address or file name”>text to appear on

screen</A>screen</A>

The Web site address appears within the quote marks The Web site address appears within the quote marks after the equal sign (after the equal sign (==). ).

The text that will appear as a link on the displayed Web The text that will appear as a link on the displayed Web site appears after the greater than sign (site appears after the greater than sign (>>) and before ) and before the ending tag of the ending tag of </A>.</A>.





Adding Links To A Web SiteAdding Links To A Web SiteLinks to Downloadable FilesLinks to Downloadable Files

Use the link HTML tag and provide the Use the link HTML tag and provide the filename in quote marks after the equal filename in quote marks after the equal sign (=) instead of a Web site address. sign (=) instead of a Web site address.

When the person viewing your Web site When the person viewing your Web site clicks on this link, he or she will see a clicks on this link, he or she will see a screen that prompts either to open the file screen that prompts either to open the file or to save it to disk.or to save it to disk.





Adding Links To A Web SiteAdding Links To A Web SiteLinks to E-mailLinks to E-mail

Use the following format to provide a link Use the following format to provide a link to e-mail:to e-mail:

<A HREF=”<A HREF=”mailto:[email protected]:[email protected]”>E-”>E-mail us with your thoughts and mail us with your thoughts and questions</A>questions</A>

mailto:[email protected]















Adding ImagesAdding Images

The basic tag format for inserting an The basic tag format for inserting an image or photo to your Web site isimage or photo to your Web site is

<IMG SRC=”filename.extension”><IMG SRC=”filename.extension”>

Wherever that statements appears in your Wherever that statements appears in your HTML document is where the photo or HTML document is where the photo or image will appear in your Web site.image will appear in your Web site.















Adding ImagesAdding ImagesSizing ImagesSizing Images

To size an image, you insert the To size an image, you insert the HEIGHTHEIGHT and and WIDTHWIDTH parameters into the image tag. parameters into the image tag.

<IMG SRC=”filename.extension” <IMG SRC=”filename.extension” HEIGHT=pixel count WIDTH=pixel count>HEIGHT=pixel count WIDTH=pixel count>

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 Pixels are the smallest display elements on a screen. screen.





Adding ImagesAdding ImagesPositioning ImagesPositioning Images

The default placement for an image is left-The default placement for an image is left-justified. justified.

Right justify an image by inserting the Right justify an image by inserting the ALIGN ALIGN parameter in the image statement. parameter in the image statement.

<IMG SRC=”Bo.jpg” ALIGN=”right”><IMG SRC=”Bo.jpg” ALIGN=”right”>





Team Work

Creating a Web Site with Links and Images

(p. 15)(p. 15)





Using a Textured BackgroundUsing a Textured Background

The format for textured background is The format for textured background is <BODY <BODY BACKGROUND=“filename.extension”>BACKGROUND=“filename.extension”>..

Extension is usually jpg or gif.Extension is usually jpg or gif.





Using a Textured BackgroundUsing a Textured Background





Creating and Using ListsCreating and Using ListsNumbered ListsNumbered Lists

Use the following three HTML tags to Use the following three HTML tags to create a numbered list:create a numbered list:

<OL><OL> - starts the numbered list (the O in OL - starts the numbered list (the O in OL stands for ordered)stands for ordered)

</OL></OL> - ends the numbered list - ends the numbered list <LI><LI> - for each item in the list (LI stands for - for each item in the list (LI stands for

list item)list item)





Creating and Using ListsCreating and Using ListsNumbered ListsNumbered Lists

The default numbering for numbered lists The default numbering for numbered lists is Arabic. Change the default by adding is Arabic. Change the default by adding the TYPE parameter. Examples include:the TYPE parameter. Examples include: <OL TYPE=a><OL TYPE=a> - lower case letters - lower case letters <OL TYPE=A><OL TYPE=A> - upper case letters - upper case letters <OL TYPE=i><OL TYPE=i> - lower case Roman numerals - lower case Roman numerals <OL TYPE=I><OL TYPE=I> - upper case Roman numerals - upper case Roman numerals





Creating and Using ListsCreating and Using ListsUnnumbered ListsUnnumbered Lists

Use the tags Use the tags <UL><UL> and and </UL></UL> (the U in (the U in UL stands for unordered) instead of the UL stands for unordered) instead of the tags tags <OL><OL> and and </OL></OL> in order to create in order to create an unnumbered list. an unnumbered list.





Creating and Using ListsCreating and Using Lists











Team Work

Creating a Web Site with Lists (p. 18)(p. 18)





On Your Own

Creating Your OwnWeb Site

(p. 19)(p. 19)





Summary Summary Student Learning OutcomesStudent Learning Outcomes

1.1. Define an HTML document and describe its Define an HTML document and describe its relationship to a Web site.relationship to a Web site.

2.2. Describe the purpose of tags in hypertext markup Describe the purpose of tags in hypertext markup language (HTML).language (HTML).

3.3. Identify the two major sections in an HTML document Identify the two major sections in an HTML document and describe the content within each.and describe the content within each.

4.4. Describe the use of basic formatting tags and heading Describe the use of basic formatting tags and heading tags.tags.

5.5. Describe how to adjust text color and size within a Describe how to adjust text color and size within a Web site.Web site.





SummarySummary Student Learning OutcomesStudent Learning Outcomes

6.6. Describe how to change the background Describe how to change the background of a Web site.of a Web site.

7.7. List the three types of links in a Web site List the three types of links in a Web site and describe their purposes.and describe their purposes.

8.8. Describe how to insert and manipulate Describe how to insert and manipulate images in a Web site.images in a Web site.

9.9. Demonstrate how to insert lists in a Web Demonstrate how to insert lists in a Web site.site.





Summary Summary Assignments & ExercisesAssignments & Exercises

1.1. Finding Free Images and Backgrounds Finding Free Images and Backgrounds on the Web.on the Web.

2.2. Build a Numbered list of Links.Build a Numbered list of Links.

3.3. Make Modifications to Figure F.1.Make Modifications to Figure F.1.

4.4. Building a Web Site with Microsoft Word.Building a Web Site with Microsoft Word.

5.5. Building a Table in HTML.Building a Table in HTML.

6.6. Web Space at Your School.Web Space at Your School.

Documents

F-1 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Extended Learning Module