Useful HTML codes for bloggers Part 1

Hello my lovely readers,I hope your week is great so far. Today's post has nothing to do with beauty but I think it might help many of you. The past Sunday the topic of the #bbloggers chat on Twitter was html and I realized that many bloggers don't know anything about html or don't know how to search through Google to find these codes. So i thought it would be nice to gather some really useful codes that I use and you might use while blogging.  I know that sometimes you can be lazy to search, I am sometimes, so having few codes in one post can be helpful. I am aware that some of you probably already know some or all of these html codes but there are some people who don't.

Bear in mind that there tons of codes you can use while blogging and I will include only those that I've been using and think that are more useful.

A little disclaimer, I am NOT professional and I will include codes that you can easily find while searching through Google. Everything I know I learned it while searching and watching youtube videos. Believe me Google is your bff for htlm and css.

In the part 1 I will include the most common codes that I use a lot when I blog.

The <br> tag

This is is very useful if you want to insert one line break in HTML. While writing HTML code if you want to change line the "enter" won't work so use the <br> to change line.

Text Formatting

There so many properties you can add to you text to make it look more attractive. Here are some of them:

• <b> : for bold text
• <i> : for italic text
• <del> : for deleted text
• <font size="X">Your text here</font> : by changing the X to a number, you change the text size
• color="#F69ABC" or color="pink" : both are for text color,the first one is more specific 
• font-family:X : change the X to whichever font you want like Arial or Georgia

Those are the basic for the text. So if I would like to write "hello everyone" with bold text,in size 5,pink color and in Georgia the html code would look something like that

<font size="5" color="pink" font-family:"Georgia"><b>hello everyone</b></font> = hello everyone

As you can see in the code above there are two end tags.What are those end tags? If you want to add properties such as bold or italic to your text you will need to use the end tag. Basically its the same tag with a " / " in front. This tells to your computer where that property ends. If you want you whole text to be for example bold then you can not add it manually and the blogger will add it automatically. But if you want only a part of the text to be bold then that part needs to be between the tag and the end tag, for example

<b>Hello</b> everyone = Hello everyone

One useful link is this,there you will find the color picker. There you will be able to find the color you want for your text.

If you feel too confused, there is an HTML text generator that I found that you can use,you just change the properties and it generates the html code for you, click here.

Click-able Image

I find it better and more organized when I can click on the image instead of having a link a under or on the top of it.To do so there is simple code that you can use.

<a href="URL_HERE"><img src="IMAGE_SOURCE_URL_HERE"/></a>

There few other properties you can add to that code

• target='_blank' : add the after your url to open the link in new window
• width="X" : change the X to your desired width
• height="X" : change the X to your desired height 
• alt="any_text" : when you use this and you hover your mouse over the picture you will see some text

So the code for the above picture with width 150,height 50,to open in new window and with text "Fashiony Nails" when you hover your mouse over it is

<a href="http://www.fashionynails.com" target='_blank'><img src="http://i660.photobucket.com/albums/uu327/SweettyAnne/signature2.png" alt="Fashiony Nails" width="150" height="50"/></a>

Text area

Did you ever want to have text box on your sidebar? Or do you want to make a blog button and have the code for it in a box so people can copy it? Well what you need is a text area. Its really simple code that generates a box when you can write whatever you want. The code is

<textarea rows="X" cols="X">Your text goes here</textarea>

Your text goes here

You change the "X" to number of rows and cols to adjust the size of the text area to your liking.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

One very useful site for html and css help is w3schools.com, there you will find many more codes :).

That's it for the part 1.There will be part 2 tomorrow or day after tomorrow so don't forget to come back to check it out :).

Hope this will help at least few of you