The line height is the amount of space between each line . This is also referred to as lead-ing (pronounced like the metal) . You can use this settlead-ing to make paragraphs easier to read . You are not limited to just single-spacing or double-spacing like on a typewriter;
you can specify any amount of space you like .
You can express line height either as a number or as a percentage . If you use a number, it’s a fixed measurement (usually in pixels) . If you later increase or decrease the font size, the line height will not change . If you use a percentage, the browser multiplies the line height percentage by the font size to derive a spacing amount . For example, you can specify 200 percent to make a paragraph double-spaced . If you later change the font size, the line height will be recalculated using the new font size . To specify the line height in a style sheet, set the line-height attribute, as follows:
Download from Wow! eBook <www.wowebook.com>
138 Chapter 8
p {line-height: 150%}
To specify the same formatting in an individual tag, use the following:
<p style="line-height: 150%">
In this exercise, you will change the line height of certain elements by editing the embedded style sheet .
SET UP Use the spray.htm file in the practice file folder for this topic. This file is located in the Documents\Microsoft Press\HTML5 SBS\08Paragraphs\Indenting folder. Open the spray file in Notepad and in Internet Explorer.
1.
In the <style> area, modify the style rule for the <p> tag by setting the line height to 150% .p {text-indent: 20px; padding-left: 20px; text-indent: 20px; text-align:
justify; line-height: 150%}
2.
Create a style rule . Set the line height of list items to 125% .li {line-height: 125%}
3.
Save the file, and then refresh the Internet Explorer display to see the results .CLEAN UP Close the Notepad and Internet Explorer windows.
Key Points
●
● You can indent the first line of paragraphs using the text-indent attribute .
●
● The Padding attribute sets the amount of space between an element and its border; the margin attribute sets the amount of space around the outside of an element .
●
● The Border-style attribute places a border around a paragraph . To specify the appearance of the border, use one of the following arguments: solid, dotted, dashed, double, groove, ridge, inset, outset, or none .
●
● To set the width of a border, use the border-width attribute followed by the width in pixels (px) .
●
● To set the color of a border, use the border-color attribute followed by the color name or the RGB or hexadecimal notation for the color .
●
● To format each side of a border individually, specify four arguments, in clockwise order from the top: top, right, bottom, left . For example, border-style: solid none solid bottom .
●
● To specify the style, color, and size of a border in a single command, use the border attribute and specify the arguments in this order: size, color, style . For example, border: 2px green dotted .
●
● To set paragraph alignment, use the text-align attribute with one of these argu-ments: left, center, right, or justify .
●
● To set the line height, use the line-height attribute followed by the height expressed in pixels or as a percentage of the font height .
Chapter at a Glance
Insert graphics, page 144
Utilize thumbnail graphics, page 155
Include figure captions, page 158
141
9 Displaying Graphics
In this chapter, you will learn how to 4 Select a graphics format .
4 Prepare graphics for use on the Web . 4 Insert graphics .
4 Arrange elements on the page . 4 Control image size and padding . 4 Hyperlink from graphics .
4 Utilize thumbnail graphics . 4 Include alternate text for graphics . 4 Add figure captions .
So far in this book, you have created text-only Web pages . They’re perfectly functional, but a bit dull . Web pages are more interesting and attractive when they include graphics . Note Graphic or image? The HTML5 specification uses the term images, but the term graphic is more popular in everyday usage. This book uses the two terms interchangeably.
In a word-processing program such as Microsoft Word, you embed graphics directly into the document . When you distribute a document to others, the graphics are included with the file . In HTML, however, each graphic displayed on a Web page is stored in a separate file which must reside on the Web server or somewhere the Web server can reach it . In this chapter, you’ll learn how to include images on a Web page and how to format and size the images . You will learn how to hyperlink from a graphic and how to cre-ate thumbnail images . You’ll learn how to crecre-ate alterncre-ate text that will appear if the graphic cannot load . Finally, you’ll learn how to use the new HTML5 <figure> and
<figurecaption> tags .
See Also Do you need only a quick refresher on the topics in this chapter? See the Key Points at the end of this chapter.
142 Chapter 9
Practice Files Before you can use the practice files provided for this chapter, you need to install them from the book’s companion content page to their default locations. See
“Using the Practice Files” in the beginning of this book for more information.