Introduction to HTML || Links and Inputs || Part 4

Key Takeaways

hello everybody welcome to the final video on 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 we'll have created all the HTML 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 known as the a tag is the HTML 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 attribute for an image an anchor tag uses an href attribute which stands for hypertext reference the href attribute works exactly like the source attribute when trying to find the file you specified this means that the href attribute value should be relative to the HTML file that the anchor tag is in for example if you had a file called page HTML in the same folder as the HTML file with the anchor tag then you would use page HTML as the href of the anchor tag to link to page HTML another use of the href tag is to link to other web pages by their URL this also works exactly the same as the source attribute of the image tag if you want to create a link to Google then you would create an anchor tag and set the href to Google's URL the shoe all must be the full URL of the website which includes HTTP at the beginning in order for an anchor tag to work the href attribute must be defined another common attribute the target attribute on the other hand is optional the target attribute 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 underscore in the front of the self and blank target attribute values or they will not work we will 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 that out of the way let's jump into the coding of the store page for the band website hello everybody welcome to the coded section of this video as you can see on the Left I have visual studio code opened with the project from the last video that we left off on the only difference is that inside the images folder I've added all the images that we're going to need to create the store page of the band website on the right of my screen I have a picture of the store web page pulled up so we can use this as a reference to create the HTML for the band page let's get started by copying the about HTML page and renaming it to store tout HTML this is because our store page and our about page both share the same header and the same footer now let's 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 merch intersection for cart let's do that inside of each of these sections we're also going to have the header for the title of music merchant 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 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 div element so that way we know it is one contained content inside of that div we're going to want to have a div 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 of that div since this is bolded we will use a strong tag to put the title of album 1 next we're going to want to add the image tag and it's going to have a source attribute which in our case is going to be images slash album 1 dot PNG and lastly we need to add a final div that's going to wrap both the 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 button now let's open that up using live server 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 paste it down four times so that we have the section like this for all the album's that we are selling in the music section of our store I'm going to do that now now if we open that up we can see that we have our four different albums being displayed with the title the top picture in the middle and price button at the bottom you may notice however though that they are all on the individual line as opposed to being side by side as they're on this image this is because we are wrapping all of them inside of a div and divs break the line as we talked about earlier later we are going to fix this in the CSS portion of our course but for now we will just keep it like this because as you remember HTML was only for content and CSS is where we talked about way out and display now if we go back to the image of our store page we can see that in the merge 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 templates from the music section paste it into the merge section and change it accordingly now if we go view this you'll see that these also show up at the bottom inside the merge section the last thing that we have to look at is the card section of our store this is slightly different than the rest of our sections and includes a few new elements that we haven't talked about yet let's first get started by creating the header row of item price and quantity to do this we will wrap all three of these in a div so that they appear on the same line and we will use strong tags to wrap all the content because it is bolded now if we go take a look at that we'll see that we have item price and quantity all displayed on the same line but we will use the same spacing trick that we used 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 are going to add a less-than and greater-than sign let's go add a little bit of spacing between our elements we'll just copy it one more time so it's between price and quantity as well next we are going to work on adding in each of the individual rows of this section we'll do this by using another div tag to wrap the entire row followed by an image tag to store the image for the first 5 min we'll use the source to the album 1 as we talked about earlier and close that and we will go look at it and we'll see that this image is way too large we want this image to be much smaller in order to do that we can set a width and height property on the actual image element itself this attribute we're going to set to 100 which will stand for 100 pixels if we leave off the height element it will automatically adjust the height to be an aspect ratio with the width so if we had a image that was 200 pixels by 400 pixels so 200 pixels wide at 400 pixels tall and we set the width to 100 the new height would be 200 which would automatically be set if we however set both the height and the width it will automatically check both those for us to be 100 and 100 next we're going to want to add the name of the actual item inside of a span we will just call this t-shirt and then we want to add Christ instead of a span as well in between those we're going to want to use the less-than and greater-than signs that we talked about for our spacing if we view that we'll see that we have the name of the item followed by the price of 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 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 an input of various different types in this case we are using a number input so we will set the type equal to number there are many different types of input that you can create but the most common types are a number input and a text input we then close that off and if we go back to our page you will see that we have an 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 can see that we have this pre-populated with a 1 in order to do this we'll set the value of property the 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 number we typed in here so over here let's just put the value of 1 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 an inch that of it will just put the text remove now if we go back to our page we can see that we have all the elements here that we have in our image over here now it's copy this div one time and fill it in with the information from the second row 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 the shirt image because I forgot to change that and as we can see we have the value of 2 in here which corresponds to the value of the input element here lastly let's add an HR after all these in order to put that line at the bottom of the page that we have here before we get to total the reason I'm not including an HR under these item price and 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 web page to the far right of our page with no breaks in between now let's add a final div which is going to contain the information for the total and the price as we can see the total is emphasised with bold so we use a strong tag and type in total and then we will have the price inside of a span lastly we want to add this purchase button at the very bottom underneath of everything else so which side of a tip of its own so that it is on its own line we're adding a button with the role of Clutton and we will give you the text of purchase and that's all there is to creating this HTML here and as we can see if we look over here we have all the elements that we have on this page created in 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 let's scroll up to the very top and wrap this text inside of an a tag as we talked about earlier so that now our text is a link but in order for this link to work we needed the href that we talked about earlier since our store page is in the same page as our index page which is our home page all we need to type in is index.html and now when we save this we'll have a link here that when we click on it will bring us to the index.html page now let's go back to the store page and do this for all of our different links now you can see that we have buttons for the home page store page in the about page and when clicked on they'll bring us to the different pages at the very bottom we'll notice that we also have buttons for YouTube Spotify and Facebook so now we need to add anchor tags wrapped around this but as you can see there's no text for us to wrap around all there is is this image tag but that is okay we can wrap this image tag inside of an anchor tag and it will work as a button in order to do this create the anchor tag give it a rich href which in this case is going to be the URL of YouTube which is HTTP colon backslash backslash youtube.com and then we will put the image tag inside of this a tag and we say that if you hover over YouTube we can see that there's a button and if we click it it'll bring us to youtube.com what's do the same thing for Spotify and Facebook now if we save that we can see that the youtube link spotify link and facebook link are all working as you can see if we click here we go to the 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 links so we're going to use the target attribute on our href and we're going to set it to underscore blank I'm going to copy this over to all the rest of our links and now when we click on a link for Spotify for example it'll open in a new tab while keeping the tab for our original page now all we need to do is copy these new links that we created over to our home and our about page and our HTML will be completely finished for the entire website and there we go now if we go to any of these pages you'll 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 and there we go that is all the HTML that we need for this entire project in our next set of videos we'll be covering CSS CSS is what is going to allow us to take in this boring wyeandluke in HTML and converting it over to this beautiful looking mock-up that we have over here after we're done with the CSS for all of our pages we're then going to jump into JavaScript which will allow us to make our Store page interactive this will make us that the add Cart button actually adds elements to the cart down here the remove element actually removes them and changing the numbers inside of the quantity will actually update the total and that is all there is to HTML while we have covered many HTML elements there are still many more HTML elements that we have not covered I have only selected the most important and useful HTML elements to cover in this traductor course because many of the HTML elements are either obsolete or only useful in very specific scenarios even I do not know all the HTML elements and you should not know them all either if there is however any HTML elements or concepts that you feel I have missed please let me know down in the comments below and I'll be sure to cover them in future videos also please don't forget to Like and subscribe if you're enjoying the content thanks for watching