HTML Basics Tutorial: Page Structure And Common Tags

View the video on YouTube

Video transcript:

how's it going everyone today we're going to be taking a look at HTML and going over some of the basics HTML stands for hypertext markup language and programmers use it to define the structure of a web page so in HTML we have elements that are represented by tags that define the structure of the page and what the browser does is translate those tags into the actual content so let's jump right in look at some basic HTML so the first thing that we need to do is create an HTML file so I'm a visual studio code someone go over here to the Explorer right click and hit new file now you can name this file whatever you want but it's convention to name the file at the root of your project what index.html and this is just convention and it tells the browser that this is the home page of your project so we're going to stick to that convention all right so next we can start looking at some of the different tags so all the code in this HTML document will be wrapped in a tag that is called HTML so the majority of tags are defined as such we have a less than sign the tag name a greater than sign and then we have whatever's inside the tag and then we have a less than sign a slash the tag name again another Greer's inside and you'll notice that visuals through your code actually autocomplete for me which is a really nice feature so that's our first tag and that won't really do much for us so the next time around we'll look at is the head tag so the head tag will not get rendered on to the screen but it includes a lot of important things about the web page such as the title and SEO anything like that so that brings us to the next tag which is the title tag and inside the title tag you can put in the title of the webpage so for example HTML tutorial and if we've run this in a browser we'll be able to see this as the title so let's actually do that since I'm in Visual Studio code I'm gonna right click and I'm gonna hit open with live server all right there we go we have our home page here and you'll notice it's point one two seven zero one which is my localhost and you can see slash index.html which is the file name all right so the next tag is the body tag now the body tag is where all of the content of our page will be alright and that right there is the most basic HTML structure you're going to get all right so now that that's out of the way let's jump into some of the common tags that you're gonna see so the first types of tags are heading tags and these are to display important pieces of text so maybe the title of the page a subtitle stuff like that so for these tags all we're gonna do is h4 heading and then you'll see we have a couple different offers each one two three four five and six so there are six different heading tags and these are just different sizes so we're going to use h1 and in here we can put whatever text we want so we'll try heading 1 and you'll see it actually renders in real time in our browser the next tag is an h2 tag it's the same thing as an h1 tag it's just a little small as we can see there you go and we have the same with h3 all the way down to h6 so I'm not going to go over all them but you get the idea and you'll notice that there's actually a little bit of padding around the text so if you don't do any tag it'll still work but you'll see there's no there's no padding right and this will just display them right next to each other so that's why tags are useful all right enough with the heading tags next we're gonna look at another pretty basic tag paragraph tag that's just AP and you can put any text in here so we can say this is a paragraph there it is that's our paragraph so we can pair those tests together let me say h1 title page 3 subtitle paragraph and you can see a webpage is coming together a little bit now another fundamental tag is the a tag so say we want to link to Google and when the user clicks on the text it will bring us to Google well you can do that with an a tag and you'll see we get this H ref here and what this is called is an attribute so all tags have attributes that you can use with it and there are just different things that go in the front tag here that ah do different things for the tag so a tag takes an attribute called a truss and here we can write the URL of the site so in our case Google and then in the text we can say go to Google hmm if we click it I'll say can I get that's could we forget HTTP colon slash slash go to Google there you go brings us to Google now we can now wrap this a tag in let's say an h1 tag so now we have a link go to Google but it is inside the h1 tag and this is this will come in handy wrapping tags and sigh each other alright now that we cover links let's look at images so the image tag is IMG and just like the link tag took an attribute this takes in the SRC attribute in the alt attribute so this is alt text for the image so if the image does not load in the screen this text will show and then the SRC is the path to that image so the browser knows what image to display so let's go grab an image so I want unsplash right now this is a great place to find free high quality images so I'm going to search to say catch image there you go just grab this one you download it for free I'm just gonna drag this right into my directory we're just gonna rename this cat all right so now to link to that we start with a slash which means look in the current path and then there is cat JPEG now the image will display on the screen but you'll notice that it's really big and that's because we're not giving it any attribute attributes for width or height let's do that all right there we go we give it a width of 50 in a height of 50 pixels that's a little small just make it a little larger there you go that's a picture of our cat and for the alt we can put have to image and if it can't find this photo it will display this so let's remove this T boom there you go cat image now before we go any further I want to discuss comments in HTML so comments are great way in any programming language to write a little description of what that piece of code does so if you come back later and look at it what another programmer looks at it you know what it's doing so comments in HTML pretty weird it's a less than sign exclamation point - - and then there it all completed for me but then you finish it by - - greater than sign I'm gonna side here we write it this is a comment this will not render on the screen you'll see if we do a key tag paragraph tag right paragraph we will see this the comment is not rendered moving on to buttons so we have the button tag just button like this and we can give it text submit there we go this is a submit button you're able to click it but we can also define button using the input tag which is my preference in defining a button so if you just do standard input this is text input so you can pinch or whatever you want from the keyboard but if we give it type not text but submit changes to a button you'll see the name is submit but we can give it a value of whatever we want that will change the text of it