Thursday, 17 January 2013

Learn HTML in an easy way

HTML is used  in the web browser to make web pages and other information that can be displayed.

Html (hypertext markup language):- It is the most widely language used for writing the web pages.
                                                             The language is so easy that anybody can able to learn it.

So let us now start learning the html
First we need to open a notepad
At the top of the page type <html>.
On the next line, indent five spaces and now add the opening header tag: <head>.
On the next line, indent ten spaces and type <title> </title>.
Go to the next line, indent five spaces from the margin and insert the closing header tag: </head>.
Five spaces in from the margin on the next line, type<body>.
Now drop down another line and type the closing tag right below its mate: </body>.
Finally, go to the next line and type </html>.
In the File menu, choose Save As.
In the Save as Type option box, choose All Files.
Name the file template.html
Click Save.
NOTE: One HTML file can have extension as .htm or .html. So you can use either of them based on your comfort.


Now you have created one HTML page and you can use a Web Browser to open this HTML file to see the result. Hope you understood that Web Pages are nothing but they are simple HTML files with some content which can be rendered using Web Browsers.

Document structure
When we start writing the html it begins with <html> and end with </html> this things tell the browser that the whole document is written in the html format.
The <html>,<h1>,<boby> all this are called as tags there are mainly 72 tags we used for writing the html.
The document was written into two section
First <html>…</html> which has the information about the document example title of the document, author of the document.
Second <body>..</body> it contain the real text which is going to be read.
Now let us learn the next tag that is metadata/metatag
It is used to include the name/value pairs describing the properties of the html document.
It is an empty element so it does not have any closing tag like the </body> rather than <meta>  it carry the information in between so we don’t have to close it.
When we type any keyword in the space provided in the search engine the metadata assist the best match to the search engine to find the relevant match for the same.

It is also an important part of the html. It is used to define the characteristics of an element and is placed inside the element’s opening tags.
It is made up of two parts
1. Name
2. Value
Name= it is the property that we want to set for example font
Value=it is the property of the value itself like the front size.

We can see the following example of this in the following figure on sixth line
In that like it is written that <font face etc> and see what  happens.

We can see the color change in this figure.
Else we can also write the following things to make the easy  to use the color

In this figure we can see that we have written the color yellow and the color changes.

If we want to change the font style so we can able to change it also

Here I have change the following font face/style that is written in the sixth line.

Formatting tags

If we want to distinguish between the written matter so it is important to use the formatting tags.
It is important to make the web pages convenient so that the browsers don’t get bore of reading from the internet.


In html there are six type of heading <h1>, <h2>, <h3>, <h4>, <h5>, <h6> while displaying the heading browsers adds one line before and after that heading.

Here we can see that <h1>, <h2> have written and some text also have written.

We can see the two different heading has written in the following example.

Paragraph the <p> tags
By this tag we can able to make the paragraph .
We can also use align with the <p> tag

We can see that it is written that <p align> right and in third line it si written that by this the text …..
So let see what has happen

We can see that the text which has written by using <p align right> has move to the right side
Let see what is going to happen when we use the <p align left,center,justify>

Break line the <br> tag
It is an empty tag it is used to break the line.
Note: The <br /> element has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid XHTML.

In the following  figure we can see that it is written that <br> hello……..and in the next line it is written that  hope you are fine  let’s see what is going to happen

We can see that all the text is in the same line so for different line we have to use <br />

 Now we can see that by using the <br /> the rest text has come in the next line.

Nonbreaking Spaces

Suppose we want  to use the phrase "26 mahatma gandhi road." Here you would not want a browser to split the "26" and “mahatma gandhi road “across two lines.
In cases where we do not want the client browser to break text, you should use a nonbreaking space entity (&nbsp;) instead of a normal space. For example, when coding the "26 mahatma gandhi road." paragraph, you would use something similar to the following code.

Practice the above lesson wait for the next post.

To be continue.....