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
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
