Posted by: Namit June 12, 2011
code
Login in to Rate this Post:     0       ?        
For basic start i would not go in all  the process involved in web development as you might get confused. So, for now start with at the very basic.

Open Notepad.

Type the code which is in RED color only.

and save it as "yourfilename.html". remember to add the extension .html at the end of the file.

Go to the location and open the file in your browser(chorme, firefox or IE). and you will see the output. 




<html>

<head>

<title>My First Web Page</title>

</head>

<body>

Hello World !

<h1>Metal Girl</h1>

<br/>

<b>Metal girl</b>

<p>Metal girl Metal girl Metal girl Metal girl Metal girl Metal girl
Metal girl Metal girl Metal girl Metal girl Metal girl Metal girl
Metal girl Metal girl Metal girl Metal girl Metal girl Metal girl
Metal girl Metal girl Metal girl Metal girl Metal girl Metal girl
</p>



<p>Metal girl Metal girl Metal girl Metal girl Metal girl Metal girl
Metal girl Metal girl Metal girl Metal girl Metal girl Metal girl
Metal girl Metal girl Metal girl Metal girl Metal girl Metal girl
Metal girl Metal girl Metal girl Metal girl Metal girl Metal girl
</p>

<font color="red">I am Red</font>

</body>

</html>





Explanation:

Congrats, you just created your first web page

So what is happening here now? All of the code you just wrote is called HTML (Hypertext Markup Language).

The code starts with less than < and greater than > sign are html elements. in above example Html, head, title, body, p all are
elements. 

Each elements should have an ending element.  The less than sign and a slash (</) denotes the ending of an element.

so that means if you have a element called <html> it must be closed like this </html> . so is true for all elements.

Why doesn't <br/> have and ending element?
Because these elements are empty elements. Empty elements are closed on the same tag. These elements doesn't contain
any content within them. Here <br/> means a line break.  If you want to have content inside the element then it must have a starting and ending tag.

Similary font is also an element. It can contain content inside it.  the "color" inside the font element is called attribute. Each element
can have several attributes which will add an extra behaivor for that element . To make you understand this, i wll take an example of
our real world. A car is an automobile. However, each car would have a specific attribute, like its color or the numbe of door. SImilary an element can have several attributes which would add an extra behavior for that element.

If you haven't fell asleep so far, read on

<h1> means a header and it can be h2, h2 ,h4 and i think its up to h7. I don't use this element much so not sure about it. You go ahead and try it.

<br/> as stated earlier adds a line break.

<b> make the content bold.

<P> dentotes a start of a paragraph.

<font> can be used to define the font, size color of content.

<title> would define the title of the web page. Look at the top bar of your browser

What <html><head> and <body Does?

If i explain it right now, you would hate me so for now, the short answer, is  "it doesn't do anything". Then why i have to write an extra code? Because these are the standards of web page. Take it like this way, you can't make a roof without making the pillar first? can you?

Just remember few rules.

1. Every element should be contained inside the body element. 
2. The body element itself should be wrapped inside the html element.
3. The title element should inside in the head element and head should be closed before the body element starts. remember head element should contained inside the html element. 

Here is a basic structure

<html> 
<head>
<title></title>
</head>
<body>
</body>
</html>


I am done with the above code? what now?

go to this web page 

www.w3schools.com/html/

To your left side there is  a section called "html basics" which defines almost every element, their attributes. Take look on those
elements and use it in your page. The" notepad file"(you can't change it in browser)  and make sure everything is inside the body element.  if you don't know how to use some elements leave that for now, and go with the another one..

when you have good grasp of html, bump this thread again and i will try my best to explain more.


GOOD LUCK





 
Read Full Discussion Thread for this article