Section 157. Jazz Up Text and Headlines with HTML | Sams Teach Yourself Creating Web Pages All in One

157. Jazz Up Text and Headlines with HTML

BEFORE YOU BEGIN

2 Use HTML Tags

6 About Proper HTML Coding

130 Write the Title and Description

131 Format Your Description with eBay's HTML Editor

SEE ALSO

156 About Writing Effective Ad Copy

159 About Including HTML on eBay Auction Pages

Use HTML as the best way to make your headlines and text stand out and help draw attention to your auction. It's true that you can use eBay's built-in HTML Editor to do this, as outlined in 131 Format Your Description with eBay's HTML Editor , but using the eBay Editor limits what you can do. HTML offers a world beyond what's offered with the eBay Editor.

KEY TERM

HTML Short for Hypertext Markup Language, HTML is the language of the Web. In short, it instructs browsers how to display web pages.

HTML is the language that tells web browsers how to display web pages. Fancy fonts, big headlines, graphicsall of that and more is possible with HTML. When you go to a web page, your browser looks at the HTML code "behind" the text you actually see and then displays the text following the HTML instructions embedded in the web page.

In this section, you learn the basics of HTML and find out how to jazz up your text and headlines with HTML commands.

157. Jazz Up Text and Headlines with HTML

Use HTML Tags

HTML works by using tags that tell a browser how to display a page. Each tag has an instruction to do a particular thing, such as displaying text at a certain size , displaying it as bold or italic, or displaying a graphic.

KEY TERM

Tags HTML instructions that tell a browser how to display text, graphics, or other items. Tags usually come in pairs: a starting tag to tell the browser how to display the item and an ending tag that tells the browser to no longer use the tag information. For example, to make an item boldface, you surround it with the tags and .

HTML tags are enclosed within angle brackets (the less-than and greater-than signs). Usually, tags contain a pair of instructionsthe first one turns on the action, and the second one turns it off. For example, if you wanted to make text on a page boldfaced, you'd put the tag in front of the text you wanted to make bold and the tag after the text you wanted to make bold, like this: This is boldfaced text . Note that it doesn't matter whether you use uppercase or lowercase letters in your tags. You can use and or and .

WEB RESOURCE

http://www.willcam.com/cmat/html/ crossref .html#list

http://hotwired.lycos.com/webmonkey/reference/html_cheatsheet/

HTML uses many tags; visit these websites to find a list of common tags and how to use them.

Format the Headline Size

To format headings, you use the <H> and </H> tags and include a number that determines how large the heading should be. You can use numbers from 1 to 6 , with 1 being the largest and 6 being the smallest. Here's how you use the tag:

<H1>Velvet Elvis -- The King Lives!</H1>

Note that the number used by the closing tag has to match the number used by the opening tagin other words, if you use H1 in the opening tag, you must use H1 in the closing tag. All headings are automatically put in boldface.

NOTE

Heading sizes work differently from the rest of HTML. In headings, smaller numbers produce large headings and vice versa. In other words, using 1 produces a large heading and using 6 produces a small heading. In the rest of HTML, though, the reverse holds true. When using the font tag, for example, the smaller the number, the smaller the text.

The following list details the various sizes of headings. As a practical matter, you'll probably use only headings 1 and 2 for your auctions because smaller sizes don't function as headings at allthey're simply too small.

HTML Heading Tag	Approximate Point Size of Text
H1	24 points
H2	18 points
H3	14 points
H4	12 points
H5	10 points
H6	8 points (9 points on the Macintosh)

Change Text Attributes

Many times you'll need to format text in your description for emphasis or special displayfor example, to italicize or boldface text. Several tags affect the attributes of the text, and they all work the same way. Let's take the tag for making text bold. As explained earlier, to make text boldfaced, use the and tags, like this:

I'm bold text.

To make text italic, use the and tags. Note that you can nest text-formatting tags, like this:

I'm bold italic text.

NOTE

You should always turn off tags in the reverse order that you turned them on. (Use and rather than and , for example.) In many cases, how you turn them off won't matter, but occasionally it can make a difference, so get into the habit of turning them off in this way.

HTML has quite a few text-formatting tags like these. The following table lists the major tags and describes what they each do. Each of these tags requires a closing tag, which is the tag preceded by a forward slash ( / ). The tag is closed with the tag.

HTML Text Formatting Tags and What They Do

