Figure 2.22 shows how the blockquote above will appear on the page.
Figure 2.22. Displaying a quotation on the page
The cite Element
If the quote to which you've referred is written elsewhere -- in a magazine, for instance, or a book, or even your own web site -- you can add some information to communicate the quote's source. One way is to use the cite element. A citation, by default, will style the text in italics. Here's how the markup would look for a citation:
<p>I remember reading <cite>Salem's Lot</cite> by Stephen King as
a child, and being very scared of the dark for days after.</p>
If the citation includes a web page to which you can refer, this information can also be displayed. Strangely, the cite element has an optional cite attribute. Weird. How did that one get through the approval process? Anyway, here's how it looks:
<p>One of my favorite travel writers is Pete Moore. I particularly
liked <cite cite="http://www.petermoore.net/">Swahili For The
Broken Hearted</cite>.</p>
We're not using the cite element in the diving web site, but you may find it useful in your own web site projects.
strong and em
We mentioned the em element earlier in this chapter. It's a fairly straightforward element to remember. If you can imagine yourself adding some kind of inflection as you say a word, then emphasis is probably what you need. If you're looking to strike a slightly more forceful tone, then you should consider "going in strong."
By default, adding em will style text in italics, while using strong makes the text bold. You can combine the two if you want, but usually, one or the other will suffice. The examples below should help you understand what these elements are used for. Figure 2.23 shows how they appear in the browser.
<p>Although Jimmy was told to <strong>never</strong> put his hands
on the exhaust pipe, he <em>still</em> couldn't help
himself.</p>
Figure 2.23. Displaying different emphasis styles in the browser
Taking a Break
The chapter's almost at an end, so why take a break? Well, this is just an excuse for a headline pun! We have one more element to look at: the break element.
The break element (br) basically replicates what happens when you hit the carriage return on an old typewriter. To create a paragraph on an old typewriter, you'd hit Enter twice to give the necessary spacing. In XHTML, the fact that you're marking up a paragraph with <p> and </p> tags means the spacing is worked out for you automatically. However, if you just want to signify the start of a new line, rather than a new paragraph, the element you need is br, as demonstrated in this limerick [25]:
<p>The limerick packs laughs anatomical,<br />
Into space that is quite economical.<br />
But the good ones I've seen,<br />
So seldom are clean,<br />
And the clean ones so seldom are comical.</p>
Note: Avoid Multiple Breaks
It's all too easy to resort to using multiple breaks in a web page to achieve a visual effect. If you find yourself doing this, something's wrong: you almost certainly need to look for a more suitable technique (we'll look at how this visual affect should be achieved later). Be careful in your use of br.
Note that br is an empty element, just like meta and img, so it's written as <br />.
Summary
Wow -- what a great start we've made! In this chapter, you've built a single web page gradually into three linked pages. You've become familiar with the most commonly used XHTML tags, as well as some of the less common ones that you can apply to your web pages. But, somehow, despite all your efforts, the web pages are still looking a little on the bland side. We're going to fix that very soon: in the next chapter, we'll start to add some splashes of color, and make the site look a little more like a fun diving site and less like a boring old Word document.
Glossary
[19] http://www.sitepoint.com/glossary.php?q=I#term_30
[20] http://www.sitepoint.com/glossary.php?q=W#term_49
[21] http://www.sitepoint.com/glossary.php?q=J#term_9
[22] http://www.sitepoint.com/glossary.php?q=J#term_23
[23] http://www.sitepoint.com/glossary.php?q=U#term_60
[24] http://www.cs.tut.fi/%7Ejkorpela/www/click.html
[25] http://en.wikipedia.org/wiki/Limerick_%28poetry%29
Next Month
Chapter 3. Adding Some Style
In chapter 3, we'll begin the process of adding that lick of paint to your otherwise plain site. The tool for the job is Cascading Style Sheets -- CSS to those in the know (or with limited typing abilities). We'll take a look at what CSS can do for you.
About This Article
Share and Enjoy:
