Useful HTML Codes for commenting on posts

I love to use HTML when commenting at times – when quoting, posting pictures – being a smart-arse clever pants.  In response to a couple of requests for instructions on how to post images, and in a spirit of generosity, and inthe full expectation that my giving will return to me 100 fold, here are some HTML tips, tricks and ideas for you to use yourself when commenting.

Firstly it might be useful to understand what html tags are.  A tag is a bit of code that web designers/bloggers put into their site to tell their brower how to display what those tags contain.

What is HTML?

HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and quite powerful in what it allows you to create. It is constantly undergoing revision and evolution to meet the demands and requirements of the growing Internet audience under the direction of the » W3C, the organisation charged with designing and maintaining the language.

The definition of HTML is HyperText Markup Language.

• HyperText is the method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page. The fact that it is hyper just means it is not linear — i.e. you can go to any place on the Internet whenever you want by clicking on links — there is no set order to do things in.
• Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, for example).
• HTML is a Language, as it has code-words and syntax like any other language.

You can think of tags as bookends, they have a start to signal the begining of a certain format and an ending to signal the end of the formatting. These bookends/tags are generally put in the angled brackets (<>). The end one’s usually have a slash (/) in them which differentiates them from the opening ones and signals to your browser that it’s the end. So they’ll usually have this basic format – < > </ >. Hopefully you’ll pick it up as you see them outlined below – the way I learned them was by seeing how others used them and then by imitating what I saw in my own comments.

Here are some of the more common tags and what they mean

Basic Formatting Tags

– <b>bold</b>
– <strong>strong</strong> (usually bold)
– <u>underlined</ul>
– <i>italics</i>
– <em>emphasis</em> (usually italics)
– <strike>strike through</strike>
– <center>This centers text on the page</center>
– <tt>teletype text</tt> (typewriter text)
– <blockquotes>blockquotes</blockquotes>

Links

– Basic Link <a href=”url”>link title</a> (where ‘url’ is the page you want to link to and ‘link title’ is the word/s that you want the link to say.
– Email Link <a href=”mailto:EMAIL”></a> (where ‘EMAIL’ is the email address you want to be a link).

Heading Tags (vary according to CSS)

– <h1>An important heading</h1>
– <h2>A slightly less important heading</h2>
– <h3>A less important heading again</h3>
– <h6>The smallest heading</h6>

Image Tags

– Basic Image tag – <img src=”url”> (where url = the url of the image you want to show)
– Image with sizing <img src=”url” width=”200″ height=”150″>
– Align image left – <img src=”name” align=left> (substitute ‘left’ with ‘right’ to align it right)
– Alt Tags – <img src=”url” alt=”short description of image”> (an alt tag tells the reader what they are missing if the image doesn’t load in their browser.
– Image as a link – <a href=”link url”><img src=”url”></a> (where ‘link url’ is the url of the page you want the image to link to and ‘url’ is the image location).
– Image with border – <img border=”1″ src=”url”> (the larger the number in the border “” the thicker the border)
– Space Around Image <img src=”url” hspace=10 vspace=10> (hspace is the horizontal space and vspace is the verticle space. The numbers are the amount of pixels sounding the image)

Putting it all together might look something like:

– <a href=”img url”> <img border=”1″ src=”url” width=”65″ height=”38″ align=left hspace=10 vspace=10></a> (ie this is an image that is a link that has a border 1 pixel wide, that is 65 pixels wide and 38 pixels high, that aligns left on the page and is surrounded by 10 pixels both horizontally and vertically).

Unordered Lists (usually bullet point type lists)

<ul>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ul>

Ordered Lists (usually numbered lists)

<ol>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ol>

A more comprehensive list of tags can be found at Webmonkey

Here is an excellent HTML Tutorial

Go forth and HTML everyone, the news that the Kingdom of God has come!