2. COMO HACER UNA PAGINA WEB HTML | ESTRUCTURA HTML de UNA PAGINA WEB 💙ESTRUCTURA HTML BÁSICA

Welcome to this new installment of the HTML course, in which we will learn to structure an HTML document in the initial form that you can create your own website, even from scratch. Today we will see the HTML elements and their function in order to understand the management that we can give it in general. We will not see all the HTML elements because they are clearly too many, but we will see the main elements that will serve us to be able to manage the rest of the elements.

Likewise, for today we are going to install a different text editor to be able to work in the previous session. We work with the Windows note block that works quite well. However, it is not so comfortable in sight that it does not render us from the labels that we are placing to install our text editor, which there are many. We are going to go to the browser and we are going to install Sublime Text. We click Sublime Text. We go to Sublime Text.com.

Sublime Text is basically a text editor of code that will serve us to program in multiple programming languages. And we click here where it says Download for Windows. Immediately the installer starts to download. We wait a few seconds. Already finished, we click on the executable and proceed to execute it as we would with any other program or any other installer on our computer. We click on Install and click Finish.

To open our index.html file, which is the file we are working on, which is our page that simply has a welcome and has a paragraph that says my first website, we go here to the folder where we have the page, we right click, we are going to open it with and we are going to tell it here where it says choose another application. There are no more applications and we look for its blind text here and we give it to accept. Immediately the editor will open with our HTML code.

to be able to modify it, to be able to work with it. The good thing about this editor is that, as I mentioned before, it brings us the possibility of identifying the labels. As we can see, each of the labels comes marked with a different color. What are these colors for? They serve to identify when I was wrong. I erase the symbol here to

close this label, I can see that the label below is not colored and in this way visually we can help our work be much more agile. The operation is the same, we are simply editing, for example, my first web page, I'm going to put it here B2 and we're going to save here. We can do it here where it says File Save. When we have a new version of our page, we simply reload and we will be able to see the modifications that we are adding to our

pages. Basically that is the management that we are going to continue to give with respect to our Sublime Text code editor. Ok, reinforcing what I saw in the previous video tutorial in which we created all that structure. How are the elements in HTML? The elements in the HTML language

They are based on labels, as we can see here. We have an opening label, in this case a label called Title and we have a closing label. We have a content and this whole set forms an element, an HTML element, which fulfills a functionality within our page. In this case, it fulfills the functionality of showing the title in the browser tab.

Also remembering that everything we place between the body labels and the body finalization label is what is going to be shown on the page. Everything we place here is what is going to be seen on our browser. As we can see here, we have an H1 label and with its respective closure and

In HTML we can have different variations for labels, such as the H1 label has variations from H1 to H6 and we can observe it here. We are going to put an H2 label here and we put the title here H2. We are going to save and refresh our page and as we can see it is a title, but it is much smaller than the H1. We then have the H3 variation, we are going to put it here.

title H3, we save and we are observing that the size is changing from a larger size to a smaller size as I increase H1, H2, H3. We have available up to H6. Let's look at them here. It would be title H4. We save and refresh. As we can see,

Each of the different H1, H2, H3, fulfill a function that is to show us a title with a corresponding size. Already we on our web pages we decided what title we can use according to the needs on our page.

Something important is that some HTML elements do not need closing labels and catalogs them as empty labels, given that no content is specified in them, but a concrete action is carried out. An example of an empty label is a BR label. Let's see the example with the BR label to

see what an empty label would be like. This BR label is used to make a line jump. For example, we could make another paragraph here, we could put here thanks for watching this video and we can put here subscribe and here we can put a BR label. The BR label is cataloged as an empty label, given that it does not have any content inside it, unlike the P label, which does have a content or a paragraph.

inside the label between the initial label and the final label. If we reload our page, we will see what it says here. Thanks for watching this video and below it says subscribe to this because the label is responsible for making a line jump on our HTML page.

HTML is an empty label. You can omit the labels at the end. Some HTML labels can work without the final label. However, not specifying the closing label can generate strange errors on the page. Better close all your labels. For example, if we delete this paragraph here and reload, we observe that our page continues to work without any problem, but in other versions in which we already have images, videos, links, some styles, it is not recommended to omit some closing labels so that our page can work without any problem.

Another aspect that we have to take into account in our HTML pages is that HTML as such does not distinguish between uppercase and lowercase. It is not sensitive to that if we put the labels in uppercase, for example, if we put the label here and this label we put it in uppercase and we save it, we will update our page, it will continue to work without any problem. If we click here to verify source code, we can observe that this label

This paragraph of line 7 is with a capital P and this paragraph of line 8 is with a P in lowercase and both work without any problem. However, the HTML standard recommends that all labels are handled in lowercase, in addition to the fact that the code is much better appreciated in lowercase.

Finally, in the description of the video I'm going to leave you a link where you can find a general list of HTML tags to implement on your pages with the description of its purpose and its functioning. We will continue in the HTML learning in a next installment and thus know in depth this language on which is written basically all of the Internet. If this video has been helpful for you, I invite you to subscribe so that you are aware of the new updates that I will be putting up soon. Until next time.