Informational and Knowledgeble Post

Biography On The Greatest Scientists " Sir Albert Einstein " - Gyan Ki Baatein Aur Sangrah

Image
  Biography On The Greatest Scientists  " " Sir Albert Einstein " “Science can only be created by those who are thoroughly imbued with the aspiration toward truth and understanding. ” Albert was born into a family that already had its fair share of smart people. His father, Hermann, had been an excellent student with a God gift for mathematics. Only  money problems kept him from going on to higher education, or college. In adulthood, Hermann and a cousin became owners of a company that made beds. After that, Hermann and his brother, Jakob. Albert’s mother, Pauline, came from a very Great family. Her father made a fortune selling grain. Pauline went to good schools and she was a model student. She was well-educated, which was fairly unusual for a woman at that time. She also had a great sense of humor, the arts, particularly music. Albert, Hermann and Pauline’s first child, was born on March 14, 1879, in the southern German town of Ulm. Right f

Learn Pure And Complete About HTML ,Tags, Elements,us , website - Gyan Ki Baatein Aur Sangrah.

๐ŸŒท๐ŸŒท๐ŸŒท๐ŸŒท Html๐ŸŒท๐ŸŒท๐ŸŒท๐ŸŒท


       Learn HTML HERE......



Introduction

What is Html?

Html stands for Hypertext markup language. It is not a programming language but it is a markup language. It is used to create web pages.

How does html look like?

Html contains tags known as html tags.

For example look at following html tag. It is a paragraph html element. It starts with less than angle bracket then html tag 'p' and then closing greater than bracket. In this case, p stands for paragraph. This is a paragraph tag.

<p>

Now every html element has a start tag and end tag. The above paragraph tag is an opening tag or starting tag. So we must have a closing tag. The paragraph element closing tag is as follows.

</p>

The closing tag is same as opening tag except that immediately after opening less than symbol we have forward slash present.

We have to write actual paragraph content between the opening and closing tag as follows.

<p>This is a paragraph html element or simply paragraph tag</p>

There are many html elements available each one having a different purpose but the syntax of writing html element or tag is same. Look at some of the html elements.

<h1>This is a heading. </h1>

<span>This is to just write text content</span> <b>This tag is to make font bold.<b>

As you can see all the html elements must have an opening and closing tag and then the content has to be wrapped within these tags.

In this course, we are going to look at each element with sample content.

Not all html elements have to include opening and closing tag. There are few which consist of only one tag without the need to have a closing tag.

For example, if you want to draw a horizontal line on a web

page then we have to use the following tag.

<hr>

This hr tag doesn't have a closing tag. That is because it doesn't have any content and it just draws a horizontal line.

Note that ' hr' stands for horizontal rule.

Right now you know html consists of many html elements and having closing and opening tag. But where to put all these elements or tags?

Normally you can write html in any simple text editor like notepad or wordpad and then save it as a .html or .htm extension.

Look at the following html document.

<DOCTYPE html>

<head>

<title>[Place your page title here]</title>

</head>

<body>

[Place your page content here]

</body>

</html>


Let's look at each element of html document above.

The first line tells the browser that this is an html document.

We have our paragraph element or tag within the body tag. Whatever you write within the body tag is the only thing that you or any user will see in the browser.

Other than the content of body element nothing will be displayed in the browser. Whatever content you want to display, you should write in

body tag or element with help of html tags and once finished

save a file with .html or htm extension.

You can give any name to your html file. Suppose, the page displays employee information then you can name it as employeeInfo.htm' or simply 'employees.html'.

If it is a home page then you can set it as <i>index.html</i>.

The home page is nothing but the first-page user will see when he hit the website URL.

What is CSS?

Css stands for Cascading Style Sheet. This is used along with html.

The purpose of using ess with html element is to give formatting to them so that to improve web page look and feel.

Once we go through html basics, we will learn css in detail. We will learn types of css and how to use them with html.

But for now, let's focus on learning basic html. So let's get started.


Write Your First Html Code

Let's create your first html code. To do this open brackets

application.

Right click on left side panel and select 'new file' menu item.

Name the new file as 'Index.html' or 'index.html'. Don't forget to write an extension.

Now write some Text within the text editor as follow.

This is my first html code text.

Save the file either by pressing key 'Control' and 'S' (ctrl + S) or by navigating menu item File -> Save.

Let's see how our page looks like in a browser. For that right

click on the preview icon present on the right side panel. This

will open our 'index.html' page in a default browser.



This is my first html code text

