Writing HTML | About | FAQ | Alumni | Tags | Lessons | back | next |

13. You can Blockquote Me on That!

Yet another simple HTML tag for re-arranging your text:
"What is going on here?" asked the <blockquote> tag to the <p> and <br> tags. They replied, "We are not sure, but you are very different from us!"

Objectives

After this lesson you will be able to:

Lesson

Note: If you do not have the working documents from the previous lessons, download a copy now.

In traditional writing, quotations of three or more sentences are set off from the main text as an idented block of text. HTML also includes this capability via the <blockquote>....</<blockquote> tag:


<blockquote>
"This is a long quotation from a very famous person. Since it is so long
and interesting, it should really be set off from the rest of the text.
This indicates clearly that the quote is from someone other than the writer."
</blockquote>
which yields:

"This is a long quotation from a very famous person. Since it is so long and interesting, it should really be set off from the rest of the text. This indicates clearly that the quote is from someone other than the writer."

Note that we can apply any and all HTML we have learned so far inside of the <blockquote> tags, such as this example:

<blockquote>
<H2>A Manifesto</H2>
This is a <B>long</B> quotation from a 
<A HREF="http://www.mcli.dist.maricopa.edu/alan/">
very famous person</A>. 
Since it is so long and interesting, it should really be
<pre>     set off</pre>
from the rest of the text.
<p>
<I>This indicates</I>:
<ul> 
<li>clearly that 
<li>the quote is from 
<li>someone other than the writer.
</ul>
</blockquote>
which yields the following:

A Manifesto

This is a long quotation from a very famous person. Since it is so long and interesting, it should really be
    set off
from the rest of the text.

This indicates:


Let's add a blockquote to the introduction of our Volcano web page. We will use blockquote from the Roman naturalist, Pliny, who witnessed the eruption of the volcano Vesuvius in 79 A.D.

  1. Open the HTML file, index.html in your text editor.
  2. Under the <h1>Volcano Web</h1> heading, add the following:
    
      <BLOCKQUOTE>
      <B><I>
      "Nature raves savagely, threatening the lands"
      </I></B><br>
       -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm">
      Pliny the Elder</A>, who died of asphyxiation after 
      observing the destruction of Pompeii by the
      79 A.D. eruption of Mount Vesuvius.
      </BLOCKQUOTE>
    
    NOTE: See how we have used a combination of the bold and italic style tags (see Lesson 5) to highlight the quote. The citation is forced to a new line with the <br> tag (see Lesson 4). We have also hyper linked "Pliny the Elder" to another web site that contains more information about Pliny and his observations.

    See also how the <blockquote> tag forces a paragraph break above and below the block of text.

    And finally, these NOTES (like this one) we have used through the tutorial have made use of the <blockquote> tag!

  3. Save and Reload the HTML file.

Check Your Work

Compare your web page with a sample of how this document should appear. If your document was different than the sample, review the text you entered in the text editor.

Review

Review topics for this lesson:
  1. What does the <blockquote> tag do?
  2. Why don't you need a <p> tag before a blockquote?

Independent Practice

Experiment with the <blockquote> tag in your own web page. Do not just think in terms of using it only for quotations. The tag can be effective for adding some variety to your web page layout. The <blockquote> tag is one way to avoid having many pages full worth of plain text paragraphs.

Some developers will use 2 or 2 (or more) nested <blockquote> tags to create an effect of wider margins. For example,

<BLOCKQUOTE>
  <BLOCKQUOTE>
    <BLOCKQUOTE>"Oh, for more tags," he lamented.
      <p>Replied she, "Remember, dear, that while HTML may
      be limited in terms of control 
      over page layout, there is a great 
      deal of potential in creatively use 
      of the number of tags."
    </BLOCKQUOTE>
  /BLOCKQUOTE>
</BLOCKQUOTE>

produces:

"Oh, for more tags," he lamented.

Replied she, "Remember, dear, that while HTML may be limited in terms of control over page layout, there is a great deal of potential in creatively use of the number of tags."


Coming Next....

Breaking a single web page into logical, linked "chunks"...
GO TO.... | Lesson Index | back: "Address Footers and E-Mail Links" | next: "Lumping vs Splitting" |

Writing HTML Lesson 13: Blockquotes
©1995, 1996 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

The Internet Connection at MCLI is Alan Levine --}
Comments to levine@maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut13.html