Learn basic HTML easily

HTML

It's very important to learn HTML if you want to be an advanced web designer. Though we can build an website with joomla or wordpress but it's a must to learn html if we want to customize our website or blog.
Now what's HTML?
Basically HTML stands for Hyper Text Markup Language. HTML is a system for tagging text files to achieve font, color, graphic, hyperlink effect etc. HTML is not a programming language. Then what's the difference between a programming language & a markup language?
Basically a programming language is a set of instructions to perform the computer. But a markup language is designed format of texts so that a computer program or browser can read it but doesn't instructs anything to the computer with the data. It only allows it to use more easily. Few markup languages are HTML, XML, XHTML and MML.
Now let's see how how to convert texts to color, graphic or give hyperlink effect with HTML.

01. Text display with headlines :

<html>

<body>

<h1>write your text here</h1>

<h2>write your text here</h2>

<h3>write your text here</h3>

</body>

</html>

[ Note: All html file have to be saved with extension name .html .For an example if copy this and paste it to notepad & save with name Text display with headlines.html only then it will work & will be opened with browser otherwise suppose if you save it with extension name .txt is will not be opened ]

02. Paragraph :

<html>
<body>
p>write your text here</p>
<hr />
<p>write your text here</p>
<hr />
<p>write your text here</p>
</body>
</html>

03. HTML Formatting :

<html>
<body>
<p>
<font size="7" face="arial" color="red">
This paragraph is in Arial, size 7, and in red text color.
</font>
</p>

<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>

</body>
</html>

04. HTML Link:

<a href="url">Enter any text here</a>
Example:
<a href="http://facebook.com/zubaerahammed/">Zubaer Facebook</a>

05. HTML Color :

<html>
<body>

<p style="background-color:#FFFF99">
Color set by using hex value
</p>

<p style="background-color:rgb(300,300,0)">
Color set by using rgb value
</p>

<p style="background-color:red">
Color set by using color name
</p>

</body>
</html>

06. HTML Image :

Example:

[ Note: Remind to keep the image file & the html file in the same folder or root ]

07. HTML Table :

//Table 1 code
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

//Table 2 code
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr

08. HTML List:

//list-1
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

//list-2
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

09. HTML Form :

//list-1
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

//list-2
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

10.HTML Form with boarder :

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30" /><br />
E-mail: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form

Please subscribe this blog & share our content. Thank you.

2 comments

Write comments

Anonymous

AUTHOR

February 4, 2014 at 7:53 AM delete

Really useful information. I was in searching of full readiness test answers & now I find it. It's really nice effort. Appreciate it.

June 26, 2014 at 3:27 AM delete

Hi just wanted to give you a quick heads up and let you know a few of the pictures
aren't loading properly. I'm not sure why but I think its a
linking issue. I've tried it in two different web browsers and both show the same results.

Here is my blog post football trophies

TECHWEB24