November 30, 2006

HTML for Bloggers… (8) HTML Tables

HTML for Bloggers… (8) HTML TablesLast time we looked at the HTML Horizontal Rule.  In this lesson we will discuss HTML Tables: What is an HTML Table? Let me give you an example.

HTML Table Code HTML Table Browser Results

  HTML Tables is a fairly large topic because of large number of options available.  Therefore, I’m only going to discuss the most common items that I think are most significant. Let’s take a closer look at the example above and define the tags used:

  • TABLE - Table Definition. The example has a border="1" option which will display a border of the size shown.  Another alternative is to turn off the border by using border="0". 
Permalink • Print • Comment

HTML for Bloggers… (7) HTML Horizontal Rule Tag

HTML for Bloggers… (7) HTML Horizontal Rule TagLast time we looked at HTML Forced Style tags.  In this lesson we will discuss the HTML Horizontal Rule tag. What is the HTML Horizontal Rule tag?

HTML Horizontal Rule tag HTML Horizontal Rule Browswer Results
   

  Note: Like the Line Break Tag, the Horizontal Rule Tag is stand-alone — it doesn’t have a ’beginning tag’ nor ‘ending tag’.    What is the HTML Horizontal Rule used for? The HTML Horizontal Rule is used to separate text for visual benefits. In summary: The Horizontal Rule can be used any place on a webpage/blog where a visual separator is needed. In our next lesson, we will look at HTML Tables. Till Then…

Permalink • Print • Comment

HTML for Bloggers… (6) HTML Forced Style Tags

HTML for Bloggers… (6) HTML Forced Style TagsLast time we looked at HTML Lists.  In this lesson, we will discuss HTML Forced Style tags. What is an HTML Forced Style tag? It’s a tag that forces a certain style within a document. Here is a list of the Forced Style tags and their effects:

HTML Forced Type Code HTML Forced Type Code Browser Results

The Typewriter Text is generally used to show variable names or to show snippets of HTML. Use the HTML Forced Type Style tags to emphasize and accent the text. In summary:

Permalink • Print • Comment

HTML for Bloggers… (5) HTML Lists

HTML for Bloggers… (5) HTML ListsLast time we discussed HTML Line Breaks.  In this lesson, we are going to discuss HTML Lists. What do you mean by an HTML List? This is an example of an HTML "Unordered List" (UL):

HTML Unordered List Code HTML Unordered List Browser Results

Note that the Unordered list is prefixed by bullets. This is an example of an HTML "Ordered List" (OL):

HTML Ordered List Code HTML Ordered List Browser Results

Note that the HTML Ordered List is ordered by number. The use for lists on your blog is pretty obvious. In summary:

Permalink • Print • Comment

HTML for Bloggers… (4) HTML Line Breaks

HTML for Bloggers… (4) HTML Line BreaksLast time we discussed HTML Paragraphs.  In this lesson, we are going to discuss HTML Line Breaks and show how they can be used. What does the HTML Line Break tag do?  An HTML Line Break tag adds a single line break to your text.  In contrast, the HTML Paragraph tag adds a double line break to your text. What does the HTML Line Break tag look like? Well, the HTML Line Break tag looks like this:   Note: An HTML Line Break tag is a little different from other tags in that it doesn’t have a ‘beginning tag’ and an ‘ending tag’ - just a single tag (shown above) - the HTML Line Break tag stands alone.    Let’s contrast the HTML Line Break tag with the HTML Paragraph tag.  In our last lesson, we saw that the HTML Paragraph tag puts a double "line break" in between sections - like so: results in: Do you see the double "line break"? Let’s look at the HTML Line Break tag in action.  Consider the following HTML ‘code’.   When we execute it, we get: Do you see the difference between the HTML Line Break tag and the HTML Paragraph tag? What is the practical use of the HTML Line Break tag? Really, the use of HTML Line Break tag is a matter of taste.  There’s no right and wrong here — it’s whatever looks right to the eye. In summary:

Permalink • Print • Comment

November 29, 2006

HTML for Bloggers… (3) HTML Paragraphs

HTML for Bloggers… (3) HTML ParagraphsLet’s continue with our HTML for Bloggers series by talking about HTML "Paragraphs". Paragraphs Paragraphs are some of the most comon html tags — they look like this: The best way to explain the effect of the paragraph tag is by demonstration. Consider the following two lines: If we execute them in an html browswer, they will look like this: Notice that 2nd line was joined together with the first line.  This is because html doesn’t recognize line breaks — not without a tag to help out. Consider the following code: If we execute them in an html browswer, they will look like this: Notice the effect of the paragraph tags — each line is now separated by a blank line. In summary:

Permalink • Print • Comment

HTML for Bloggers… (2) HTML Headings

HTML for Bloggers… (2) HTML HeadingsIn this lesson, we are going continue our discussion about HTML for Bloggers by talking about "Heading" tags. What is a Heading Tag? Heading Tags Let’s do this a little backwards.  I want to show you what a heading tag looks like, then I want to show you the effect.  Then I will talk about the use.  Remember from our last lesson that tags surround the text with a ’beginning tag’ and an ‘ending tag’. The same is true with the Heading Tag.  Consider the following heading tags: Now look at the affect each has on the text: Do you see the pattern?  Of all of the Heading Tags, the H1 makes the text the largest and the H6 the smallest. How do I use a Heading Tag? Heading tags give you the ability structure your webpage in a heirarchical format, where the H1 would be the document title heading and H2 through H6 are a way to subdivide the text into smaller segments. For example.  Let’s say your wrote an article about selling on eBay.  Let’s look at a sample structure: title: Selling on eBay Topic 1: How to List an Item Topic 2: How to Collect the Money Topic 3: How to Ship an Item Let’s apply the Heading Tags.  Now let’s look at the effect:   Notice that the title (H1 Tag) is the largest text and that the Topics (H2) are just a little bit smaller.  This naturally shows the reader that "Selling on eBay" is the title and that the other smaller, but bolder headings are topics. In summary:

Permalink • Print • Comment

HTML for Bloggers… (1) HTML Tags

HTML for Bloggers... (1) HTML TagsWhether you are using Blogger.com or WordPress — some HTML knowledge is really useful to have.

What is HTML?

Simply, it’s the language that your web browser speaks which tells it how to format your text. It’s what makes a bold word look bold. It’s what makes an italicized word look italicized.

Why do I need to know some HTML?

Although WordPress and Blogger have decent wysiwyg (what you see is what you get) editing environments that shield you from some of the underlying HTML code, there are limitations - tables are a good example. We’ll talk about tables later on.

Permalink • Print • Comment
Made with WordPress and an easy to customize WordPress theme • Light Gold skin by Denis de Bernardy