Lesson 5 – Our First Two Tags | Wiz's eBay Template Design Course

Lesson 5 – Our First Two Tags

Our First Two Tags…

Let’s get right into working with the tags we will use to construct templates. We’ll explore these tags individually or in small groups and combine them as we learn in order to build some sample templates. The first two tags or elements we are going to look at are:

– paragraph
– line break or break

I believe these are the most important two tags and so we will start with them here. Let’s remember that HTML is a markup language and we use tags to markup content, often text. So, let’s consider two paragraphs of text:

This is the first paragraph. I’ll inlcude a few short sentences to give it some bulk. This could be the first paragraph in your listing description or terms section. You would write something appropriate for your description but for our purposes we just need any old content.

This is the second paragraph and could be more content for our listing description or terms section. Once again I’ll just include a few short sentences to provide bulk to the paragraph. It really doesn’t matter what I say as long as I provide some text.

I’ve made the text in my example above blue in color so it stands out from the instruction text for the course and I’ve placed it in a dashed box to set it apart from the rest. I’ve also given it a lightly colored background. Note that you will learn how all these things are done as the course progresses. For now all these things are just about how I will display examples as we work through the tag usage.

I’m now going to mark up this text with paragraph tags. I’ll make the tags red so they stand out and you can easily see where they go:

This is the first paragraph. I’ll inlcude a few short sentences to give it some bulk. This could be the first paragraph in your listing description or terms section. You would write something appropriate for your description but for our purposes we just need any old content.

This is the second paragraph and could be more content for our listing description or terms section. Once again I’ll just include a few short sentences to provide bulk to the paragraph. It really doesn’t matter what I say as long as I provide some text.

With the old way of coding HTML we would have used a font tag to set the font face, color, and size. Now, with the new way of coding, we use Cascading Style Sheets for this. In websites we use embedded style sheets in the HEAD section of the page or, preferably, a linked style sheet using a link tag in the HEAD section of the page. But with our listing template designs, remember, we are inserting our template coding into the BODY section of a page and we don’t have access to the HEAD section so we cannot use embedded or linked style sheets. So instead we use the third type of CSS called inline style attributes.

Inline style attributes make things so much easier and cleaner. Instead of worrying about multiple tags and some complicated tag nesting we can include almost everything we need to control our text right in the paragraph tag. In our example text above I’ve actually set the font face (now called family), color and size using the coding for this page, but if what you see in the example was actually a block of marked up content for inclusion in a template you would see the coding in the paragraph tag, which would look something like this:

This is the second paragraph and could be more content for our listing description or terms section. Once again I’ll just include a few short sentences to provide bulk to the paragraph. It really doesn’t matter what I say as long as I provide some text.

The inline style attribute (style) has a parameter that includes the various font modifiers that make our text look the way we want it. In this case, this:

style=”font-family: arial; font-size: 16px; color: #000096″

is the inline style attribute. It contains a font family declaration:

font-family: arial

which sets the font to arial, a font size declaration:

font-size: 16px

which sets the font to 16 pixels tall, and a color declaration:

color: #000096

which sets the text color to blue. Notice that each of these parts of the style attribute’s parameter are separated from each other by a semi-colon. I’ll mark them in red so you can see them easier:

style=”font-family: arial; font-size: 16px; color: #000096″

Notice that there is no semi-colon at the end of the attribute above. Sometimes you will see a semi-colon used at the end, like this:

style=”font-family: arial; font-size: 16px; color: #000096;“

There is still some discussion about whether this is right or not. It is my opinion that the semi-colon is a divider, not a terminator, and is therefore not needed at the end.

If you look at the source code for the pages of this course you will see that most of my paragraph tags are just plain tags without any attributes. This is because I am able to control the entire page and pass the attribute information to each of the tags from a single declaration in the table tag that controls the layout of the text part of the page. This process is known as inheritance and you’ll learn more about it a little later.

In your templates, though, you should always tag each paragraph and include appropriate attributes in each of your opening paragraph tags. Note also that you do not include, or re-state, the attributes in the closing tag. Closing tags are just the tag name with a leading forward slash.

