November 30, 2006

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…

Filed under HTML by .

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:

  • HTML Forced Type Style tags can be used to accent and emphasize text
  • The four basic HTML Forced Type Style tags are:
    • Bold
    • Italics
    • Underline
    • Typewriter Text

In our next lesson, we will look at HTML Horizontal Rules. Till Then…

Filed under HTML by .

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:

  • To create a bulleted list, use the UL tag
  • To create a numbered list, use the OL tag

In our next lesson, we will look at HTML Forced Style tags. Till Then…

Filed under HTML by .

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:

  • The HTML Line Break tag adds a single line break between text sections
  • The HTML Line Break tag is similar to the HTML Paragraph tag
  • Use of the HTML Line Break tag is a matter visual preference.

In our next lesson, we are going to discuss HTML Lists. Till Then…

Filed under HTML by .

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:

  • An HTML Paragraph separates the text into ‘paragraphs’.
  • The effect of an HTML Paragraph is that the block of text in a paragraph will be separated from another block of text by a blank line.

Next time, we’ll talk about the Line Break Tag — similar in some ways to the Paragraph Tag, but has a slightly different effect. Till Then…

Filed under HTML by .

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:

  • Heading tags are used to give your reader/visitor visual cues as to how your web page is organized.
  • There are 6 Heading Tag options – H1, H2, H3, H4, H5, H6. 
  • The H1 tag displays text the largest, relatively speaking
  • The H6 tag displays text the smallest, relatively speaking

In the next lesson, we will explore "Paragraph" tags. Till Then…

Filed under HTML by .

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.

Do I have to learn HTML to operate a blog?

By all means, No. However, learning some HTML will allow you to understand why text on the screen looks the way it does. And it will give you the ability to add additional functionality should you desire to.

The Concepts

We must start with a couple of high-level concepts to give you the give you the mental framework to which to attach some of the detail. HTML is basically a combination of "Text" and "Tags". The text is the information that you supply — it’s the content that your visitor reads. The tags are instructions on how your browser formats your text. Before we go into what the tags are and how they function, specifically, let’s examine what a tag looks like.

Tags

Tags surround the text, like bookends.

For example, if I want to make some text bold, I can do it like this:  Notice the bookends: These are tags. Notice the difference between the beginning tag and the ending tag. The ending tag has a ‘/’ wedged in just after the ‘<’. Whatever is wedged between the beginning tag and the ending tag will receive the effect of the tag.

In summary:

  • HTML is comprised of "Text" and "Tags"
  • Tags format your text
  • Tags are comprised of a ‘beginning tag’ and an ‘ending tag’.
  • Any data sandwiched between the beginning and ending tag will be affected by the tag

In the next lesson, we will explore "Heading" tags. Until Then…

Filed under HTML by .

Made with Semiologic Pro • Light Gold skin by Denis de Bernardy
Login