Wiz's eBay Template Design Course

Before we begin…

If you have taken one of my courses before you may recognize some of the material in this first section. But don’t just skim over it. There are changes and additions that will be important for you to know. Please take the time to read it (and the entire course) carefully.

If this is the first one of my courses you are taking then you will find important information in these first sections, and each section of the entire course. Please do take the time to read carefully.

You may want to print out these pages in order to work through the course. You can work from your computer, but you will also want to to use your web browser to access other pages from time to time. If your Internet access costs you based on your time on line (or if you pay long distance fees to connect) then you will want to work through the lesson off line making notes and then go on line when you are ready to try any of the work presented. You could also save each of the lessons as web pages on your computer and then work with them off line. These tasks are usually done from the File menu at the upper left in your browser and then using ‘Print…’ or ‘Save as…’ If that’s confusing to you, there is nothing wrong with just working along on line. Most students will likely complete this course that way.

Teaching any class with more than one student presents several problems for the instructor. Students come from differing backgrounds with different amounts of knowledge. If it’s a computer course and one student doesn’t know how to turn on the computer, one of two things happen, and both are bad:

1. the instructor teaches a lesson on how to turn on the computer. One student learns something new and the others are all bored to tears, or,
2. the instructor pushes on ahead assuming everyone knows how to turn on the computer. One student is left behind right from the start.

The beauty of an Internet-based learning environment like this one is that this can never happen. First of all, you MUST know how to turn the computer on or you wouldn’t be reading this, and secondly, if we do cover material that you don’t understand, you can e-mail me for more help. Since you work at your own speed, and can get assistance at any point, you are never left behind.

Please make a note:

My e-mail address for this course is: steve@mainstreetmallonline.com – just click the address to send email.

Please send me an e-mail now to let me know you got this far okay. Take a moment to introduce yourself and tell me a bit about your business and what you hope to get out of this course.

With an on line course, you don’t hold back the rest of the class based on what you already know or don’t know, and you don’t have to be afraid to ask a question in front of others. I will answer each of your questions individually dealing with each and every issue you raise. I will get back to you promptly, usually the same day. If you do ask a question that I feel others may be wondering about to, I’ll include the question and my answer to it in the frequently asked questions (FAQ) page, though I won’t identify you to others, so you don’t need to worry.

Don’t ever be afraid to ask a question. Don’t ever think it’s a stupid question. If you don’t know something, please ASK.

Intelligence and knowledge are two different things. Even the smartest person doesn’t know everything. But you can learn anything. When you don’t know something it doesn’t mean you are stupid, it just means you haven’t learned it yet. Don’t put yourself down. Part of learning is a positive attitude — you can do it — sometimes it will take more than one try. Just don’t give up!

So, let’s deal with an important issue right from the start. This course is about learning HTML. It’s not about smart or stupid. If you were intelligent enough to desire to take this course then you are, by definition, not stupid. As stated above, intelligence and knowledge are two different things. You could be very intelligent and yet not very knowledgeable on some subjects. That doesn’t make you stupid. I suppose someone could be very stupid and have some specific knowledge, too, but that wouldn’t make them any smarter. Because you want to take this course, you are already smart enough to take it. The job is now mine to help you understand the things we will cover. Any failing will be mine, not yours. And just so you know right at the beginning, there are no tests and no marks here. You pass with honors by sticking with the course to the end… and that really won’t be so hard to do!

By taking this course you will learn new things about HTML, especially how it applies to online selling site listng templates, like those for eBay, Main Street Mall Online, Ruby Lane, Etsy, etc. And you will get to practice and better develop skills you may have already learned. That won’t make you any smarter, but it will equip you with more knowledge to draw upon. And it should make you, and your listings, look pretty good too!

The Beginning…

As the Reverend Dodgson so aptly wrote in his wonderful fantasy, Alice In Wonderland, “Begin at the beginning,” the King said, very gravely, “and go on till you come to the end. Then stop.”

What simple, wise, words those were. It was spoken by the King to the White Rabbit and it was very good advice indeed. So we will do just that; begin at the beginning.

