Introduction to Html in English - GraphCodeX

Hello friends, today we will tell you about Html.

Introduction to Html - GraphCodeX

What is HTML.

Html is a kind of Standard Markup Language. Which is used to create Website and Webpage. It is used to create the Basic Structure of the website. You can also create your website from html and upload it to the internet server. And your website can be viewed in any browser.

The full form of HTML is Hyper Text Markup Language.

This language is very simple compared to other computer language like C, C++, JAVA etc., any person can learn to use it easily and in very less time.

In addition to Text Editor/Notpad for coding it, VS Code App - For laptop/computer and Spck Editor App smartphone can be used in . Apart from this, there are other applications as well. You can use whatever you want. But according to me this application is the best.

HTML is made up of a series of small codes, these short codes are called tags. HTML tags tell the browser how and where the elements written inside that tag should be displayed in the website.

After writing the HTML code, your document has to be saved, to save it, it is necessary to write .htm or .html extension with the name of the html file, only then it will be your html The document will be shown in your browser or else not.

After saving, you have to open the browser to view your html document. That browser will read your html file and convert your correctly typed code and show your website correctly as you would have thought while writing the code.

Your web browser does not display html tags in the website but uses those tags to display your document properly.

Create File

We will create Index.html file before code.

Index.html Why? Why Index.html is because it is the main page / starting page of our webpage.

Html Boiler Plate

Then we will bring the boiler plate code of html ! by typing it and then clicking on Emmet.

Html Boiler Plate is that inside which we do Html Coding.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>

This serves to tell the version of document and which type it is.

<html lang="en">

lang="en" This helps to specify the language of your content. That your content is in english or hindi. More language.

Head Tag

<head> - - </head>

Head tag also includes meta tags, title and stylesheet link or style css.

Title Tag

<title>Your_Title</title>

You can write any title / name according to you inside the

title tag.

Example:- <title>Document</title> Replace Document <title>Vansh Techno World </title>

When we see our html page in the browser, we will see this title in the top left of the title bar of the browser.

Body Tag

<body> - - </body>

body tag has content inside
such as Headings tag, paragraph tag, div tag and so on.

There are many other such tags that you can write inside the body tag, it is not possible to tell about all the tags here so I have told only about the basic tag.

Comment Tag

<-- -->

Whether it is mandatory to write

Comment/text or not, it depends on you whether you want to write comment in your html document or not. If you want to write comments in your html code and do not want to show it to anyone else, then you can do so by using this tag.

Open And Closings Tags - <> </>

Most html elements contain opening and closing tags. Inside which there is content. We have to take care of opening and closing tags. We need to put closing tags with open tags.

If you do not put an end tag after putting a starting tag, then the effect of that tag will not be visible in your browser, so it is mandatory to write an end tag.

Example - open <html> tag + content + closing </html> tag ,
open <head> tag + content + closing </head> tag,
open <body> tag + content + closing </body> tag and more etc.

Apart from this, there are some tags in which we do not have to use the closing tag. These are called empty elements / Empty elements/tags
Example - <br> tag can be other similar tags.

The keyword of HTML tags is case-insensitive, it means that you can write the name of the tag in capital letter or small letter, it is completely up to you. Depends on how you want to write your tag.

Heading Tags

Heading tag is used to write heading. It has total 6 heading tags.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</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>

Shortcut

We type h1 and then click Emmet. Your full tag will come.