Learn HTML in 10 basic steps

HTML stands for Hyper Text Mark Up language. This is the main language which is used in web development. Here you will learn basic HTML tags so that you can start working. This tutorial is for the new comers and starters who want to learn HTML.

HTML document can be open by the browsers. Most of the browser are compatible with HTML 5. You can create the whole website in HTML only.

Step 1: Basic Formatting in HTML

See the below example
———————————————————————
<!DOCTYPE html>
<html>
<head></head>
<body> </body>
</html>

———————————————————————
Above code should be copied and pasted on the notepad and saved with the .html extension. This is a valid html page which can be opened in any browser. Here we have <!DOCTYPE html> which denotes that it is a html 5 document. Every block is started(<>) and ended f(</>) with angular brackets. <html> tag denotes the starting of a html document. <head> tag contains the metadata information. <body> tag is for the html markup which will construct the look and feel.

Step 2 Basic header elements in HTML

Now lets see why we have the head element and what to write in it.
———————————————————————
<!DOCTYPE html>
<html>
<head>
<title>HTML tutorial</title>
<meta charset=”UTF-8″>
<meta name=”description” content=”Html tutorial in 10 steps”>
<meta name=”keywords” content=”Html tutorial”>
<meta http-equiv=”refresh” content=”30″>
<meta name=”author” content=”Neeraj”>

</head>
<body> </body>
</html>
———————————————————————
Html head tag contains the title and meta tags. Title shows the title of the page and meta tag contains the various information used by the search engine and web services.

Attributes:

Attributes are the keys that contains some value in the tag. for example in above meta tag has name and content which are the attributes and have some values.

Step 3: Headings and Paragraphs in HTML

We have not added any markup to the page so far. Lets start by adding headings.
———————————————————————
<!DOCTYPE html>
<html>
<head>
<title>HTML tutorial</title>
<meta charset=”UTF-8″>
<meta name=”description” content=”Html tutorial in 10 steps”>
<meta name=”keywords” content=”Html tutorial”>
<meta http-equiv=”refresh” content=”30″>
<meta name=”author” content=”Neeraj”>
</head>
<body>
<h1>HTML tutorial in 10 basic steps</h1>
<h2>HTML tutorial in 10 basic steps</h2>
<h3>HTML tutorial in 10 basic steps</h3>
<h4>HTML tutorial in 10 basic steps</h4>
<h5>HTML tutorial in 10 basic steps</h5>

</body>
</html>
———————————————————————
This all are the headings and have the different sizes. If you want to add the paragraph just add <p> tag as given below

———————————————————————
<!DOCTYPE html>
<html>
<head>
<title>HTML tutorial</title>
<meta charset=”UTF-8″>
<meta name=”description” content=”Html tutorial in 10 steps”>
<meta name=”keywords” content=”Html tutorial”>
<meta http-equiv=”refresh” content=”30″>
<meta name=”author” content=”Neeraj”>
</head>
<body>
<h1>HTML tutorial in 10 basic steps</h1>
<p>Here we are trying to help people to learn html in 10 basic steps. try these markup on notepad and save as html page.</p>
</body>
</html>
———————————————————————

Step 4: Adding Images to HTML page

———————————————————————
<!DOCTYPE html>
<html>
<head>
<title>HTML tutorial</title>
<meta charset=”UTF-8″>
<meta name=”description” content=”Html tutorial in 10 steps”>
<meta name=”keywords” content=”Html tutorial”>
<meta http-equiv=”refresh” content=”30″>
<meta name=”author” content=”Neeraj”>
</head>
<body>
<h1>HTML tutorial in 10 basic steps</h1>
<p>Here we are trying to help people to learn html in 10 basic steps. try these markup on notepad and save as html page.</p>
<img src=”Trueway.jpg” alt=”Trueway-blogs”>
</body>
</html>
———————————————————————

img tag is used for the image rendering on the page. src attribute contains the image url and alt attribute contains the alternate text which show in case image is not available.

Step 5: Adding HTML Links

In html, It is very basic requirement to have links. links can created by the anchor tag (<a>).
———————————————————————
<!DOCTYPE html>
<html>
<head>
<title>HTML tutorial</title>
<meta charset=”UTF-8″>
<meta name=”description” content=”Html tutorial in 10 steps”>
<meta name=”keywords” content=”Html tutorial”>
<meta http-equiv=”refresh” content=”30″>
<meta name=”author” content=”Neeraj”>
</head>
<body>
<h1>HTML tutorial in 10 basic steps</h1>
<p>Here we are trying to help people to learn html in 10 basic steps. try these markup on notepad and save as html page.</p>
<img src=”Trueway.jpg” alt=”Trueway-blogs”>
<a href=”https://trueway-blog.com/ “>Trueway-blog</a>
</body>
</html>
———————————————————————
An anchor tag contains the href attribute which is link of any other page.

Step 6: Styling the HTML page

Styling a html document means changing the look and feel by applying some css property. This can be done by adding style tag in same html document or by adding style attribute. here we will show both in below example.
———————————————————————
<!DOCTYPE html>
<html>
<head>
<title>HTML tutorial</title>
<meta charset=”UTF-8″>
<meta name=”description” content=”Html tutorial in 10 steps”>
<meta name=”keywords” content=”Html tutorial”>
<meta http-equiv=”refresh” content=”30″>
<meta name=”author” content=”Neeraj”>
<style>
.img-style {
height:100px;
width:100px;
}

