HTML and CSS Reference
In-Depth Information
To Enter HTML Code to Display the Banner and Header Text in a Web Page
The next step is to enter the HTML tags that will display the banner and header text in the browser. The <p>
and <span> tags will use inline CSS styles to format and center the banner and text on the Web page. This code must
be placed after the <template> tag and is shown in Table 12-24.
Table 12-24 Code for the HTML Tags to Center the Banner and Header Text
Line
Code
4
<p style="text-align:center">
5
<img border="0" src="chapter12-1banner.gif" />
6
</p>
7
<p style="text-align:center">
8
<span style="font-weight:bold; font-family:arial, helvetica, san-serif; font-size:18px">
Restaurant Supply - Browse by Description</span>
9
</p>
Line 4 is a paragraph tag with a style attribute to center the banner <img> in line 5. The closing </p> tag is
after the <img> tag. Line 7 is a new <p> tag with a style attribute to center the Web page header text. The <span> tag
in line 8 contains the inline style to format the header text as bold, Arial font, and size 18. Line 8 also contains the
header text and the closing </span> tag. Line 9 is the closing </p> tag. The following step enters the HTML tags to
center the banner and center and format the header text.
1
•
line 4.
If necessary, click
•
in Table 12-24 to
enter the HTML tags
to center the banner
and format the
header text. Press the
e n t e r
key after line 9
(Figure 12-25).
Enter the code shown
HTML tags to
insert banner
and header text
Figure 12-25
Using XSL Style Sheet Tags
By combining the XSL elements and XML markup tags, an XSL style sheet tells
the browser how to transform and format the XML document to display records in
paragraph format on the Web page. In this project, you will use the for-each, sort, text,
and value-of XSL style sheet tags. The
for-each
element makes each element appear
in the list, and associates each child element <item> related with the <products>. This
