Introduction to HTML || Advanced HTML Elements || Part 3

Key Takeaways

hello everybody welcome to the third video on the basics of HTML in this video we'll dive into more HTML elements as we build the homepage of the band website and by the end of this video we'll 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 utilizing starting with HTML elements if you have ever tried to use a greater than or less than 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 less than sign have a name that can 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 with a 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 elements 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 nav element is for the navigation section and the ha1 element is for a heading HTML has many many elements that have specific meaning but sometimes a section of your page do not have any special meaning or there is no HTML that conveys the meaning you want this is where meaningless elements come in there are two different meaningless elements div and span these elements are the same in every way except that the div element 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 yet the differences between these two elements will become apparent as we write the HTML for this lesson essentially all you need to know about meaningless elements is that they should be used anytime you need to group together HTML that either has no meaning or there is no HT mell tag to describe the meaning now that we got that of the way let's jump into the coding of the homepage 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 open with the project we left off in the last video and on the right I had the final version of the band home page to get started we should copy the about HTML page and rename it to index.html this is because the about page 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.html is because the index page is the page that is shown when you leave nothing after the website URL so if we removed this slash index.html and hit enter you'll see that it renders the exact same thing that is inside the index.html 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 as a reference and get started with the header as you can see inside the header we have an additional button for guitar laid the 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 page as we can see here and if we give us some text such as what is on this page you 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't actually just show this image with a normal button keypress we have to use an HTML entity that we talked about earlier the code for this entity is as follows this will render the play button as we can see here as you may notice our two buttons on this same line as opposed to on different lines like they are in this image this is because the button is an inline element as opposed to a block element in order to get around this problem we can use a tag called the line break tag which is the BR tag the BR tag adds a line break whatever 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 save that on the right you can see that they are on separate lines now we want a little bit more spacing than this between our elements so I'll 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 are going to need for the header section but as you can see in this home page view 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 code comments do not actually render any information on the HTML page but they show up in the code so 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 there we go so now if we go back to our page you can 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 will use a section element just as we did for the About section of our code to wrap all of this stuff in our tours section and you can see that we have a header called tours just like we had in the About section so let's create an h2 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 HTML element to denote a row for example in this scenario so what we are going to do is we are going to wrap our entire set of rows in a div 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 as each other we will then wrap each individual row in a divot of its own [Music] so this outside div here is wrapping all of these rows and then each one of these rows has its own div that will contain just the text inside of it now let me add the text inside of the rows now as you can see if we go over to our page we have the different text rendered for all the text in the row but it doesn't quite look right first off we need this July 16th date to be bolded in order to do this in HTML we will use what's called a strong tag the strong tag denotes something that is important in most cases it means that the text inside of the strong tags will be bolded but in some scenarios the text will actually not be bolded for example if you are using a screen reader if you are blind the text will have special emphasis when it speaks it back to you because you cannot actually see bold versus non vult let's put our July 16th inside of that strong tag save it and go back to our browser to see that that is actually bolded now next we have the text for Detroit and the text for the actual place that the performance is in let's wrap these and span tags span tags are the other meaning this element that we talked about and this denotes an 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 block elements from the div 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 let's change that back to a span lastly we need to create the button for our final element let's wrap this by tickets text inside of a button element now if we go back to our page we can 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 HTML attributes in this case you can have the type button menu reset or 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 are also generic buttons lastly we need to add an HR element that we talked about in the previous video to the end of our row because we have this underline here that we want to incorporate now if we go back we can see that we have this underline under our row you may notice so 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 are 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 of tab even if you put an enter a new line in here and say that it'll remove all of those at the end of your element in order to get around this and actually include some space in between our elements we're 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 less than and a code for greater than now you can see that we have a little bit of a space between our text let's copy and paste this in between all of the different elements of the row and now there's a little bit of spacing so that it 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 as this is copying this row and create all the text needed for the rest of these rows I'm going to do that real quick now we now have all the code that we need for these sections if we go back to this page we can see that all of our rows 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 HTML that we have on this page the last thing we should do is delete this placeholder text that we added in here at the beginning and now we are perfect the only thing left to do is to add some elements to the head as you can see at the top this title of our page is just shows the URL of the page that we are 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 can see that now it replaces the title of our page another common element in the head section is a meta tag a meta tag has a bunch of different things that we can define for it based on what we set for the name attribute 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 a 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 save nothing actually changes on our page because this is inside of the head of our page if we would have 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 and do the exact same thing in the side of the head just paste this in here change the title from the generics to the other generics about and we can keep the description exactly the same that's all that there is to creating the HTML for our index page congratulations you know almost everything you need to know about HTML in the next video we will 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 in the comments what made you want to learn web development thanks for watching