Select Page

Basic HTML (tutorial for the beginners)

Part 1

HTML is Hypertext Markup Language. It is used to build websites. Anyone who wants to learn to build websites, learning HTML is a must.
A single HTML web page has mainly some essential parts- html, head, body. Here is a basic formation of HTML pages to understand at the starting level.

<!DOCTYPE html>
<html>
  <body>

    Web contents will go here inside the body
    Web contents will go here inside the body
    Web contents will go here inside the body    

  </body>  
</html>
  1. An HTML page must start with <!DOCTYPE html>
  2. Then the document must start with <html> tag and end with </html> tag.
  3. Then all the contents will be placed inside <body> and </body> tag.

In the next few steps we are going to work with codepen.io which by default includes all the above 3 (just to remember).

HTML elements are wrapped in some specific tags. Every tag has an opening and a closing tag except only a few of them, at the same time this type of tag is self closing tag.
<> this is an opening tag mark and </> this is a closing tag mark.
So if we want to use the html tag in our page we need to use it in such way 

<html>

  Above is with the opening tag
  And below is with the closing tag

</html>

We’ll discuss more about the tags later. Now let’s see some most common used tags for displaying the elements

<div> </div> This div (division) tag is used to wrap a bunch of code, or a part of the page to make it separate/devide from other contents.
<h1> </h1> This h1 (Header 1) tag is used to make a Heading text of some specified contents.
There are also some other Header tags, h2, h3, h4, h5 and h6. All it’s just text size matter. Let’s see how they look like

This is the text size of h1 header

This is the text size of h2 header

This is the text size of h3 header

This is the text size of h4 header

This is the text size of h5 header
This is the text size of h6 header

<p> </p> This p (paragraph) tag is used to write some content as in paragraph.
<button> </button> This button tag creates a button.

Now, we are going to make a live web page with a most popular online code editor (codepen.io) with live project and there we need only our working codes to put inside the HTML section. The most interesting thing is what you will write there it will go live instantly, and you will get the best inspiration to build your own web apps here.

  1. Open the Codepen.io
  2. Click on Signup
  3. Signup with Email or other options
  4. Click here New pen
  5. You will see there 3 parts, HTML, CSS, and JS
  6. From the letf-top click on the Untitled edit icon (pen) and rename it to my-first-web-app or name it your own
  7. Click on Save from the right
  8. As we said earlier, this Codepen is included Doctype, html and body by default, so in this online code editor you will not use these 3 tags. Use only other elements inside the HTML section.

Now let’s build our first HTML page with the above knowledge.
Here is the code

<!DOCTYPE html>
<html>
  <body>

    <div>
        <h1>It's Awesome!</h1>
        <p>We have learnt the basic HTML and we are now able to build an HTML page.</p>
        <button>First Button</button>
    </div>  

    <div>
        <h2>It's very interesting!</h2>
        <p>We are making it more.</p>
        <p>more and more.</p>
        <button>Next Button</button>
    </div> 

  </body>  
</html>

Save your code, you’ll see the outut below your code. Yes! this is live now. To get a unique and live url of your web page,

  1. Click on the Change View from the top-right
  2. Click on the Full Page View
  3. See the url in the browser, this is the web url of your app
  4. Now, everybody can see your work with this url with an internet connection.

Interesting? Yes! Let’s move.

So, the output was something like this
-------------------------------------------------------------------------------

It’s Awesome!

We have learnt the basic HTML and we are now able to build an HTML page.
First Button

It’s very interesting!

We are making it more.
more and more.
Next Button

-------------------------------------------------------------------------------

So, now you can build a web page with a large content by adding some more div and then other necessary elements. Try yourself to create a large page with your own contents.

Part 2

Let’s move forward

First go back to the edit mode of your live project

  1. Click on Change View from the top-right
  2. Click on Editor View

Now we’ll learn about some HTML attributes.
If you look at the above codes, you’ll find there are two <div>. In a real web page you’ll find there many div many p and so on. Now, think if I tell you to work on a div, how will you find that specific div or other elements? Any idea? Yes, there is a way! We need some reference, right? So, we can do this by giving an identity to every div so that we can refer it easily. In HTML identity is defined by an id attribute. Let’s see how to add it

<div id="home">          </div>

<div id="learn">          </div>

<div id="earn">      </div>

That id inside the opening div tag separated by a space is an HTML attribute and the names inside that quote marks are the value of the attributes. Remember, you must put the name value for id attribute starting with an alphabet, never with a number.
This way, inside an opening tag of every element different HTML attributes are to set for different requirements. Now let’s add an id attribute to the p element.

<p id="my-first-paragraph">      </p>

Hope it makes sense about HTML attributes.

Okay, now to see how we can add an image in our web page:
An image is to put in a web page with img tag with a src attribute ( (image source / path)). Here’s an example 

<img src="put the image source url here" />

We are going to place an image here with a valid url, taken from the facebook, you also can use your own photo url. Look at this code 

