Welcome to the final video in the basics of HTML.

In this video, we'll dive into one more crucial HTML element as we build the store page of the band website.

By the end of this video will have created all the age to mow that we need for the entire project.

Before we get started coding, we need to cover one of the most important and most common HTML elements.

The anchor tag.

The anchor tag also noticed the A tag is the age demon element that allows us to add links to our Web pages.

The structure of the anchor tag is very similar to that of an image tag.

But instead of specifying a source, that tribute for an image and anchor tag uses an H riff attributes, which stands for hypertext reference.

The H ref attributes works exactly like the source attribution.

When trying to find the file you specified.

This means that the Atria attribute value should be relative to the HTML file that the anchor tag is in.

For example, if you had a file called, Paige dodged him.

Oh, and the same folder as the HTML file with the anchor tag Then you would use page dot html as the H rough of the anchor tag to wing to page dot html.

Another use of the H rough tag is to link to other Web pages by their euro.

This also works exactly the same as a source attributes of the image tag.

If you want to create a link to Google than you would create an anchor attack and said the H ref to Google Zoro, this you are must be the full euro of the website, which includes http at the beginning.

In order for an anchor tag to work, th rough attribute must be defined.

Another common attributes.

The target attributes, on the other hand, is optional.

The target attributes specifies where the link should open by default.

The value of the target attribute is self, which means the link should open in the current browser tab.

The only other value for the target attribute is blank.

That means that the link opens in a separate tab.

Don't forget to make sure you include the underscoring.

The front of the self and blank target attribute values where they will not work.

We'll cover both target types in the coding section of this video.

So if this does not make sense yet, it will become obvious in a bit.

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

Hello, everybody.

What could the code section of this video, as you can see on the left, I have visual studio code opened with project from the last video that we left off on?

The only difference is that inside the Images folder have added all the images that we're going to need to create the store page of the band website.

The writer Master Greene.

I have a picture of the store, what Paige pulled up so we can use this as a reference to create the age team off the band page.

Let's get started by copying the about HTML page and renaming it to store it at age, too.

You know, this is because our store Paige and her about Paige both share the same header, and the same footer now is delete the content in the center about the about page that we do not actually need in the store page.

What we do need is we need to create a section for the music section for Merge in a section for CART.

Let's do that inside of each of these sections.

We're also going to have a header for the title of music perching cart.

Now let's take a look at the content inside of each of these sections.

As you can see the music emerge section.

Both share the same template for its content, where it has an album or T shirt or coffee cup.

Whatever is being sold a picture of that, the price of it and then a button to add it to the cart.

So let's create these elements we're going to want to do.

We're going to want to wrap this entire element inside of a development that we know it is.

One contained content inside of that, if we're going to want to have a dip for the album name, this is because we want this to be on its own line so we can't just use a span.

And inside that Dave, Since this is bold ID, we'll use a strong tag to put the title of album one.

Next.

We're gonna want to add the image tag, and it's going to have a source attributes, which in our case, is going to be images slash album, one dot PNG.

And lastly, we need to add a final def that's going to wrap both price and button for adding to CART.

We're going to put the price inside of a span, and then we're going to add the button for add to cart and make sure to add the role of button.

Since this is just a general generic Ludden, now it's open that up using life's over to see what our changes look like.

As you can see, we have the album name picture of the album and then the line containing the price and the button to add to cart.

The only thing left to do now is to copy this and pasted down four times so that we have the section like this.

For all of the albums that were so in the music section of our store.

I'm gonna do that now.

Now, if we open that up, we could see that we have our four different albums being displayed with the title of Top Picture in the Middle and Price and Button at the bottom.

You may notice, however, though, that they're all on individual line, as opposed to being side by side as they're in this image.

This is because we're wrapping all of them instead of a div and Dave's break the line, as we talked about earlier later, we're going to fix this in the CSS portion of our course.

But for now we will keep it like this because, as you remember, HTML was on Lee for content.

And CSS is where we talk about way out on display now if we go back to the image of our store page, because in the merch section we have almost the exact same layout that we do inside of the music section of our store.

So I'm just going to copy one of the temple.

It's from the music section pasted into the murder selection and change it according now, if we give you this, you see that he's also shows but bottom inside of the murder section.

The last thing that we have to look at is the card section of our story.

This is slightly different than the rest of our sections and includes a few new elements that we haven't talked about yet.

Most first got started by creating the hetero of item, price and quantity.

To do this, we will wrap all three of these introduced that they appear on the same line.

Have you used strong tags to rappel the content because it is bolted?

I have to go take a look at that.

You see that we have item pricing quantity all displayed on the same line.

But we will use the same spacing trick that we use in the last video in order to show the space between these.

Because right now it is difficult to read.

So in our code, we're going to add a Liston Integrated Einstein.

We had a little bit of spacing between our elements.

Just cock.

It is from her time.

So it's between price and quantity as well.

Next, we're going to work on adding in each of the individual rose of the section will do this by using another def tag.

Direct the entire row, followed by an image tag to store the image for the first time.

