Welcome to the Basics in HTML Mini Challenge for the Biannual Blogathon Bash! Here you will find a check list of sorts outlining all of the main type of HTML tags you can use for blog posts.

Please note, I tried to think up of all the different codes that any blogger should be familiar with, but I'm sure I'm missing a few. If you find you have a question about any HTML tags during the blogathon, please leave a comment below with your Q. I'm going to attempt to answer all questions over the next few days.

So lets get started! 🙂

HTML Basics

For The Absolute Beginner

<center>Text</center>
To center text. N.B. This tag only works with American English standards, the British English standard of "centre" would not work (which can make blogging a bit confusing for British and Canadian folk.)

<b>Text</b>
Bold, or <strong>Text</strong>, which gives the bold look as well, though obviously takes a bit more time to type.

<i>Text</i>
Italicize, or <em>Text</em> – for Emphasize, which also gives the italic look.

<u>Text</u>
Underline

<h1>Text</h1> to <h6>Text<h6>
Varying levels of headings. Similar to a table of contents, <h1>Text</h1> (Heading 1) would be used for the main title of the post ("HTML Basics" above is created with an <h1> tag), <h2>Text</h2> (Heading 2) would be used for sub-headings, <h3>Text</h3> (Heading 3) would be used for sub-sub-headings, etc.

For the Novice Blogger

Linking

<a href="//google.com">Google Link</a>
A link with attributes, such as title="Google Link", rel="nofollow" to inform the Google webcrawler that this specific link is to be ignored when its gathering information for their search engine (“nofollow” is really important if you're ever dealing with paid links on your blog), target="_blank" or _parent, _self, or _top. Targets are used to control how a link is executed. “_blank”, which is probably the most widely used of them all, tells the browser that when the link is clicked, the desired page is to open in a new window. The remaining three are not very useful in blogging terms. “_self”, “_parent” and “_top” are used if you're link happens to sit within a frameset… but frames are rarely, if ever, used in blog posts (ie – the answer would take up it's own blog post to fully explain, lol.)
Full example: <a href="//google.com" title="Google Link" rel="nofollow" target="_blank">Google Link</a>

Images

<img src="//pictureservice.com/MyAwesomePicture.jpg" />
An image that can include within: align="left", "center" or "right", alt="Description of Picture", title="Actions about the picture.", style="border: #000 1px solid;width:50px;height=50px;"
Full example: <img src="//pictureservice.com/MyAwesomePicture.jpg" align="left" alt="Description of Picture" title="Actions about the picture." style="border: #000 1px solid;width:50px;height=50px;"/>

Div Boxes

<div style="width:300px; text-align:justify;color:blue;">Text</div>
Divider Boxes can hold text/images, especially if you wish to separate a specific bit of text from the rest of your blog post. This particular "style" code would create an invisible box with a bounding width of 300px (height in most cases is unnecessary, but is available as well), align all text to justified, and change the font colour to blue (NB the word "color" when hand-coding is spelled under the American standard). There is a huge amount of choices available to use within a "style" attribute… it would take an entire post to list them all!

Blockquotes

<blockquote>Blockquote</blockquote>

If you have a quote to include in your post, a great way to display it is by separating the sentence/paragraph into its own highlighted box.

Full example: <blockquote style="background-color:#FFC; border:#F66 1px solid;width:400px;">Blockquote </blockquote>

For Those Who Are Somewhat Comfortable in Hand-Coding HTML

Tables

<table><tr><td>Text</td></tr></table> This example to the left would be a one-celled table. And would look something like this:

Text

If you're familiar with Microsoft's Excel, you should have an easy time picturing tables. <table> tags begin every table, without fail. <tr> tags initiate a new table row, and <td> designates table data (and when the table is completed, <td> also represents the table columns). Every row has to have the same amount of <td></td> tags within them, with a few exceptions. So if the first row of <tr><td>Text Box 1</td><td>Text Box 2</td><td>Text Box 3</td></tr> has three data cells, every row below has to have the same amount of cells within, unless…

<td rowspan="2"> or <td colspan="2">

Here's an Illustration

<table width="50%" border="1" bordercolor="#000000" cellspacing="0" cellpadding="0">

			<–	<tr> <td> </td> <td> </td> <td> </td> </tr>
			<–	<tr> <td> </td> <td> </td> <td> </td> </tr>
Rowspan="2"		Rowspan="2"	<–	<tr>      <td rowspan="2"> </td>      <td> </td>      <td rowspan="2"> </td> </tr> <tr>      <td> </td> </tr>
	Colspan="2"		<–	<tr> <td> </td>      <td colspan="2"> </td> </tr>
Colspan="2"			<–	<tr>      <td colspan="2"> </td>      <td> </td> </tr>

</table>

And now for the challenge!

Create a blog post using as many tags listed in this post as possible, with one mandatory tag required in your post… the Table! Your table does not have to look the same as above (you don't have to use rowspans nor colspans unless you really want to try them!)

Once your blog post is created, list it in the comment section below. Also, if you have questions about the instructions, please don't hesitate to ask me for help!

Have a happy and safe Biannual Blogathon Bash!! 😀