Most websites, like eBay or Main Street Mall Online, where you will use your templates, will use embedded or linked style sheets to set values for their font family, size and color, and and other features. These settings may influence the text in the template part of the page if you don’t declare your own values. Using appropriate inline style attributes in each tag ensures that YOU control the look of your template rather than having it controlled by the site owners.

I was told by a commercial template designer the other day not to use paragraph tags around text in templates because of the interference possible from these parent site style sheets. She went on to tell me that the best way to code around this problem was to use the element around text instead. Not only is this incorrect usage of the span element, it isn’t necessary. Correct usage of the paragraph element is all you need.

Of course, mentioning this converstaion introduces a third tag to this lesson:

– span

You will learn more about this third tag (span) in a moment but, for now, let’s look at our second tag. Sometimes you may want to set off a small piece of information within a paragraph by displaying it on a separate line as I did in the text several paragraphs above. This is where the break tag comes in.

The break tag, or the line break tag as it is also called, breaks the line of text at the point it is used and moves the remainder down to the next line.

This is one line of text
displayed on two lines.

It is the use of a break tag in the text above that allows it to display on, or break across two lines:

This is one line of text displayed on two lines.

If you use two break tags in succession you get a blank line between the text segments. Consider this text:

This is a first paragraph. It may have some information that you want to display on a separate line like this:

this is text on it’s own line

and then continue with the rest of the paragraph like this. It may have a few more sentences just to finish things off. All of the content is actually one paragrah and would be enclosed in a single paragraph element.

In order to get the text to display in our template in the desired way we would mark this up in the following manner:

This is a first paragraph. It may have some information that you want to display on a second line like this: this is text on it’s own line and then continue with the rest of the paragraph like this. It may have a few more sentences just to finish things off. All of the content is actually one paragrah and is enclosed in a single paragraph element.

This does seem to get a little muddled, however, with those break tags mixed right in with the text, so we can write our code on separate lines, like this:

This is a first paragraph. It may have some information that you want to display on a second line like this:

 

this is text on it’s own line

 

and then continue with the rest of the paragraph like this. It may have a few more sentences just to finish things off. All of the content is actually one paragrah and is enclosed in a single paragraph element.

In the above example I’ve broken the coding onto separate lines to make it easier to see. That is the way I would do it in my own template designs as it allows me to easily follow the coding and even have a better idea of how the text is going to display on the page in separate lines.

The result on the displayed template, using either method, is exactly the same.

Sometimes people get lazy with their coding. Putting those paragraph tags around each paragraph and having to repeat the same inline style attribute over and over can seem like a lot of work. In order to make the process shorter, you can cheat a little. You could markup our original two paragraphs like this:

This is the first paragraph. I’ll inlcude a few short sentences to give it some bulk. This could be the first paragraph in your listing description or terms section. You would write something appropriate for your description but for our purposes we just need any old content.

 

This is the second paragraph and could be more content for our listing description or terms section. Once again I’ll just include a few short sentences to provide bulk to the paragraph. It really doesn’t matter what I say as long as I provide some text.

This example only has two paragraphs. It’s a small saving but if you had several paragraphs, each with the same font family, size and color, you could save quite a bit of coding time and effort by using the inline style attribute in just one opening paragraph tag, and then separate each text block (paragraph) from the next by using two break tags.

This is not the best markup procedure, of course. Each individual paragraph should have its own opening and closing paragraph tags. From a markup perspective this coding would mean your text is all one long run-on paragraph. Mrs. Bell, my highschool English teacher. would not be happy about that! But it is valid coding and it is finding a lot of followers. It is a shortcut you may want to consider.

So now you have learned the correct way to use the paragraph tag to display text and the break tag to separate text onto multiple lines. Using the inline style attribute you have learned to add features to basic tags that changes the font family, size and color. Using these, and other modifiers, we can provide for all sorts of text effects.

The inline style attribute can be used in any tag although only certain features work for certain tags. We’ve learned three of these features so far. You will learn a lot more as you progress through this course. You should keep a working list of the various features you can use within the inline style attribute so you can refer to it as needed. With these you gain important control over the look and layout of your template.

As you learn more features your list will grow. To start you have:

font-family: arial – declare the font to display your text

font-size: 16px – declare the size to display your text
color: #000096 – declare the color to display your text