We'll use the source to the album one, as we talked about earlier, Kloza and we'll go look at it and we'll see that this image is way too large.

We want this image to be much following.

In order to do that, we can set up with and height property on the actual image element itself.

This attribute We're going to such a 100 which will stand for 100 pixels.

If we leave off the height element, it'll automatically adjust the height to be in aspect ratio with the with.

So if we had an image that was 200 pixels by 400 pixels, so 200 pixels wide, 400 pixels tall and we set the width of 100 the new height would be 200 which would automatically be set if we, however, said both the height and the width, you automatically reach that both those for us to be 100 and 100.

Next, we're going to want to add the name of the actual item instead of this fan who just called her T shirt and then we want ad in Christ instead of a span as well.

Between those, we're gonna want to use the less than an integrated them signs that we talked about for our spacing.

I'll give you that will see that we have the name of the item, followed by the press.

The item Next, we need to add in this input that allows users to select the quantity of item that they want, where they can type in any number that they want in here.

You know, in order to do this, we're going to use an input element.

An input element is an empty element that allows us to create it input of various different types.

In this case, we're using a number input, so we'll set the type equal to number.

There are many different types of input that you can create what the most common types are a number input and a text input.

You didn't close that off.

And if we go back to our page, will see that we haven't input in here.

That allows us to enter only numbers into it.

We cannot enter anything that is not a number, just numbers.

But in our example, you could see that we have this pre populated with a one.

In order to do this, Luis, that the value of property value property corresponds to the value of the actual input element.

And as we change it, as we type in different numbers into the input, this value will automatically adjust to be the same as whatever never typed in here.

So over here, let's just put the value of one, because that is what is in our picture here.

I'm also going to use the same spacing tricks that we talked about the less than greater sign to add a space between this price and the input.

And lastly, we need to add in a button.

This button will have the role of button because it is a generic button, and inside of it, we'll just put the text removed.

Now, if we go back to her cage, we can see that we have all the elements here that we have in our image over here.

Now it's copied a stiff one time and fill it in with the information from the second round of down here.

Now, if we go back, we can see that we have the correct information here.

I also changed this first image to be a shirt image because I forgot to change that.

And as we could see, we have value to it here, which corresponds to the value of the input element here.

Lastly, was at HR after all these in order to put that line at the bottom of the page that we have here before we get the total.

The reason I'm not including an HR under these item pricing quantity views is because we will add these later with CSS.

This is because an HR takes up the entire space that is given which in our case, will be all the way from the far left of our page so far right of our page with no breaks in between.

Now let's add a final did, which is going to contain the information for the total and the price.

As we can see, the total is emphasized with both.

So we used a strong tag type in total, and then we'll have the price inside of his fan.

Lastly, we want to add this purchase button at the very bottom underneath of everything else.

So instead of a devoted so that it is on its own mind, we're adding a button, but the role of a button and we will give you the text of purchase that's all there is to creating this HTML here, as we could see if we look over here, we have all the elements that we have on.

This page created an HTML here.

The last thing we have left to do is add in blinks so that we can navigate with the home store and about buttons that we have up here in order to do that whole scroll to the very top and rap this text inside of a tag, as we talked about earlier, so that now our text is a link.

But in order for this to work, we need the A trap that we talked about earlier.

Since our store Paige is in the same pages are index page with your home page.

All we need to type in his index dot html.

Now, when we say this, we'll have a link here that when we click on it, will bring us to the index dot html page.

Now let's go back to the store cage and do this for all of our different leagues.

You can see that we have buttons for the home page store page about Paige, and when cooked on that, bring us to the different pages at the very bottom, but notice that we also have buttons for YouTube, Spotify and Facebook.

So now we need to add anchor text wrapped around this.

But as you can see, there's no text for us to wreck around.

All there is is this image tag, but that is OK.

We can wrap this image tag inside of an anchor tag, and it'll work as a button in order to do this anchor tenant, give it a rich a trip, which in this case, is going to be the Earl of YouTube, https, colon, backslash, backslash youtube dot com And then we will put the image tag inside of this a tag.

Now we say that if you hover over you two, we could see that there's a button.

If we click it, it'll bring us to youtube dot com must do the same thing for Spotify and Facebook.

Now, if we say that, we see that the YouTube link Spotify Link and Facebook clinker all working as you conceive a click here we gotta Spotify website and so on.

But one problem is that when we click these links, it'll override the tab that we're in and we don't want that for these bottom weeks.

So we're going to use the target attribute on our trip.

We're going to set it to underscore Blank.

I'm gonna copy this over to all the rest of our thanks.

And now we click on a link for Spotify, for example.

It'll open in a new tab while keeping the tab for original page.

Now all we need to do is copy these new links that we created over to our home and our about Pidge and our HTML will be completely finished for the entire website.

And there we go.

Now, if you go to any of these pages, will see that we have links that work on all of our pages.

One last thing that I forgot to mention is that in our store page we want to change the title of our page from the generics about to the generics store.