4 HTML Basics YOU WILL LEARN TO WHY IT MATTERS... CHAPTER

Transcription

1 CHAPTER 4 HTML Basics YOU WILL LEARN TO Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create lists using HTML View an HTML document Section 4.3 Insert images using HTML Insert links using HTML Debug and test a Web page Section 4.4 Re-create an existing HTML document in Dreamweaver Test a Web page in Dreamweaver WHY IT MATTERS... Many people drive their cars every day without knowing exactly how the car works. While you can drive a car without understanding its mechanics, it is useful to understand what is happening under the hood especially if the car breaks down. Likewise, while HTML code is the basis of all Web pages, you can create a Web site without knowing any HTML at all. Still, knowing HTML is useful especially if you need to correct or modify the code used to create your page. Think about a mechanical object that you use every day. Do you understand how it works? If so, summarize how it works and explain how this understanding helps you use the object. If you do not understand how the object works, then evaluate how developing this understanding could help you use it. 96 Chapter 4

2 CHAPTER 4 WHAT YOU WILL DO... ACTIVITIES AND PROJECTS Apply It! 4.1 Write HTML Code Create an Ordered List Insert an Image Change Colors You Try It Activities HTML Activities 4A Create Folders to Organize a Site B Create and Save an HTML Document C Add Color and Format Text D Create an Unordered List E View HTML in a Browser F Insert an Image G Insert Absolute Links H Test an HTML Document Dreamweaver Activities 4I Create and Format a Page J Add Headings and Unordered Lists K Insert a Graphic and Links L Test a Web Page BEFORE YOU READ Chapter Assessment Making Connections Standards at Work Teamwork Skills Challenge Yourself You Try It Skills Studio Create a Home Page Using HTML Create a Links Page Using HTML Web Design Projects Create a Home Page Using HTML Add Pages in Dreamweaver Evaluate Technology Resources Create a Web Page Using HTML Create a Community Web Site IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects ON THE WEB Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments Create Memory Tools Successful readers use mind tricks to help them remember. An old but proven strategy is to make associations with new ideas you are learning. For example, the term WYSIWYG (wiz-zee-wig) stands for What You See Is What You Get and illustrates the concept of a computer application that lets you see on the monitor exactly what appears when the document is printed. As you read the chapter, look for opportunities to make up your own memory tools. WebDesignDW.glencoe.com HTML Basics 97

3 SECTION 4.1 HTML CODING Focus on Reading Read to Find Out The main purpose of this section is to explain Hypertext Markup Language (HTML), which is the code that is used to create Web pages. As you read, pay close attention to how HTML tags work. Main Ideas An HTML document is composed of instructions, or tags. These tags tell Web browsers how to display the content contained in a Web page. The World Wide Web Consortium establishes guidelines and standards for using HTML. Key Terms Hypertext Markup Language (HTML) HTML tag starting tag ending tag nested tag empty tag source code Reading Strategy List four types of tags and give examples of each. Use a table like the one below (also available online). Types of Tags Example Hypertext Markup Language, or HTML, is the code used to create Web pages. Knowing HTML will help you understand how Web site development applications like Dreamweaver work. And it will help you customize pages created in Dreamweaver. HTML Tags How can I use HTML code to create a Web page? You create Web page documents by inserting HTML tags into a text document. An HTML tag consists of text that appears between two angle brackets (< >). This text tells the Web browser how to display a page s content. You can use a text editor to enter HTML code into a text document, or you can use a Web site development application like Dreamweaver to automatically create the HTML code for you. See Appendix B for a complete list of the HTML tags and their functions. Tag Sets HTML tags often come in pairs that are called tag sets. Each pair includes a starting tag (also called an opening tag) and an ending tag (also called a closing tag). These tag sets tell a browser where formatting should start and end. A forward slash in the brackets indicates an ending tag. This example shows a tag set that makes text bold. Starting tag <STRONG>very</STRONG> Ending tag 98 Chapter 4 WebDesignDW.glencoe.com

4 The HTML tags below format the sentence as a paragraph, display the word very in italics, and format the word HTML in bold: <P>It is <EM>very</EM> important to carefully proofread your <STRONG>HTML</STRONG> code.</p> If the above code were placed in an HTML document and displayed in a Web browser, it would appear as shown in Figure Notice that you do not see the HTML tags in the browser. The tags tell the browser how to display the information between the tags, but they themselves are not shown. Figure 4.1 This example shows text that was formatted using several HTML tags. How would you alter the code to make the word very bold? Nested Tags Nesting refers to the order in which HTML tags appear. A nested tag is a tag enclosed inside another set of tags. In the example above, the italic tag set (<EM></EM>) and the boldface tag set (<STRONG></STRONG>) are nested within the paragraph tag set (<P></P>). When you nest tags, make sure you close the tag when you want that formatting to stop. In the example below, the Web browser will keep formatting text as bold <STRONG> until it comes to an end tag that tells it to stop </STRONG>. Tags should close in reverse order of how they were opened, so the last tag you open will be the first tag to be closed. <HTML><P><STRONG>very</STRONG></P></HTML> Empty Tags While most HTML tags are used in pairs, some are not. A tag that requires only an opening tag is called an empty tag (sometimes referred to as an orphan tag). Some common empty tags include: the <BR> tag (used to add a line break). the <HR> tag (used to insert a horizontal line). the <IMG> tag (used to insert an image). For example, to add a line break, enter <BR>. Or insert a horizontal line with the <HR> tag. Both of these tags are empty and have no closing tag. Identify What are tag sets? HTML Basics 99

5 Activity 4.1 Use HTML Tutorials Learn more about HTML guidelines by accessing online tutorials at WebDesignDW.glencoe.com. HTML Guidelines and Standards Why is it important to follow W3C specifications? The World Wide Web Consortium (W3C) releases specifications, called recommendations, on HTML and other languages used on the Internet. At the W3C Web site, you can read the complete specifications for the most recent version of HTML (at the time of writing, this version was HTML 4.01). The specifications developed by the W3C help ensure that Web designers create pages that can be displayed by any browser or browsing device that also follows these specifications. You should therefore follow these specifications when creating HTML code so that your Web pages can be viewed by as many people as possible. HTML and Spacing Understanding basic guidelines for using HTML code will help you see the relationship between the code you write and what you see in the Web browser. For example, HTML documents display a single space between words. If you use the space bar, Tab key, or Enter key to add spaces between words, you will not necessarily see those spaces in your Web page in your browser. Look at the following lines of HTML code. <STRONG>HTML code</strong> <STRONG>HTML <STRONG> code</strong> HTML code</strong> Notice how the space between the words HTML and code is different in each line. However, when displayed in a browser, each line of text looks the same, as shown in Figure 4.2. Figure 4.2 Extra spaces between elements in an HTML document will not display in a Web browser. How would the text in the third line of code display if you reduced space between the <STRONG> tag and HTML in the code? HTML and Case Sensitivity HTML tags are not case sensitive. This means that browsers do not care whether a tag is in uppercase or lowercase letters (see below). A browser will read the tag <STRONG> and <strong> the same way. The W3C s specifications for HTML 4.01 state that all tags should be uppercase. <HTML> <html> <HtmL> 100 Chapter 4 WebDesignDW.glencoe.com

