Day3

Welcome back guys, today we will write some code and learn about different types of tags.

<!DOCTYPE html>

<html>

<head></head>

<body></body>

</html>

The above code snippet is the basic bare bones of an html document. Here <!DOCTYPE html> represents the HTML5 type document declaration. In the previous versions of html people used to declare very big declarations which are hard to remember but in the latest version of HTML5 they made it very easy. The actual meaning of <!DOCTYPE html> is it not just a html document it’s a HTML5 document someone from programming background know the symbol (!) which means not (negation).

Everything in HTML are called tags. Let’s have a look on different types of tags which are frequently used.

Open your code editor and type in this code.

<!DOCTYPE html>

<html>

<head>

            <title>My Title</title>

</head>

<body>

            <h1>Heading 1</h1>

            <h2>Heading 2</h2>

            <h3>Heading 3</h3>

            <h4>Heading 4</h4>

            <h5>Heading 5</h5>

            <h6>Heading 6</h6>

</body>

</html>

Save your file as heading.html and go to the location where you have saved your file and click it or you can right click it and open it with your favorite browser. And you should see something like in the below image.

This is the output of the above code snippet.

Let’s one by one element properly. <html></html> these are the opening and closing html tags where <> is opening tag and </> is closing tag and whatever the code written between those two html tags is a HTML document.

<head></head> this is the head of the document where title and other meta data goes in you will know more about head part while we are moving.

<title></title> these are the tags where page title goes in here the title is My Title. You can see it in the above image and you can give it any name you want.

<body></body> These are the body tags and whatever we write in between these tags will be appeared for us.

<h1>,<h2>…….<h6> are the 6 heading tags available in the html. You can see the differences in your browser.

Let’s move to next tags. In the same file type in the following tags.

<p>This is paragraph 1.</p>

<p>This is paragraph 2.</p>

Now save the file and open in a browser now you will see like this.

<p></p> tags are representation for the paragraph tags we can style every tag in the HTML document with CSS that we will look in future chapters.

Let’s move forward let’s some other tags inside the same file and have a look on them.

<b>I am Bold</b>

<i>I am Italic</i>

<p>I am paragraph they are breaking me <br> I am a broken text</p>

<hr>

<p>They have drawn a horizontal line above me.</p>

Save the file and have look on your browser the output will be like this.

<b></b> anything we write in between those tags will become bold.

<i></i> anything we write between these tags will become Italic.

<br> is a line breaking tag like “\n” in C and C++.

<hr> is a horizontal line.

I hope you understand today’s chapter. I recommend you to practice and do some crazy work with the above discussed tags. In next chapter we will discuss about more tags like how to link different web pages and tables, ordered and unordered lists etc. Okay guys I will see in you in next class.

Day 4