Wednesday 10 April 2013

Learn HTML basics in an hour | HTML easy steps to learn

Learn HTML Easily| HTML for Beginners


 –
@uthor Adhi
A simple note pad file is enough to build an html web page with the help of CSS. But I would better suggest you to use any IDE’s(Eclipse Or Net beans) to build a decent professional website.
To make it more simple I will Tell you how to build a simple website.
HTML File Structure
A HTML file is built with tags. What are the tags? Tags are used to define an element which you are going to put inside a HTML file. Every tag has a start and end and a tag is enclosed between < and >.
The Basic List of HTML Tags
Header Tag <h1> Heading goes here </h1>
Paragraph Tag <p> Sentence goes here </p>
To write sentence in a bold use <b> bold sentence </b> output: bold sentence
To give a Line break in HTML us <br /> tag.
To define a list of elements.  Two types
·         Un ordered List <ul> unordered list </ul>
·         Ordered list <ol> Ordered list </ol>
If we decide to zero in on any of the list then we have to decide the elements in those lists.
For Example:
<ul>
        <li> one </li>
        <li> Two </li>
</ul>
<ol>
       <li> one </li>
       <li> two </li>
</ol>
To insert an image <img></img> and we have to mention the source location of the image.
For Example:
<img src=”images/a.jpg”></img> (You can also mention width and height of a image.
Example: <img src=”images/a.jpg” width=”500” height=”500”></img>
To insert a Hyper Link : <a href=”www.way4engineers.blogspot.com”>Click me I am an Hyper Link</a>
There are some more tags which you will learn once you get to create a website of your own or on working in a web project.
DIV TAG When You start working on a html project, There is a single tag which you are most rely on.
That is the “div” tag.
<div class=”your class”> </div> or <div id=”Your id”> </div>
Normally a <div> tag acts as a container to hold group of contents in the way you want.
For example , Consider Your web page with is 900 px and you want to partition it into 3 columns of widths 200px 500px and 200px respectively, Then you can use div tags to partition it.
Every html tags or codes will be consolidated in div tag and the div tag’s properties are defined in CSS.
Try This code in note pad “//à Refers to comment lines, don’t use that it is just explain the code…
<html>
// Define a style tag, Style or Script tags are defined within a <head> tag
<head>
<style>
// To define a style sheet for identifiers (h1,h2,p etc) just follow my below steps

Body { margin: auto; //aligns the page in center }

 h1 { font-size: 14px; color: blue;}
P {font-size: 11px; Align: justify; background-color: blue; color: white}
// Now going to define a div class. You will see how to use div in the following steps.
.main-content { width: 600px; height: 500px;
margin: auto; //aligns the page in center
}
</style> //style tag ends here
</head>Close the head tag
//Now the body tag begins, the tag where we write the whole body of the page.
<body>
<div class=”main-content”>
<h1> Body Tag Example </h1>
<p> A simple web page to define how it functions </p>
//You can try inserting the image here (make sure that you are giving the correct folder location of the image from your system.
<img src=”yourFolderLocation/image.jpg”></img>
//how to give hyperlink
<a href=”www.way4engineers.blogspot.com”> Click Here For Jobs </a>
// Likewise try other tags too.
</div>
</body>
</html> ( A tag opened must be closed once it ends )
Hope my Example will give you a good idea about developing a simple HTML page.
Thanks
@dhi

No comments:

Post a Comment