6 Viewing Source Code You can see the HTML commands used to create any Web page by viewing its source code. A Web page s source code is the text and HTML elements used to create that page. In most browsers, you can see the source code by selecting either Source or Page Source from the View menu. In Dreamweaver you can see the source code by selecting the Code view button in the Document toolbar. Dreamweaver also offers Split view, which allows you to see both the Web page and its source code on the same screen. XHTML Extensible Hypertext Markup Language (XHTML) will soon replace HTML as the Web s main markup language. Developed by the W3C, XHTML is a hybrid of HTML and Extensible Markup Language (XML). The advantage of XHTML is that pages written in the language can be read by many different platforms. While XHTML is very similar to HTML, it does follow some different specifications. XHTML documents must start with a Document Type Definition or DTD (you will learn more about DTDs in the next section). XHTML is case sensitive and all tags and attributes must be lowercase. Mixing uppercase and lowercase tags could lead to errors. In XHTML, all attributes must be in quotes and include values. In XHTML, ending tags are required with a few exceptions. Explain How can you see the HTML tags of any Web page? Section 4.1 Assessment Reading Summary HTML tags tell the Web browser how to display a Web page s content. You can use tags such as <STRONG>, <EM>, and <P> to format text. You can nest tags within one another. While most tags are used in pairs, some tags are empty tags. The World Wide Web Consortium (W3C) provides specifications for HTML. What Did You Learn? 1. Define Hypertext Markup Language (HTML), HTML tag, starting tag, ending tag, nested tag, empty tag, source code. 2. Name four types of HTML tags and explain each one s purpose. 3. Explain how to view the source code of a Web page in Dreamweaver. Critical Thinking 4. Evaluate Why is a basic understanding of HTML an important skill for a Web designer? 5. Analyze Why must you be careful to include all end tags when using HTML? What would happen if you forget to include an end tag in your code? Apply It! Write HTML Code Write the HTML code to display the following sentence in a Web browser. Be sure your code formats the sentence as shown: HTML code allows information to be displayed in a Web browser. HTML Basics 101

7 SECTION 4.2 USING A TEXT EDITOR Focus on Reading Read to Find Out This section discusses how to use a text editor to create a Web site. Read to find out how Web designers use HTML tags to format text and create lists on Web pages. Main Ideas You can use a text editor to create text documents that can be displayed in a Web browser. These documents must contain HTML commands. Always organize your folders and files carefully when creating a Web site. Key Terms file name extension attribute ordered list unordered list Reading Strategy Compare and contrast ordered and unordered lists. Use a Venn diagram like the one below (also available online). Ordered List Unordered List In this section, you will use the text editor Microsoft Notepad to create an HTML document. (Notepad is part of the Microsoft Windows OS) Structure It is good practice to create a folder for your Web site before you define the site. You can then create subfolders for the site s images and pages within this main folder. Organizing Files and Folders Why is it important to organize a Web site s files? Every Web site is composed of folders and files. When you define a new Web site in Dreamweaver, the program can automatically create a folder for you if one does not exist. When you use a text editor, you must manually create all of the folders that will hold your Web site s components. It is essential that you keep your Web site s files organized. When you add graphics and create hyperlinks in an HTML document, you must include instructions that tell the Web browser which file to access and where to find it. Having well-organized files makes it easier to add this information to your HTML document. ACTIVITY 4A Create Folders to Organize a Site 1 Identify the location where you are storing your Web sites. Ask your teacher for help if needed. 2 In your general folder, create a new root folder named MySkills1. 3 In the MySkills1 folder, create a folder named images. You will store the images for the MySkills1 Web site in this folder. 4 Locate the DataFiles\Ch04\Images folder. Copy the data file p_border.gif into the images folder you just created. Describe What do you store in a Web site s images folder? 102 Chapter 4 WebDesignDW.glencoe.com

8 Using Notepad What are the three main parts of an HTML document? Using Notepad is like using a word processing application. However, unlike word processors, Notepad does not contain toolbars and other features. Creating an HTML Document in Notepad An HTML document has three main parts: the Document Type Definition (DTD), the header, and the body. These three parts are shown in Figure 4.3. Figure 4.3 Most HTML documents have a basic structure similar to the one shown here. What is the function of the <HTML> tag? Document Type Definition (DTD) Start HTML Header Body End HTML <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN > <HTML> <HEAD> <TITLE>DOCUMENT TITLE</TITLE> </HEAD> <BODY> CONTENT </BODY> </HTML> A DTD specifies what version of HTML is used in your page. The <HTML> tag tells the browser to interpret every tag as HTML code until it reaches the </HTML> tag. The <HEAD></HEAD> tag set, or header, provides information to the browser about your page, such as its title and author. This information is used to catalog the page and does not appear in the browser. The page s title is displayed in the browser s title bar, and not on the Web page itself. The <BODY></BODY> tag set encloses the code for the content you see displayed in the browser s window. Most HTML documents only contain one header tag set, and one body tag set. Saving an HTML Document in Notepad There are some guidelines you should follow when naming and saving your Web site s files. Naming Files Keep your file names descriptive but relatively short. Use the underscore character to indicate a blank space between words in a file name. For example, name a file contact_us.html, rather than contact us.html. It is also a good idea to use only lowercase letters when naming files. Choosing File Extensions A file name extension tells the computer what type of file it is reading. Notepad automatically saves all files as text files with the extension.txt. Since Web browsers cannot read this extension, you must change it to an.html extension when you save an HTML document. You Should Know While you can also save an HTML file with an.htm extension, it is recommended that you use.html instead. This is because some older computers will not recognize.htm, while.html is recognized by almost every server operating system. HTML Basics 103

