Welcome to the third video on the basics of HTML.

In this video we'll dive into more HD moments as we build the homepage of the band website, and by the end of this video we have created all of the HTML needed for the home page of our website.

Before we get started coding, let's cover a few of the concepts that we will be you devising starting with HTML elements.

If you have ever tried to use a greater than or western sign in the text of your HTML, you may notice that it does not render and actually messes with your entire page rendering.

This is because these symbols, along with many more, are special symbols that are used in HTML for signifying start and end tags.

In order to render these symbols, we must use HTML entities.

An HTML entity is written by writing an ampersand and pound sign, followed by the number that corresponds to the symbol.

For example, this is the code that will render the less than symbol remember, in which numbers correspond to which symbols can be quite difficult, though this is why the most common symbols, such as the west, Then sign have a name that could be used instead of the number.

This is the code for the less than symbol, using the name as opposed to the number.

When you use the name of this symbol instead of the number, make sure that you do not include the pound sign after the ampersand.

The next major concept is the idea of meaningless element.

So far, we have only learned about elements that have inherent meaning.

For example, the header element is used to wrap the header of a page.

The knave element is for the navigation section, and the one element is for a heading.

HTML has many, many elements that have specific meaning, but sometimes a section of your page didn't have any special meaning, or there is no HTML that conveys the meaning you want.

This is where meaningless elements come in.

They're two different, meaningless elements, DIV and Span.

These elements are the same in every way, except that development is a block element, meaning that it will appear on a separate line from the content around it, similar to the paragraph tag.

The span element, on the other hand, is an inline element and thus appears in line with the content around it.

If this does not make sense, shit, the differences between these two elements will become apparent as we write the HTML Phyllis lesson.

Essentially, all you need to know about meaningless elements is that they should be used any time you need to group together HTML.

That either has no meaning or there is no HTML tag to describe the meaning.

Now that we got that out the way, let's jump into the coating of the home page for the band website.

Hello, everybody.

Welcome to the coding section of this video.

As you can see on the left, I have visual studio code opened with the project we left off in the last video and other right, I had the final version of the band homepage to get started.

We should copy the about dot html page and rename it to index dot html.

This is because the about Paige shares the same header and the same footer as our home page.

We now can get rid of the section in the middle that contains the about content, since we will not need that on the home page, the reason that we named this page index dot html is because the index page is the page that has shown When do you leave nothing after the website you are?

Oh, so we removed this slash index dot html and hit Enter.

You'll see that it renders the exact same thing that is inside the index html.

And if we change this, save it, you'll see it shows up there.

Now let's get started with the actual content of this page.

Let's jump back to the image that we have to use.

There's a reference and get started with the header.

As you can see inside the header, we have an additional button.

Forget our leader's latest album and another button for the play button.

To create these elements.

We'll use the button element.

The button element will render a button on the pages we could see hear, And if we give it some texts, such as what is on this page?

Get our latest album.

You'll see that it renders a button that we can click on our page.

Let's do the same exact thing for the play button.

Now we can actually just show this image with a normal button key press.

We have to use an age deal won't entity that we talked about earlier the code for this entity as as follows.

This will render the play button, as we can see here as you may notice, or two buttons on this same line as a poster on different lines like they are in this image.

This is because the button is an inline element as opposed to a block out mint.

In order to get around this problem, we can use the tag called the Line Break Tag, which is the V R tag.

The BR tag adds a line break wherever it is, so if we put it after this button, it'll create a line break right here before the next button.

And if we say that on the right, you can see that there are separate lives.

Now we want a little bit more spacing than this between our elements, so use another line break element in order to create a little bit of a gap between our two buttons.

That is all the html that we're going to need for the header section.

But as you can see in this homepage, you that there is a giant background image that is applied for the entire header in order to remind us that we need to create this background image and find it later, let's add a comment into the code to do this.

Use an exclamation point followed by two dashes, which will create a comment in the coat.

Comments.

Do not actually render any information on the HTML page, but they show up in the coats that you can remind yourself or other people that use this code what certain things mean or what to do.

So, for example, let's create just a to do comment that tells us that we need to find a suitable background image, every guest.

So now if we go back to our kids, you could see that that does not actually render.

But it shows up in the code for us to reference later.

Now let's go on to the middle section of our page in the middle of section of our page.

We'll use a section element, Justus.

We did for the about section of our code to wrap all of this stuff in our to wear section, and you could see that we have a header called tours, just like we have any about section.

So let's create an H two and add the text tours into that and view that to make sure the best shows up correctly.

Next, we have a few rows that display all the tour dates for our upcoming tours of the generics band.

There is no actual each team of element to the note of row, for example, in this scenario.

