bbb Home
Formatting Paragraphs Contents        

PARAGRAPH TAGS

TAG DESCRIPTION
<p></p> Defines a paragraph with line breaks before and after.
<div></div> Defines a paragraph with no vertical white space before and after. Typically used with style. Can nest.
<span></span> Used as a "wrapper" for formatting inline text. Typically used with style. Can nest.
<pre></pre> Defines a block of preformatted text preserving white space.
<hr> Adds a horizontal line.
<br> Forces a line break. (Shift+Return in Dreamweaver)

SPECIAL CHARACTERS

SPECIAL CHARACTER DESCRIPTION
&nbsp; Non-breaking space (Ctrl+Shift+Space in Dreamweaver)
&gt; Greater then sign >
&lt; Less then sign <
&copy; Copyright symbol ©

EXAMPLE

Font: 8pt   12pt   20pt   24pt   Width: Min. 50%   75%   100%   

PRACTICE

1. Experiment with the example above to complete the following. Then save it as a page.

  1. Nest a span in the div. Make the color of the span yellow and the color of the div blue.
  2. Make the div centered.
  3. Make the contents in the p tag centered.
  4. Add a less-then sign using the special characters.

2.  Create a page that demonstrates the difference between span, div, and p tags as shown in the figure. Your page should look just like the one in the figure and should use NO <br> tags. 

Figure for Exercise 2

3.  Create a page that looks like the following:

Exercise image

4. Experiment with a Web Design Tool.

  1. How can you use the menu to create the tags discussed above?
  2. Where are the special characters in the menu?
  3. What other paragraph and text formatting tags are listed?

SELF-QUIZ