9 ACTIVITY 4B Create and Save an HTML Document Figure 4.4 These tags form the basic structure of an HTML document From the Start menu, select All Programs (or Programs)> Accessories>Notepad. In Notepad, key the text shown in Figure 4.4. Leave blank lines as indicated so you can add more HTML code later. Choose File>Save. In the Save As dialog box, browse to the MySkills1 folder and open it. In the File name box, key: skills1.html. Click the Save as type dropdown arrow and select All Files (this allows you to save an.html file in Notepad). Your dialog box should look like Figure 4.5. Click the Save button to save your file. The file will be stored in the MySkills1 folder. Figure 4.5 Always verify that you are saving the file to the correct folder and as the correct type of file. The file extension must be.html or.htm. Identify What is the function of a DTD? Shortcut To enter a left angle bracket (<), press Shift + the comma key. For a right angle bracket (>), press Shift + the period key. Adding Attributes Using HTML How can attributes enhance a Web page? Some HTML tags can contain properties, or attributes. An attribute is an instruction that further specifies a tag s characteristics. Attributes allow you to assign colors, styles, and alignment to a page. You place attributes in opening tags. The attribute has a name, an equal sign (=), and a descriptor that must appear in quotes to conform to HTML specifications. The attribute must also be lowercase to meet specifications. 104 Chapter 4

10 Font Color Attributes In HTML, you use the attribute color to change the text s color. The descriptor then specifies which color to use. In the following example, the attribute color= green will make the word grass appear green in a Web browser. When viewed in a browser, the code will look like Figure 4.6. <P>They say the <FONT color= green >grass</font> is greener over there.</p> Figure 4.6 The browser interprets the HTML code and places the word grass in green. What would happen if the </FONT> tag were moved and placed after the word greener? The easiest way to specify a color is to use one of 16 named colors, such as red, blue, white, or green. You can also use one of the 216 hexa decimal colors (see Appendix C for a complete list of named and hexadecimal colors). In this system, each color is represented by a six-character number/letter combination. In the current HTML standards (the standards followed in this chapter), the letters in a hexadecimal color are capitalized, while in XHTML coding, they are lowercased. Background Color Attributes You can use one of the 16 named colors or a hexadecimal color to specify a page s background color by adding attributes to the <BODY> tag. The following tag uses the attribute bgcolor to make the background color green. <BODY bgcolor= #33CC33 > Attribute name Hexadecimal color Heading Tags and Alignment Attributes Headings break text into short, readable sections. In this book, you will notice different sized headings. In HTML coding, you can define six heading levels by using the tag sets <H1></H1> for the largest heading, <H2></H2> for the next largest heading, and so on to <H6></H6>. All text on a Web page automatically aligns to the left margin. To change the alignment of your text or headings, you can add the align attribute, as follows: <H1 align= center > You Should Know The align attribute does not work with the tags <FONT> or <STRONG>. This is because those tags change the style of the text, but not the alignment. HTML Basics 105

11 ACTIVITY 4C Add Color and Format Text Using HTML 1 To open your skills1.html document, open Notepad and choose File>Open. Under Files of type, select All Files. Troubleshooting When opening an HTML file in Notepad, make sure you select All Files. Otherwise, files with an.html or.htm file extension may not appear in the dialog box. 2 To add the background color yellow to the page, edit the opening <BODY> tag so that it appears as follows: <BODY bgcolor= #FFFFCC >. 3 Move the insertion point to the line below the body tag. To create the blue heading for the page, key: <H1 align= center ><FONT color= #6666FF >Web Design Skills</FONT></H1>. 4 Press Enter twice. To create the first dark blue subheading, key: <H2><FONT color= # >Skills I Already Have</FONT></H2>. 5 Press Enter twice. To create the second dark blue subheading, key: <H2><FONT color= # >Skills That I Will Learn</FONT></H2>. 6 Select File>Save to save your document. Define What is an attribute? Creating Lists Using HTML What is the difference between an ordered and an unordered list? Lists help make text easier to read and add visual interest to a page. Lists can also help readers identify key points on a page more quickly. Types of Lists There are two types of lists (see Figure 4.7): An ordered list displays items that must appear in a particular sequence, such as the steps required to complete a task. Use the tags <OL></OL> to create an ordered list. An unordered list contains items that can appear in any order. Use the tags <UL></UL> to create an unordered list. When you create either an ordered or an unordered list, each item in the list is contained within the tags <LI></LI>. Figure 4.7 Because numbers precede each item in an ordered list, these lists are often called numbered lists. A bulleted list is an example of which type of list? Ordered List 1. Open Notepad. 2. Enter HTML code. 3. Save the file. Unordered List Starting tags Ending tags Nested tags 106 Chapter 4

12 ACTIVITY 4D Create an Unordered List Using HTML 1 Open your skills1.html document in Notepad. Position the insertion point at the end of the line that includes the text Skills I Already Have. Press Enter. Key: <UL>. Press Enter. 2 Enter the code for the first unordered list (see Figure 4.8). Press Enter after keying each item. 3 Key </UL> to indicate the end of the first unordered list. 4 Position the insertion point at the end of the line that includes the text Skills That I Will Learn. Press Enter. Key: <UL>. Press Enter. Key the code for the second unordered list (see Figure 4.8). Press Enter after keying each item. 5 Key: </UL> to indicate the end of the second unordered list. Select File>Save. Your document should look like Figure With your teacher s permission, select File>Print. In the Print dialog box, click Print. Carefully proofread the printed document. Make needed corrections and save again. Ask your teacher how you should include your name in the document. Save and close your document. Troubleshooting As you enter code into Notepad, be sure to proofread your work carefully. Missing elements or misspelled HTML tags can cause your Web page to display incorrectly. Figure 4.8 Make sure that each item in the unordered list has an opening and ending tag. First unordered list Second unordered list Identify What are the tags for the two types of lists? HTML Basics 107

13 Viewing an HTML Page How can you view a Web page created in a text editor? When you use a text editor, you cannot see how your page will appear in a Web browser while you are creating it. Instead, you must save the HTML document and then view it in a browser. If you need to make changes, reopen the page in Notepad, make corrections, resave it, and then reopen the file in the browser. ACTIVITY 4E View HTML in a Browser 1 Start your Web browser. Select File>Open (or Open File). Browse to your MySkills1 folder. Select skills1.html and click Open. 2 Click OK. Your code is translated into a Web page (see Figure 4.9). Select View>Source to view your page s source code. Close your browser. Figure 4.9 HTML document viewed in a Web browser. Summarize Why do you have to view a page created by a text editor in a browser? Section 4.2 Assessment Reading Summary When creating a Web site, organize its files and folders so that you can easily locate various page components. Attributes within HTML tags specify characteristics such as font colors. What Did You Learn? 1. Define file name extension, attribute, ordered list, unordered list. 2. Discuss two guidelines for naming files. 3. Explain why an HTML file must have an.html extension. Critical Thinking 4. Analyze Why should you have a specific plan when organizing your Web site s files and folders? 5. Compare and Contrast When is it better to use an unordered list? An ordered list? Give examples and explain your choices. To view the Web page you created in a text editor, you must open it in a Web browser. Apply It! Create an Ordered List Using Notepad, create an ordered list of your five favorite books with your most favorite book listed first. With your teacher s permission, print your Notepad document and then print the page from a browser. 108 Chapter 4