Now you can see our text displayed in the browser window. This is the output that user will see when he or she visited this html file.

Now right-click anywhere on the browser and click menu item 'Inspect element. You will see following html markup in the 'elements' section.

<html>

<head></head>

<body>

This is my first html code text.

</body>

</html>



As you can see this is just a text within the body tag and is not uses any html element. There are many html tags you can use. For now, let's use a paragraph html tag.

First, type a left angle bracket (less than sign) '<'. After that write a paragraph tag i. e. 'p' (small letter). Then type right angle bracket '' (greater than sign). When you type this, immediately code editor will type closing tag for you '&lt;/p&gt;'. So you will have now opening and closing paragraph tags with empty content as follows.

<p></p>This is my first html code text..

Now just cut our content text (selecting and pressing keys 'Ctrl + X') and then paste it within the paragraph tags (placing the cursor between the opening and closing tags and pressing keys 'Ctrl + V').

<p>This is my first html code text.</p>

Remember most of the html elements have an opening and closing tag and what is the difference between them is just a forward slash.

There are some elements without a closing tag or self-closing tag or single tag which will cover later in this course.

Here we have written just a single sentence within the paragraph tag and it will be treated as a paragraph by the browser. But as with any paragraph, you can have a number of sentences within the paragraph as follows.

<p>

This is a sample Text.

This is a paragraph for our demonstration purpose.

You can write actual required content here as a complete paragraph.

You can have as many paragraph elements or tags with a single html

file.

</p>

Now save our changes. (Ctrl + S) and preview our page. (by clicking the same icon or right-hand side panel) or just refresh

the html page if it is open already (by pressing keys 'Ctrl + F5').

Now inspect the page again. You will notice that we have our

updated html markup having paragraph tag.

<html>

<head></head>

<body>

<p>

This is a sample Text.

This is a paragraph for our demonstration purpose.

You can write actual required content here as a complete

You can have as many paragraph elements or tags with a single

paragraph.

html file.

</p>

</body>

</html>

This tool given by Google chrome allow us to inspect our html page by displaying markup as well as style applied to a page and many other useful features.