This course is about HTML for designing listing templates. The level is for beginner to intermediate. I won’t assume you know anything about HTML, though I know each of you probably knows at least a little bit. If I present things you already know you should not just skip over them… that often seems to be the beauty of working on your own: having no instructor to look over your shoulder you can just skip over things you think you know. But you are likely to find differences between what you think you know and what I present here. I’ve seen a lot of well-meaning, but bad, advice on the eBay boards and other online teaching sites. Sometimes you learn things the wrong way or out of context, or perhaps you learned something correctly but took it into another situation where it didn’t belong at all. That is the easiest way to get into trouble with HTML. If you follow this course carefully, from start to finish, you will learn how to code HTML for listing templates the right way.

So, let’s start at the very beginning. Just what is this HTML thing anyway?

HTML is an acronym for Hyper Text Mark-up Language. It is a Language of tags that we use to mark up text to turn it into hyper text, documents or web pages that link to other documents or web pages. Most text, like this lesson, is written in a linear fashion. We start at the beginning and read each line from left to right and then the next line and the next line working our way down from the top of the page to the bottom. That is linear or static text. Hyper text allows us to link to other text and even pictures, diagrams, sound recordings, movies, and other items by creating links in the static text that lead to these other elements.

The email address in the note box with the dashed line border above is a hyper-link. You click on it and it will open your email program automatically so you can send me an email. That’s what hyper text and HTML are all about.

Hyper text is what makes the World Wide Web (www or just the ‘web’) work. Computers and even the Internet had document storage before hyper text. And hyper text existed on computers before it came to the web. But it was a natural marriage, hyper text and the Internet. The World Wid Web has probably been the most successful part of the Internet since it began.

HTML was orignally a sub-set or part of SGML (Standard General Mark-up Language) that had been in use by book and document publishers for several years before HTML and the World Wide Web were opened to the public. I’m not going to go into the history of HTML, the web or the Internet here, though. Many instructors use ‘history’ as a crutch to fill up their courses, make it look like they are teaching you something, but end up sending you away feeling a little empty. If you want history, you can take a history course. If you want to learn about the history of HTML, SGML or other things I’ll mention in passing in this course then go look it up on the ‘web;. I won’t be testing you on it so you don’t need to worry.

HTML, as its full name states, is a mark-up language. That’s just what it says: Hyper Text Mark-up Language. It shouldn’t come as a surprise, then, that HTML is used to mark up documents. In particular, it is used to mark up web page documents. Originally it was designed to mark up simple text documents to make them suitable for display on the ‘web’.

Notice that it is called a mark-up language and not a layout language or a programming language. Today, we use it to lay out pictures and text and other things on very elaborate web pages. There have been many additions to HTML to allow for this, but it is still rather poor at doing page layout. It really isn’t a desktop publishing language and that is often where new users of HTML have trouble. They want easy ways to do things the language was never designed to do.

HTML is not a programming language either. Some coders want to make it look like a programming language by using a line indenting process known as pretty printing but this is actually incorrect and can cause troubles sometimes. Many of the programs that let you easily create web pages often use this pretty printing indentation which is one of several reasons why I suggest staying away from these programs when creating listing templates. More about that a little later in the course.

A number of programming languages like Java Script, ASP, and PHP are often used with HTML and we will work a little with these in some parts of the course, but these are not actually a part of HTML. It is true HTML that this course is primarily about.

HTML is not a static language, either. It has changed significantly over the years. It has been added to, modified and made to work differently. The two biggest changes came with the release of version 4 of HTML and the addition of Casscading Style Sheets (CSS). CSS is a move towards separating content from form (or layout). This is a good thing, but in order to use it effectively you need a solid grounding in basic HTML or you will easily get into trouble. There are very specific ways to use CSS in listings templates and we’ll dicuss that in detail.

But don’t panic. HTML really is easy. And there are easy ways to do most of the things you see on web pages. We’re going to learn about many of them in this course. It will be easy, step-by-step, and hopefully fun!

Before we get into the nuts and bolts of HTML we should take a moment to look at some of the things HTML is NOT. HTML has little to do with graphics, sound, animation or video. It will link to, and in some cases allow you to embed, these things from or in your web page but the actual source files for these are not HTML. You don’t use HTML to create a graphic banner and you don’t use HTML to play a song. You DO use HTML to display the graphic banner and to cause the song to play. We will cover some basic graphic manipulation functions and simple sound files in this course, but working with advanced graphics, animations, sound and video files will not be covered in detail here.

Some of the fancy web pages you see with moving text, parts that come from all sides and assemble into pictures and words and other fancy creations are not HTML either. They use things like FLASH to produce and transfer these animated creations. Sometimes you use things that are HTML, like forms, to gather information but then you need outside programs (often known as CGI scripts) or programming languages, like Java Script or PHP, to process that information, and a database interface to store it. We’ll talk a little about CGI and some of these other things and actually work with forms and a couple scripts, but you should understand that these scripts not an actual part of HTML.

I often see people asking on chat boards or sending me e-mails that say, “What is the HTML tag to do…” and then they go on to explain some elaborate concept that would require some sort of programming fuction. HTML isn’t an active language. If what you see moves, fades, rotates, slides or changes in some manner, it probably isn’t basic HTML. About the only exception to this is the marquee tag which we will look at later.

There will be other non-HTML concepts that you may have questions about. These are always fair game for you to ask about, and I’ll answer what I can, although if it goes too far afield I may refer you to Google or your favorite search engine. I want to give the bulk of my time to the main topic of this course, HTML.

I believe the best way to work with HTML (and any subject or concept) is to understand what you are doing. You don’t have to learn about servers and UNIX or LINUX and the mechanics of computers and all the things that make the Internet work in order to understand and work with HTML. It is helpful, I think, to know a little bit about what web pages are, how they are viewed and what the whole process is all about so you can know why you do the things you will be doing with HTML. We’ll cover some of that here and later in the course, too.

The World Wide Web, or WWW, is a service on the Internet for the storage, retrieval and viewing of documents. These documents are mostly text documents with HTML mark up tags. Documents and other parts used in web pages (like graphic images, sound and video files) are stored on servers. Servers are just computers, connected somewhere out on the Internet, that wait for you to ask for a document and then serve the various parts up to you. Thus the name.

We use a program on our computer called a web browser (or just browser) to view web pages. The most common browsers are MicroSoft Internet Explorer, Firefox, Netscape Communicator (and the earlier Netscape Navigator), Opera, Mozilla, and Lynx. These are not the only ones, but they make up the lion’s share of browsers in use today.

You are using a web browser right now in order to view this course.

It is also important to note that although there are standards set down for the use of HTML, not all browsers follow these standards exactly. Some companies introduce HTML-like tags that their own browsers will recognize that are not true HTML at all. These tags are called proprietary or browser specific tags. They work only with the browser for which they were made. Other browsers won’t recognize these tags at all. If you use them in your web pages, people using certain browsers won’t be able to view those parts of your page correctly. In my opinion it is a good idea to use only proper HTML tags. When I see a web page that says something like, “Best Viewed Using Internet Explorer” (or some other browser) I know that the web designer either doesn’t know how to code an effect with true HTML tags, or doesn’t care enough about people using other browsers to bother to learn. The Internet should be a place of sharing, not arrogance!

Coding a page with browser specific tags is counter productive. Labeling your web page with something like “Best viewed using [some browser]” is, frankly, a poor idea. People who don’t use that brower for their normal web surfing are not likely to run out and get a copy to view your page. Typically they will just go on to one of the millions of other pages on the web. If you are trying to sell something from your page you may have just lost your best customer!

I think the biggest misunderstanding about web pages is about how we actually view them. Part of this is due to the common language of the Internet and part is that nobody ever explains it. We typically say we surf the net or that we visit websites. This gives the impression that we go off to all these wonderful places around the world to see things on other peoples computers or servers. This just isn’t so.

We don’t actually view web pages on the servers that host them. We don’t surf, or go, anywhere. Through the use of a complicated addressing process, which includes the Domain Naming System (DNS), the hyper text transfer protocol (http) and resource addresses including Universal Resource Locator (URL) and Universal Resource Indicator (URI), our browser sends of a request for the web page we want to view ultimately to the server that hosts it. That host server sends the web page back to our computer. Our browser reads the tags and other information contained in the page and requests the graphics and other items listed there (if any) and the servers where these things are located send them to our computer as well. Our browser stores the web page and all it’s component parts on our computer in temporary files in a place known as a cache (pronounced “cash” — cache just means storage area) and then it builds the page and displays it on our screen. The page we see on our screen is actually on our own computer and not out on the Internet somewhere. You might not have known that.

It’s an important fact to know, however, because it has a lot to do with the servers we use, where we store the parts (graphics, etc.) of our web pages and how we construct the HTML tags that tell someone’s browser how to build and display the page we want them to see. Done right, everything comes together quickly and smoothly. Done wrong, the page might actually work, but it certainly won’t be as good as it could be. And sometimes it won’t work at all. This course will teach you everything you need to know to handle all the parts of a listing template correctly so it will work in almost any browser a viewer might be using.

Enough with the background and stuff. Let’s get down to the nitty-gritty of actual HTML codes and how to build a web page. I’m going to be talking about two kinds of web pages through out most of this course:

1. complete or traditional web pages
2. eBay, and other selling site, listing templates

The first type, complete web pages, may contain many things that do not belong in a listing template. A listing template is a special document that is only a part of a full web page. This difference is one of the key ways that many template designers (both amature and professional!) get into trouble. You definitely do not want a full web page to use as a listing template. We’ll discuss why a little later in the course. For now, we’ll start with a full HTML page as an example so you will be able to see what it is made up of and how it all goes together. Then we’ll look at just the part you need to create a template. But right now, to get started, let’s look at what HTML tags are all about.

HTML codes are in the form of tags. Each tag is enclosed in “pointy” brackets like these: <   > . Some people refer to these as less than and greater than signs. Used individually, in a mathematical context, that is exactly what they are. Used to wrap HTML tag components, they are actually a type of bracket.

An HTML tag looks like this:

Notice the pointy brackets at each end.

Next, it is important to know that there can be spaces in HTML tags. If there are spaces, then they need to be there. They are part of the syntax (the structure) of the language. Don’t leave them out. But don’t put any in where they are not needed either. In the example above there is one space, between the first a and the h in href.

Another thing you might not be aware of is that computers are not smart at all. They are actually high speed idiots. They do what you tell them — exactly what you tell them — and they do it fast! This means they can be real speedy at making mistakes if you give them the wrong information. For the most part they cannot make guesses at what you mean. If your HTML code is wrong, it won’t work the way you intended. To get consistant results with HTML you need to code the right way.

I often hear people say, “What’s wrong with my computer? Why won’t it make my page the way I told it?” In fact, in almost every case, the computer (the browser, actually) is displaying the page exactly the way the person who coded it told it to. It is neither the computer nor the browser that is at fault. It is the HTML code. If you code incorrectly, if you tell the browser to do something other than you really intended to, then it will do it exactly the way you have told it to — incorrectly!

The first rule of displaying HTML coded documents is this: when a browser reads an HTML web page, it will ignore multiple spaces in the content (not in the tags!), condensing them to a single space. If you are in the habit, for example, of typing two spaces after a period at the end of a sentence, you might be surprised to find only one space shows up in your web page. This can be annoying, but you need to learn about it. If you type two words and want them to be more than a single space apart, you need to use a special character to do it. We’ll learn about that a little later on.

Most HTML tags come in pairs. There is an opening tag and a closing tag. I think of it as an ‘on’ tag and an ‘off’ tag, though those are my terms, not official HTML terms. The closing or off tag is usually the same as the opening tag but with a slash character: / in front of the key element, or name, of the tag. We will learn more about this very soon too.

HTML tags are usually easy to remember. For the most part the letter, abreviation or word that makes up the primary part, or name, of the tag indicates what it does. We call this the tag name. Until you learn these names, and become comfortable using them, you may want to make up a cheat sheet that you can keep handy. There aren’t really all that many of them to learn so it will be a short and simple list. In almost no time at all you will find yourself referring to the tags you use by name.

Tags can have three parts: the enclosing brackets, the key (or primary) element of the tag, called the tag name, and sometimes one or more attributes or modifiers that control features of the tag. These attributes often have subsequent parts called parametrs or properties.

Three Parts of an HTML Tag:

1. brackets
2. tag name
3. attributes

Every HTML tag has the first two. The third item is sometimes there and sometimes not. It depends what we want our tags to do. Tags may have none, one, or multiple attributes. Learning about when to use attributes is a big part of what this course is all about. Using the correct attributes is how you get your web page, listing template, or other HTML document to display just the way you want it to.

HTML tags were originally case insensitive. That means you could use upper case (CAPITAL or BIG) letters or lower case (small) letters in the tags in any way you wanted. You could mix and match as you liked. For ease in identifying the parts of a tag, I used to use UPPER CASE letters for the tag name and attributes and lower case letters for any parameters or properties. This would be a typical tag for me in the past:

There have been changes to the concept of HTML and there are more changes to come. HTML is already changing in order to accomodate these future changes. The current version of HTML is actually called XHTML (eXtensible HyperText Markup Language) and has many changes to make it compatible with the concept of XML (eXtensible Markup Language) which is kind of catch-all for the various language that exist now and will exist in the future. It is now a requirement that all HTML tags, including their attributes and parameters, be typed in lower case letters. I now type my tags like this:

I will be using all lower case tags in this course. UPPER CASE still works in HTML tags, of course. Otherwise a large number of the existing web pages in the world would have to be changed. The people that set the rules for HTML will certainly have their hands full should they eventually choose to make it mandatory to change the installed base of web pages. Actually the DOCTYPE statement will make this unnecessary. We’ll learn about the DOCTYPE statement next.

HTML documents can have a variety of different parts. Complete, properly coded, web pages have many parts which should not be included in listing templates. A whole web page document should have a DOCTYPE (DOCument TYPE) statement, or declaration, on the first line. A DOCTYPE statement will look something like one of the following:

The first DOCTYPE statement above tells the browser that the document is HTML and is using HTML version 4.1 but to allow for older tag usage (backward compatibility) as well. There are several other possible DOCTYPE statements that you will see from time to time. They will mostly indicate different versions of HTML (or XHTML) and will indicate whether or not to require strict version compatibility or to allow transitional (backward compatible) usage. The best part about DOCTYPE statements in this course is that you don’t have to worry about them. They are not used in listing templates at all so they won’t actually be a required part of this course. I mention them here so you know they exist and are a part of a full web page. If code you have been using for a listing template has a DOCTYPE statement then it is not correct.

Full HTML documents are enclosed in an opening <html> tag and a closing </html> tag. These two tags wrap around the entire contents of the web page except for the DOCTYPE statement which comes right before the opening <html> tag. Notice that the only difference between the opening and closing tag is the leading slash in the closing tag. These two tags mark out the boundaries of the entire HTML document. Technically, a complete HTML document could have only these two tags. It wouldn’t do anything, but it would be a valid HTML document by definition. It would look like this:

An HTML document can be broken into several parts. The two primary parts of an HTML coded web page are the HEAD and the BODY. I’ll bet you can guess the tags that enclose these two parts or areas. Here’s what our minimal HTML document would expand to if we added just HEAD and BODY sections to the example above:

Notice that the HTML tags open and close the whole document while, within those tags, the HEAD and BODY tags each open and close their respective sections. Blank lines are meaningless to browsers (they just ignore them) so we can add a few blank lines for clarity:

This helps us see the whole document while clearly demarking the individual sections within it. This is a good habit to get into. It isn’t required, but leaving blank lines in appropriate places within your code will help you follow things better. It will make even more sense as the code gets more elaborate. I’ll be doing this in my code examples in this course unless there is a specific reason not to. You’ll see how this helps keep coding straight as we progress through future lessons.

When one tag pair (often called a set or an element) is enclosed within another, we say they are nested. We’ll talk more about the specifics of nesting in a future lesson. For now you might want to make a note of the term.

Now, this is where things might start to get a little confusing. All of that tag and section stuff I just covered above is not going to be part of this course. I’m pointing it out so you can see just what a full web page consists of, but none of it, not the DOCTYPE statement, the HTML tags, the HEAD tags or the BODY tags belong in a well coded listing template. You see, a listing template is a block of coding that goes into the BODY section of a web page. When you add your listing template to the listing form at a selling site like eBay or Main Street Mall Online, the server automatically inserts your code into the framework for an existing web page. This framework already contains the structure tags we just talked about and other content for the page. You don’t need to provide them and, in fact, it is not correct to do so.

Adding more than one HEAD or BODY section or certain elements that belong only in the HEAD section is bad coding and can lead to problems when browsers try to display the web page containing your listing template. It is important to understand and observe this when creating a listing template. We’ll use our full web page example a little more in this lesson and then we’ll discard it for the rest of the course, concentrating instead on the details of the listing template itself.

Further, the HEAD section of the document contains information that does not form part of the displayed page. There is a document TITLE and META tags. There can also be SCRIPT, STYLE, LINK and other tags in the HEAD section. None of these belong in your listing template either. You will probably see some HTML instructors indicating that it is okay to include STYLE tags in your listing template code. In fact, this is not correct. I’ll tell you why when we learn about Casscading Style Sheets in another lesson.

There are certain instances when you may use SCRIPT tags within your listing template to include Java Script or some other programming language, but this is rare and is typically different than the coding included in the HEAD section. This is one instance that can be really confusing to the beginner. Java Script is a powerful language that allows you to manipulate things in your templates. Because of this eBay dramatically limits the use of Java Script in listings on their site. Unless you are competent with Java Script programming, and know which Java Script codes are allowed in eBay listings, you probably shouldn’t use Java Script at all. We’ll deal with Java Script in this course, but only just a little.

The thing to remember is that none of the following tags: HTML, HEAD, BODY, TITLE, META, LINK and/or STYLE, should be included in your listing template code. They just don’t belong there. Even if others teach their use, and even if they seem to work, using them in a listing template is incorrect coding and it can, and will very likely, get you into trouble at some point. You can do everything necessary, and correctly, without using these tags. Learning the right way to do all of this is one of the reasons you are taking this course!

The BODY section of the document is where the contents of a web page goes. Whatever we put there will either affect, or show on, the browser screen. If we put the words “Hi there!” in the body section, those words would be seen on the web page. Our listing template will go into the BODY section of an existing selling site page so it will show on the browser screen. Because it will be contained in an existing site page there will often be other things on the browser screen as well and we may need to take those into consideration in our template design.

An HTML document should have only one HEAD and only one BODY section. I’ve seen people use multiple BODY tags (such as in eBay auctions to add a background) which is incorrect usage and can result in your page displaying poorly in some browsers. Eventually, as browser change to conform to all the current rules of XHTML, your template may not even display properly, or at all. In the case of eBay auctions, using poor code like this can often affect the eBay portions (top and bottom) of the page and result, as well, in listings being cancelled. There are even a few so-called experts that post regularly on help boards that offer several examples of using BODY, and even STYLE, tags in eBay pages to put backgrounds or other features in place. I don’t know who originally started offering that advice on the eBay boards, but it has spread like wildfire and that is too bad, really. It is simply incorrect coding practice. There are correct ways to do these things and you should only use the correct ways.

In a little while you will start learning about the specific tags that are allowed in listing templates. Let’s talk a little more now about tags in general. Remember that tags mostly come in pairs, an opening tag and a closing tag. Some tags, however, are limited to just a single tag. You may have seen some of these in the past:

There are others but those thre, the BReak tag, the Hard Rule tag and the IMaGe tag are three you are most likely to already be familiar with. The way I have shown them above is the old way, the way you likely know them. Under the new rules all tags must be closed. Since these tags, and a few others, don’t use separate closing tags we must close them within the single tag. This is done by leaving a space and then adding a closing slash just before the closing bracket, like this:

I will use this method in all of my examples in this course and you should get in the habit of doing this, closing these stand-alone tags, whenever you use them. Once again, in most cases, you can get away without doing this, but this is now the right way and you should do it simply because it is right. Even now there are times when it must be done this way in order to work. Eventually it will be required in all cases.

Earlier I mentioned there is a third optional part of a tag called an attribute. Attributes allow you to add additional information to a tag. This additional information can affect how the tag works and/or how it applies to the content contained within the tag element. Attributes follow the tag name and are separated from the tag name, and from each other if there are more than one, by a single space. A tag with a single attributes could look something like this:

Notice the spacing. Notice also that the parameter part of the attribute (http://www.ourhutch.com) is separated from the attribute name by an equal sign and is also enclosed in double quotes. Enclosing the paremeters in quotation marks is a requirement of the new standards. You can use single or double quotes. I tend to use double quotes for this. Sometimes there are instances where parameters will require quotes within quotes. In instances where this is required, I use single quotes for any quoted sections inside the double quotes. Just like tags within tags this is also called nesting. We will see examples of this later in the course.

I have heard some experts on the eBay discussion boards state that “eBay doesn’t like quotes in HTML so you shouldn’t use them!” This couldn’t be farther from the truth. eBay is just fine with quotes in template HTML, as long as you use them correctly. The people that tell you not to use quotes typically get themselves into trouble with otherwise bad coding that causes the quotes to make problems for them. They believe they are correcting the situation by removing the quotes but this is no solution at all. If you code correctly then the quotes will work just fine and you will have no problem with them. If you find a problem occuring that appears to be due to the quotes then typically you are doing something else wrong and you should fix that error, not remove the quotes.

If you use a word processor such as MS Word or Word Perfect, or even Word Pad, to write your code you may have problems with double and single quotes because the word processor may use the fancy curley quote marks rather than the straight ones (” and ‘) which are required by HTML. It is never a good idea to construct HTML coded pages with a word processor! More about this important point later too!

In my examples in this course I will always choose to use double quotes first, and then single quotes where they are needed inside a set of double quotes.

Most professional HTML document creators typically have a background in programming (although HTML is so easy you really never need any programming experience to become a competent HTML coder!) and in most forms of structured programming a form or style of line indentation is often used. This indentation is actually known as pretty printing and it has found it’s way into HTML. I seldom use it an I won’t use it at all in my examples in this course, but I’ll take a moment to show you a small example of it so you can see what it looks like:

Indentation like this can be useful in keeping track of the layers (or nesting) withing the HTML code but it really isn’t necessary at all. And sometimes there are reasons you really won’t want to use it at all because it can actually interfere with some layout methods you will use for pages. It looks pretty (where it gets its name!) and it tends to make HTML code look more exotic (perhaps even scary) and I think that’s why programming geeks use it in the first place; to fool the rest of us into thinking HTML is difficult. I simply don’t buy into that, and I won’t be using pretty printing elsewhere in this course. You can use it if you want to but, franky, I advise against it.

You can put comments into your web pages at any point to help you remember what you were doing, to mark out areas when you are trying to track down errors, or for any other reason you can think of. Comments are a tag in their own right and they look like this:

The comment part is everything between the left bracket with the exclamation mark and two dashes at the beginning, and the two dashes and right bracket at the other end. Comments do not need to be on one line. You can break them up like this:

A very important thing about comments, though is their construction. They start with an opening bracket, exclamation mark and two dashes, like this: <!– and the end with two dashes and a closing bracket, like this: –>. It is important to begin and end them exactly like this. Some people show them without the two dashes or with more or less dashes. The correct way is two dashes only. There should be a single space at each end of the comment content to separate it from the opening and closing code and there should never be two or more consecutive dashes within the comment content. Done right, comments will always work correctly — by working not at all. They are just there in your code. They should never be seen on your page.

Let’s add a couple of coments to our demo HTML document, like this:

Note that I’ve used a few more blank lines to break up the code for easier reading. Use all the blank lines in your HTML documents you wish. It makes no difference if you use several or none at all. The browser will read the information just fine. The example above will create exactly the same page as this following example:

One is perhaps easier to read and work with, the other is more compact. It’s up to you what you like. You could actually make your document like this:

putting it all on one continuous line. It really makes no difference. So why did we do all this? The idea is that you understand that some of what we do in coding HTML documents is for us (the people) and some is for the computer (and browser). The page must be right for the browser to interpret it properly, but there may actually be many right ways to display the same code. Don’t panic when you see something that at first looks a little different. If you break it down into modules with opening and closing tags you will find it gets pretty easy to see what is going on.

HTML Editors…

While we will be covering a variety of HTML editing programs in a later lesson, let me get you started on the right track. For simple text-based HTML coding you already have a very good little editor called NotePad (on Windows systems). This is actually a text editor and differs from a word processor in many ways. The key element is that it saves your work in the proper way to be handled by all browsers (if you code correctly, of course!) and is very easy to use.

For now, if you don’t already have a good text-based HTML editor, use NotePad to try the various examples offered in the course. If you are using a Mac you may need to download a simple text editor, like Text Wrangler since I don’t believe the Mac comes equiped with one.

Practicing HTML Code…

We have provided a selection of links on the course main page to pages where you can practice your HTML code. You can use one of these, if you like, to work with things you learn in the lessons here. You are welcome to use these to test out things you have learned elsewhere as well, but don’t get too far ahead of yourself. Become comfortable with the codes you are learning and practice them to get them right. Remember that learning is a process. Part of that process is repetition. Reading these lessons over again and practicing the HTML examples is part of that.

What Have We Learned…

In this second lesson we have learned:

• HTML is Hyper Text Mark-up Language.
• HTML uses tags to mark up documents to use as web pages.
• HTML is changing and the rules are changing along with it.
• Most tags are used in pairs, an opening tag and a closing tag.
• Some tags are used singly, by themselves, and are closed within the single tag.
• Web pages have several parts. There is a HEAD and a BODY section.
• Our listing templates go into the BODY section of an exising web page.

This is all very simple but it is the foundation upon which we will build the structures of all of our listing template designs.

Your next lesson will be available whenever you are.

[ top of page ]

Great Pre-Made Banners For Your eBay Store. Your Name Added At No Extra Charge!