2. Building Web Applications: HTML Elements | HTML For Beginners 🌐


hello everyone and welcome to building web applications my name is Steve Bishop from programming mate easy calm now today we’re going to be talking about HTML elements and HTML elements are the building blocks for any web application there are the objects that make up what we see on the screen so for example here is a paragraph element now this entire paragraph element consists of the paragraph tags and the content so the tags are this open and close P tag we can see that an opening tag consists of an open angle bracket the letter P and the closing angle bracket while the closing tag looks very similar but has a forward slash in front of the P the opening tag indicates the beginning of a new HTML element whereas the closing tag indicates the end of that element then everything that goes between the open and closed tags is called the content let’s go ahead and create some of our own HTML elements so on my desktop I’m gonna go ahead and right click on just the open area here where there aren’t any icons and I’m gonna select new text document and this is going to create an empty blank text file there’s absolutely nothing in here but I’m gonna go ahead and rename this file so I’m gonna right click and select rename and I’m gonna go ahead and give it a completely different name of index.html and I got this little message here that says if you change the filename extension the file might become unusable are you sure you want to change it I’m gonna go and click on yes nothing to be afraid of here but you won’t notice that once I did that a different application is associated with this file so the icon changed and that’s because I have what’s called the brave browser some of you might have google chrome or edge browser I like to use the brave browser and so this dot HTML extension is telling my operating system that this is an HTML document and the operating system has already associated any files with the dot HTML extension with my brave browser so what we’ll attempt to open it so if I double click on this file again notice that it is not notepad that opens it but rather my brave browser okay now I’m just gonna close this down and I do want to go ahead and open this file in notepad so what I’m gonna do is right click on this and I’m gonna select open with and I’ve already opened it up in notepad before so I have the option of notepad but if you can’t find it you can go to this choose another another app and you can select notepad from the options and once you get this index.html file open a notepad you’ll see once again there’s absolutely nothing in here it’s completely empty now don’t worry we won’t be using strictly notepad throughout this course I plan on actually using an integrated development environment or IDE later on but I just wanted to show you in this video that HTML is really nothing more than just text now let’s go ahead and add our first paragraph element so in order to do that we’re going to start off with the open angle bracket the letter P and then the close angle bracket and this indicates the opening tag of a paragraph element and we always need to make sure that not only do we have an opening tag but we should always have a corresponding closing tag so I’m going to once again use the open angle bracket but this time I’m going to put that that forward slash in front of the P and then the close angle bracket and these two what we call tags combined make up the entire element now right now there is no content inside of this element so it doesn’t really do anything if I just save this and well once again open it up in our brave browser you’ll see it really looks like nothing has happened because there’s no content to display it’s just a paragraph element with nothing inside of it so let’s go ahead and add some content I’m going to go ahead and type in content goes here and we’ll save that and now when we go back to our browser and I’m just minimizing this so we can go back and forth to make changes now we can double click on this to open up in brave browser and we can see there we go content goes here we’re actually seeing something on our browser now let’s go and close our browser once again go back to notepad and now what I’d like to do is add another element so below our paragraph element we can add other elements so in this case I’m going to do what’s called a span element so we just use span kind of like spam but without the M instead we have an end now we always want to make sure that we have a closing corresponding tag so we’re gonna do open angle angle bracket forward slash span and then close angle bracket so we always have a corresponding closing tag with our opening tags okay now what’s going to go inside of here is we’re just going to say something like span content goes here okay we’ll go ahead and save that go back to our browser so I’m going to minimize this double click on the file again and there we go and now we can see we’ve got the content goes here from our paragraph element but we also now have spam content goes here inside of a span element now it doesn’t really seem like much as has changed about this but notice that there is a fairly significant gap here between the paragraph and the spam that’s because your browser sees this paragraph element and has some automatic or default formatting to this paragraph element and it provides some extra space around that element if we changed this P to a span let’s see if there’s any difference so we’ll save this minimize and we can refresh aha so you can see that it moved that other span element to the same line or inline so it no longer has that extra drop-down that’s kind of important to know isn’t it so we can affect the way that our elements appear by choosing the correct elements so I’m gonna just go ahead and put my P tag there and my closing P tag there save my changes once again and we can go back to our browser and I’ll just hit refresh here and you can see once again span goes down our paragraph now there’s one last thing that I would like to show you about HTML elements so far we’ve just been kind of adding elements one at a time kind of in a row but one of the things that you can do is nest elements inside of each other so for example let’s take this paragraph I’m going to remove the content goes here from inside of it and notice that I can move this closing paragraph tag down below to another line and everything between this open paragraph tag and closing paragraph tag is still going to be considered part of the paragraph element now what I’m going to go ahead and do is I’m actually going to add another element inside of this paragraph element and that element is going to be called a strong element so I’m gonna add the open strong tag and the close strong tag and then inside of this strong element I’m going to add the content of strong content goes here all right so we have once again a paragraph element that starts from up here and goes down here and inside of that paragraph element is another element or what we call a nested element and that nested element is a strong element and then inside of that strong element is the content strong content goes here so let’s go ahead and save those changes and let’s take a look at what this shows on our browser so if I go back to my browser just make it full screen here and hit refresh whew strong content goes here is now bold or what we call strong so the ability to add different elements and even nest those elements inside of other elements are how we start to format our HTML document it’s how we start to form the building blocks of what the user sees on the screen special thanks goes to these members who without their contributions would not make this series possible thank you you [Music]

7 Comments

Add a Comment

Your email address will not be published. Required fields are marked *