This is the main menu for Web Design: Lessons. Hover over the button below, and the menu for the Lessons pages will appear.
Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
If you missed the earlier lessons, you should start at the beginning.
Formatting Text: Emphasis and Line Breaks
Emphasis: Bold and Italic
It’s very easy to emphasize your text with boldface and italics.
Want to make some text boldface? Add the <strong> tags around the word you want to see in bold. Like so:
<strong>I’m bold, baby!</strong>
I’m bold, baby!
Italicize your words using the <em> tag (for emphasis) like so:
<em>I’m leaning!</em>
I’m leaning!
Give it a try in some of your text and see how it works.
Quick note: You will see some Web sites using these elements: <b> instead of <strong> and <i> instead of <em>. There’s nothing inherently wrong with this, but it makes more sense in the code to use the <strong> and <em> elements. Trust me on this one, unless you want me to start using phrases like "HTML semantics" and "presentational code." Not right now? Okay then....
Blockquotes and Inline Quotes
There are two methods to “set off” text blocks within a page. The primary difference between the two is that one is considered a “block” element and one an “inline” element. We’re not going to delve into that particular issue right now.
More about block and inline displays
The BLOCKQUOTE
The blockquote tag, when left unformatted, forces the browser to indent the tagged text on both the left and right sides: a “block” of “quoted” text, if you will. It is a "block" element.
<blockquote><p>A chunk of blockquoted text.</p></blockquote>
Since the stylesheet on this page rather heavily styles the blockquote:
This is how blockquotes look on this page. Nifty little quotation mark, huh?
I can’t easily show you how a blockquote will appear. However, Ian Lloyd gives us a pretty good visual representation.
He also reminds us of the proper uses of the blockquote:
By default, most browsers’ basic built-in style sheets render blockquote content with left and right indentations … As a consequence, many people learned to use blockquote to indent the text as a way to draw attention to a paragraph or section of a page. Of course, this is bad practice — it’s simply the wrong markup for the job. Only use blockquote if you’re actually quoting a source; to visually indent a block of text that’s not a quotation, use CSS (margin-left, or any other style property you care to choose).
Stated more plainly, don’t use the blockquote merely for looks — only use it for quoting comments or statements by other people. (Do I always observe this restriction? Not really, and not even on this site, which explains why Tommy Olsson routinely busts my chops for playing fast and loose with HTML semantics. And he’s right to do so!)
Let’s give it a try.
Here’s a good quote, from Dr. Martin Luther King, Jr.
Human progress is neither automatic nor inevitable … Every step toward the goal of justice requires sacrifice, suffering, and struggle; the tireless exertions and passionate concern of dedicated individuals.
To put it on our page, let’s surround it with the blockquote tag. (Don’t leave out the p tag. It goes inside the blockquotes – actually nests in there.)
Put this in your body, below your musical list.
<blockquote><p>Human progress is neither automatic nor inevitable... Every step toward the goal of justice requires sacrifice, suffering, and struggle; the tireless exertions and passionate concern of dedicated individuals. — Dr. Martin Luther King, Jr.</p></blockquote>
That fat chunk of code gives us this:
Human progress is neither automatic nor inevitable... Every step toward the goal of justice requires sacrifice, suffering, and struggle; the tireless exertions and passionate concern of dedicated individuals.— Dr. Martin Luther King, Jr.
Remember, this site uses a rather heavily styled blockquote format, yours won’t get that cool quotation mark, font change, or borders.
But maybe there’s something we can do to style yours a bit.
Styling our Blockquote
Let’s fancy it up a bit. You can see on your page that it’s indented somewhat (about 40 pixels) on both the left and the right side. Let’s go a bit further.
Jennifer Kyrnin, the savvy lady who runs About.com’s Web Design section, gives us some suggestions.
First, let’s add a border around the blockquote. (We haven’t discussed all the cool things you can do with borders yet, but we will. If you’re dying to know, check the Web Design Principles link below.)
Add this to your stylesheet.
blockquote {
border: 2px solid #000000;
}
Because the font color #000000 stands for black, this will add a black border. Try it and see what happens. (If you want to change the color of the border, go right ahead.)
Hmmmm. Interesting, but there are some styling issues. Let’s add a bit more to it.
Let’s make it a good bit narrower than it is. Add this to your blockquote element:
width: 400px;
Now your blockquote styling looks like this:
blockquote {
border: 2px solid #000000;
width: 400px;
}
Wow, that crunched it up pretty good. Play with the pixel value to make it larger (or smaller, if you really want).
Let’s make it stand out some more by adding a background color. You’ve already done this for your page earlier; it’s a similar technique to do for your background. Add this to your blockquote code:
background-color: #4b6acf;
(I pulled this color from the December.com color page we’ve used before. No doubt you’ll want a different color.)
Now your blockquote code should look like this:
blockquote {
border: 2px solid #000000;
width: 400px;
background-color: #4b6acf;
}
Not bad, but we can do more. We can add a background image if we like. And we can do something about the text being shoved up against that left border. When you learn about margins and padding, you’ll see how to fix it so Dr. King’s quote has some room to breathe.
More about margins and padding.
The Q Element
The q tag can be described as the blockquote’s little brother. It is an inline, not a block, element, and is used for much smaller chunks of text. In theory, browsers show material enclosed in <q> </q> tags in quotation marks, without you having to type them. This code:
<p>Mom says, <q>Look both ways before crossing the street!</q></p>
gives us this:
Mom says, Look both ways before crossing the street!
The q element isn’t fully supported by all browsers, so you might want to just play it safe and use quotations marks for your quotes instead.
The CITE Element
There’s also a cite element. It is a lot like the q tag, except that it "cites" titles and such from authors, musicians, and the like. It usually italicizes the text being tagged. Using this code:
<p>Jack Vance, author of <cite>The Green Pearl</cite>, is a well-known science fiction and fantasy author.</p>
gives us this:
Jack Vance, author of The Green Pearl, is a well-known science fiction and fantasy author.
Again, if you just wanted to "cite" works with italics (the em tag), that might be simpler, if less semantically accurate.
Line Breaks
One way to break the line (i.e. force a "line return" is to use the <br> element. <br> stands for “break.” You use this inside of a paragraph or other text block. Here’s what it looks like:
<br>
and here’s what it might look like in your HTML code:
<p>Here’s a bunch of meaningless text.<br>It doesn’t get any more interesting with a line break.</p>
In practice:
Here’s a bunch of meaningless text.
It doesn’t get any more interesting with a line break.
Not a particularly spectacular tag, but an essential one to know.
Check your work: take a look at an example page to see if you’ve gotten it right so far. Use your browser’s View Source (or Source, or maybe View Page Source), found in your right-click menu, to see the source code in the example, and make sure it matches up with yours. Why the example code is not exactly like the code you’re generating.
