Basic HTML For Bloggers

- a sort of Complete & Utter Idiot's Guide to Writing html Code.

HyperTextMarkupLanguage - that's what it stands for. Its a way for Web browsers to present text and graphics. A code if you like. To get a better idea of what it is, click on your View menu and then Source or View Source and that will show you how a page of text is formatted in HTML (It'll also show you the keywords used in the Meta tags which can be helpful in getting your page ranked higher on Search Engines - but more on this later).

Basic Knowledge of HTML

Before we go any further let me tell you that I'm rather new to all this. I've only been into computers for the last couple of years. Oh sure I'd used computers in my work before that but only as far as word processing. I was using AppleIIs back in the early Eighties to write magazine stories but apart from knowing how to boot the machine up and format a word processing document I didn't have a clue about computers. And I still don't have much of a clue. I probably couldn't explain the difference between ROM and RAM to save my life. But I know enough to get me by - I have a Basic Knowledge of HTML codes and commands. I don't have a head for programming or writing code or any of that stuff. In fact you're talking to a guy that didn't even finish high-school. I went straight from school into the Advertising business at the tender age of sixteen. So I'm a dummy. And I'm a real dummy when it comes to complicated computer language coding and algorithms - all that egghead stuff. So if I can have a Basic Working Knowledge of HTML code and links - trust me, you can too.

"Basic HTML Keeps Me Fit & Healthy"BTW, I'm on a Mac so before I can save a file with the ".html" extension, I need to format the document as plain text. For the Open Source Word Processor TextEdit in OS X you just set the "Format" menu's "Make Plain Text" option.

So here we go. From the top...in a logical progression. It might help to open another browser window and pull up the View Source of my Welcome to Wallyworld page (the page you're reading now) and follow what I'm looking at.

The HTML Code starts with "DOCTYPE" (meaning document type) html "PUBLIC" and then some other stuff including "XHTML". This is just the new improved version of HTML code. Don't worry about it for now. I haven't written the code for this page - it's done automatically by my host and they are formatting in HTML, XHTML, Javascript and some other stuff like Textile and Markdown which I don't even begin to understand. All I want from knowing a bit of basic HTML code is how to do simple stuff like Bold, underline, Hyperlinks and

Headings in Basic HTML

Coming down the page a bit you'll see the document begins with html enclosed in less than and greater than arrowheads and then if you scroll to the bottom of the page you'll see the very last bit of code is html but this time closed off with a forward slash. That's the way HTML works - you enclose the command within the arrowheads, write your text and then close it off with a forward slash.

After the html commands we have the head which contains everything in your title. You'll see the term "Robots" which is a command to the Search Engine spiders to start reading the information coming up next. And that information is the Meta Tags - both to describe what your site is all about and to give the keywords. You'll notice I only have a Meta Description here - HOW TO: Increase Your Traffic, Boost Your Google Ranking, Optimize Adsense to Make More Money, Keyword Optimization Tips, Work Online as a ProBlogger". This is because my host is convinced that the major search engines no longer rely on keywords in the Meta Tags. Apparently that's true for Google but Yahoo and the others take them into consideration. So I may have to get into the template and see if I can add some keywords here under Meta keywords.

So the head section contains the title and information on style sheets and scripts. After that we have the body which contains the markup with your content - your article/story/table - whatever you're putting in there.

That's about it. Not hard is it? All you have to do now is learn some of the HTML Tags.

The first ones you need to know are the heading tags and they're easy to remember. h stands for heading. h1 puts your words in the biggest size

We Love Basic HTML

H2 Is Smaller

We Love Basic HTML

and H3 is Smaller Still

We Love Basic HTML

The underline tag is written with a u. Paragraph with a p. Line break with a br. Italics with an i.

Probably the most useful piece of code is the Hyperlink - that's a fundamental of blogging - the sharing of information. Clicking on this one will take you to a site with lots of Useful HTML Code including how to write hyperlinks.

BTW I've just learnt how to shut the Hyperlink off so you don't bleed any Page Rank - everyone you link to takes some of your juice. When you add this code - rel="no follow" between the <a and the href in that string of code you stop the bleeding. The hyperlink still works - it still takes you to another page or site when you click on it.

You can also turn an image into a hypertext link so that when you click on the image it takes you to a page or site. Click on the logo below and it'll take you to my mate Michael Davies beautiful site on Cruise Boats on Sydney Harbour (complete with Virtual Reality Panoramas and High Dynamic Range photography).

To make this clickable link image Go here for the html code

Use HTML to Wrap Text Around Adsense

One of my favourites uses for Html is getting the text to wrap around the Adsense - the Adsense Gurus reckon people are more likely to click on the Ads if they are buried in the text. Whatever. But I reckon they look neater than having them displayed in block form.

The code to do it is - Less than arrowhead div style="display:block;float:left;margin:5px5px5px5px;">Google Adsense Code</div more than arrowhead.

You Wanna Make a List?

You can easily format lists with HTML. Like this bulleted list using the ul and l tags.

• $1,000,000 of Affiliate Commissions
• $2,500,000 from Adsense
• $5,000,000 from eBook sales

Tidying up your markup
Dave Raggett, the go-to man for HTML, has an Open Source project called HTML Tidy that does exactly that. Not sure if they have a version for Mac users though. Its available on a Free Download from SourceForge.net hosts of over 132,000 Open Source projects making it the world's largest destination for Open Source.

Basic HTML Codes For Myspace

Go to this page for Myspace Codes in html

Voila - like I said before, if this dummy can do it, you can too - Basic HTML