Note that when you declare a feature using an inline style attribute in an opening tag the effect of that declaration applies to all content contained in that tag element through to the closing tag. In effect, the closing tag turns off the style declaration.

Let’s explore a few more examples:

HELLO!

And here is what it does:

HELLO!

Notice that I added text-align: center which centers the output, much as the old <center> tag used to do. I changed the font to comic sans ms and the font size is both larger and referenced in point size (pt) instead of pixels (px) that I used before. Additionally I added font-weight: bold which makes the text lines thicker.

Our list of features has expanded to include a new one:

font-family: arial – declare the font to display your text
font-size: 16px – declare the size to display your text
color: #000096 – declare the color to display your text
text-align: center – declare the alignment of the content

There is another tag I’m going to introduce in this lesson because it goes so well with the paragraph and break tags. It is the span tag and it is used where you need to add an inline style attribute to change a bit of text where there is no other tag available in which to include the style attribute. The span tag most often occurs within a paragraph tag but that is not the only place. We’ll see many examples of its use throughout this course. Unlike the suggesting by the commercial template designer above, here is another code example with the correct use of the span tag, followed by what it displays as:

RAINBOW

RAINBOW

Check through the code to see what font it is, how the size was determined, why it’s over to one side, how the letters change color, and any other function that is applied. Note that in this example I used color names instead of color numbers. Check back in the other examples to see how color is handled.

With the span tag examples we can see that various changes in declaration can be applied by using new inline style attributes within nested tags. The span tags are nested inside the paragraph tags. You will see more of this in future, more complex examples. You may want to go back and look at the previous examples in this lesson to be sure you understand how each of these tags is working with the others.

As coding begins to get a little more complex it is a good idea to learn how to read HTML tags. It is really quite simple and if you learn to do it you will have less trouble with HTML. The most important thing it will do is actually let you see the coding instead of your eyes glazing over every time you are confronted with a block of HTML. In our first examples in this lesson we encountered a paragraph tag that looked like this:

and which would be read like this:

Opening bracket, paragraph style equals margin top zero pixels, text align right, font family verdana, font size 50 point, font weight bold, color red, closing bracket.

That’s all there is to it. Just read what you see, pronouncing each of the words or letters. If you pronounce p as paragraph (the actual name of the tag) it helps you learn and remember what the tag is for. That’s one of the great things about HTML. The tag names actually make sense. Learning the long names for the abbreviated tag names, like:

br = break
p = paragraph
hr = hard rule

will help you even more. As your study continues and your notes grow you will find you have learned more and more tags until you are finally comfortable with them all.

One final thing I want to cover in this lesson is knowing enough to be dangerous, which is probably where you were when you started this course but certainly where you are now!

If you have done any HTML coding in the past you probably learned a few tags like <center> </center> and . You may notice that center is a tag pair. There actually is a closing center tag that turns off centering. I sure wouldn’t know that from many listing templates I’ve seen. It seems to me that the first tag most people learn is <center> and they never learn about </center>. The content of their listing template, titles, paragraphs, pictures, everything, is positioned right down the center of the template!

The excuse for this is often, “it looks more balanced” which is no reason at all. In fact, centering everything on your template or web page is very poor design and it can actually cause you to lose sales.

Another bad thing is that people seem to quickly learn how to make bold, underlined and colored text and then use it extensively in their listings. Everything is large and bold and a lot of various colors. They think they are emphasizing things so they stand out. The problem is, however, if you emphasize everything then nothing is really emphasized. We’ll go into this in more detail in a future lesson that focuses on several subtle marketing concepts that will improve your template design, but for now let me just say that all things in moderation is a good phrase to remember.

What Have We Learned…

In this fifth lesson we have learned:

The paragraph tag element is used to markup, or enclose, each paragraph.
The break tag is used to move text down to the next line.
We can use two break tags in succession to simulate a paragraph break.
The inline style attibute allows us to include features in tags that affect the element content.
The span tag allows us to include features where there otherwise is not a suitable tag to do so.
We should be careful not to over use features that can make our listings look bad.

Proper use of HTML coding and a little common sense will always produce a good looking template.

Your next lesson will be available whenever you are.

[ top of page ]

Online Selling Association: Add Your Store To The FREE Find-A-Seller Database!