HTML Beginner To Advance

NOTE: There are a few but true information is available.

Html refers to Hyper text markup language. It is used for building the structure of a web-page. It is mostly text based language.

Tags in Html

Tags define elements for a webpage like heading, paragraphs, links, forms, images, and more.

There are mainly two types of tag in Html

Paired and Unpaired tags

Paired Tags

The staring of a tag are writtened in angle brakets and the closing of the tag is forward slash in the staring of tag name.

They are always written in openning and closing tag

There are many other paired tags such as:

HTML

1    h1 to h6 <!-- Heading tags -->
2
3    <h1>GS Tech Info</a>
4
5    <div>
6        ....
7    </div>
8
9    <p>Hello this is the GS Tech info</P>

Unpaired tag

Teh tag which is single, means there are no any closing tag and opening tag, there are jsut a single tag (without any pair).

For Example:

HTML

1  <br>
2  <hr>

There are many few unpaired tags

There are no any openning or closing tag, because these tags does not contains any content to render in the browser, they are able to change the output format for more clearty or readablity.

Example of the use of br tag

HTML

1    <p>This is a blog of Html (Hyper Text Markup Language)
2Output:
3    This is a blog of Html (Hyper Text Markup Language)
4
5And after using <br> tag;
6
7    <p>This is a blog of Html <br> (Hyper Text Markup Language)
8Output:
9    This is a blog of Html 
10    (Hyper Text Markup Language)
11

This is the use of unpaired tags.

they will provide more readablity to your webpage.

The moost of the tags in Html is paired.

Important tags in Html

<div> tag is used to split the webpage's structure. you cannot see direct changes after using the div tag.
<p> tag is used to write paragraph. (use always <p> tag teh most. avoid the using heading tag such as h1-h6). a new paragraphis always starts in a new line.

<a> tag is used to create links, you can create links within a page or globally or link a page to another page.<br/>href is teh mose important attribute in htis tag, it is used to provide the address to link a component.

HTML

1<a href="https://gs-tech-info.vercel.app"/>GS Tech Info</a>
2        <!-- Redirect the user on internet -->
3Output:
4    GS Tech Info
5    
6<a href="#id" />ID</a>
7        <!-- Link a element or component in a page --> 
8Output:
9    ID

<Image> tag in used to insert images in a webpage.
Teh src is teh attribute to provide image's address.
Example:
HTML
```
1<img src="img.png"/>         
```
You need the img.png in your website's root directory.
The img.png is just a file name.
ul tag is used to create a unordered list. which means this is a list wiht no numbring or indexing.
<ol> tag is used to creae a ordered list. which means this is a list with numbring or indexing.
<li> tag is used to create list-items. It is used in both <ul> and <ol> tags.

Example: of ul (unordered list)
HTML
```
1<h1>Hardware Components</h1>
2<ul>
3    <li>CPU</li>
4    <li>Ram</li>
5    <li>SSD</li>
6    <li>Key-board</li>
7<ul>
```
Output:

Example: of ol (ordered list)
HTML
```
1<h1>Hardware Components</h1>
2<ol>
3    <li>CPU</li>
4    <li>Ram</li>
5    <li>SSD</li>
6    <li>Key-board</li>
7<ol>
```
Output:

You can clearly see there is dot in Unordered list, And
Numbers in Ordered list
<table> tag is used to create table in Html, <th>, <tr> and <td> is the child tags of <table> tag.
<th> refers to table heading. it is used to create column in table in Html.
<tr> refers of table row. it is used to create table row.
<td> refers to table data. it is used to insert data in rows of the table according to the column.
For example:
HTML
```
1<table border>
2<tr>
3    <th>Name</th>
4    <th>Class</th>
5    <th>Roll No.</th>
6</tr>
7<tr>
8    <td>GS</td>
9    <td>10th</td>
10    <td>5</ts>
11</tr>
12</table>
```
Output:
<form> tag is used to create form such as login form, contact form etc.
<input> tag is most important and most used tag in form tag. this is used for getting information from the user and use it as we need.
<input> tag is unpaired tag. Your can use it as a child tag of <form> but this is not a child of <form> tag. you can use anywhere you want such as, to create search bar.... etc.
<button> is a another most important tag in Html. it is used to create button in Html, you can use it as a child component But this is not a child component of <form> tag. you can use it anywhere you want like <input> tag.
For Example:
HTML
```
1<h1>Login</h1>
2<form>
3    <input placeholder="Name" type="Name">
4    <br>
5    <br>
6    <input placeholder="Email" type="email">
7    <br>
8    <br>
9    <button>Login</button>
10</form>
```
Output:
heading tags
Heading tags are used to add heading in Html. There are six types of heading in Html. Every heading has different use and importance. <h1> <h2>.......<h6>
For Example:
HTML
```
1<h1>Hello World</h1>
2<h2>Hello World</h2>
3<h3>Hello World</h3>
4<h4>Hello World</h4>
5<h5>Hello World</h5>
6<h6>Hello World</h6>
```
Output: