Understanding Basic HTML


HTML coding might sound difficult, but it's actually surprisingly easy. Really. It's not near as complicated as a fancy computer programming language, such as BASIC or C++; coding in HTML is something anyone can do, with just minimal training. That's because HTML is nothing more than a series of hidden codes that tell a web browser how to display different types of text and graphics. The codes are embedded in a document, so you can't see them; they're only visible to your web browser.

How HTML Works

The first thing you need to know is that HTML consists of text surrounded by instructions, in the form of simple codes. These codes are distinguished from normal text by the fact that they're enclosed within angle brackets. Each particular code turns on or off a particular attribute, such as boldface or italic text. Most codes are in sets of "on/off" pairs; you turn "on" the code before the text you want to affect and then turn "off" the code after the text.

For example, the code <h1> turns specified type into a level-one heading; the code </h1> turns off the heading type. The code <i> is used to italicize text; </i> turns off the italic. (As you can see, an "off" code is merely the "on" code with a slash before it, </like this>.)

Any text not surrounded by code uses HTML's default formattingnormal Times Roman text. It's the same with tables and other elements; if no code is applied, they default to standard formatting.

There are several different types of HTML codes, used to format different elements on a web pagetext effects, fonts, graphics, and so on. We'll examine each category of codes individually.

Codes for Text Formatting

Using HTML text formatting is the fastest and easiest way to add spice to your item listings. If you do nothing else, boldfacing important words in your description will add selling power to your adand you can do that with a pair of simple HTML codes.

Table 5.1 presents some of the common HTML codes that format the way selected text looks in your listing.

Table 5.1. Common HTML Text Formatting Codes

On Code

Off Code

Description

<h1>

</h1>

Formats text as a level-one heading

<h2>

</h2>

Formats text as a level-two heading

<h3>

</h3>

Formats text as a level-three heading

<h4>

</h4>

Formats text as a level-four heading

<h5>

</h5>

Formats text as a level-five heading

<h6>

</h6>

Formats text as a level-six heading

<b>

</b>

Boldfaces text

<strong>

</strong>

Another way of boldfacing text

<i>

</i>

Italicizes text

<em>

</em>

Another way of italicizing text

<u>

</u>

Underlines text

<tt>

</tt>

Creates monospaced typewriter-style text

<center>

</center>

Centers text (and other page elements)

<pre>

</pre>

Displays "preformatted" text to preserve line breaks and such

<big>

</big>

Increases text by one type size

<small>

</small>

Decreases text by one type size


Insert the "on" code right before the text you want formatted, and insert the "off" code right after the selected text. For example, if you want to boldface a single word in a sentence, make it look just like this:

This is the <strong>highlighted</strong> word.


It's really that simple; just add the <strong> and </strong> codes around the text you want boldfaced. The rest of your item description looks as normal as it did before.

Tip

eBay now prefers the use of the <strong> tag in place of the older <b> tag for boldfacing text, and the <em> tag in place of the older <i> tag for italicizing textalthough both older tags continue to work.


Codes for Font Type, Size, and Color

You can also use HTML to specify a particular font type or size, using the <font> code.

To specify a font type for selected text, use the <font> code with the face attribute, like this:

Note

Learn how to apply text, font, and paragraph formatting in Chapter 6, "Creating Text-Based HTML Auction Templates."


<font face="xxxx">text</font>


Replace the xxxx with the specific font, such as Arial or Times Romanin quotation marks.

Another common use of the <font> code is to specify type size. You use the size attribute, and the code looks like this:

<font size="xx">text</font>


Replace the xx with the size you want, from 6 to +6, with 6 being the smallest, +6 being the biggest, and 0 (or no size specified) being "normal" size type.

You can also use the <font> code to designate a specific text color. In this instance, you use the color attribute, like this:

<font color="#xxxxxx">text</font>


Replace the xxxxxx with the code for a specific color. Table 5.2 lists 20 of the most common color codes, for those colors referred to as "web-safe" colorsmeaning that they're apt to reproduce safely and similarly in all web browsers.

Table 5.2. Common HTML Color Codes

Color Name

Color Code

Black

000000

White

FFFFFF

Gray

808080

Silver

C0C0C0

Yellow

FFFF00

Orange

FFA500

Brown

A52A2A

Red

FF0000

Maroon

800000

Olive

808000

Fuchsia

FF00FF

Chartreuse

7FFF00

Green

008000

Lime

00FF00

Teal

008080

Aqua

00FFFF

Navy

000080

Blue

0000FF

Purple

800080

Violet

F080F0


As an example, suppose you want to color some text red. You use this code:

<font color="#FF0000">red text</font>


If you don't want to bother with learning hexadecimal color codes, you also have the option of simply entering the actual name of the color (still within quotation marks, of course). While this limits you to a handful of primary colors, it's easier than remembering all the detailed codes. For example, to rewrite our previous red text example, you use the following simplified code:

<font color="red">red text</font>


By the way, the 20 colors listed in Table 5.2 are just a fraction of the available colors you can use in your auction listings. To view all available colors, consult one of the many web-based HTML color charts, such as the ones at www.immigration-usa.com/html_colors.html and html-color-codes.com. Just choose a color and view the corresponding color code!

Codes for Paragraphs

When it's time to start a new paragraph, you start the paragraph with a <p> code. Then, when the paragraph is done, you close it with a </p> "off" code. The code looks something like this:

<p> This is a normal text paragraph. It consists of multiple sentences. Like these. </p>


The <p> code can also contain the align attribute, which indicates how the paragraph is alignedleft, center, or right. Paragraphs are left-aligned by default, so if you want to center a paragraph, you'd use the following code:

<p align="center"> This is the paragraph to be centered. All the text in the paragraph is aligned as indicated. </p>


Note

Earlier versions of HTML let you use the <p> tag to indicate the start of a new paragraph, without requiring the corresponding </p> "off" code at the end the paragraph. Current HTML standards encourage the use of the <p> and </p> codes as proper containers for the paragraph text. That said, you can probably get by without the </p> "off" code, although it's good practice to include it.


Codes That Insert Things

So far, I've shown you codes that format text and paragraphs. There are a few other codes that insert items into your document. These codes include the following:

  • <br> inserts a line break

  • <hr> inserts a horizontal rule or line

Note that these insertion codes do not have corresponding "off" codes. You just insert the item, and be done with it.

Codes for Lists

If you have a lot of features to list for your item, you might want to format them in a bulleted list. Using HTML codes, it's easy to create a neatly bulleted list for your ad.

First, you enclose your bulleted list with the <ul> and </ul> codes. Then, you enclose each bulleted item with the <li> and </li> codes.

The code for a typical bulleted list looks like this:

<ul>  <li>item one</li>  <li>item two</li>  <li>item three</li> </ul>


Bulleted lists are great ways to run through a list of attributes or specifications; it's a lot cleaner than just listing a bunch of stuff within a long text paragraph.

You can also included a numbered list within your item listing. The approach is similar, except that you use the <ol> and </ol> container codes, instead of the <ul> and </ul> codes. The code for a typical numbered list looks like this:

<ol>  <li>item one</li>  <li>item two</li>  <li>item three</li> </ol>


Codes for Graphics

Adding pictures and other graphics to your auction templates really brings some excitement to the normally plain-text world of eBay. You can add pictures the eBay way (using eBay's Picture Manager on the Describe Your Item page), which puts all your pictures at the end of your text description, or you can put a picture anywhere in your text, using HTML.

Before you can insert a graphic into your listing, you need to know the address of that graphic (in the form of a web page URL). Then you use the following code:

<img src="URL">


No "off" code is required for inserted graphics. Note that the location is enclosed in quotation marksand that you have to insert the http:// part of the URL.

As an example, if your graphic is the file graphic01.jpg located at www.webserver.com/mydir/, you insert this code:

<img src="/books/2/949/1/html/2/http://www.webserver.com/mydir/graphic01.jpg">


The nice thing about inserting graphics this way is that you can include more than just picturesyou can add logos, starbursts, you name it. (And you can put the graphics anywhere in your text description.) You use the same technique to link to any graphic image anywhere in your item listing.

Note

Learn how to apply graphics in your auctions in Chapter 7, "Adding Pictures to Your Auction Templates."


Codes for Links

Web pages are all about hyperlinks to other web pages. Why should your eBay item listing be any different?

If you want to include a hyperlink to another web page, use the following code:

<a href="URL">this is the link</a>


The text between the on and off codes will appear onscreen as a typical underlined hyperlink; when users click that text, they'll be linked to the URL you specified in the code. Note that the URL is enclosed in quotation marks and that you have to include the http:// part of the address.

Caution

eBay prohibits linking to other "sell" pages outside the eBay community. You can, however, link to pages that provide more information on the item you're selling.


Here's what a representative hyperlink code looks like:

<a href="http://www.webserver.com/mydir/mypage.htm"> Click for my Web page</a>





eBay Auction Templates Starter Kit
eBay Auction Templates Starter Kit
ISBN: 0789735636
EAN: 2147483647
Year: 2007
Pages: 101

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