Welcome to the second video on the basics of HTML In this video will begin learning new HTML elements as well as the structure of an HTML element.

We'll also start both in the project that we will work on the duration of the entire introduction to Web development course.

The project is to create a website for your favorite musician or band.

I will walk you through the exact steps needed to create the website, and I'll explain all the concepts along the way as you fall along with this course, I want you to choose your favorite musician or band and create the website forthem instead of copy.

And exactly what I do in this video will be creating the aged email for the about page of the fan website.

You may notice that it looks ugly now, but remember that HTML was on Lee for the content of the site.

Later will use CSS to style the page.

Let's get started by going over the structure of an HTML element.

Most HTML elements are composed of a start tag and and tag and son content between these tags.

The content inside these takes can either be text or other HTML elements.

There are some tags, however, that have no content and thus have no end tag.

These air cold, empty elements, the image tag and his example of an empty element.

As you may notice, the image tag has an attribute.

Cold source, all HD.

My elements can have attributes set on them to define certain characteristics of the elements, such as the source for an image tag.

And that is all there is to an HT.

My element.

Well, now jump into the actual coding of the about page for the website.

On what about many different types of age team out elements.

Hello, everybody.

Welcome to the coding section of this video.

As you can see on the left side of my screen, I have visual studio code open with the HTML from the previous video.

I also have a images folder containing all of the images that we're going to be used to create the about page of this website On the right of my screen.

You can see the final version of the about Paige created for a band called The Generics for You.

This band will be completely different, but you should be able to follow the same template that I am using on this right side in order to get started creating this band.

Pidge.

Let's first right click on our about page and click open with Live Server.

This allow us to see our changes live as we make them.

Now let's go back to the final band page and take a look at the different components of the page.

The first thing you may notice is that at the top of the page we have a header.

This header contains a navigation with three links going to the home page, the store page and the about Paige as well as a title for the band The Generics.

There's also a line in between the two separating them.

Let me taste in some code that will render this for us.

Now let me open this coat in the browser.

As you can see, we have our navigation links at the top of page, our title at the bottom in a horizontal line separating them.

Let me explain how this works.

First over, content is wrapped with this header tag.

This header tag is just a way of telling the browser.

This is a header element.

It doesn't apply any styling to these elements.

It just says this block of code is the header for our page.

The next element inside of our page is the knave element.

This is very similar to the header element in that it doesn't apply any styling, but it tells the browser that this is the navigation section of our Web page.

You could have multiple knaves throughout your page, but most likely you're going to just have one, never either in the top your pager on the side of your page.

Next, we have the UL element.

This stands for a KN ordered list.

There are two types of lists that you can create in HTML in Ohio, which is an ordered list, and a U.

O, which is an unordinary.

In our case, we're using an unordinary Storr ul because the elements in our list have no particular order to them.

Next, we have three l i elements l I elements stand for list item and can only be used inside of a u l or 00 these denote the actual items of your list.

And as you can see on the right are styled with a bullet point when they're inside oven, a nordeste and their style with numbers when they're inside of an ordered first.

Next, we have an HR element.

This element, as you can see, has no closing tag, which means it is an empty element.

His HR element supplies us to this horizontal line in our page and stands for horizontal rule.

Lastly, we have an H one element.

The H one element is a heading element, and there's six different sizes of age of heading elements.

There's the H one h two h three h four h five n h.

Six.

Each one is progressively smaller than the last one, with the H one being the largest and the age 16 the smallest.

Now let's go back to our final version of the Web page and look at the next section of code that we have.

This is the about section at the top.

You could see that we have a header element, which is called about a grouping of text with an image and another group of text only paste over some code that will define this section and view this in the browser.

As you can see, we have that about heading, grouping a text, our image and another group in a text on the left.

Here we can view the actual code and break it down.

The first thing you'll notice is that we have a section element that wraps all of the other code In this section section element is very similar to a header element, and that implies this is a grouping of stuff that is all inside of one section.

While the header element says this is the head of our page.

The section element says this is just a generic section of some form in which all of the content is related.

Next, we have an age to element for the about header.

This is very similar to our H one header.

Except for that age two header is always going to be smaller than a tch one header because each one is the largest center.

H six is a smallest as you remember, So h two is just one step below in h one.

And as you can stand right here, R H one for the generics is larger than our H two for about next we have a P element, also known as a paragraph element.

A paragraph element defines a grouping of text that is usually long form, paragraph form text with many sentences, and it is much smaller phone in our headings.

Next we have an image tag.

The image tag, as you can see, is an empty element and has no and tag.

It also has this source attributes that we talked about earlier.

The source attributes defines the path to the image to be displayed on the page in relation to the actual page You're on.

So as you can see, we're in this about dot html page and in the Images folder we have image called band members dot PNG.

So in order to get this image, we go into the images folder and then get the image band members dot PNG.

This must be a path related to the about dot html phone.

So if we move this about dot html file into our images folder, for example, then this path would have to be band members dot PNG, as opposed to images slash band members, not PNG.

And if we reopen this in line server, you'll see that this now works.

Let's move that back to where it was them and make this images.

Last band members top PNG and open it in Life Server again.

And then we got the image works now, and lastly, we have another paragraph element with another section of text.

Now let's go back to our final page and look at the last element that we have the foot or element.

As you can see in the Footer, we have the generics heading, as well as a YouTube image Spotify image and a Facebook image meat paste over some code that will find this in HTML and view this in the browser.

As you see, we have that heading as well as our three images.

If we go over and look at the actual HTML code, you'll notice that almost all of the elements there something that we've already used before.

The footer element, just like the head of section Element, defines a grouping of text and HTML that is going to be in the foot of the page, which is almost always going to be at the very bottom of your page.

We then have our age three element, which just like the H two and H one is a large text heading for the page, and it is going to be smaller than the H two element.

We then have another on ordered list with three list items in it, and each one has an image which links to the Facebook logo, Spotify logo and YouTube logo in our Images folder.

And that's all there is to creating the aged him off of this about Pidge.

As you may notice, our actual final page looks very different than what our current page looks like.

That is because this final pages styled using CSS as you remember from earlier videos.

HTML was on.

Lee used to define the content of the page, and this right here is all of the content that goes onto our page, the styling for the font, font size, background colors and all these images that will all come later in CSS.

All the content, though the H T m.

O.

Is complete for this About Paige.

Some common problems that you may run into a CZ you create the HTML for your own band about Paige is that you forget to include the ending tag for your HTML elements.

If you do this your age, Tomo will not look correct where it may not even render it all in order to check that you have created all the ending tags for your HTML elements.

If you click on either the startek or the tag visual studio code, automatically highlight the ending tag for you or the start tag if you'd selected the ending tag.

This is an easy way to check if you have actually created the ending tags and starting tags for all of your elements.

Another common problem is with your image is not displaying.

In order to get around this problem, make sure that the path for your image is in relation to your actual HTML page.

That it is on, for example, are about Paige isn't the same folder as the Images folder, so we must first navigate through the Images folder to get to the images inside of it.

If you run into any other problems while creating the age team off of his page, let me know down in the comments below.

Also, let me know which musician are banned.

You decided to use for this project all of the code for this project is available on my get hub account, which is linked in the description below.

And don't forget to like and subscribe if you're enjoying the content.

Thank you very much for watching.