Calling Out Text with Headings


When you browse through web pages on the Internet, you'll notice that many of them have a heading at the top that appears larger and bolder than the rest of the text. Listing 2.3 is a simple web page containing an example of a heading as compared to normal paragraph text. Any text between <h1> and </h1> tags will appear as a large heading. Additionally, <h2> and <h3> make smaller headings, and so on down the line of heading tags.

By the Way

The sample page in Listing 2.3 is part of a larger example that you'll continue to work on as you progress through the book. I thought a practical example would help you get a more applied feel for HTML, so I'll guide you through the development of a web site for a recreational hockey team. In fact, it's the hockey team that I happen to play on, Music City Mafia. My hockey buddies were nice enough to allow me to use their ugly mugs as examples throughout the book!


Listing 2.3. Heading Tags
 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   <head>     <title>Music City Mafia - Terry Lancaster</title>   </head>   <body>     <h1>16 - Terry Lancaster</h1>     <p>       <img src="/books/4/158/1/html/2/tlancaster.jpg" alt="Terry &quot;Big T&quot; Lancaster" /><br />       Nickname: Big T<br />       Position: RW<br />       Height: 6'3"<br />       Weight: 195<br />       Shoots: Left<br />       Age: 40<br />       Birthplace: Nashville, TN     </p>     <hr />     <p>       Favorite NHL Player: Brett Hull<br />       Favorite NHL Team: Nashville Predators<br />       Favorite Southern Fixin: Skillet Fried Potatoes<br />       Favorite Meat and Three: Swett's<br />       Favorite Country Star: Patsy Cline<br />       Favorite Mafia Moment: "Chet finishing a game with his eyelid completely       slashed through."     </p>   </body> </html> 

By the Way

By now you've probably caught on to the fact that HTML code is indented to reveal the relationship between different parts of the HTML document. This indentation is entirely voluntaryyou could just as easily run all the tags together with no spaces or line breaks and they would still look fine when viewed in a browser. The indentations are for you so that you can quickly look at a page full of code and understand how it fits together. Indenting your code is a very good web design habit, and ultimately makes your pages easier to maintain.


As you can see in Figure 2.3, the HTML that creates headings couldn't be simpler. In this example, the jersey number and name of the hockey player are made larger and more prominent on the page via the <h1> tag. To create the big level-1 heading, you just put an <h1> tag at the beginning and a </h1> tag at the end. For a slightly smaller level-2 heading, you can use <h2> and </h2>, and for a little level-3 heading, use <h3> and </h3>.

Figure 2.3. The <h1> tag in Listing 2.3 makes the jersey number and name of the hockey player stand out above his other information.


By the Way

I'm admittedly jumping the gun a bit by including an image in this sample page, but sometimes it's worth stepping just outside of your comfort zone to get a desired effect. You'll learn all about creating and using images in web pages in Hour 7, "Creating Your Own Web Page Graphics," and Hour 8, "Putting Graphics on a Web Page," but for now all you need to know is that a tag named <img> is responsible for placing an image on a page.


Coffee Break

While we're on the subject of hockey and HTML, check out http://www.azhockey.com/unusual.html for some highly entertaining and unusual stories about the sport of hockey. This page is also a good example of how simple a web page can be yet still do a decent job of presenting information to the visitor. I'm not suggesting that this page should get a design award, but it's a good example of understatement on the web, which can be a refreshing change of pace.


Theoretically, you can also use <h4>, <h5>, and <h6> to make progressively less important headings, but nobody uses these very muchafter all, what's the point of a heading if it's not big and bold? Besides, most web browsers don't show a noticeable difference between these and the small <h3> headings anyway. In the sample page shown in the figure, it was sufficient to simply use an <h1> heading along with normal paragraph text.

By the Way

On many web pages nowadays, graphical images of ornately rendered letters and logos are often used in place of the ordinary text headings discussed in this hour. You'll discover how to create graphics and put them on your pages in Part II, "Building Practical Web Pages with HTML." However, old-fashioned text headings are still widely used and have the advantage of being transferred and displayed almost instantly, no matter how fast or slow the reader's connection to the Internet is.


It's important to remember the difference between a title and a heading. These two words are often interchangeable in day-to-day English, but when you're talking HTML, <title> gives the entire page an identifying name that isn't displayed on the page itself, but only on the browser window's title bar. The heading tags, on the other hand, cause some text on the page to be displayed with visual emphasis. There can be only one <title> per page and it must appear within the <head> and </head> tags, whereas you can have as many <h1>, <h2>, and <h3> headings as you want, in any order that suits your fancy. Also, unlike the title, headings are always placed in the body.

By the Way

Don't forget that anything placed in the head of a web page is not intended to be viewed on the page, whereas everything in the body of the page is intended for viewing.


You'll learn to take complete control over the appearance of text on your web pages in Part II. Short of taking exacting control of the size, family, and color of fonts, headings provide the easiest and most popular way to draw extra attention to important text.




SAMS Teach Yourself HTML and CSS in 24 Hours
Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)
ISBN: 0672328410
EAN: 2147483647
Year: 2005
Pages: 345

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net