Pages

Wednesday, February 01, 2012

Understanding HTML in your Blogger Posts

In Blogger there are two basic ways of posting, by composing, or by HTML-ing. Who says you can't use a little of both. Normally I write the posts for my blog in 'Compose' mode while making final touch-ups in the 'HTML' mode. These modes can be toggled by pressing the two rectangles labels 'Compose' and 'HTML' located on the top right of the blog post writing space.


If you unfamiliar with HTML, CSS, Javascript, XHTML, or XML, the 'HTML' writing mode can be overwhelming and confusing. This post will be aimed toward eliminating those misunderstandings and to help you learn to fix up posts with the 'HTML' mode setting in your Blogger post working environment (where you write the posts).

Here are some common "tags" (keywords) that are important to understand:
To Next Line
<br /> this is the equivalent of pressing the Enter key on the keyboard / it skips down to the next line and continues its HTML content from there.

Horizontal Lines For Splitting Up Content
<hr /> this is a great way to seperate ideas (very effective). It is a horizontal rule (a horizontal line across the page). These horizontal rules are being used to separate this posts content  into parts!

Links
<a href="www.google.com">click here to link to google</a> The letter a stands for anchor (kind of weird, I know) and this is a way of having text as a link

Bold, Italics and Underline (Formatting Tags)
<b>this makes text bold</b> or <strong> this is bold as well  </strong>
<u>this makes text underlined</u>
<i>this makes text italicized</i> or <em>this is italicized too</em>

Paragraphs
<p> These paragraph tags can be used to define a paragraph. All of the text inside it is displayed as plain text, but can be assigned these things called Attributes.</p>

 Font Types

<p style="font-family:impact">This is a paragraph with impact font</p>
This is a paragraph with impact font

<p style="font-family:verdana">This is a paragraph with verdana font</p>
This is a paragraph with verdana font

<p style="font-family:time new roman">This is a paragraph with times new roman font</p>
This is a paragraph with times new roman font

<p style="font-family:arial">This is a paragraph with arial font</p>
This is a paragraph with arial font

<p style="font-family:courier">This is a paragraph with courier font</p>
This is a paragraph with courier font

<p style="font-family:algerian">This is a paragraph with algerian font</p>
This is a paragraph with algerian font

<p style="font-family:monospace">This is a paragraph with monospace font</p>
This is a paragraph with monospace font

<p style="font-family:playbill">This is a paragraph with playbill font</p>
This is a paragraph with playbill font

The style keyword is an attribute for the p (paragraph) tag. More Fonts In HTML!


No comments:

Post a Comment