14 SECTION 4.3 ENHANCING AND TESTING YOUR HTML PAGE Focus on Reading Read to Find Out This section explains how to enhance a Web page by using HTML to insert graphics and links. Pay close attention to the HTML tags that are used to create these links. Main Ideas Use image tags to insert graphics using HTML. You can create links by using an anchor tag to specify the clickable area. A link can be absolute or relative. Web pages must be tested. Key Terms anchor tag text link graphic link relative link absolute link debugging testing Reading Strategy Compare and contrast absolute and relative links. Use a chart like the one below (also available online). Absolute Links Relative Links You create Web pages in stages. Adding new components one at a time allows you to correct errors as you go. Adding Images Using HTML How does an image tag work? You use the image tag <IMG> to insert an image into a Web page. When a browser loads the page, the <IMG> tag locates the image and displays it in the browser. An image tag contains five common attributes: src: specifies the source location of the image. alt: gives the browser an alternative text message to display if the image is missing. align: wraps text around the image. border: places a border around an image. width and height: specifies the image s width and height. You Should Know When creating an image tag, you should always use the src and alt attributes. The align, border, width, and height attributes are optional. src alt align <IMG src= images/book.gif alt= Books align= center border= 0 width= 40 height= 30 > border width and height WebDesignDW.glencoe.com HTML Basics 109

15 ACTIVITY 4F Insert an Image Using HTML 1 Open your skills1.html page in Notepad. 2 Position the insertion point at the end of the <H1> heading and press Enter. The insertion point should be positioned as shown in Figure Figure 4.10 Position your insertion point as shown in the figure. Insert image tag here 3 Key the following to insert the border graphic stored in your Web site s images subfolder: <IMG src= images/p_border.gif alt= Border >. Save your document. List What are the five common image tag attributes? Inserting Links Using HTML What type of links can be inserted into a Web page? Hyperlinks can be categorized as external, internal, or intrapage, depending on where they send the user. You use anchor tags to insert links into an HTML document. Using Anchor Tags An anchor tag identifies what is clicked on and where the link takes the user. The <A></A> tag set is used to create all links. This tag set uses the href attribute (short for Hypertext Reference) to tell the Web browser where it needs to link to. The attribute contains hyperlink information that directs a Web browser to a new file or Web site. Text and Graphic Links Hyperlinks can also be categorized according to how users activate the link. For example, you can make any text or image into a hyperlink. In Figure 4.11 on the next page, both the text link and the graphic link will take you to the Century Public Library home page. 110 Chapter 4

16 Figure 4.11 HTML allows you to create links that have text or graphic anchors. Why would you use a graphic link instead of a text link? Text link Graphic link Text Links A text link is text a user clicks to activate a hyperlink. For example, the following code tells the browser to display the text Century Public Library as a hyperlink: <A href= > Century Public Library</A> Graphic Links A graphic link is an image a user clicks to activate a link. The anchor tag for a graphic link identifies the image users must click to activate the link. For example, in the code below, users must click the book.gif graphic to activate the link to the Century Public Library. The anchor tag for this link contains a nested image tag: <A href= > <IMG src= images/book.gif alt= Books align= left border= 0 width= 40 height= 30 ></A> Relative versus Absolute Links Text and graphic links can be categorized as either relative or absolute. Relative Links The code used to create a relative link contains the name of the file being linked to. For example, in the relative link below, users must click the text More Design Tips to go to the Web page file design_tips.html. A relative link only works if the document being linked to is in the same Web site folder as the document containing the link. The link is relative because it links pages within the same Web site. As long as the Web site s file structure does not change, the relative links will work. It is a good idea to use relative links when linking to files within a Web site. <A href= design_tips.html >More Design Tips</A> Activity 4.2 Identify Absolute and Relative Links Learn more about absolute and relative links by visiting WebDesignDW.glencoe.com. WebDesignDW.glencoe.com HTML Basics 111

17 Figure 4.12 The links appear at the bottom of the Web page. Absolute Links The code used to create an absolute link contains the complete URL or path of the file being linked to. For example, the links to the Century Public Library are absolute links because they contain the complete URL for the library s Web site. An absolute link requires the full file path because it absolutely must follow this path to link to the file. External links (links to objects outside a Web site) are often absolute links. ACTIVITY 4G Insert Absolute Links Using HTML 1 Open your skills1.html page in Notepad. 2 Place the insertion point at the beginning of the closing </BODY> tag. Press Enter twice. Place the insertion point above the </BODY> tag. 3 Key: <P><STRONG>Here are some additional links on Web design and related topics:</strong></p>. 4 Press Enter. Insert this link: <A href= >World Wide Web Consortium</A><BR>. 5 Press Enter. Insert this link: <A href= webmaster.indiana.edu/ >Indiana University Webmaster</A>. 6 Save your Web page. It should look similar to Figure Links inserted here Describe What is the difference between absolute and relative links? 112 Chapter 4

18 Testing a Web Page Why is it important to test Web pages? Debugging refers to locating and correcting any obvious errors in your code. You should try to debug your work regularly as you build your sites. A number of applications have been developed to debug HTML code. These applications are called HTML validators. With an HTML validator, you submit your HTML file and, if the code contains errors, the validator generates an error list. The World Wide Web Consortium Web site offers a validator for checking Web page code. With your teacher s permission, you can use this validator to check your own HTML documents. Testing involves checking the page to make certain that it displays as designed. Test your site in both Internet Explorer and Netscape Navigator and in any other browser you think your audience may use. Always double check that links work properly. External links are particularly important to check because sometimes pages get removed from the Web or their URLs change. ACTIVITY 4H Test an HTML Document 1 Open your skills1.html file in your browser. Your screen should look similar to Figure Figure 4.13 The finished Web Design Skills page as displayed in Microsoft Internet Explorer. HTML Basics 113

