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

Glencoe Digital Communication Tools Create a Web Page with HTML You Will Learn To 4 4  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 address

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg Get Started with HTML Understanding HTML Tags You can create and publish your own Web page using Hypertext Markup Language (HTML) and common text formatting tags such as:  bold  italics 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.

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg Get Started with HTML Creating an HTML Document Attention 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 Editors Some 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.

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg Get Started with HTML What does an HTML tag do? Write how opening and closing tags appear in enclosed brackets. digicom.glencoe.com digicom.glencoe.com Lesson 4.1, Rubric

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg 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.

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg Format Text Creating Paragraphs and New Lines You can control the layout of text on a Web page by using some of the following tags:  The paragraph tag,, adds two blank lines between paragraphs  The break tag,, inserts a single space after a line of text  The horizontal rule tag,, creates a line that runs across the width of a page Viewing Source Code To 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.

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg Format Text  If your Web page has small, dark text against a dark background, are people likely to read the text?  Why or why not?  Describe what you can do as a Web designer to make the text on your Web page appealing.  Is text easier to read when it is broken into paragraphs? Explain your answers. digicom.glencoe.com digicom.glencoe.com Lesson 4.2, Rubric

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg Insert Images and Backgrounds Adding Images to Web Pages Some graphics that can help your Web page’s design are:  Clip art  Digital pictures  Backgrounds Clip Art Clip 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.

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg Insert Images and Backgrounds Animated Clip Art Including some animated clip art on your Web pages can make them come alive. Digital Pictures Personalize your Web page by downloading your digital camera’s pictures to your computer. Backgrounds When 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

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg Insert Images and Backgrounds  What kinds of clip art could you add to the Web site you have been working on?  What kinds of digital photos could you take to add to the site?  Describe the photos. digicom.glencoe.com digicom.glencoe.com Lesson 4.3, Rubric

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg Text and Graphic Alignment Page Layout Improve 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 Tags Always use a closing tag when using HTML to align images and text.

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg Text and Graphic Alignment  What kind of text would you center on a Web page?  How could you use left align and right align?  Give an example of each. digicom.glencoe.com digicom.glencoe.com Lesson 4.4, Rubric

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg Bulleted and Numbered Lists Organizing Information HTML 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.

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg Bulleted and Numbered Lists The following tags are used for lists:  tag to start an unordered list  tag to start an ordered list  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.

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg Bulleted and Numbered Lists  When might you want to include an unordered list or ordered list in your Web page?  What type of information would you put in each list? digicom.glencoe.com digicom.glencoe.com Lesson 4.5, Rubric

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg Link to Other Pages and Web Sites Planning a Web Site When 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.

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg Link to Other Pages and Web Sites Creating Hyperlinks You need an anchor tag and hypertext reference,, 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

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg Link to Other Pages and Web Sites  What is the advantage of linking pages together on the Internet?  Explain how this makes moving around within a site easier.  How does this make navigating the World Wide Web easier? digicom.glencoe.com digicom.glencoe.com Lesson 4.6, Rubric

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg. 116 DIGITAL CAREER PERSPECTIVE Sharing Information About New Products Levonda Stewart is a workshop and regional trade show coordinator for employees of a manufacturing firm. She works with different people from all over the United States and collects and organizes information about new product lines. Name: Levonda Stewart Job Title: Workshop Coordinator Career Cluster: Manufacturing

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg. 116 DIGITAL CAREER PERSPECTIVE Sharing Information About New Products In her job, Levonda uses the Internet and the Microsoft Office Suite software to:  Schedule hotels and check the status of product shipments  Update the company’s Web site with information about trade shows and workshops  Register participants online  Oversee the creation of brochures in PageMaker® for new products and workshops  Create a PowerPoint presentation about a new product to share with sales reps and customers Levonda says, “I really enjoy working with a project when it begins as an idea and then develops into a successful workshop or trade show.”

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 pg. 116 DIGITAL CAREER PERSPECTIVE Question How are communication and computer and technology skills linked in Levonda’s job? Possible answers include:  She uses both written and verbal communication in arranging locations for workshops and trade shows  She updates the company’s Web site and synthesizes information about new products and workshops to share with customers and sales representatives  She works with people from all over the world both through the Internet and in person at events like the trade shows

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 CHAPTER ASSESSMENT Question 1 Name at least two Web editor software programs. (Lesson 4.1) Answers may include two of the following popular Web editors, among others:  Macromedia Dreamweaver®  Microsoft FrontPage®  Adobe GoLive  NetObjects Fusion

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 CHAPTER ASSESSMENT Question 2 If you use an image as a background in a Web page, what should you be sure to check? (Lesson 4.3) Answer: Be sure the text is still easy to read. You may need to change the color or formatting of the text to increase its contrast with the background.

Glencoe Digital Communication Tools Create a Web Page with HTML 4 4 CHAPTER ASSESSMENT Question 3 Why is Web design a career field with great potential? Answers may include:  As increasing numbers of people use the Web to find information and buy products, the number of businesses that want a presence on the Web also increases.  Each year, millions of new Web sites are added to the Web. All this makes Web design a field that is growing fast and that promises great opportunities for those with the necessary skills.

Glencoe Digital Communication Tools Impact of Digital Communication Tools For more resources on this unit, go to the Online Learning Center at Unit Resources 1 1