<img src="https://www.facebook.com/tradecoder/photos/a.630834390445618/630834393778951/?type=1&theater" />

And the output is:
Trade Coder

So, now, we are able to build a web page with some contents, buttons and images. And before we move forward, we’ll learn to apply some styles in our page. There are different ways to do it, but for this time we’ll learn it with style attribute. Here is an example:

<div style="background-color:red">     </div>

As we can see, here we applied style attribute and the background color of the div set to red, that means it will make a red color div.

<div style="background-color:blue">     </div>

Here the div will be blue color. You also can make it black, white, orange, tomato, silver, gray and so on.
Now let’s add some more value to the sytle attribute to make more sense,

<div style="background-color:blue; width:500px; height:300px;">     </div>

This div will be a blue color div, its width will be 500px and height will be 300px. We can make different size of div in this way by changing its value as our own.
Let’s learn one more style, when you say color it applies for text/font color, and when you say background-color it applies for the background. Let’s see an example: 

<div style="background-color:blue; width:500px; height:300px;">     
<h1 style="color:white"> Hello </h1>
</div>

Gues the output. The div will be blue color but the text will be white color. Interesting? Yes, now we need to make well designed web page. First we need to make a plan how our page will look like. Here is a pattern, we’ll work on it.
Basic HTML

Now, let’s build a page following this pattern. We’ll put all the necessary codes inside the body tag. Then we’ll use a header tag for header contents, div tag for body contents and footer tag for footer contents. We also could use div tag for header and footer section, that’s ok. But fortunately we have also a header and a footer tag in HTML for doing this. So, we’ll use header and footer tag here: 

<body>

  <header style="background-color:blue; width:100%; height:80px;">
      <h1>Our first web page</h1>
  </header>

  <div style="background-color:white; width:100%;">
      <p>Here will go our text contents</p>
      <p>More contents here</p>
      <p>More topics here</p>
  </div>

  <footer style="width:100%; background-color:red;">
      <p>By : your name here</p>
  </footer>

</body>

Well, so far we’ve learnt the basic HTML code writing system. Now we are going to explain more about it but before that we’ll learn some basic styles of HTML with stylesheet called CSS or Cascading Style Sheets. We can do it in different ways, but we’ll use internal CSS for this time.

Part 3

Let’s learn some basic CSS (internal CSS)

Internal CSS is to write inside <style> </style> tags and this is wrap inside <head> </head> tags before the <body> tag. Here is an example 

<!Doctype html>
<html>
  <head>
    <style>
       All your internal CSS will go here as explained above
    </style>
  </head>

  <body>

  </body>
</html>

Now we need to know how to write some basic CSS. Let’s see
We have already learnt some basic htmls tags, like body, div, p, button right? So, it will be easy to get the point of writing CSS. Look the below pattern first 

<style>
body{ background-color:green; }

</style>
  • Remember, we do not need to put <style> tag to Codepen if we use that, but we must need our working codes (main codes) to put inside the CSS section of Codepen.

Styles used for body, and the system is to first write the html tag name then {} and style rules inside the {}. Got it? Now, let’s see some more examples

body{background-color:green;}
h1{color:white;}
p{color:black;}

Put that codes inside the CSS section of Codepen.

Could you imagine what will happen to this? The page body background color will be green and the text color in h1 will be white, and text in p will be black. Here is the full code

<!DOCTYPE html>
<html>
  <head>
    <style>
      body{background-color:green;}
      h1{color:white;}
      p{color:black;}
    </style>
  </head>
  <body>

    <h1>This will be white color title </h1>
    <p>Here will be black color text </p>  
    <p>And all the body background color will be green</p>

  </body>  
</html>

We also can use multiple CSS properties and values with a semiclone separated applied to a single element, see the example below:

div{
   background-color:red; 
   width:500px; 
   height:300px;
   margin-top:50px;
   margin-right:20px;
   margin-bottom:50px;
   margin-left:20px;
   padding-top:30px;
   padding-right:30px;
   padding-bottom:30px;
   padding-left:30px;
   }

p{
color:white; 
font-size:20px;
}

If you see the codes above carefully, hope you will get a clear concept about it.

Part 4

Let’s go back to HTML part again

Are you ready?
Do you think you can move forward to learn more?
If your answer is ‘no’, we would recommend to revise it again and again.
And if your answer is ‘yes’, let’s start learning all about web development from the basic to advance level with W3SCHOOLS at w3schools.com.

When you will be few or more comfortable to write HTML and CSS at w3schools and have more interest, to advance to your learning don’t forget to join here freeCodeCamp. It will help you to guide yourself on the way to become a real Developer. You’ll be able to build projects and you’ll get valuable Certificates! You just need to be consistent in coding, no matter if it’s less or more a day.

If you think you may need more help, join our learning group on facebook TradeCoder Digital Academy

Wish you all the best. Happy Coding!

Go back to HTML Section

Visit Developers Hub | tradecoder

If you find this page helpful, please feel free to share it for others