Learn HTML In 10 Minutes for Beginners

hello everyone in this video we are going to go over um html so i have vs code open and i have created a file in here um it's called firstsight.html you can name it whatever you want but make sure it ends with html and i right clicked on this file and copied the path and then pasted it in a web browser you can use chrome or whatever web browser you like using and i just pasted the path into there so in the html file we're going to um start coding in html and the first thing we're going to do is actually have html tags so this is called opening tag and this is called a closing tag and you can see the difference is just this slash here this is how you can tell whether it's an opening or closing tag and within these tags let's indent we can have a head tag and this contains information about the page so we can put a title for the page in here so in the title tag we can write my first website and save that now if we refresh over here you can see the title of the page has changed to my first website um this is also useful for styles um and if in here we can have css styles and we'll we'll go over css language in uh video after this one so this one we're just sticking to html but um so the styling would go in here if we were going to do css and we can also have the tags staggered like that now the main body of the file so those that will go within the body tags and here is what we're going to see in our web page so we can have h1 tags these are like header tags and we can type let's say my first site and save and refresh and you can see that appears here now each one is the biggest form of um header tag we can um have h2 tags this will be one step smaller than h1 and we can even go h3 i think we could go all the way down to h6 so if we change this to six you can see the size difference and if we save that and refresh over here you can see this the difference in size so these are header tags um next a common tag is a list tag so if you want to list off things the ul stands for unordered list and then for each item in the list is going to get an li tag so we can say first item here if we copy that and paste a couple times we can go second item and third item and if we save and refresh we can see we have a list here of three items now if we want an ordered list we can put ol instead of ul make sure you do that for both the opening and closing tags and if we save and refresh we can see it's ordered one two three so those are this is how you create a list and now you can have um a list of lists so let's say our first item is actually a list we can add another we're gonna so the list item contains a list and this list that says also let's also make this a ordered list and within this we're gonna need li because this is a list this right here is a list so it's children need to be list item tags so we can say first item dash a and let's add one more list tag let's say b and save and refresh and you can see that this first list item now has a list within it and these don't have to be this the this could be an unordered list and we have an ordered list on the outside so if we save this and refresh you can see that's how it looks and similarly we can make the whole thing unordered so let's see what that would look like and save and refresh so that's what that would look like now you can see there's no words here if we wanted words we can add that before our ul tags so we can write first item and save refresh again you can see now this appears so this first is in still in between the li tags right but it's also but this nested list is also in between the li tags so that's lists in html we can also have a button tag so when you see buttons on a web page um most likely they're created using this buttons tag and we can put words inside of this button like um button one save if we refresh here's the button now this doesn't do anything to give it logic to actually do something we would need to use javascript and we'll go over that as well in the video after the css one so right now we're just covering html and tags and then in the next video we're gonna style this html using css and now we're going here and then finally we're going to give the web page dynamic ability and logic and we're going to do that with javascript so we're going to be able to actually make this button do something um next we can have what's called an anchor tag and that is the a and let's say this says google and save let's refresh so you can see it says google there now we can we can give it a reference so this is this is the website we wanted to take us to so if we give it a website like so and we save now if we click on this we click refresh we can see we can click on google and if we press that and takes us to google press back now i could write whatever i want in here it could be abc and save but it's since we defined where we want to go this url it's going to still we refresh it's still going to take us to google now also a very commonly used tag is the div tag and this like specifies like a section in your code kind of so we can put all of these tags in a div now i like using divs if i'm going to style a particular section in one way it's an easy way to group um parts of the code that you want styled a certain way so let's save that refresh so these are all within the same div now this div can have an attribute called class and we use based on this class we can add a style here to this class and then this div will get that style um now there's the div and then there's also a span spans are in line so if we have one let's have three of these two three so the numbers one two three if we save and refresh you're going to be inline like such one two three with a div on the other hand there's gonna be a new line in between them so two and three if we save and refresh we can see the divs are each on a separate line and that's really the most commonly used html tags that you're going to need there's also there's more tags but these are really the most commonly used ones and you can do a lot with just this so i recommend just testing this out and seeing what you can create in the next video we're going to go over styling and in the video after that we're going to go over javascript thank you for watching please subscribe if you would like to see future videos and have a good one

Channel: Avoid Infinite Loops

Views: 149

Keywords:

Id: Hd9dxU7u3BA

Length: 10min 16sec (616 seconds)

Published: Sat Nov 27 2021