html

Every Tuesday in November I am showing you how to do one simple thing with HTML. Today it is how to put in a little line break. Like this –

The HTML code to do the line above looks like this –
<hr />

Horizontal Rule

HR means Horizontal Rule – rule a horizontal line. ;) It really is that simple. But you can make it more complex if you want to. You can add a few things to it in order to make it look different, be shorter, be one dimensional. Here’s some of the extra codes you can use.

No Shade

<HR NOSHADE>
NOSHADE means to be flat and one dimensional.

Size

Size obviously relates to the height of your horizontal rule. You can easily change the size of your horizontal rule by simply adding size=X – X being the number you want.

Width

There are two ways you can choose what width you want. Pixel size and percentage. I suggest to stick with percentage for the most part because it will automatically adjust itself accordingly.

Align

<div align="right"><hr width="50%" /></div>
You cannot use align without using width. Center is probably the one you would use most. If you use width you may find that the HR centers itself automatically.

Color

So there you have it. The Horizontal Rule. Try one out in a post today!

HTML Reference And Learning Websites –

HTML Code Tutorial
HTML Help
HTML Tutorials At W3
HTML Goodies
HTML Dog
Learn HTML And CSS

Blogging is like learning another language by itself, and there’s a lot of people sitting in the corner with their hands over their ears screaming “NO! I Will Not Learn This HTML! I Just Want To Blog!” – I believe the reason is, people think this is too technical for them.

Well I have good news for you. It’s not technical. It is simply a different language. HTML stands for HyperText Markup Language. If you’ve ever tried to learn a language you’ll know you need to practice and use it often in order to be successful, and you have to learn what things mean in order to understand it.

HTML is no different.

It’s just like French, only more useful – unless you live in France. It’s just like Norwegian, only less pretty looking. It’s just like English, only if you use the wrong spelling or grammar it can stop your site from working right and cause you to have a minor meltdown where you end up curled into a ball on the floor, rocking back and forwards.

The good news –

You don’t need to learn to speak this language out loud, or learn to remember it if you don’t want to. Using this language is a simple matter of copy and paste. Eventually you may learn the code yourself and can write it on your own – even then you can still use copy and paste because it saves you time.. Also, there’s a lot of great sites out there where you can grab bits of code – almost like phrasebooks.

In this post –

The HTML will be put into images, just to make it easier for me to write the post. Do not fear, I’ve got a text file which accompanies this post – and it contains all the HTML I’m talking about today complete with instructions on how to modify it to suit you.

New To Computers?

Some of the people reading this may not know how to copy and paste, I’ll put links to instructions for that at the bottom of this post too – as well as an easy way to “steal” code from websites and blogs.. So let us begin.

Text Links –

Most bloggers use the option in their blogging platform to put in a link. This is time consuming and it means you have to have the page you are linking to open in your browser when you are writing the post in your blog. The code for this is so simple.

<a href="link">text</a>

In order to make a link, you need to copy the link and then paste it to replace link in the HTML. The quotation marks need to stay. You then put the text you want for the link where it says text – in between the brackets. So a link to me would look like this –

<a href="http://www.snoskred.org/">Snoskred</>

Colors –

There are 216 colors which are best for using on the internet because they don’t “dither” – they are solid colors. See Non-dithering colors for more info. What we want to talk about is how to change font colors in HTML. You can do this in your blog color scheme, but sometimes you will want to use it in blog posts or in your sidebars. It truly is child’s play.

<font color="#colorhere">text</font>

Where do you get the color codes from? Try the Visibone Color Lab or the Web Safe Color Chart

Lists –

<ul>

    <li><a href="link">text</a></li>

    <li><a href="link">text</a></li>

</ul>

<ol> <li>text</li> <li>text</li> </ol>

Some people have seen the UL code around the place, they use it, they have no idea what it means or what it does. ;) It stands for Unordered List. This just means you can put a bunch of things together in a list. There is also OL which stands for ordered list and that kind of list will automatically put in numbers. There is a fantastic lists tutorial online – HTML Lists which explains lists a lot better than I can.

Centering –

Things tend to look better when they are centered. There’s two ways to do this in HTML and I am going to tell you the really simple one. Are you ready? This one is a doozy, ya’all. You better sit down.

<center>text</center>

Seriously, that is how simple it is. It has to be center, not centre.

You can see now this language is actually easier than a lot of the languages on the planet. It’s not like they’re taking the word newspaper and telling you the word for it is avis as they do in Norwegian. It just involves some brackets and looks complicated but truly, it isn’t. Don’t be scared of it.

Scroll Bars –

Sometimes you want to put something on your sidebar but you don’t want it to take up the amount of space it takes up. A blogroll is an excellent example of this.

Some people use blogrolling to maintain a blogroll. Unfortunately blogrolling uses Javascript – and therefore none of the links count in Technorati or on Google or the other search spiders.

If you want the links to count for the people you are linking to, you need to use the following HTML code – you can put links in there, or just text. I have both link and text scroll bars on my sidebar, can you see them?

<div style="overflow: auto; height: 100px">

<ul>

    <li><a href="link">text</a></li>

    <li><a href="link">text</a></li>

    <li><a href="link">text</a></li>

    <li><a href="link">text</a></li>

</ul>

If you want to change the height of the scroll bar, simply change the 100px to a lesser or higher number – ie 180px, 300px

I’m Ready To Get The Text File Now –

You can get a copy of all this html code in a simple text file with instructions on how to modify it right here – it is better to use right click and save as text file because if you view it in your browser you won’t see the code.

Copy And Paste

There’s a few links on the web which teach you to copy and paste – here are two simple and good ones.

How To Copy And Paste
The Basics of Cut and Paste

How To “Steal” Code

Sephy wrote a great blog post on this a while back.

How To “Steal” Code

Ready For More?

Sephy’s Tuesday Think Tank post (which is a companion post to this one) is fantastic this week, so make sure you go and read it! ;) I will link to it here as soon as he puts it online – which may be a little while because his internet just went offline and he’s gone to bed. Drop back in about 12 hours for the linky. ;)

Check out his post of Some HTML Tips & Tricks here!

Snoskred – Life in the Country

Basic HTML For Bloggers November – Tech Tuesday