Till now you can see how easy it is to write a html file and view it in any browser (Though I prefer a Google chrome you can use IE i.e. internet explorer, Firefox etc.

In this course, we are going to see many most used html tags and how to code them using our code editor. Once you learn them and practice them you will be able to create html page for any website.

Let's now create a template html file that you are going to use in any new html file while practicing as well as in real projects html pages.


Create a new html file. Name it as a 'htmlTemplate.html' or any name that you prefer.

Then in code editor copy paste the following html code and save the file. (Ctrl + S).

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

// Write your content here

</body>

</html>

This is the basic structure of any html file.

On the first line, you can see a 'Doctype' tag. This tells the compiler that this is a HTML 5 document. The thing to be noticed here is that this include exclamation sign and this tag doesn't have a closing tag. You have to type this exactly as it is.

Next, there is an html tag having the closing tag too. This tells the browser that it is the html markup. This has a 'lang' attribute with a value 'en'. Html tag can have one or more attribute and we can assign a value to it using equal to operator as this one. The 'lang' attribute denotes language and 'en' value denote English. So this tells the browser that the language is English. This can be any other language. This attribute is optional. You can simply close html tag without having this attribute and it will work fine.

Also, the 'meta' tag in the head tag is optional while the 'title' tag within the head tag is for the title of the page and you have to change the title value 'Title' to meaningful value relative to your web page.


The actual content that browser will display has to be within the body tags. Right now in this template file, it is blank having a single comment which you either remove or leave as it is since its not going to display in the browser. When you use this template in any new html file, type all your content here within the body tags.


Html Headings

Let's now see heading tags available in html.

Open bracket application. Select our template html file from left-hand side panel. This will open our template code in the code editor.

Now click menu item 'File > Save As' and give a file name as 'Headings.html'. Once you saved our new file, it will be selected and open in the code editor.

Now we have a new file code ready with our common tags and we only have to place the required tags within the body tags rather than typing the whole html structure every time we create a new file.

There are total six heading tags available in html and they are hฤฑ', 'h2', 'h3', 'h4', 'h5' and 'h6'.

Let's type all heading tags within body tags.

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

Either type the above code yourself or just copy and paste it

into a code editor.

Save the file. (Ctrl + S).

Now preview the page by clicking the preview icon from right hand side panel.

You will see the following output within the browser.


As you can see the h1 heading tag has a larger font than all other heading tags. All heading are formatted as bold.

Also as we go to other headings sequentially from 1 to 6, the size of heading is getting decreased and h6 heading has smallest font size.

The basic use of heading tag is to give heading or subheading

to your page or any section of the page. It works as a title for

that section.

It is the best practice to give every page a heading. That will help a user to know the purpose of a page.

For example, you can give 'Contact Us' heading for contact us page and 'About Us' heading on top of the page for about us page and so on.

Now you know what html headings are and how to use them in any html page. We are going to learn more tags from next section. But before that let's see how to give line breaks and comments in html page.

Let's add some text in a paragraph to our html page as follows.


<p>

This is first line.

This is second line.

This is third line.

This is fourth line.

</p>

As you can see we have written four lines each on a separate

line in the code editor.

Now save it and then preview it. You will see the following output in the browser.

This is first line. This is second line. This is third line. This is fourth line.

As you can notice even though we have typed each sentence on separate lines, this is ignored by the browser and all the text is just right after each one.

Why is this so?

That's because the extra white space whatever it may be is ignored by default. If we really want to specific content on a new line then we have to use the line break.

Line break html tag is '<br>' or '<br />'.

Let's add line breaks in our html code.

<p>

This is first line.<br>

This is second line.<br>

This is third line.<br>

This is fourth line.<br>

</p>

Now save the code and again preview it. You will see the output as follows. It is as per our expectation.


This is first line.

This is second line. This is third line. This is fourth line.

In above code, we have placed the line break tag to the end of each sentence. But you can put it anywhere like on the next line of just before starting of the next sentence as shown below.

<p>

This is first line.<br>

This is second line.

<br>

This is third line.

<br>This is fourth line.<br>

</p>

If you save this modified code and again preview code then you will get the same output as previous one.

Let's now understand what comments are and how to use

them in html code.

The first purpose of comments in html code or any other programming language is to ignore some part of the code so that the compiler or the interpreter will ignore it. When you don't want to show certain piece of code to a user then just comment it out. A user will not see that in a browser page.

Look at the following commented code.

<!--<h1>This is heading 1</h1>-->

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6> This is heading 6</h6>

As you can see in above code we have commented out hi heading and h4 heading.

Whatever code we want to comment out, we have to put it within <!- and '->'.

To start the comment we have to use this ->' symbol which is the combination of less than symbol, exclamation, and two dash symbols.

To end the comment we have to use this ->' symbol which is the combination of two dash symbols and a greater than

symbol.

As you can notice we have commented out hi heading by placing the commented symbols in the single line.

To comment out h4 heading we have used starting and ending comment symbols on the different lines than that of the heading tag.

Whatever way you preferred to comment a piece of html code, the result will be same.

If you save this code and preview the page in the browser, you will see the following output ignoring the commented code ('hi' and 'h4' headings).
As we can comment out specific html code, we can also un comment or remove comment to include previously

commented code so that it will be displayed or executed by the browser.

To uncomment any commented code, simply remove the starting and ending commented symbol from the commented code that you wish to uncomment.

The first purpose of comments in html code or any other programming language is to write something about the code or specific part of html code so that when you or any other programmer or designer visit or view it later he or she will come to know why this code has been written.

Look at the following commented code.

<!-- These heading are for demonstration purpose only.

Use only heading that is required and remove all others. -->

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

As you can see in above code we have written a comment above all heading tags so that whenever we or any other coder see the code later he or she will know the purpose of the html code.

Many coders also prefer to write the name and date of coding in a comment section. Though many others including me don't prefer this use of comment, it is the matter of choice either of the individual coders or the rules following by an organization.

That's all about html heading tags. We have also seen what line breaks are. Then we discussed comments in html code.



Basic Html Tags

In the last section, we have seen about heading html tags. Let's now see some basic html tags.

First, copy our basic html template and create a new file named as ' basics.html' in your choice of editor. Within the body add the following content.

<p>

What is an Html?

</p>

<p>

Html is an abbreviation of hypertext markup language.

It is NOT a programming language but a markup language where you write some html tags with content and save it as html or htm file. Then this file you can open in any browser which will show you the

output.

</p>

Look at the above html content. It has some content in two

paragraphs.

Now let's do some basic formatting to it.

First, let's make the question in first paragraph bold. Change it using either '<strong>' or '<b>' tag.

<strong>What is an Html?</strong>

OR

<b>What is an Html?</b>

Let's make the word 'NOT' in second paragraph italic. To do this we can use italic html tag as follows.

<i>NOT</i>


To give underscore to any word or words or a complete sentence use underscore html tag.

Let's give underscore to html or htm words in the second

paragraph as follows.

<u>html</u>

<u>htm</u>

Suppose, if we want to give a line between question and answer then we have to use the horizontal rule <hr> tag.

Note that this tag doesn't have a closing tag. Put this tag after first paragraph closing tag.

With all these modifications our code is now as follows.

<p>

<strong>What is an Html?</strong>

</p>

<hr>

<p>

<u><b>Html</b></u> is an abbreviation of hypertext markup language.

It is <i>NOT</i> an programming language but a markup language where you write some html tags with content and save it as <u>html</u> or <u>htm</u> file.

Then this file you can open in any browser which will show you the

output.

</p>

Save our modified code and then preview it in a browser by clicking preview icon from a right-hand panel of the editor as usual. You will see the following output.




Working with Images

It is common to include images in html page. You may have seen that many websites use images in various ways such as to show thumbnail, icon, picture, screenshot etc.

Let's see how to add images to our html page.

First, create a new html page using our html page template that we have already created. Let's name it as 'images.html'.

Before adding an image to our page, add the following html content. This is just for demo purpose. You can use any content from your any article for practicing.

Add the following paragraphs within a body tag.

<p>

</p>

<p>

</p>

This is the first paragraph.

This is the second paragraph.

Let's now add an image after the first paragraph as follows.

<p>

</p>

This is the first paragraph.

<img src="/images/picure1.jpg">

<p>

</p>

This is the second paragraph.

As you can notice to add an image we have to use 'img' html tag. This 'img' tag has an attribute where we have to specify the


URL of the image.

If the image is within our application directory we have to use a relative path. If the image is from other website or location on another server then we have to use a path of that image.

To add an image or images to our application directory, create a new folder named 'images' in our root directory. Then add an image from somewhere else. You can get an image stored on your hard disk or from another source for our demo purpose.

Note here that we have placed our images in 'images' folder. This is not necessary. We are doing this because it is a standard practice to store all site images in one location i. e. in one folder such as 'images' folder within application directory. You can store your images anywhere within the application directory.

In our example, we have picture1.jpg' file in the 'images' folder. So we have given its relative path to src attribute of 'img' html tag.

One other thing I want to mention here is that we can use an image of any format such as 'jpg' or 'png'. But it is a best practice to use 'jpeg' image with an extension either .jpg or .jpeg when we need to publish our html website, because of its smaller size and enough quality to show an image in a web page.



As you notice with the above code, an image is displayed with its full width and height. What if the image size is large or we want to show in a specific part of the application with given width and height. Then we can use width or height attribute of 'img' tag as follows.

<img src="/images/picure1.jpg" width="250px">

We have added the 'width' attribute to 'img' tag and assign a value of 250 pixels. We have not specified height attribute because it is not really necessary.

When we add either width or height attribute to 'img' tag, the other size attribute is automatically adjusted for the image to keep its width and height ratio from original image size.

With this change, we have now image size of our own choice.


Working with Links

In this chapter, we are going to see what links are and how to create them.

Links are one of the most common and useful html elements. Normally, they are used for navigation such as redirecting from one page to another page on same website or page on a different website.

Not only for navigation, links are also used for pointing to the other resources such as image or document such as pdf file to open in a web browser or download it. We are going to see how to achieve it in this chapter.

First, copy our basic html template and create a new file named as 'links.html' in your choice of editor.

To html body, add the following content.

<a href="-/basics.html">Html Basics</a>

To create a link we need to use an anchor tag <a>.

As you can see we have an opening and closing anchor tag with letter small 'a'. Within the tags, we have written the caption or label that will be visible to the user to click on. In our case, the label is 'Html Basics'.

Anchor tag has an attribute 'href' where we assigned the URL of the target page where we want a user to navigate when he or she clicks on a link.

In our case, we want to redirect a user to Html basic page so we have written its URL as~/basics.html'.

Relative path:

Note that this URL path is a relative path.

The tilde'' sign indicates the root of the application or the


website.

Then after forward slash, we have written our name of html file. Our file is stored in the root directory of our website. Suppose, our target file is within the folder 'abc' then we have

to write our URL as '-/abc/basics.html'. This indicates that in

root directory there is a folder named 'abe' and within that

folder our target file '

basics.html' is present.

Suppose our source page (i. e the page where the link is present) and target page (i.e. the page where we want to go when clicks on the link) are present in the same folder either in the root directory or any other folder or subfolder then we don't have to use tilde sign to indicate path from root directory as follows.

<a href="basics.html">Html Basics</a>

This means that both our files 'Inks.html' and 'basics.html' are present in the root directory or in any other folder or sub-folder such as 'abc'. So no need to look from the root directory and target file will be searched within the same folder location.

When a user clicks on the link ' redirect to the page basics.html. Html Basics', application will

Now save our html file and open it in a browser. Then click on the link. This will open our basics.html page.



Opening resources:

Suppose, we have a scenario where we have to open a pdf file in a browser to be read by the user then we can provide a link to the pdf file using anchor tag in our html page and when the user clicks on the link open pdf file in a new tab.

For example, if our pdf file is in the folder named documents' which is in the root directory then we can write a link as shown below.

<a href="~/documents/htmlfundamentals.pdf"

Fundamentals Ebook</a>

Try this yourself as an assignment.

Image Links:

Often we need to give a link to the image so that when a user clicks on the image it should redirect to the target resource page.

One of the comm examples of a clickable image is thumbnail image. A thumbnail image is a little bit smaller in size and when a user clicks on that image it will redirect to the other page where a user can see a larger image along with other information.

Creating a clickable image is easy. We just have to wrap the 'img' tag within the anchor tag as shown in the following code.

<a href="/documents/htmlfundamentals.pdf" target="_blank">


<img src="/images/picure1.jpg">

</a>

As you can see we have wrapped our image tag within the anchor tag. When a user clicks on the image, he will be redirected to other page displaying target file (pdf) content.

Try this yourself as an assignment.

Now you have knowledge of how to create links. You will be able to use links easily in any of your html pages whenever required.


Html Lists

In this chapter, we are going to discuss another popular and most commonly used html element 'list'.

There are two types of lists, unordered list and ordered list.

Unordered List:

First, copy our basic html template and create a new file named as lists.html' in your choice of editor. Within the body add the following content.

<ul>

<li>Russia</li>

<li>India</li>

<li>US</li>

<li>UK</li>

</ul>

Look at the above code. This is an unordered list. It has <ul> opening and </ul> closing tag.

Remember 'ul' stands for unordered list.

Within opening and closing 'ul' tag we can have a number of <li> tags. We have to write a label for '<li>' tag within the opening and closing tag.

<li>US</li>

Remember li' stands for list item. That means we have the number of list items for our unordered list.

Now save the file and open it in your preferred browser such as Google Chrome. You will get the following output.


• Russia

. India

• US . UK

As you can see in the output, each list item is displayed as each in one line. Also, there is a small filled circle prefix with each list item. That is why unordered list also known as a bulleted

list.

Ordered list:

Let's now see what ordered list is.

Copy the whole unordered list and then paste it into the next

line of code.

Then change opening <ul> tag with <ol> (opening ordered list tag) and closing </ul> tag with </ol> (closing ordered list tag).

<ol>

<li>Russia</li>

<li>India</li>

<li>US</li>

<li>UK</li>

</ol>

We have not changed the list items here.

Remember, 'ol' stands for ordered list.

Now the body content has both unordered list and ordered list having same list items.

Save the html file and open it in a browser. You will get the

following output.


1. Russia

2. India

3. US

4. UK

As you can see with the ordered list, there are numbers in order for list items starting from one.

Links as list items:

List items can also contain links so that when a user clicks on any list item, he or she will be redirected to linked resource or page.

A linked resource can be an external web page or an internal

application page or resource.

Write or 'copy and paste the following order list to html body.

<ol>

<a href="http://www.ncodeclass.com/html-introduction/">Html

Introduction</a>

</li>

<li>

<a href="http://www.ncodeclass.com/write-your-first-html code/">Write Your First Html Code</a>

</li>

<li>

Headings</a>

</li>

<li>

Tags</a>

<a

href="http://www.ncodeclass.com/html-headings/">Html

<a href="http://www.ncodeclass.com/basic-html-tags/">Basic Html
.



</li>

</ol>

Save the html file and open it in a browser. You will get the

following output.

1. Html Introduction

2 Write Your Fiat Hal Code

Hul Headings 3. 4. Basic Hunt Taza

That's the basics of using html lists. Isn't it really easy to use them?

Another common use of lists is to create navigation menu present normally at top of the page. We will see how to create menu later when we will learn css.

That's complete our discussion on Html Lists. Now you will be able to use lists in your web page.


Html Table

The table allows organizing data in rows and columns.

Create a new html file in your preferred editor and copy the generic html template to it. Then save it as 'tables.html'.

To create an html table we have to use 'table' tag.

Inside 'body' tag, write the table having opening and closing tag as shown below.

<table>

</table>

Html table has rows and columns.

First, we need to write row tag and within row tag, we are going to write cell tags.

So lets write first table row as follows using <tr> opening and

</tr> closing tag.

<table>

<tr>

</table>

Now our table has one row. Lets add columns in it using <td> opening and </td> closing tag as shown below.

<table>

<tr>

<td>

</td>

</tr>


</table>

We can have multiple columns in a table. We can have multiple cells in one row. So, we can have multiple 'td' tags within a single 'tr' tag. Let's add one more 'td' tag within 'tr' tag as shown below.

<table>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

Now we have one row and two columns in our html table. Right now, cells in the table are empty. Let's add some data to it

as shown below.

<table border="1">

<tr>

<td>

Jack Smith

</td>

<td>

Web designer

</td>

</tr>

</table>

Note that we have added border attribute to table tag.

Now we have a table showing one record of employee displaying name and designation.



Jack Smith Web designer

We can have multiple rows within a table having the same number of columns. Let's add one more employee data to our

table.

<table border="1">

<tr>

<td>

Jack Smith

</td>

<td>

Web designer

</td>

<tr>

<td>

Steve James

</td>

<td>

Web programmer

</td>

</table>

Now we have a table showing two records of employees displaying name and designation. We can add any number of rows to html table.

Jack Smith Web designer

Steve James Web programmer

That's looking good. But one thing is missing in this table is

heading of columns. In this case, we need heading for employee name column and employee designation column. To give headings lets add the following row as the first row.

<tr>

<th>

Name

</th>

<th>

Designation

</th>

As you noticed we can have heading tag <th>' (table heading) instead of '<td>' tag for our heading row.

Now we have Name and Designation headings for employee

data in the table.

Our table code will be as follows.

<table border="1">

<tr>

<th>

Name

</th>

<th>

Designation

</th>

<tr>

<td>

Jack Smith

</td>

<td>


Web designer

</td>

<tr>

<td>

Steve James

</td>

<td>

Web programmer

</td>

</table>

Save our html file and open it in your preferred browser such as chrome. You will get following output.

Name Designation Jack Smith Web designer Steve James Web programmer

Now, this looks great and we have our expected html table. Still, there are two more tags we can use in the table. Those are 'thead' and 'tbody'.

Tag 'thead' is for a table heading and tag 'tbody' is for a table body. Though without these tags, we can have our html table but using them is a standard practice. So let's see how to use it.

We have to wrap our heading row in thead' opening and

closing tags as shown below.

<thead>

<tr>

<th>

Name

</th>


<th>

Designation

</th>

<thead>

Next, we have to wrap all other rows in 'tbody' opening and

closing tags as shown below.

<tbody>

<tr>

<td>

Jack Smith

</td>

<td>

Web designer

</td>

<tr>

<td>

Steve James

</td>

<td>

Web programmer

</td>

</tbody>

With these changes, our table code will be as shown below having 'thead' and 'tbody' tags.

<table border="1">

<thead>

<tr>
<th>

Name

</th>

<th>

Designation

</th>

</thead>

<tbody>

<tr>

<td>

Jack Smith

</td>

<td>

Web designer

</td>

<tr>

<td>

Steve James

</td>

<td>

Web programmer

</td>

</tbody>

</table>

Now save the file and open it in a browser. You will get the same output as without 'thead' and 'tbody' tags.

In this section, we have seen how to create html table and how

to format it with relevant children tags.


Thanking you To read and understand This post.

If you found any typing or Writing Error so please comment down below so we Solve our Error.

๐ŸŒท๐ŸŒท๐ŸŒท๐ŸŒท๐ŸŒท๐ŸŒท๐ŸŒท๐ŸŒท๐ŸŒท๐ŸŒท๐ŸŒท๐ŸŒท๐ŸŒท๐ŸŒท๐ŸŒท๐ŸŒท

By :-  ©GYAN KI BAATEIN AUR SANGRAH

Popular posts from this blog

A Biography of Swami Vivekananda - Gyan Ki Baatein Aur Sangrah

Famous Quotes Of " Sir Stephen Hawking " - Gyan Ki Baatein Aur Sangrah

Biography On The Greatest Scientists " Sir Albert Einstein " - Gyan Ki Baatein Aur Sangrah