Publishing a File to a Server
3 Formatting Text by Using TagsUsing Tags
In this chapter, you will learn how to 4 Create headings .
4 Apply bold and italic formatting .
4 Apply superscript and subscript formatting . 4 Use monospaced and preformatted text . 4 Format a block quotation .
4 Configure Internet Explorer view settings .
Creating Web pages is not word processing. It’s important to keep that in mind as you learn HTML, because I’m going to ask you to be patient for a few chapters as you learn HTML the right way—that is, the standards-compliant way .
When most people think of formatting text, the first thing that pops into their minds is choosing a font—a typeface, size, and color . That’s easy to do in a word-processing document, but in HTML it’s more complicated . Early versions of HTML used a <font>
tag to specify a particular typeface, size, and color . If it were ten years ago, I would be happy to teach you that tag in this chapter, but the <font> tag has been removed from HTML5 . Even though most browsers still recognize the <font> tag, you shouldn’t use it: it’s obsolete . Therefore, rather than teach you bad habits with old tags, I’m going to teach you how to apply typefaces, sizes, and colors to text with styles—but not in this chapter . Although using styles is a superior way of applying fonts to text, it is a little more advanced than you’re ready for just yet . You’ll learn all about using fonts in HTML code in Part 2, “Style Sheets and Graphics .”
26 Chapter 3
This chapter introduces several important tags that format text according to its purpose . In Chapter 2, “Setting Up the Document Structure,” you learned about the <p> tag for regular paragraphs, but there are many other tags that are used for headings, program-ming code, quotations, and more . Most of the tags discussed in this chapter are semantic tags; they describe the function of the text, rather than provide directions for formatting . For example, the <h1> heading tag specifies that the text within it should be formatted as a major heading, but it provides no specifics as to what that formatting should be . The formatting specifics for semantic tags can come from a variety of sources:
● Styles As you will learn in Part 2 of this book, you can specify the font families and sizes to use throughout your entire Web site . For example, you can select a font family that will be suggested to the browser whenever a certain tag is applied .
● The Web browser in use Each Web browser has defaults for the standard HTML tags . For example, in Internet Explorer (and most other browsers), <h1> is left-aligned, 18-point Times New Roman . Most browsers use the same defaults for the very basic tags, but non-standard browsers, such as those on phones, often display text differently .
● Individual user customization A user can customize his Web browser to suit his preferences . Later in this chapter, you’ll get to play with these settings in Internet Explorer so you’ll know what your potential audience might be doing .
Keep in mind as you practice using tags that their formatting is not fixed . The results you see when previewing the exercise pages in Internet Explorer represent the default set-tings for your version of Internet Explorer (or whatever browser you are using to preview them); the style is not intrinsic to those tags themselves . That will become important in Part 2 of the book, when you learn how to define more specific formatting for tags . See Also Do you need only a quick refresher on the topics in this chapter? See the Key Points section at the end of this chapter.
Practice Files Before you can use the practice files provided for this chapter, you need to download and install them from the book’s companion content location. See “Using the Practice Files” at the beginning of this book for more information.
Creating Headings 27
As noted earlier, there are no specific sizes or fonts assigned to the heading tags—their appearance can vary depending on the browser and its settings . But the heading levels connote relative sizes; the higher the heading number, the smaller the size in which it will render on the screen . In Internet Explorer 9, for example, using the default settings will make these six heading levels look as shown in the following graphic .
Perhaps you noticed that headings 5 and 6 are actually smaller than body text . Keep in mind, though, that these are just the default settings; you can redefine these headings to appear any way you want .
Many screen reader programs use the heading codes <h1> through <h6> to help visually-impaired users navigate a document, and some page structures rely on headings for outlining, too . (HTML5 has a new way of outlining documents, but that’s beyond the scope of this book .) In some cases, though, you might have a stack of headings that col-lectively should take up only one spot in an outline, like this:
<h1>Dog Agility Club of Indiana</h1>
<h2>Training for canine athletes and their humans</h2>
HTML5 introduces a new tag to deal with this situation, called <hgroup> . When you enclose a stack of headings within <hgroup>, only the first heading in the stack will
28 Chapter 3
<h1>Dog Agility Club of Indiana</h1>
<h2>Training for canine athletes and their humans</h2>
</hgroup>
Browsers that do not support this tag simply ignore it, so there is no harm in using it when appropriate .
In this exercise, you will create some headings for the opening page of The Garden Com-pany’s Web site .
SET UP In both Internet Explorer and Notepad, open the index.htm file that you created in Chapter 2, 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\
CreatingHeadings folder.
1.
Immediately below the <body> tag, type the following:<hgroup>
<h1>The Garden Company</h1>
<h5>Helping you help your gardens grow since 1975</h5>
</hgroup>
Note Some coding purists will tell you that you should use an <h2> heading instead of
<h5> for the subtitle above, and then apply a style to make the text look the way you want, but because it is a few chapters yet until you will learn about styles, I’m taking a shortcut. For now, the default appearance of the <h5> heading is much closer to the desired look we want for this exercise.
2.
Immediately above the line containing the text Our Main Store is Located At, type the following:<h2>Come See Our Store</h2>