Friday, June 21, 2013

FORMATTING HTML ELEMENTS

HOW TO MAKE YOUR WEBSITE BEAUTIFUL AND AWESOME


This simple thing can be done by formatting the HTML ELEMENTS.In the previous posts i have told how to create a simple webpage and how to give it a background color.If you have not read them,then it would be helpful if you have a look at them.They are as usual very simple so do have a look for better understanding.Here are the links:


In this post we would be learning to format elements like heading,paragraphs,etc.Though there are various formatting options but we will learn them slowly and perfectly as the main concern is understanding.As you are now familiar with writing a simple HTML script,this post will be cakewalk for you.Now we will learn about giving background colors to elements.Following script illustrates the concept:


<html>
  <head>

  <title>I LOVE BLOGGING</title>

</head>
    <body style="background-color: #ff0000";>
      
     <h1 style="background-color: #00FF00">ALL ABOUT BLOGGING</h1>
     <h2 style="background-color: #00ffcc">MY BLOG</h2>
     <p style="background-color: #00ff99">blogging is great!!!!!</p> 
    
    <body/>
  
</html>





And this would be the expected output if you open the saved file.Please note that you can make web pages easily by using software like Dream Weaver,etc but it is advisable that you use simple text editor so that you learn from your mistakes.Using software to build your web pages may hide the mistakes you made and even though you could get the correct output.


how to give background color to heading,sub-heading and paragraph



So are you happy with this colorful output?Yes!!! Well then let us understand the attribute style in detail.
If you look at the code snippet carefully,you can easily make out that style attribute is used in the opening tags of each element like heading,sub-heading and paragraph.This style attribute can be used to give background color to all most every element and this style attribute can do a lot more work that we will be seeing later.


Also note that how the background color to the body has been applied using the style attribute.Compare this method with the method used in the post GIVING BACKGROUND COLOR TO YOUR WEBPAGE. You will notice that style attribute is easy to use.Also we will learn about it much when we will discuss CSS(Cascading style sheets) later.

Try giving your own custom background colors.Use different text and if you have any doubt or query feel free to comment and i will get back to you as soon as possible.If you want these posts to directly land in your email inbox then subscribe for the posts using the gadget at the top-right corner.

Remember that there are endless ways in which you can design and make your webpage awesome so keep your imagination touching the sky and continue the hard work.All the best.   


No comments:

Post a Comment

Thanks for your valuable comment