In this video, you will learn the structure of an HTML file as well as a few basic HTML elements.

I will walk you through the process of creating your very first Web page, and by the end of the video, you have created a very basic one page that we will expand upon in future videos.

Let's get started by opening up visual studio code and creating a new file type any sentence you want into the file, such as This is my first Web page and save the file.

You can call this file anything you want, but it must have the extension dot html at the end of the name.

Now, if you open that violent Google chrome, you'll see your Web browser rendering the sentence you typed into the HTML file.

While this technically works, the file we just created is not actually valid.

HTML.

Behind the scenes, the browser surrounding our sentence invalid html tags to see what these tags looks like.

We'll need to open the developer tools of Google Chrome to do this press control shift.

I were command shift I if you're on a mech.

Upon doing this, he will be greeted with a fairly complex looking window.

The data in these tabs is extremely useful in certain scenarios, but for this course, we'll only care about the information in the Elements tab.

The elements have shows all the HTML elements are pages composed of.

And as you can see, our page has three elements.

Html head and body.

There's also 1/4 element that every HTML page has, and this is called the Doctor.

The doc type is the first element of an HTML page and must be the first thing in the HTML file.

The doctor tells the browser which version of H.

T Mo you're using for all of our videos will be using HTML is our doc type.

This tells our brother to use the most up to date version of HTML available.

The next element is the HTML element.

This element tells the browser that all the code inside the HTML element is ht.

No, this tag should contain everything inside of your HTML files except the DOC type, and should come after the tac type.

That had element is the next element and is technically optional.

The information in the head element is never displayed in the browser, but instead used to set information such as the title or description of the page.

His element is general, the first element inside the HTML element, but it does not have to be.

Our last element is the body element.

The body element contains all the information that we want to display inside the browser.

This could include text images, videos and much more.

Try updating your HTML file to include all these elements and also changed the text to something else.

Then save the file.

You may notice that Google Chrome does not update and render your changes in order to force Google Chrome to update, you will need to refresh the browser.

This could become quite annoying, though, if you must refresh each time you make a change.

So we'll download a plug in for visual studio code called Live Server.

This plug in will automatically refresh your browser every time we make a change.

In order to download this pogon, go to the extensions to have in the bottom left of the sidebar and type life server into the search bar.

Next, click the install button on the live server, plug in and then click the reload button after the install is complete.

This will restart visual studio code with the new plug in enabled.

Now, if you open your HTML file, you will see a go live button on the bottom of the screen.

His button will open your HD mo file in your default browser, and every time you save your age, Timo file.

It'll automatically reload your browser, you may notice, but the euro in your browser has changed.

And now look something like this.

This is because the lifesaver plug and actually uses your computer as a server to serve the files to the Web browser on your computer.

Let's break down with this.

You are oh means.

The first set of numbers from the Earl won 27.0 dot 0.1 is the I.

P address of your local host.

This I P address is exactly the same on all computers and is the I.

P address of the computer server.

The second set of numbers after the colon is the port number.

These two numbers work similarly to how an address of an apartment complex works.

The I P address is like the address of the apartment complex, while the port number represents the apartment number of a single room in the apartment complex.

If you do not specify a port number, the browser will automatically use Port 80 which is the default port for http Communication.

You now have all the setup complete to efficiently develop HTML pages.

You may notice, though, no matter what you do, all of your text in the body tag appears on one line and is the same size in the next video.

We'll fix this by learning new HTML element that will allow us to create text of various sizes and text that spans multiple lines.

Please don't forget to like comment and subscribe to stay up to date with all future lessons.

Thanks for watching.