19 2 Check the following items: Does the text contain any spelling errors? Do the headings display properly? Does the image appear in the correct location? Do bullets appear in front of each item in the unordered lists? Does each link work properly? 3 If you need to make corrections, first close your browser, then open the page s file in Notepad. Analyze the source code to locate the errors. Fix any errors that you identify. Save the file. 4 Test the page again in a Web browser. Open your page in other browsers if possible. Check the items in Step 2. Make any corrections. 5 Save the file, and test the page again. 6 Be sure to view the page in as many browsers as possible. Also try to view the page on different operating systems. You have used a text editor to create a simple Web page. When you know HTML code, using a text editor can be an inexpensive way to develop a basic Web site. Summarize What does it mean to debug code? Section 4.3 Assessment Reading Summary The <IMG> tag inserts a graphic into a page. Always include the src and alt attributes. The <A> tag inserts a link. The href attribute specifies the location (or object) being linked to. An absolute link lists the complete URL or path of the linked file. A relative link contains only a partial URL or folder location. You must test a newly created Web page in several browsers to make certain it works properly. What Did You Learn? 1. Define anchor tag, text link, graphic link, absolute link, relative link, debugging, testing. 2. List and describe the two attributes that you should use with every <IMG> tag. 3. Describe the process of testing a Web site. Critical Thinking 4. Analyze Links Does the following HTML statement contain an absolute link or a relative link? Explain. <A href= products.html > Product List</A> 5. Evaluate Links When should you use an absolute link? A relative link? Give examples and explain your choices. Apply It! Insert an Image Write the HTML code to insert an image named frame.gif into a Web page. The image file is stored in the site s images folder. Center the image and include an alternate text message to display. 114 Chapter 4

20 Web Languages Web designers who wish to do more than simply display text and graphics need tools beyond HTML. Newer Web languages are enabling designers to create Web pages that can perform complicated and meaningful tasks. Extensible Markup Language (XML) Whereas HTML tags only format documents, XML uses tags that let the computer identify what the information is. In this way, XML documents function more like databases than like traditional documents. For example, if you are searching HTML pages for someone named Bill, you might also find pages on congressional bills, electricity bills, duck bills, etc. Searching XML documents for <first-name> tags that contain the word Bill would give you better results. XML tags can be used to make text readable across many applications and platforms. JavaScript (Java) XML is changing the way business is done on the Web. Multiple computers are more easily able to connect and work from different locations. Because XML-tagged documents can identify each piece of information, Internet searches are also smarter. JavaScript is a computer programming code that is read by a built-in interpreter inside an Internet browser. This means it can be used to manipulate and interact with elements on a Web page. While JavaScript is currently used for simple tasks, such as checking form data for validity, or serving as the connector between different technologies, its crossplatform design is changing the world of technology. Integrated cell phones, PDAs, and portable computer systems will be better able to communicate over separate, and different, operating systems. 1. Research Languages Research new or emerging languages used for Web site development. Compare and contrast at least two of these new languages with HTML. 2. Evaluate Why do you think new markup and scripting languages and methods are always being developed? Why is HTML alone not enough to develop the kinds of Web sites people now demand? HTML Basics 115

21 SECTION 4.4 DREAMWEAVER VERSUS NOTEPAD Read to Find Out Focus on Reading The main purpose of this section is to show the advantages of using a Web site development application instead of a text editor. As you read about adding features in Dreamweaver, remember how you added these same features using Notepad. Read to find out how Dreamweaver makes many of these tasks easier and more efficient. Main Ideas A Web site development application allows you to create Web sites by clicking buttons instead of typing HTML commands into a text document. Key Terms color palette border Reading Strategy Identify the steps involved in testing a Web page. Use an organizer like the one below (also available online). In the previous section, you used Notepad to create a single Web page named Web Design Skills. In this section, you will re-create this page using Dreamweaver. While both versions are composed of HTML commands, you will see that creating the page in Dreamweaver is much different from creating it in Notepad. Adding Color and Formatting Text in Dreamweaver How is applying formatting different in Dreamweaver than in Notepad? A major advantage of using Dreamweaver is that you can see approximately how your final page will appear while you are working on it. This allows you to make adjustments, such as changing font size or background color as you go. Selecting a Background Color in Dreamweaver Dreamweaver provides different ways to select background colors for Web pages. To select a color, you can: enter hexadecimal numbers into the Background color box in the Page Properties dialog box. choose a color from a color palette, which is a menu of colors available in the Dreamweaver program. In the next activity, you will create a Web site and set the background color of a page in that site. This will provide the basic framework in which to build your Web site. 116 Chapter 4 WebDesignDW.glencoe.com

22 ACTIVITY 4I Create and Format a Page in Dreamweaver 1 Start Dreamweaver. On the Start page, in the Create New column, click Dreamweaver Site. Name the new site MySkills2. Follow the steps to define a new Web site (see You Try It activity 2A for a review of these steps). 2 In the Create New column, click HTML. Make certain you are viewing the new file in Design view. Choose File>Save As (or press Ctrl + Shift + S). In the Save As dialog box, save your HTML file as skills2.html. 3 On the Properties inspector, click the Page Properties button. In the Page Properties dialog box, click the Page font drop-down arrow and select Georgia, Times New Roman, Times, serif. 4 Click inside the Background color box. Key #FFFFCC or select light yellow from the palette (see Figure 4.14). Figure 4.14 Key your background color into the Background color box. 5 Under the Category column, click Title/Encoding. In the Title box, key My Web Design Skills. The dialog box should look like Figure Click OK. Click the Save button. Figure 4.15 The options in the Page Properties dialog box change when a different category is selected. HTML Basics 117

23 Creating Headings and Lists in Dreamweaver In this activity, you will add both headings and unordered lists to your Web page. To create an unordered list, select the text and click the Unordered List button on the Properties inspector. To create an ordered list, click the Ordered List button instead. ACTIVITY 4J Add Headings and Unordered Lists in Dreamweaver 1 Make certain that your skills2.html page is open in Design view. With the insertion point at the top of the page, key: Web Design Skills. 2 Select the heading Web Design Skills. In the Properties inspector, click the Format drop-down arrow and choose Heading 1. 3 In the Properties inspector, click the Align Center button to center the heading. 4 On the Properties inspector, click in the Text color box and key: #6666FF. Your screen should look like Figure Press Enter. Text color Figure 4.16 Key a hexadecimal value into the Text color box to change a font s color in Dreamweaver. 5 In the Document window, position the insertion point at the end of the heading and press Enter. Key the subheading: Skills I Already Have. 6 Select the subheading and click the Align Left button on the Properties inspector. The subheading moves to the left margin. 7 With the subheading still selected, click the Format drop-down arrow and choose Heading 2. 8 In the Text color box, replace the hexadecimal value of #6666FF with # Make sure the subheading is still selected and press Enter. 9 Position the insertion point at the end of the subheading and press Enter. On the Properties inspector, click the Unordered List button. 10 Key the first bulleted item in the list below. Press Enter to create the next bulleted item. Continue until you have entered all the items. I can operate my computer s hardware. I can use Dreamweaver to create simple Web sites. I can insert previously made graphics into my Web pages. I can insert links into my Web pages. 118 Chapter 4

