So far, every tag we’ve looked at has contained no text, or it has contained entire paragraphs (or, in the case of blockquote, potentially has contained multiple paragraphs).
Character styles: Emphasis
You’ll often want to emphasize some text within the web page. In visual browsers, emphasis is usually displayed using italics or bold. In HTML, we’ll use <em> (for normal emphasis) and <strong> (for stronger emphasis).
In the first paragraph of the review, put <em> tags around blood, knives, and budget:
This seminal horror movie contains no <em>blood</em>, no <em>knives</em>, and for the most part, no <em>budget</em>, but it was
Reload the web page, and you’ll see that those words are now emphasized using italics.
Now, what’s the difference between this and the italics for, say, the blockquotes? The difference is in meaning. The blockquotes are italicized because we want to set the blockquotes off from the rest of the text. The emphasized text is italicized because we want that text to be emphasized to the reader. If the web page were being displayed in a non-visual way, we wouldn’t want the blockquotes to be italicized; it wouldn’t make sense. But we would still want the emphasized text to be emphasized, whatever that means in the non-visual browser displaying it.
For stronger emphasis, go to the sixth paragraph of the review, and put <strong> tags around original theatrical version and 1989 restoration.
The DVD set contains both the <strong>original theatrical version</strong>, which had been cut without the director's input, and the director's <strong>1989 restoration</strong>; the latter brings the original 78 minutes to 83 minutes. Each version is on a
Reload the web page, and you’ll see that those phrases are emphasized using bolded text.
Character styles: Links
We’ve already done a little bit of linking. The <link> tag linked to the style sheet for the web page. That link is invisible (except for its effects). We can also create links in the main text of the web page that the visitor can use to visit other web pages. For these kinds of links, we use the <a>, or anchor, tag. This is one of the most important features of the web: the ability to immediately cross-reference between different pages at different sites.
There are two phrases ripe for linking. “It keeps coming back, though” in the eighth paragraph can be linked to the Saltair web site, and “Reuter Organ Company” in the next paragraph can be linked to that company’s web site.
<a href="http://www.thesaltair.com/">It keeps coming back, though.</a>
<a href="http://www.reuterorgan.com/">Reuter Organ Company</a>
Save and reload the page, and you can now click on those phrases to follow through to those web sites.
The href attribute of an a tag (or a link tag) is a URL. For offsite links, it always begins with “http://”; it is the link that you see in the URL bar of your browser after you visit the page. Sometimes you can use abbreviated URLs to get to a page, such as leaving out the .com or the http://, but in an href attribute, you have to use the full URL.
Go ahead and link the titles in the list at the bottom of the page:
| Carnival of Souls | http://en.wikipedia.org/wiki/Carnival_of_Souls |
| Great Saltair | http://www.thesaltair.com/ |
| The Haunting | http://en.wikipedia.org/wiki/The_Haunting_(1963_film) |
| Reuter Organ Company | http://www.reuterorgan.com/ |
If you don’t want to type the URLs, do a web search for them. This is always a good idea when adding links to your page: make sure the links are current, and use copy-and-paste to reduce the possibility of typos.
There are two other ways of linking that can be used for local files: files that exist on the same server as the web page. We’ve already used one of them. If the file you’re linking to is in the same folder as the web page, you can just use the file name. For example, when linking to the style sheet we just used the filename, “review.css”. You might also store some types of files in a folder that’s in the same folder as the web page, and then you would put the folder name in front of the file name. For example, “images/saltair.jpg”.
If the file you’re linking to is on the same server but in a different part of the site, you can use the “full path”. For example, it isn’t uncommon to have a library area on your site that contains scripts, style sheets, and images. If our style sheet were in that library, the href might be “/library/css/review.css”. By beginning the href with a forward slash, the browser knows to use this server, but start at the beginning.
Always use the forward slash to separate parts of URLs, as in the above examples.
