F-1 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies,...

Preview:

Citation preview

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.

F-F-22 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

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

F-F-33 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

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

F-F-44 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

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.

F-F-55 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

Hypertext Markup LanguageHypertext Markup Language

F-F-66 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

Hypertext Markup LanguageHypertext Markup Language

F-F-77 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

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

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.

F-F-88 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

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

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>

F-F-99 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

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.

F-F-1010 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

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 - <B> </B><B> </B> Underline - Underline - <U> </U><U> </U> Italics - Italics - <I> </I><I> </I>

F-F-1111 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

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

F-F-1212 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

Basic Text Formatting and Basic Text Formatting and HeadingsHeadings

F-F-1313 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

Basic Text Formatting and Basic Text Formatting and HeadingsHeadings

F-F-1414 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

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 <FONT COLOR><FONT COLOR> tag whose format is tag whose format is <FONT <FONT COLOR=”color name”>COLOR=”color name”>, followed by , followed by </FONT></FONT> 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 <FONT <FONT COLOR=”green”>COLOR=”green”> in your HTML document in your HTML document right after the right after the <BODY><BODY> tag. tag.

F-F-1515 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

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 <FONT SIZE><FONT SIZE> tag whose format is tag whose format is <FONT <FONT SIZE =”font size”>SIZE =”font size”>, followed by , followed by </FONT></FONT> 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.

F-F-1616 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

Adjusting Text Color and Adjusting Text Color and Text SizeText Size

F-F-1717 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

Adjusting Text Color and Adjusting Text Color and Text SizeText Size

F-F-1818 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

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”>

F-F-1919 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

Changing the Background ColorChanging the Background Color

F-F-2020 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

On Your Own

Creating a BasicWeb Site

(p. 10)(p. 10)

F-F-2121 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

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

F-F-2222 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

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>.

F-F-2323 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

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.

F-F-2424 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

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:shaag@du.edumailto:shaag@du.edu”>E-”>E-mail us with your thoughts and mail us with your thoughts and questions</A>questions</A>

F-F-2525 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

Adding Links To A Web SiteAdding Links To A Web Site

F-F-2626 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

Adding Links To A Web SiteAdding Links To A Web Site

F-F-2727 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

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.

F-F-2828 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

Adding ImagesAdding Images

F-F-2929 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

Adding ImagesAdding Images

F-F-3030 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

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.

F-F-3131 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

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”>

F-F-3232 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

Team Work

Creating a Web Site with Links and Images

(p. 15)(p. 15)

F-F-3333 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

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.

F-F-3434 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

Using a Textured BackgroundUsing a Textured Background

F-F-3535 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

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)

F-F-3636 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

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

F-F-3737 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

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.

F-F-3838 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

Creating and Using ListsCreating and Using Lists

F-F-3939 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

Creating and Using ListsCreating and Using Lists

F-F-4040 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

Creating and Using ListsCreating and Using Lists

Team Work

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

F-F-4141 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

On Your Own

Creating Your OwnWeb Site

(p. 19)(p. 19)

F-F-4242 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

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.

F-F-4343 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

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.

F-F-4444 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

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.

Recommended