24 11 Press Enter twice to move the insertion point down two lines. This will also end the unordered list. Key: Skills That I Will Learn. 12 Select the second subheading and format it Heading 2. In the empty Text Color box, key the hexadecimal value of # Make sure the second subheading is still selected and press Enter. 13 Position the insertion point after the subheading and press Enter. 14 On the Properties inspector, click the Unordered List button. 15 Key the first item in the list below. Press Enter to create the next bulleted item. Continue until you have entered all the items. I will learn to use Notepad to create HTML documents. I will learn to create Web pages that are well designed. I will learn to use color and images appropriately. I will learn to create and modify graphics. 16 Proofread your text. Your Web page should resemble Figure Save your Web page. Figure 4.17 You use the Unordered List button to create a bulleted list in Dreamweaver. Summarize How can you select background colors in Dreamweaver? HTML Basics 119

25 Adding Graphics and Links How does a border enhance a Web site? In the following activity, you will add a border to your page. A border is a visual break on the page. It adds visual interest and helps separate items on a page. ACTIVITY 4K Insert a Graphic and Links in Dreamweaver Troubleshooting If you have trouble opening the graphics file, check with your teacher to make sure a graphics editor has been selected. 1 Open the general folder that contains your MySkills2 folder. Open your MySkills2 folder. Inside this folder, create a new folder named images. 2 Open the DataFiles\Ch04\Images folder. Select the file p_border.gif. Copy this file to the images folder in your MySkills2 folder. 3 In Dreamweaver, make certain that your skills2.html page is open in Design view. Position the insertion point at the end of the Web Design Skills heading. Press Enter. 4 On the Insert toolbar, click the Images button (make sure the toolbar is in Common view). In the Select Image Source dialog box, click the Look in drop-down arrow and browse to your MySkills2 folder. Open the images folder and select the p_border.gif file. Click OK. The border image is inserted into your Web page. 5 Position the insertion point at the end of the last bulleted item on your page. Press Enter two times. This will move the cursor down two lines and end the bulleted list. 6 On the Properties inspector, click the Bold button. Click the Size drop-down arrow and select 16. Key the following: Here are some additional links on Web design and related topics: 7 Press Enter. Click the Bold button to deselect it. Make sure the Size is still set to With the Insert toolbar in Common view, click the Hyperlink button. In the Hyperlink dialog box, in the Text box, key: World Wide Web Consortium. In the Link box, key Your dialog box should look like Figure Click OK. Figure 4.18 In the Hyperlink dialog box, enter both the text for the text link and the link s URL. 120 Chapter 4

26 9 Position the insertion point after the link. Press Enter. 10 Click the Hyperlink button. In the Text box, key: Indiana University Webmaster. In the Link box, key: Click OK. Click once after the hyperlink to deselect it. If necessary, select the text and change its text size to 16. Your page should look similar to Figure Figure 4.19 Final page created using Dreamweaver. 11 To view the source code for your Web page, switch from Design view to Code view. Dreamweaver automatically enters the HTML code for you, as shown in Figure Switch back to Design view. Save your work. Figure 4.20 Use Code view to view the source code for your Web page. Define What is a border? HTML Basics 121

27 Testing a Web Page Why is it important to test a Web page? Whether you use Notepad or Dreamweaver to create your HTML document, you must test your page. Visitors will not trust a page that contains errors or broken links. Carefully proofread and spell check your Web page. Always examine your page in more than one browser to make sure each line works properly and check all of your hyperlinks. ACTIVITY 4L Test a Web Page in Dreamweaver 1 Open your skills2.html page in Design view. Position the insertion point before the Web Design Skills heading. 2 From the Text menu, select Check Spelling. The Check Spelling dialog box opens if spell check detects an error. Key the correct spelling in the Change to box. You can also select the correctly spelled word from the Suggestions list, if available. Select Change when finished. 3 With your teacher s permission, select File>Print. Proofread and correct your page. Save your corrections. 4 Choose File>Preview in Browser. View your page in the Web browsers available on your computer. Test your hyperlinks to be sure they take you to the correct Web pages. Make certain the page components, such as headings, bullets, and hyperlinks, display properly. Close your browser(s) when finished. Save your Web page. Exit Dreamweaver. Identify What menu do you use to check spelling in Dreamweaver? Section 4.4 Assessment Reading Summary A Web page that was created using Notepad can also be created using Dreamweaver. Because Dreamweaver provides a WYSIWYG editor, you do not need to enter HTML tags. Careful proofreading and testing are a vital part of creating a Web page. What Did You Learn? 1. Define color palette, border. 2. Describe each alignment button available in Dreamweaver. 3. Explain how you would create an unordered list in Dreamweaver. Critical Thinking 4. Analyze What are the advantages of using hexadecimal numbers for colors rather than using the Dreamweaver color palette? 5. Compare and Contrast How was creating hyperlinks in Dreamweaver different from creating them in Notepad? Apply It! Change Colors In Dreamweaver, open your MySkills2 site. Find three colors in the hexadecimal chart in Appendix C. Enter each color in the background color field of the Page Properties dialog box. Which background color looks best? Why? Do not save your changes. 122 Chapter 4

28 CHAPTER 4 Reading Review SECTION 4.1 HTML Coding Key Terms Hypertext Markup ending tag, 98 Language (HTML), 98 nested tag, 99 HTML tag, 98 empty tag, 99 starting tag, 98 source code, 101 Main Ideas HTML tags tell the Web browser how to display a Web page s content. You can use tags such as <STRONG>, <EM>, and <P> to format text. You can nest tags within one another. While most tags, such as <BODY> and </BODY>, are used in pairs, some tags, such as <BR> and <HR>, are empty tags. The World Wide Web Consortium provides specifications for various Web-based technologies, including HTML. SECTION 4.2 Using a Text Editor Key Terms file name extension, 103 ordered list, 106 attribute, 104 unordered list, 106 Main Ideas When creating a Web site, organize its files and folders so that you can easily locate various page components. You must save a Web page file with an.html or.htm extension so that browsers can identify it as an HTML document. Attributes within HTML tags specify characteristics such as background and font color and font size. Ordered (or numbered) lists contain sequential items, while unordered (or bulleted) lists contain items that can appear in any order. To view the Web page you created in a text editor, you must open it in a Web browser. SECTION 4.3 Enhancing and Testing Your Page Key Terms anchor tag, 110 absolute link, 112 text link, 111 debugging, 113 graphic link, 111 testing, 113 relative link, 111 Main Ideas The <IMG> tag inserts a graphic into a page. The src attribute specifies the graphic s file location, and alt provides an alternative text message to display. The <A> tag inserts a link. The href attribute specifies the location (or object) being linked to. A link s anchor can be either text or an image. An absolute link lists the complete URL or path of the linked file. A relative link is used with local files and contains only a partial URL or folder location. You must test a newly created Web page in several browsers to make certain it displays properly and all of its links work correctly. SECTION 4.4 Dreamweaver Versus Notepad Key Terms color palette, 116 border, 120 Main Ideas A Web page that was created using Notepad can also be created using Dreamweaver. Because Dreamweaver provides a WYSIWYG editor, you do not need to enter HTML tags. You can apply styles to text, such as font color and font size, to change its appearance. You can insert graphics and links by entering the Web page or file location into a dialog box. Careful proofreading and testing are a vital part of creating a Web page. HTML Basics 123