Tag	Description
<B>	Makes text bold
<I>	Italicizes text
<U>	Underlines text
<STRIKE>	Puts a line through text, like this
<SUB>	Makes text appear as a subscript, like _this
<SUP>	Makes text appear as a superscript, like ^this
<TT>	Makes text appear in a fixed-width font, usually `Courier`
<STRONG>	Makes text stronger, generally by making it bold
<EM>	Gives text more emphasis, generally by making it italic
<BIG>	Makes text larger than the surrounding text
<SMALL>	Makes text smaller than the surrounding text

Keep in mind that browsers sometimes display HTML pages differently from one anotherthe fonts might display at slightly different sizes, for example. If you want, you can preview your page in several browsers. However, the vast majority of people use Internet Explorer, so if you use that browser to view your HTML, you can ensure that you are reaching the largest potential audience.

NOTE

Be very careful when using underlined text on your auction pageas a general rule, you should avoid that formatting option. Normally, when text appears underlined, it means that it is a link. Therefore, people can be confused by underlined text and think it's a link, and they'll click it to no avail.

You can use text formatting in concert with headings and paragraphs, not just individual words and sentences. If you wanted part of a heading to be italicized, for example, you would code it like this:

<H1>The Best Electric Gadgets</H1>

Remember that the <H> tag automatically makes text bold, so don't use the tag along with it.

Align Your Text

You can use HTML to align your headlines and text on the page. There's good news and bad news about aligning text using HTML. Here's the good news: It's very easy to do.

Here's the bad news: It's very easy to do because you have so little control over how text aligns. In fact, you really have only these choices:

You can align the text to the left.
You can align the text to the right.

When you align text to the right or the left, the text runs ragged on the other margin, which means all the text doesn't line up precisely on that margin. Typically, when you use a word processor, you have ragged-right text, which means the text is aligned on the left side and is ragged on the right. This book, for example, uses left-aligned, ragged-right text.
You can center the text.
You can justify the text, which means the text lines up precisely on both the right and left margins.

NOTE

When you don't use any HTML alignment commands in your text, it automatically is displayed as left aligned, ragged right in a browser.

The most basic way to align text is to use alignment commands along with the paragraph ( ) tag, like this:









Doing that aligns all subsequent paragraphs in the manner you've chosen . To stop the alignment, use the closing tag.

Create an Unordered List

Lists are a great way to present information in auctions. You can use them to draw attention to highlights of the goods you're selling. With an unordered list, each item on the list is preceded by a bullet.

To create an unordered list, use the <UL> and </UL> tags around the entire list of items. Then precede each item in the list with the <LI> (list item) tag. The <LI> tag doesn't use a closing tag. Here's how to create an unordered list:

<UL>

<LI>Electric fork

<LI>Electric spoon

<LI>Electric tooth flosser

<LI>Electric slippers

</UL>

The default bullet is a filled-in circle. If you want, you can change the bullets to either hollow circles or hollow squares. To change the bullet character to a hollow circle, type this:

<UL TYPE="circle">

To change the bullet to a hollow square, type this:

<UL TYPE="square">

Use the UL TYPE= tag at the beginning of the list, in place of the plain <UL> tag. When you end the list with the </UL> tag, you reset the bullet type to the default filled-in circle.

TIP

Remember that you can combine tags. For example, you can boldface each entry in your list or make bold just a few words in each entry in your list.

Create an Ordered List

You can create another type of listan ordered list. An ordered list is one in which each item is numbered or lettered sequentially. HTML does all the work for youyou don't actually have to insert the numbers or letters. Space is automatically inserted between the number or letter and each item on the list to make the list more legible. If you reorder the list or add or take away items from it, HTML automatically adjusts the letters or numbers for you.

To create an ordered list, use the <OL> and </OL> tags around the list, along with the list item tag ( <LI> ), like this:

<OL>

<LI>Take off battery cover.

<LI>Insert batteries.

<LI>Close cover.

<LI>Press the electric fork's start button.

<LI>Dig in!

</OL>

The preceding instructions create a numbered list. But you can also create lists using letters and have even more controlyou can use uppercase or lowercase letters or uppercase or lowercase Roman numerals instead. To do it, use the <OL> tag with the TYPE attribute, which tells the browser how to display the list. For example, if you wanted to display the list alphabetically in uppercase letters, you'd use this tag:

<OL TYPE=A>

To display the list alphabetically in lowercase letters, use this tag:

<OL TYPE=a>

To display the list in uppercase Roman numerals, use this tag:

<OL TYPE=I>

To display the list in lowercase Roman numerals, use this tag:

<OL TYPE=i>