HTML and CSS Reference
In-Depth Information
To explore the use of inline elements:
◗
1.
Return to the
demo_html.htm
file in your Web browser.
◗
2.
Replace the code in the HTML Code box with the following:
<p>Welcome to the J-Prop Shop, owned and operated by David
Vinet</p>
◗
3.
Click the
Preview Code
button to display this paragraph in the Preview box.
To mark
J-Prop Shop
as strongly emphasized text, you can enclose that phrase
within a set of
<strong>
tags.
◗
4.
Insert the
<strong>
opening tag directly before the word
J-Prop
in the box on
the left. Insert the closing
</strong>
tag directly after the word
Shop
. Click the
Preview Code
button to confirm that
J-Prop Shop
is now displayed in a bold-
faced font.
Another text-level element is the
cite
element used to make citations. Explore
how citations are rendered by your browser by enclosing
David Vinet
within a set
of
<cite>
tags.
◗
5.
Insert an opening
<cite>
tag directly before the word
David
and insert the clos-
ing
</cite>
tag directly after
Vinet
. Click the
Preview Code
button to view the
revised code. Figure 1-36 shows the result of applying the
<strong>
and
<cite>
tags to the paragraph text.
Figure 1-36
Applying the strong and cite text-level elements
◗
6.
Continue exploring other HTML elements listed in Figure 1-35 to see their effects
on the rendered text. Close the demo file when you're done.
You can nest text-level tags to mark a single text string with more than one element.
For example, the HTML code
<p>Welcome to the <strong><em>J-Prop Shop</em></strong>.</p>
marks the text string
J-Prop Shop
as both strong and emphasized text. In most browsers it
appears in a
bold italic
font.
Dave wants the names of all of the items in his product list to be marked as strong
text. Revise the code for the product names now.