29 CHAPTER 4 Review and Assessment AFTER YOU READ Exchange Memory Tools Work with three other students to create a poster or handout that illustrates or explains four of the most helpful memory aides developed by the group. These memory aides will help the group to remember important steps or concepts. Ask your teacher for permission to display the posters in the classroom. Reviewing Key Terms 1. Which of the following is NOT an HTML tag: a. <IMG> b. </P> c. <alt> d. <BODY> 2. Explain how nested tags are different from empty tags. 3. What does it mean to view a Web site s source code? 4. What is the purpose of an attribute? 5. Describe the tag sets that are used to create ordered and unordered lists. 6. What is the purpose of an anchor tag? 7. Rewrite this statement to make it true: When a link statement contains the complete URL of the site being linked to, it will create a relative link. 8. What does it mean to test a Web site? Understanding Main Ideas 9. Explain the need for starting and ending tags. 10. Describe why it is important that your files and folders be organized. 11. Discuss the purpose of the <TITLE> tag. 12. Explain the difference between an unordered list and an ordered list. 13. Describe how to view a Web page you created in a text editor. 14. Discuss why you should always include the alt attribute in an image tag. On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers. 15. Describe the three basic parts of an HTML document and summarize their function. Part DTD Header Body 16. Explain the difference between testing a Web page and debugging it. Testing Function Debugging Critical Thinking 17. Analyze HTML The W3C Web site states that HTML is the common language for publishing on the World Wide Web. What does this statement mean? 18. Write HTML Write the HTML code to display the following sentences: The American flag is red, white, and blue. It has thirteen stripes and fifty stars. When you are finished, view your HTML code in a Web browser. Make sure your sentences are formatted as shown. Reopen your HTML document in Notepad and add a background color to your page so all of the text will display properly. 124 Chapter 4

30 CHAPTER 4 Review and Assessment 19. Evaluate Applications Create a table like the one below with two columns labeled Notepad and Dreamweaver. In the first column, list any advantages you found when creating a Web page in Notepad. In the second column, list any advantages you found when creating the same Web page in Dreamweaver. Below the table, write a few sentences summarizing what you discovered. Advantage Advantage Notepad Advantage Advantage Dreamweaver 20. Predict Outcomes A Web site s image files are stored in the images folder. What would happen if you created a link to an image file that was not stored in the images folder? 21. Compare and Contrast relative links and absolute links. Why are internal links usually relative links? Why are external links usually absolute links? Explain your answer and provide examples, if possible. You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items. On your own paper, copy and complete the chart shown below Result WebDesignDW.glencoe.com Result + + Result Read the paragraph and table below and then answer the question. An HTML document is composed of instructions, or tags. These tags tell Web browsers how to display the content contained in a Web page. starting tag ending tag nested tag empty tag HTML Terminology Tag that tells browser when formatting should start Tag that tells browser when formatting should end Tag enclosed within another set of tags Starting tag that does not require an ending tag According to the table, which of the following statements is true? HTML coding always requires a starting tag, but it does not always require an ending tag. You use an empty tag to tell the browser when formatting should end. If you want to be sure your tag will format the text properly, you need to nest the tag. A nested tag has no text between the brackets. WebDesignDW.glencoe.com Study with PowerTeach Go to the book Web site shown above. To review the main points in this chapter select e-review>powerteach Outlines>Chapter 4. Online Self Check Test your knowledge of the material in this chapter by selecting e-review>self Checks>Chapter 4. HTML Basics 125

31 CHAPTER 4 Activities 1. MAKING CONNECTIONS Social Studies Perform an Online Search Tim Berners-Lee was the individual who created HTML. Time Magazine Online voted Tim Berners-Lee into the category of the top 100 Thinkers and Scientists. Learn more about this individual. Use the Internet or other sources to research the contributions that Berners-Lee has made to the development of the Web. Then, write a two-page paper on how his work has changed the world we live in. As part of your paper, include your ideas about what the world would be like now if Berners-Lee had never made his contributions to Web development. Use a Cause-Effect chart like the one below to organize the possibilities. Internet search engines do not exist 2. STANDARDS AT WORK Information difficult to find on Internet Students use a variety of media and formats to communicate information and ideas effectively to multiple audiences. (NETS-S 4) Create an HTML Quick Reference Table Create a quick reference guide for your computer lab or classroom. The guide should describe common HTML tags and should include an example showing how each tag is used. Make of list of tags to be included. Organize the tags into the following categories: Structure Lists (both ordered and unordered) Headings (assume six levels of headings) Links (absolute and relative) Paragraph and character formats Images Create a table similar to the one below. Proofread your work carefully. With your teacher s permission, prepare copies of the reference table for your computer lab or classroom. TAG NAME DESCRIPTION EXAMPLE Structure <HTML>...</HTML> 126 Chapter 4

32 CHAPTER 4 Activities 3. TEAMWORK SKILLS Create Web Design Biographies With your teacher s permission, gather the names of each member in your team along with a short biography. As a team, use HTML to create a Web page that includes this information. Separate each team member s information with a horizontal rule. Use the <HR> empty tag to add this line. As your team develops the page, write a specification sheet describing the formats you have chosen. Use a table to record the background color, fonts, font colors, and font sizes that you have selected for your Web page. 4. CHALLENGE YOURSELF Create a Table Using HTML Key the following code in Notepad. Add a DTD, <HTML></HTML> tags, and header to your HTML document. Provide the page title Challenge Yourself Table. <BODY> <TABLE height = 200 border= 2 > <TR> <TD width= 100 height= 200 bgcolor= white > <P><STRONG><FONT color= blue size= 2 >Width 100 x Height 200</FONT></STRONG></P></TD> <TD width= 100 height= 200 bgcolor= yellow > </TD> <TD width= 350 height= 200 bgcolor= green ><H3> <FONT color= white > Width 350 x Height 200</FONT></H3></TD> </TR> </TABLE> </BODY> Save the file and view the results in a browser. Then, perform the following steps. 1 Reopen your source code. 2 Change the text in the first and third cells. 3 View the changes in a browser. HTML Basics 127