So what we're going to do is we're going to wrap our entire set of rose in a diff, which is a meaningless element that we talked about earlier.

This will make it a block element.

So that way, these items will not appear on the exact same line is each other well, then wrap each individual row in a div of its own.

So this outside, if here is wrapping all of these rose and then each one of these rose has its own def.

That will contain just the text inside of it.

Now, let me add the text inside of the Rose.

Now, as you could see, if we go over to our page, we have the different text rendered for all the text in the road, but it doesn't quite look great.

First off, we need this July 16th date to be bold ID, you know, wanted to do this in HD mo.

We'll use what's called a strong tag, the strong tag to notice something that is important.

In most cases, it means that the text inside of the strong tags will be bold ID.

But in some scenarios, the text will actually not be bolted.

For example, if you're using a screen reader if you're blind, the text will have special inferences when it speaks it back to you because you cannot actually Siebold versus Non Bolt.

Let's put our July 16th inside of that strong tag, safe it and go back to our browser to see that that is actually bold it Now.

Next, we have the text for destroyed in the text for the actual place that the performances in Let's wrap these in span tags span tags of the other, meaning this element that we talked about this denotes inline element.

If we go to our rendered version of our page, you can see that these elements do not break the lines as these Bach elements from the diff do.

If we were to change this to be a div, you can see that now it breaks both on the top and the bottom of the line.

What's changed back to this band?

Lastly, we need to create the button for our final element.

Let's wrap this.

Buy tickets to text inside of a button element.

Now, if we go back to our page, we could see that that is now a clickable button.

One more thing to note about these buttons is that they can have a type to them, which is an age Timo attributes.

In this case, you can have the type of button menu reset her submit.

In our case.

Since this is just a generic button, we want to use the button type.

Let's copy that and paste that into our other buttons as well, since they're also generic buttons.

Lastly, we need to add an HR elements that we talked about in the previous video to the end of our of row because we have this underlying here that we want to incorporate.

Now, if we go back, we can see that we have this underlying under a row.

You may notice that the text is very close together with almost no space in between them.

You may think that in order to fix this, you can add a bunch of spaces after your text.

And if you say that you would think that a bunch of spaces or show up after this.

But if you say that you see that that does not happen.

HTML actually removes all of the extra spaces after any element, whether it's a space, a tab.

Even if you put in entered new line in here and save it, it will remove all of those at the end of your element in order to get around this and actually include some space in between.

Are elements were going to use to use temporary the less than and greater than symbols that we talked about earlier with the HTML entities?

Let's go after a strong tag here and write the code for us then and the code for greater than now.

You can see that we have a little bit of a space between our text that's coffee and paces in between all of the different elements of the row, and now there's a little bit of space.

And so that is easier to see.

Which element is which?

The last thing that we need to do in order to get our page to be exactly the same business is copy this rope and create all the text needed for the rest of these Rose, I'm gonna do that real quick.

Now, we don't have all the code that we need for these sections.

You go back to this page, we could see that all of our roads are now being rendered and they all look correct.

Except you see that we have this additional underline on the last row.

So go back to our code and remove that final HR element.

Now, we have exactly the same age Tebow that we have on this page.

Last thing we should do is deal with this placeholder text that we added in here at the beginning.

And now we're perfect.

The only thing left to do is to estimate elements to the head.

As you can see at the top this title of our page, it just shows the you're out of the patient we're on.

If we want to change that, we can use a title element in the head section of our HTML.

This will actually not show up anywhere on the body of our page, but it will be used by the browser to set the title of our page on the tab.

Let's just set the title to the generics.

And if we save, you could see that Now what Creek races the title of our page.

Another common element in the head section is a meta tag.

The meta tag has a bunch of different things that we could define for based on what we set for the name attributes.

But in our case, we want to set the description of our page.

This description is used by the browser to show a little bit of, ah, description of your page under the title.

Whenever you search in Google, for example, along with other places for us, let's just set any title, which we set inside of the content section of this tag.

Let's just say this is the description and close off that meta tag now.

As you see when we saved nothing actually changes on our page because this is inside of the head of our page.

If we would have to upload this page to the Internet and do a Google search for it.

You'll see that this description will show up underneath of the title of our page inside of the Google browser results.

Now let's go to our about Paige and did the exact same thing in the side of the head.

Just taste this in here.

Change the title from generics to Dili, Generics about and we can keep the description exactly the same.

That's all that there is to creating the HTML for index page.

Congratulations.

You know almost everything you need to know about HTML and the next video.

We'll cover the final components of HTML and create the last page of the band website.

Please don't forget to like and subscribe if you enjoying the content and let me know down to the comments.

What made you want to learn Web development?