Web Programming with html5, css, and JavaScript

FIGURE 7.1 
trees web page with default picture positioning
© S
ealst
ep/Shutt
erst
ock
, Inc
., © U
we B
er
gwitz/Shutt
erst
ock
, Inc
.
271
7.2 Positioning Images

---

Now let’s focus on the 
h2
heading element at the top of the Trees web page. Go back to 
Figure 7.2, and verify that the heading’s “Trees” text and the surrounding tree icons are cen-
tered horizontally on the web page. In the past, we’ve centered a heading element’s text with a 
text-align: center
CSS rule. As you can see in Figure 7.3’s source code, we use that same 
technique for the Trees web page heading, even though the 
h2
element includes more than just 
text—it includes two 
img
elements, as well. Despite its name, the 
text-align
property is in charge 
of aligning not just text, but all inline content within the element to which the 
text-align
prop-
erty is being applied. The 
img
element is an inline element. So applying 
text-align: center 
to the 
h2
heading works great for centering the “Trees” text and the surrounding tree icons.
7.3 
Shortcut Icon
When you open a new tab in a browser, do you notice the icon that appears in the tab area at the 
top of the window? For an example, go back to Figure 7.2 and find the tree icon in the tab area 
of the Trees web page. Those icons are called 
shortcut icons
. In this section, you’ll learn about 
shortcut icons.
To mark your web page with a shortcut icon in the browser’s tab area, in your web page’s 
head
container, include a 
link
element with 
rel="icon"
. For example, here’s the code from the Trees 
web page that causes the tree shortcut icon to be displayed: