Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson...

13
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1 Get Started with HTML (85) Lesson 4.2 Format Text (91) Lesson 4.3 Insert Images and Backgrou nds (100) Lesson 4.4 Text and Graphic Alignment (104) Lesson 4.5 Bulleted and Numbered Lists (109) Lesson 4.6 Link to Other Pages and Web Sit es 4 Pages 83 - 121 Copyright © by The McGraw-Hill Companies, Inc. All rights reserved.

Transcript of Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson...

Page 1: Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

Glencoe Digital Communication Tools

Create a Web Page with HTML Create a Web Page with HTML

Chapter Contents

Lesson 4.1 Get Started with HTML (85)

Lesson 4.2 Format Text (91)

Lesson 4.3 Insert Images and Backgrounds (100)

Lesson 4.4 Text and Graphic Alignment (104)

Lesson 4.5 Bulleted and Numbered Lists (109)

Lesson 4.6 Link to Other Pages and Web Sites (113)

44Pages 83 - 121

Copyright © by The McGraw-Hill Companies, Inc. All rights reserved.

Page 2: Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

Glencoe Digital Communication Tools

Create a Web Page with HTML Create a Web Page with HTML

You Will Learn To 44

Read basic HTML code Create a simple Web page using HTML code Add background color and graphics to a Web page Change font sizes, colors, and styles on a Web page Add paragraphs and line breaks Add images to a Web page Align text, graphics, and clip art on a Web page Create a bulleted or numbered list on a Web page Add external and internal hyperlinks to a Web page Insert a link to an e-mail address

Page 3: Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

Glencoe Digital Communication Tools

Create a Web Page with HTML Create a Web Page with HTML 44

Pages 85 - 904.1 Get Started with HTML

Understanding HTML TagsYou can create and publish your own Web page using Hypertext Markup Language (HTML) and common text formatting tags such as: <B>bold</B> <I>italics</I>

You can also use an attribute like BGCOLOR= to change your Web page’s background color or add other details.

Hypertext Markup Language (HTML) A set of codes used to create documents for the Web.

tag A piece of HTML code that tells a Web browser how to display a particular section of text, a graphic, or other Web page element.

attribute A specific instruction that tells the browser how to display the text or graphics enclosed by the HTML tags.

Page 4: Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

Glencoe Digital Communication Tools

Create a Web Page with HTML Create a Web Page with HTML 44

Pages 85 - 904.1 Get Started with HTML

Creating an HTML DocumentAttention to detail is very important when using HTML code in a word processing program. If a single character is missing or wrong, a tag will not work.

Web EditorsSome of the more advanced software programs that enter HTML codes for you as you design a Web page are: Macromedia Dreamweaver® Microsoft FrontPage®

Web pages can also be created in Microsoft Word, Excel, and PowerPoint applications.

Page 5: Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

Glencoe Digital Communication Tools

Create a Web Page with HTML Create a Web Page with HTML 44

Pages 91 - 984.2 Format Text

Applying Font Changes Fonts affect a Web page’s appearance, helping to: Improve the way a page looks Emphasize text Catch the attention of people viewing your page

font A combination of specific visual characteristics of text, including size, typeface style, bold, and italics.

Microsoft Word, Excel, and PowerPoint documents can easily be saved as HTML for use as Web pages.

Page 6: Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

Glencoe Digital Communication Tools

Create a Web Page with HTML Create a Web Page with HTML 44

Pages 91 - 984.2 Format Text

Creating Paragraphs and New LinesYou can control the layout of text on a Web page by using some of the following tags: The paragraph tag, <P>, adds two blank lines

between paragraphs The break tag, <BR>, inserts a single space after a

line of text The horizontal rule tag, <HR>, creates a line that

runs across the width of a page

Viewing Source CodeTo look at any Web site’s HTML code, in the browser application click the View menu and click Source.

horizontal rule A line that runs across the width of a page.

Page 7: Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

Glencoe Digital Communication Tools

Create a Web Page with HTML Create a Web Page with HTML 44

Pages 100- 1034.3 Insert Images and Backgrounds

Adding Images to Web PagesSome graphics that can help your Web page’s design are: Clip art Digital pictures Backgrounds

Clip ArtClip art can usually be identified by the file extensions: .png .gif .jpg

clip art Electronic illustrations that can be inserted into a document.

The background and clip art files you are viewing on the Microsoft Web site can also be added to Word, Excel, Access, and PowerPoint documents.

Page 8: Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

Glencoe Digital Communication Tools

Create a Web Page with HTML Create a Web Page with HTML 44

Pages 100 - 1034.3 Insert Images and Backgrounds

Animated Clip ArtIncluding some animated clip art on your Web pages can make them come alive.

Digital PicturesPersonalize your Web page by downloading your digital camera’s pictures to your computer.

BackgroundsWhen using clip art as your Web page’s background image, make sure the text is still easy to read by: Changing the color Adjusting the text’s formatting

Page 9: Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

Glencoe Digital Communication Tools

Create a Web Page with HTML Create a Web Page with HTML 44

Pages 104 - 1074.4 Text and Graphic Alignment

Page LayoutImprove your Web page’s design by: Paying attention to the position of text or graphics Centering big headlines in the middle of the page Setting a photograph off to the side of a page Aligning captions underneath photographs

The Importance of Closing TagsAlways use a closing tag when using HTML to align images and text.

Page 10: Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

Glencoe Digital Communication Tools

Create a Web Page with HTML Create a Web Page with HTML 44

Pages 109 - 1124.5 Bulleted and Numbered Lists

Organizing InformationHTML allows you to create lists on your Web pages to: Organize information about related items Draw attention to the information in a visual way Make items more distinct from one another and

easier to remember

Ordered and unordered lists on Web pages are similar to lists you can create in Microsoft Word and PowerPoint.

Page 11: Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

Glencoe Digital Communication Tools

Create a Web Page with HTML Create a Web Page with HTML 44

Pages 109 - 1124.5 Bulleted and Numbered Lists

The following tags are used for lists: <UL> tag to start an unordered list <OL> tag to start an ordered list <LI> tag for an individual item within a list

ordered list A list that has numbers before each item, and the items are usually in priority order.

unordered list A list that has bullet points before each item and is used when the items can be in any order.

Page 12: Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

Glencoe Digital Communication Tools

Create a Web Page with HTML Create a Web Page with HTML 44

Pages 113 - 1154.6 Link to Other Pages and Web Sites

Planning a Web SiteWhen building a Web site, make sure you: Create a storyboard or diagram to help lay out pages

and organize information Include links to make it easy for users to navigate

from one page to another within the site

Hyperlinks can be created in Microsoft Word, Excel, Access, and PowerPoint documents by simply entering the URL.

Page 13: Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

Glencoe Digital Communication Tools

Create a Web Page with HTML Create a Web Page with HTML 44

Pages 113 - 1154.6 Link to Other Pages and Web Sites

Creating HyperlinksYou need an anchor tag and hypertext reference, <A HREF>, to link text or graphics to the URL (uniform resource locator) of another Web page.

Using these hyperlinks: Gives a Web site the ability to connect to any other

public Web site on the Internet Connects millions of pages all across the World

Wide Web Allows people to easily surf from one page to

another