33 CHAPTER 4 Projects These exercises reinforce the skills you learned in this chapter s You Try It activities. Refer back to the You Try It activities if you need extra guidance. 1. Create a Home Page Using HTML Create a home page using HTML that lists three movies you have seen and would recommend to others. Create a folder named Movies_Seen. Use Notepad to create a basic HTML document. The page s main head will be Movies I Recommend. Save the file as index.html in the Movies_Seen folder. Use an image tag to insert the data file movies.gif (located in Data Files/Ch04/Images). Save the page in an images folder in your Movies_Seen folder. Adjust the image s height and width as needed and add alternative text. Select appropriate colors for the background and fonts. Change fonts as needed. Save your page. View the results in a browser. Make any necessary changes. View the results after making the changes. 2. Create a Links Page Using HTML Create a second page that will link to your home page. Use Notepad to create a second page titled Movie Summaries. Save the file as summaries.html in the Movies_Seen folder. List each movie s title as a heading. Key a brief paragraph summarizing each movie (but do not give away the ending!). Select appropriate colors for the background and fonts. Change fonts as needed. Save your page. Open the index.html page. Add relative links from the home page to the summaries.html page. Make the title of each movie you are recommending into a text link that takes the user to the Movie Summaries page. Use the following format to add your links: File linking to Text link <A href= summaries.html >movie title</a> Open the index.html page in your Web browser. Test all links. Make changes as needed and retest your page if necessary. 128 Chapter 4

34 CHAPTER 4 Projects Read the projects described below. Then follow the directions to complete each project. 1. Create a Home Page Using HTML You have been assigned to develop a Web site for a cross-cultural travel club. You decide that the club s home page will have a light yellow background with a large red heading that reads: Cross-Cultural Travel Club. You plan to add a travel-related image to the page. The page will also contain a short sentence describing the club s purpose and an unordered list highlighting the following upcoming events: Meeting: Wednesday, October 5 from 3:30 to 5:00 p.m., Xavier Jiminez as guest speaker Meeting: Wednesday, October 19 from 3:30 to 5:00 p.m., Barbara Lin to show slides of her trip to Taiwan Create the page using HTML (you can use Dreamweaver as your text editor). Make sure you format the sentences as seen above. Test the page in a browser and make any changes to improve the look of the page. Also print the final HTML code for your page. 2. Add Pages in Dreamweaver Use Dreamweaver to add a Meetings page to your cross-cultural travel club Web site. The Meetings page should have a light green background. On the Meetings page: Add a large heading in red: CROSS-CULTURAL TRAVEL CLUB CALENDAR. Find an appropriate graphic for this page and insert it below the main heading. Add the subheading: Meeting: Wednesday, October 5 from 3:30 to 5:00 p.m. Xavier Jiminez will talk about a conversation he had with his grandmother who is from Guatemala. He will describe the village where she was born, the life of the people there, and her experiences after moving to a large city in the United States. Add the subheading: Meeting: Wednesday, October 19 from 3:30 to 5:00 p.m. Barbara Lin will present a slide show on Taiwan. She will talk about her experiences on this trip and her visit with her parents relatives. She will show slides of the major cities as well as the countryside. Add a link from each event on the Cross-Cultural Travel Club home page to the Meetings page. On the Meetings page, add a link to the government sites for Guatemala and Taiwan. Test the site in a browser and make any necessary changes. HTML Basics 129

35 Critical Thinking: Evaluate Technology Resources A friend is starting a graphic design business. She asks you to recommend a computer that she can use for her business. In particular, she needs a computer that: is portable, so she can take it on client visits. has a lot of memory to support graphics software and other programs. has a hard drive with a large capacity. can function without wires. is made by a well-known, reliable manufacturer. 1. Use the Web or catalogs to research products that meet your friend s requirements. 2. Prepare a table like the one below to organize your research. List the information for three computers, each from a different manufacturer. MANFACTURER MODEL # PRICE FEATURES OPTIONAL FEATURES 3. Recommend one computer to your friend and give reasons for your choice. Use Technology Tools: Create a Web Page Using HTML Use HTML to create a Web page called Reference Web Sites for Online Research. Include the following elements on your page: A page title A graphic An unordered list of three Web sites that you frequently use to research school projects online When planning and creating your Web page, follow these steps: 1. Choose colors for your page, including the background color and the font colors. Choose appropriate font sizes. Select a graphic element such as a border that will work on your page. 2. Plan the content for your page. Write a short description of each research site you have chosen. Note why you think each site is a reliable resource. 3. Write the HTML code for the page. Include a link to each research site. 4. View your completed page in a browser. Check spelling and proofread your page. Test your links. Revise the HTML code to correct errors as needed. 5. Have a peer review your finished Web page, and revise your page as needed. 130 Chapter 4

36 Create a Community Web Site The Internet can be a powerful tool for social change. In 1997, Jody Williams won a Nobel Prize for her work to outlaw land mines. Using s and the World Wide Web, she organized citizen s groups around the world and helped forge a coalition among the world s nations. Select a community or national issue that is important to you. Create a one page Web site that tells other teens about this issue, and lets them know what actions they can take to become more involved. When creating your Web site, follow these steps: 1. Plan the site s content. Research the issue using reliable resources. Try to locate different perspectives on the issue and identify possible solutions. 2. Summarize your research. Describe the issue and how it affects your community, the nation, or the world. 3. Include a list of steps that your audience can take to address the issue. You will include this information on your Web site, so be brief. 4. Write down the URLs of links where people can learn more about the issue. 5. Use Dreamweaver to create a one-page Web site about your issue. On this site, include: the summary of your research. the list of steps needed to address the issue. links to sites related to the issue. 6. Select appropriate background and font colors for your site. Add a graphic such as a border to the site. 7. Test your site in a browser. Be sure to test all the hyper links. Spell check and proof read the site and make changes as needed. 8. Optional (with your teacher s permission) publish the finished Web site on your school or class Web site. 9. For your portfolio, include a screen shot and an electronic copy of your finished product. HTML Basics 131