5 Flares Twitter 0 Facebook 1 Google+ 1 StumbleUpon 2 Pin It Share 1 5 Flares ×

Basic html for beginners

Image Source – webdesign.com

Are you a HTML beginner ? Then here is a complete guide  of HTML codes that you can use it on your own blog or website. Though I would insist that bloggers should take time to learn and write codes on their own as sometime you may need a code in a pinch.

Does HTML code seem to be scary ? Then you must realize that from the very beginning HTML is a very simple language to learn and write. Due to some automated systems it has become quite complicated .Thus, here are simple HTML basic for beginners that will help to claim your fear and jump right in to learn this simple language within a few steps.

Text Formatting  –

Text formatting includes simple basics related to proper formatting of text. It has the following –

 1. Headings

 As the name suggests you can use <h1> to <h6> according to the web page requirement.

 <h1>Your important heading</h1>

2. Aligned Heading

Aligned heading simply aligns your heading by using little bit of CSS.You can use “left”, “right”, or “justify” in place of “center” below:

<h1 style=”text-align:center;”>Your aligned heading</h1>

3. Paragraph

Paragraph gives a break between lines to define it is a paragraph.

<p>Your paragraph here</p>

4. Aligned Paragraph

Aligned Paragraph simply aligns your Paragraph by using little bit of CSS.You can use “left”, “right”, or “justify” in place of “center” below:

<p style=”text-align:center”>Your paragraph text is aligned</p>

5. Line Breaks

Line Breaks are used to start a line without starting a new paragraph.

The end of your sentence.<br />

6. Bold Text

Its allows to make your text bold.

<b>Your bold text</b>

7. Italic Text

Its allows to make your text italic.

<i>Your italic text</i>

8. Underlined Text

Underlines your text

<u>Your underlined text</u>

9. Strike-through

Places a line through your text to strike it out.

<s>Your text here</s>

10. Font Family

Font Family allows you to set your favourite font or using web fonts.

 <span style=”font-family: Arial, Helvetica, sans-serif;”>Your new font</span>

  •   Font Size

You can change the size of the font using litte CSS. To define the font size you can use  px, em, or a percentage.

<span style=”font-size:16px;”>Your font in a new size</span>

  •  Font Color

It enables you to change the color of your fonts of your choice.

<span style=”font-color:#030303;”>Your new font color</span>

  •  Highlighted Text

It allows you to highlight your text with a different background color.

<span style=”background-color:#C2F2CA”>Your highlighted text</span>

 11. Links

  • Basic Text Link

It adds a link to specific text or a word.Replace the http://www.yourlink.com with your own link:

<a href=”http://www.yourlink.com”>Your linked text</a>

  • Open Link in New Tab

Used to open the link in a new window or tab instead of in the same web page:

<a href=”http://www.yourlink.com” target=”_blank”>Your linked text</a>

  • Link To An Email Address

It will directly open the user’s email program to send quick email. Replace the email address with your own:

<a href=”mailto:you@youremailaddress.com”>Your email address or link</a>

12. Images

  • Image Link

It is for adding a link to a certain image.

<a href=”http://www.yourlink.com”><img src=”http://www.yoursite.com/yourimage.jpg” alt=”describe this image”/></a>

  • Image Width and Height

You can easily set width and height accordingly of the given image.

<img src=”http://www.yoursite.com/yourimage.jpg” alt=”describe this image” width=”450″ height=”600″/>

  • Align Image to Left or Right of Paragraph

You can easily align the image by using following code whether right or left.

<img src=”http://www.yoursite.com/yourimage.jpg” alt=”describe this image” align=”left”/>

  • Page Background Color

You can the overall page background color by using this code. Change the color code accordingly.

body {

13. Lists

  • Ordered List

You can use below given code to create ordered list.

<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>

  • Unordered List With Bullets

You can use below given code to create unordered list with Bullets.

<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>

  • Unordered List With Different Bullet Types

You can use below given code to create unordered list with Bullets tyes.

<li style=”list-style-type:square”>List item 1</li>

  • Unordered List with Custom Image Bullet

You can use below given code to create unordered list with custom image Bullet.

 <ul style=”list-style-image:url(‘http://yourimageurl.com/yourbullet.jpg’)”>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>

Hope, you have understood all of  that now. If not then I would suggest you to go through the above tutorial once more and try using them practically one by one. If it works save this page on your desktop and use it for future references without loading it again and again browsing the internet.