BACKGROUND OF AN HTML PAGE
In my first post about generating a simple HTML script i had showed you how to easily make a simple web page.Here is the link-MAKING A SIMPLE WEB PAGE.
In this post,we will move on to the next level and will create a more precise and more informative web page.
Before starting let us understand the importance and meaning of two important terms-Element and Attribute.
Element: As the name suggests elements are the constituents that together form the web page.In short elements are the ingredients and webpage is the recipe.For example,title,heading,sub-heading,paragraphs are some of the elements of a website.I hope the explanation is pretty simple and clear.
Attribute: Yet again the meaning is self explanatory.The attributes are nothing but the properties of elements.For example if heading is the element then the size of heading,color of heading,border of heading are some of the attributes.
Without wasting time let us create our next interesting webpage:
<html>
<head>
<title>I LOVE BLOGGING</title>
</head>
<body bgcolor= "#FF0000">
<h1>ALL ABOUT BLOGGING</h1>
<h2>MY BLOG</h2>
<p>blogging is great!!!!!</p>
<body/>
</html>
Open notepad or any other text editor and type the code above.Save it as anyname.htm or anyname.html at an appropriate place.Please note that anyname means you can give any name to the HTML file but the extension should be .htm or .html.Now open the file in a web browser or simply double click the file and you would see a fascinating output like this:
Looks great !!!! Right? The various tags and properties used in the above code are explained below:
- Every HTML script should start with a <html> opening tag and should end with a closing </html> tag and same is the case with <head>,<title>,<body>,<h1>,<h2>,<p>,etc.
- It is a good practice to first write the opening and closing tags and then add content between them which will reduce the chances of making silly mistakes and errors.
- <head>:It is the head of webpage.You can govern the whole webpage i.e. control the properties of various elements of the webpage from within the head section(that we will learn later).One of the most important use of head section is to give title to the web page.Look carefully at the image and notice what is written in the title bar-I LOVE BLOGGING.
- <body>:Body is the part where everything you want to show in a website generally exists.For example in the above code the RED color is given to the body.Also body contains-headings,sub-headings,paragraphs,ordered-lists,etc.
- <h1>: Used for giving the HEADING.Please note the size of the heading.
- <h2>:Used for giving the Sub-Heading.Again note the size of the sub heading.It is smaller than the heading which is obvious.Similarly you can have <h3>,<h4>,<h5> and <h6> but as you move on the size of the headings go on decreasing.
- <p>:It is used to add paragraphs.Usually contains most of the text present on the web page.
- <body bgcolor= "#FF0000">:Using this bgcolor inside the opening body tag we can give different colors to the websites . The #FF0000 is the hexadecimal value for red color.Try giving your own 6-digit hexadecimal values to see different background colors.
Please keep in mind that here we are discussing everything with respect to static websites.Issues and concepts related to dynamic websites will be discussed later.Just try to put different texts and of varying lengths in the corresponding tags.Also try to change background colors.Have some fun and experiment.
In the next post we would discuss about how to give background color to individual elements like heading,paragraphs,etc.Till then continue the hard work and keep smiling.
No comments:
Post a Comment
Thanks for your valuable comment