</style>
</head>
<body>
<h1>HTML tutorial in 10 basic steps</h1>
<p>Here we are trying to help people to learn html in 10 basic steps. try these markup on notepad and save as html page.</p>
<img class = “img-style” src=”Trueway.jpg” alt=”Trueway-blogs”>
<a href=”https://trueway-blog.com/ “>Trueway-blog</a>
</body>
</html>
———————————————————————
either you can add css class as given above or you can style attribute as given below.

———————————————————————
<!DOCTYPE html>
<html>
<head>
<title>HTML tutorial</title>
<meta charset=”UTF-8″>
<meta name=”description” content=”Html tutorial in 10 steps”>
<meta name=”keywords” content=”Html tutorial”>
<meta http-equiv=”refresh” content=”30″>
<meta name=”author” content=”Neeraj”>
</head>
<body>
<h1>HTML tutorial in 10 basic steps</h1>
<p>Here we are trying to help people to learn html in 10 basic steps. try these markup on notepad and save as html page.</p>
<img style=”height:100px; width:100px” src=”Trueway.jpg” alt=”Trueway-blogs”>
<a href=”https://trueway-blog.com/ “>Trueway-blog</a>
</body>
</html>
———————————————————————

Step 7: Adding HTML Lists

You can also add the lists to the html page. see the below example
———————————————————————
<!DOCTYPE html>
<html>
<head>
<title>HTML tutorial</title>
<meta charset=”UTF-8″>
<meta name=”description” content=”Html tutorial in 10 steps”>
<meta name=”keywords” content=”Html tutorial”>
<meta http-equiv=”refresh” content=”30″>
<meta name=”author” content=”Neeraj”>
</head>
<body>
<h1>HTML tutorial in 10 basic steps</h1>
<p>Here we are trying to help people to learn html in 10 basic steps. try these markup on notepad and save as html page.</p>
<img style=”height:100px; width:100px” src=”Trueway.jpg” alt=”Trueway-blogs”>
<a href=”https://trueway-blog.com/ “>Trueway-blog</a>
<ul>
   <li>Learn Html</li>
   <li>Learn CSS</li>
   <li>Learn Java Script</li>
</ul>

</body>
</html>
———————————————————————
Here you are seeing list with ul and li tags. ul is parent tag of li. li contains the child elements of an ul.

Step 8: Adding HTML Tables

Adding in html is very simple and easy. see the below code snippet.
———————————————————————
<!DOCTYPE html>
<html>
<head>
<title>HTML tutorial</title>
<meta charset=”UTF-8″>
<meta name=”description” content=”Html tutorial in 10 steps”>
<meta name=”keywords” content=”Html tutorial”>
<meta http-equiv=”refresh” content=”30″>
<meta name=”author” content=”Neeraj”>
</head>
<body>
<h1>HTML tutorial in 10 basic steps</h1>
<p>Here we are trying to help people to learn html in 10 basic steps. try these markup on notepad and save as html page.</p>
<img style=”height:100px; width:100px” src=”Trueway.jpg” alt=”Trueway-blogs”>
<a href=”https://trueway-blog.com/ “>Trueway-blog</a>
<ul>
   <li>Learn Html</li>
   <li>Learn CSS</li>
   <li>Learn Java Script</li>
</ul>
<table style=”width:100%”>
   <tr>
     <th>Name</th>
     <th>Age</th>
     <th>Gender</th>
   </tr>
   <tr>
     <td>Neeraj</td>
     <td>45</td>
     <td>Male</td>
   </tr>
   <tr>
     <td>Bhoomi</td>
     <td>12</td>
     <td>Female</td>
   </tr>
</table>

</body>
</html>
———————————————————————

Step 9: Dividing the HTML Page

A page can be divided in many sections using the div tag

———————————————————————
<!DOCTYPE html>
<html>
<head>
<title>HTML tutorial</title>
<meta charset=”UTF-8″>
<meta name=”description” content=”Html tutorial in 10 steps”>
<meta name=”keywords” content=”Html tutorial”>
<meta http-equiv=”refresh” content=”30″>
<meta name=”author” content=”Neeraj”>
</head>
<body>
<h1>HTML tutorial in 10 basic steps</h1>
<p>Here we are trying to help people to learn html in 10 basic steps. try these markup on notepad and save as html page.</p>
<img style=”height:100px; width:100px” src=”Trueway.jpg” alt=”Trueway-blogs”>
<a href=”https://trueway-blog.com/ “>Trueway-blog</a>
<div>Neeraj’s Area</div>
<div>Dheeraj’s Area</div>
<div>Suraj’s Area</div>
</body>
</html>
—————————————————————————-
You can see these html divs separately by just adding some css styling to these divs.
———————————————————————
<!DOCTYPE html>
<html>
<head>
<title>HTML tutorial</title>
<meta charset=”UTF-8″>
<meta name=”description” content=”Html tutorial in 10 steps”>
<meta name=”keywords” content=”Html tutorial”>
<meta http-equiv=”refresh” content=”30″>
<meta name=”author” content=”Neeraj”>
</head>
<body>
<h1>HTML tutorial in 10 basic steps</h1>
<p>Here we are trying to help people to learn html in 10 basic steps. try these markup on notepad and save as html page.</p>
<img style=”height:100px; width:100px” src=”Trueway.jpg” alt=”Trueway-blogs”>
<a href=”https://trueway-blog.com/ “>Trueway-blog</a>
<div style=”background:red”>Neeraj’s Area</div>
<div style=”background:green” >Dheeraj’s Area</div>
<div style=”background:blue” >Suraj’s Area</div>
</body>
</html>
—————————————————————————-

Step 10: Manipulating HTML DOM Java Script

DOM stands for Document Object Model. This html DOM can be manipulate to add the dynamic responses or calling web services. To learn Javascript we will need another article.

Leave a Reply

Your email address will not be published.