39 8 Chapter 1 For beginners, though, Internet Explorer is a good choice because it s the most popular browser the one your target audience is most likely to be using. Other popular browsers include Google Chrome, Firefox, Safari, and Opera. Caution Versions of Internet Explorer prior to version 9 do not support some of the HTML5 features. You will probably want to test your Web pages in an earlier version to make sure that people who use them will be able to view your page. But don t use an earlier version of Internet Explorer as you work through this book s examples; you won t get the full effect of the new HTML5 features. Tip If the video card in your computer has two monitor connectors on it, or if you have an additional video card that you could install in your system, you might want to set up two monitors side-by-side. That way you could work on your HTML code in Notepad on one monitor and display the page full-screen in Internet Explorer in the other. All recent versions of Windows support at least two monitors, and some versions support even more. In this exercise, you will display an HTML file in Internet Explorer. To see the displayed file and the underlying code at the same time, open the practice files from this exercise and the previous exercise in separate windows and arrange them so both are visible. SET UP Use the welcome file from the previous exercise, or use the one in the practice file folder for this topic. The practice file is located in the Documents\ Microsoft Press\HTML5 SBS\01Editing folder. 1. Select Start Internet Explorer. Note Depending on your system and your default browser, Internet Explorer might not be pinned to the top of your Start menu. If it is not, click Start All Programs Internet Explorer. 2. Select File Open. The Open dialog box appears. Note If the menu bar does not appear in Internet Explorer, press the Alt key to display it.
41 10 Chapter 1 The file opens in Internet Explorer. CLEAN UP Leave Internet Explorer open for the next exercise. The method you just learned works especially well when you already have your Web browser open, in which case you can skip step 1. An alternate method is to browse to the storage location by using Windows Explorer, and double-click the file. Remember that you can t just double-click a Web page to edit it; you must right-click it. By default, the double-click operation is reserved for opening the page in your Web browser. What was a hardship only a few pages ago is now a convenience! Tip Not all Web browser software displays pages exactly the same way. For example, one browser s idea of what text should look like might be different from another. It s a good idea to check your pages in multiple Web browsers, such as Firefox, Chrome, and Opera. These are available as free downloads from and com, respectively. Making, Saving, and Viewing Changes After you ve made a change to a Web page, you will probably want to preview the result of that change. If you set up your Internet Explorer and Notepad windows side by side in the preceding two exercises, it s easy to view those changes. Simply save your work in Notepad, and then refresh the display in Internet Explorer. In this exercise, you will change Iowa to Indiana in the welcome.htm file, and then preview that change in Internet Explorer. This exercise builds on the previous two, so make sure you have completed them. You can use this procedure throughout the rest of the book to preview your work from each exercise. SET UP Be sure to have the welcome file open in Notepad and in Internet Explorer before beginning this exercise. Use the welcome file from the previous exercise, or use the one in the practice file folder for this topic. The practice file is located in the Documents\Microsoft Press\HTML5 SBS\01Editing folder.
windows 7 faithe wempen pdf
49 18 Chapter 2 Note In XHTML, the line break tag is . The end slash (and the space) is necessary to indicate that it s a self-closing tag. Notice that the slash is placed after the letters, not before, as with the closing end of a two-sided tag. In XHTML, one-sided tags must end with a slash to indicate that they are self-closing. The space between the text and the final slash is also required so the tag will be recognized in HTML. In this exercise, you will add text to an HTML file template, and then preview it in Microsoft Internet Explorer. SET UP Use the HTML5.htm file from the previous exercise or in the practice file folder for this topic. This practice file is located in the Documents\Microsoft Press\ HTML5 SBS\02Structure\CreatingParagraphs folder. Open the HTML5 file in Notepad. 1. Save the HTML5 file in the Documents\Microsoft Press\HTML5 SBS folder as index.htm. Note It is customary to name the opening page of a Web site index.htm, index.html, default.htm, or default.html. When users type a URL in their Web browsers but omit the file name (for example, typing rather than filename.htm), most servers will automatically respond with the index or default page if one exists. 2. Open the index file in Internet Explorer and arrange the Notepad and Internet Explorer windows so that both are visible. The index file displayed in Internet Explorer is currently blank. 3. In the Notepad window, type the following between the and tags: welcome to The Garden Company! We hope you will find our site a useful resource for becoming a better gardener. our main store is located at: 108 Ponting Street Macon, IN 46062 please stop by and browse our extensive inventory from Monday through Saturday, 7:00 a.m. to 8:00 p.m. 4. Save your work, and then press F5 or click the Refresh button at the right side of the Address bar to refresh the display in Internet Explorer to see the result of the changes. Leave both windows open for the next exercise.
50 Specifying a Page Title and Metatags 19 Note Your screen might look slightly different, depending on the settings you have configured in your browser. CLEAN UP Close the Notepad and Internet Explorer windows. Specifying a Page Title and Metatags Perhaps you noticed in the preceding exercise that the complete path to the file appeared in the title bar of Internet Explorer. Usually when you view a Web page, a friendly, descriptive title appears in that spot instead. That text is specified by a tag that is placed in the section (also called the header). Here s an example: the Garden Company Troubleshooting Make sure you place the tag in the section, and not in the section. Another element you can place in the header is the tag. The tag has several purposes. One of these is to identify keywords related to your page. Placing appropriate keywords on your page can make it easier for people to find your page when they are searching the Web using a search engine such as MSN. When some search engines index your page, they rely not only on the full text of the page, but also on any keywords they find in the tag area.
52 Specifying a Page Title and Metatags 21 SET UP Use the index.htm file from the previous exercise or in the practice file folder for this topic. This practice file is located in the Documents\Microsoft Press\HTML5 SBS\02Structure\SpecifyingTitle folder. Open the index file in Notepad. 1. Between the and tags, type the following to create the page title: the Garden Company 2. After the title, type the following tag: 3. Press Enter to start a new line, and type the following tag: 4. Save your work, and then view the file in Internet Explorer. The tab displays the site name, but notice that the inclusion of the tags caused no apparent difference in the displayed text of the page. This is because the keywords and encoding specification do not appear on the Web page itself. CLEAN UP Close the Notepad and Internet Explorer windows.
60 Applying Bold and Italic Formatting 29 CLEAN UP Close the Notepad and Internet Explorer windows. Applying Bold and Italic Formatting Applying bold and italic styles are two ways of making text stand out and attract attention. You generally use these styles in paragraphs rather than in headings, but it s perfectly acceptable to use them anywhere. For simple boldface and italics, use the and tags, respectively. These are twosided tags that enclose the text to be formatted. For example: i had a great time at the party. the reception will be held at the Arbor Arch in Plainfield. If you want to apply both bold and italic formatting, you can nest one tag inside the other. Don t mix up their order, though. When nesting tags, the rule is: first in, last out. So this is correct: the next book we will read is the Catcher in the Rye In contrast, the following example is wrong, because the order of the ending and tags are reversed: the next book we will read is the Catcher in the Rye Even though the tags in the preceding example are improperly nested, most browsers will still display them correctly, provided you are using HTML as the document type. In an XHTML document, however, this type of tag reversal is not accepted.
62 Applying Superscript and Subscript Formatting 31 CLEAN UP Close the Notepad and Internet Explorer windows. Applying Superscript and Subscript Formatting Superscript formatting makes text smaller and raises it off the baseline. You d typically use superscript to format exponents in math equations (for example, X 2 + 1) and for footnote numbers and symbols (like this * ). You can also use superscript to format ordinal numbers such as 1 st, 2 nd, and 3 rd to make your page look more polished. Subscript makes text smaller and lowers it below the baseline. The most common use for subscripts is in chemical formulas (for example, H 2 SO 4 ). Note How much the text shifts up or down, and how much smaller the font size becomes, depends on the browser. In this exercise, you will apply superscript formatting to create a footnote and an ordinal. SET UP In both Internet Explorer and Notepad, open the index.htm file from the previous exercise, or use the index.htm file in the practice file folder for this topic. This practice file is located in the Documents\Microsoft Press\HTML5 SBS\03Format\ ApplyingSuperscript folder. 1. At the end of the last line of text, between the and the tags, insert a code for a 1 in superscript, as shown in the following: please stop by and browse our extensive inventory from monday through Saturday, 7:00 a.m. to 8:00 p.m.1 This creates a superscript number for a footnote. 2. Immediately before the tag, type the following: 1closed the 1st Saturday in January This creates the footnote itself. 3. Save the file, and then refresh the page in Internet Explorer to view the results. 2ff7e9595c
Comments