HTML Tutorial for Beginners| Complete Roadmap | Basics to Advance, Projects and more.

Key Takeaways

okay guys we are live so let's begin so hey everyone I'm herel Jen your Mentor at Geeks for geeks and guys in this video we are going to start with HTML so we are going to cover this in around 1 hour maybe less or more little bit but yeah we're going to Simply complete this and I'm going to cover all the important topics and almost everything in HTML which you might need for your further web development Journey okay so when I talk about HTML I would say this is the first stepping stone the first thing which any developer learns in their development Journey even if you in future if you want to go to mobile development mobile app development you can actually use HTML CSS JavaScript to learn further Technologies like react native to actually build mobile apps also okay so it's something which you need HTML is something which everyone must know as a developer right first thing right so now guys I'm going to start Direct ly with the definition of HTML then guys we are going to start with some important topics so let me just tell you directly what we are going to cover okay what's the basic road map which I'm going to cover so first of all guys I'm going to start with introduction to HTML we're going to discuss what is HTML uh like it's the backbone of web pages it's like a skeleton of web page there we add the CSS then we add the JavaScript together the website works but the basic skeleton is the HTML code right the then we are also going to discuss about basic terminologies like tags elements attributes right then guys the second unit would be based on basic structure of HTML document we're going to discuss what's basic structure like VC doc type HTML tag uh we have the body tag we have the head tag so we're going to discuss that okay basic HTML file what's the meaning of the basic HTML file right then guys we're going to discuss some essential tags which everyone uses even a beginner would use right like H1 tag h2 tag up to H6 tags then we have P tag then what's the use of M and strong and uh BR HR some basic tags which you will use right then guys we're going to discuss about uh list tags that is the UL tag o tag and Alli tag we're going to discuss about these tags then guys we're going to discuss about the a tag which is basically used for links attributes right then we are going to discuss about the IMG tag which is used for showing the images here we have in inside this we have some attributes like SRC and ALT okay then guys we are also going to uh discuss about table tags we have table tag we have TR tag TD tag th tag some basic table tags which we use a lot then guys after that you're going to discuss the forms and input elements we have the form tag and we have the input tag in HTML we're going to discuss that we have text area we have button tag we have select tag we have option tag so all of these are tags which are used for making forms like you have seen Google forms right so similar to that right then guys we're going to discuss about inline Styles like what's an ID what's a class and what's style used for that is for the CSS part then guys we're going to discuss about basic semantics like we have header tag we have footer tag we have nav tag we have main tag we have section tags so what's the purpose of these tags also we need to know although mostly you're going to use that div tag but you must know these tag also so that you can make SEO friendly websites okay that means your webs is search optimized okay basically it means like your website would be ranked higher simple so for that we have some specific tags which uh any browser would any any search engine like Google would look for your website okay so you have header tag the nav tag so Google search engine would look for that specific nav tag and the content inside the nav tag so it makes the search engine uh search your website easily okay that means your website would be found easily that means it would rank higher okay so for that we have some specific t tags then guys we have we are going to build a very simple page web page using all the above Logics all the above Concepts which we are going to learn right so uh after that we are going to discuss some basic questions which you guys would ask me in the live chat at the end of this video we're going to discuss those so if you have any doubts or queries you can mention in the live chat okay so let me just first of all check who is in the live chat um Rafel thanks for your work thanks Rafel uh car gamer hi hi car gamer uh masat good evening nice to see you can you please turn on the captions uh actually uh it's handled by gfg team I think you can turn your captions on like I think right now it's not available I'll ask the team if it's possible Right but right now I can just take the live directly okay I don't have contact with them right now but yeah I'll tell them after the live session ends uh I'll just ask them to change the settings fine so let's continue guys we are going to start with the very first thing okay very first thing so let's continue I am going to Simply first of all show you where we are going to write the HTML code so basically we are going to need an editor where we can write our code right so as a beginner you might not know it hello sir sandep here okay hi sandep by the way uh sandep Jan is the CEO of Geeks for Geek so your name matches with him right okay so what I was going to tell is I want to first of all tell you that is you need to install vs code the editor you can also write HTML code in notepad also but that's something which is done in early 2000s now we have popular IDs like vs code where we can write our code either you want to write HTML or you want to write CSS or you want to write JavaScript or you want to write Java C C++ whatever you are preferring okay whatever you want to learn you can write it in a ID like vs code okay so it's always helpful it would be used in a lot of purposes not just HTML right so we are going to install vs code right so I'm just going to open this website just need to install it okay just download it and install it so I'll just click on download for Windows and then it's going to download that specific setup for Windows okay so once it's downloaded you just need to install the setup so guys you have any doubts or queries feel free to mention in the live chat even it's a very basic or lame doubt don't worry no one is going to judge you you can just ask all of your doubts in the live chat I'm going to answer them throughout the session and also at the end of the session I'm going to just check some more doubts which you might have okay so first of all we need to install vs code and my vs code is already installed so I don't need to install it again but but yeah you just need to install it just check all the check boxes while installing the setup of vs code okay just make sure that once you install vs code what you need to do is you can just create a simple folder like this you can just create a simple folder like this right and you can just open this with VSS code okay just click on open with vs code and you can see that it would open like this okay let me just open it again for you so you might see something like this so This folder would basically open inside vs code you can and see the folder name right that's it that's the first step which we wanted the second step is creating a HTML file so we are going to create a simple HTML file and with the help of that I'm going to explain you everything one by one okay so I'm going to name this as uh index.html by the way you can name it anything but the extension the end part must be HTML if you're creating an HTML file right if you have created the the CSS file it must be like styles. CSS that means the end extension must be do CSS for CSS similarly for GS it must bejs right so HTML files are represented by HTML extension right so now guys what we need to do is we need to Simply create a simple boiler plate so I'm just going to press shift that means I want to uh just add the exclamation sign okay shift and one that means exclamation sign and hit enter so you can see that I got bought my sample boiler plate right so it's a easiest shortcut so as a beginner you might not be able to remember this okay but I would recommend please remember this because what actually happened with me is when I was a beginner it was 5 years or six years ago what actually happened was I I was really confident okay I know HTML I learned HTML in 2 three hours usually it takes around 2 three hours overall even if you take one week you are going to spend 2 three hours only to learn HTML properly I think nothing more than that is needed because rest part is going to be learned with the help of CSS and JavaScript and would help you develop your skills with time but yeah initially to know Basics about HTML you would need two three hours so I was really confident when I learned HTML but the one thing which I missed out was this boiler plate what I did was always every time what I do is I just use shortcut to actually write this but what it actually uh does is I might not be able to remember exact wordings here okay so I would say as a beginner if you want to save time that's fine but I would say have a habit to write this at least for a few times as a beginner right if uh you have learned this if you know okay this how to write this properly then you can continue directly okay so now first of all guys I am going to start with the basic things which we have okay the basic things which we have so here you can see I'm going to discuss this what's the purpose of Doc type and what's the purpose of HTML but overall here you can see we have some common things that is this opening tag this is the opening tag and this is the closing tag similarly this is the opening tag similarly this is the closing tag opening tag closing tag that means basically you are playing around with tags okay overall okay overall you are playing around with tags so for example I want to create a text okay I want to create a text so I'll go inside this body tag so basically this is where body tag opens and this is the closing of body tags some tags are self closing you can see they don't have an extra like you you can see that they don't have an extra meta tag here okay that's not needed for some tags okay so if you see a self closing tag like this don't be surprised there are some tags which are self closing okay later on we'll encounter some more tags but this is a self closing tag this is also a self closing tag this is not a self closing type because you can see this is opening and this is closing okay so that's basic difference now I hope you know what are tags basically inside these signs that's it so for example I want to create a text I want to just write a simple text so I want to write a name so there's a tag named as H1 tag okay so it's for headings for big headings for bold headings okay if you want to show your name or some title usually it's in bold headings right bold that means bigger size so for example if I write ay there I am Hershel genen right so I've written my name and this would come in bigger size so if I just want to run this I want to show this to you how can I do this so for this guys you can just go to the extensions part and simply search for live server okay so uh you just search for live server right you can see that this is going to Simply by this user you can simply run this first of all install this so mine is already installed you would get an install button here just install this okay just go to this page and just click on install it would be installed now what you need to do is come back to your HTML page and right click and open with live server that's it so you can see that this opens like this right you can see that I'm getting my name in bold big size okay suppose I wanted it in small size so what have what would I do I would simply say I would simply say I I have for smaller size I have P tag that means for normal text size which you see in the websites okay so now if I come back again here you can see that this one is smaller this one is bolder so usually you use H1 tag for titles okay and this is for sentences or some normal words okay but wait a minute we are going to discuss these tags specifically but right now you can see this is an opening tag and this is a closing tag similarly this is an opening tag and this is a closing tag I hope you are getting what's an opening tag and closing tag okay a tag opens like this and a tag closes like this okay so what's basically a tag tag are basically basic building blocks of HTML they are enclosed in angle brackets okay so by the way we call it angle brackets okay these are angle brackets so these tags are enclosed in angle brackets right and tags are usually coming in pairs you can see that this is a pair right this is another pair but some tags don't come in pair for example we have the IMG tag IMG tag does not come in pairs it does not have a uh pair it is a self closing tag IMG tag is a self closing tag right that means we don't have a pair of IMG tag to actually close it it's a self closing tag okay so these are some tags but now what we are going to say is we know tags now there is one more thing Let me just write here here right now we know about tags okay we know about tags okay one thing guys uh before before this I want to just tell you one short thing which is if you are a cc++ programmer or any type of programmer you might know about comments right comments are basically you can see that this this is my page okay this is my page right now my page looks like this right suppose I don't want to show this line in my HTML page what can I do but I want to keep it here for reference so what I'll do is I'll just press control and forward slash forward slash is nothing but this sign okay just press this with control okay so you just press this with control and you can see that your specific tag is inside a comment now what it really does is it keeps your text as it is but it doesn't show it in your website that means it basically hides that specific thing okay so it's helpful when you want to keep things for reference for example uh too build full page okay something like this so you want to write some things for your own suppose you're building a website and you want to write some explanation of the code which you have done okay so for the explanation part you can just keep it hidden in the website but you know that yeah your code actually contains the explanation of the code okay so you just keep it for reference only okay if you keep it or remove it doesn't matter okay so it's only for you okay as a developer or a user okay but like the user who is using the website won't be able to see the comment okay won't be able to see this line okay so I hope you're getting my point right so this is a comment basically it's really useful when you have some random stuff to write on which you really don't care which you don't want to show in your website suppose you can see this is a random stuff I don't want to show in my website so I can actually comment it out so this is commented out and if I go to the page you can see you won't see that okay right that's the purpose all right so I think uh we have some comments here in the live chat bro I am from 12th standard uh Commerce I want to go for diploma in software engineering what do you think uh well uh I don't know much about Commerce as a field okay I don't I'm not sure it's great or not but if you want to do a diploma you can actually go for uh I think BSA is something which can accept a Commerce student also okay so you can go for BCA okay it's a proper course and BCA actually helps you learn very great jobs okay so you can go for B BCA okay BCA right so then we have what is utf8 yes we are going to discuss this don't worry I was just telling you about taxs okay uh the second thing which we are going to discuss is what elements okay so first we discussed about tags okay then guys we're going to discuss about elements elements is a common term which you would hear a lot okay so what is element element is nothing but it consist of starting tag content and end tag so this is a whole element this is a whole element okay this and this is tag this complete is an element that's it okay so now we know what do we call an element okay perfect then guys we have the third thing which is attributes okay so attributes is something which you would hear a lot attributes so for example if I give you an example of an attribute so here only in the ptag we can later on give it style okay so style equals suppose I want to say that the text color must be red okay so style here is basically an attribute similarly you might have something else okay instead of style you might have some other things which you have in the btag okay so basic whatever you mention here is an attribute okay if I give another example if you have an a tag okay a is a self closing tag okay I'm sorry um a is not a sell closing tag and here what we are going to do is we are going to say hrf and here suppose if someone clicks on this I want to take the person okay so I'll just say that this would be saying go to gfg okay here whatever link I paste right now let me just show you what it looks like you can see it's simple text if you click on this text it would take you to some route okay what route so if I just search for geeks for gigs.org if I copy this okay and uh if I go back here okay and if I paste it okay so you can see that now whatever is this this is basically an attribute similarly this is an attribute so I hope you know what is an attribute okay if I click on this it's going to take me to Geeks for geks website okay so now you know the three basic terminologies which is tags elements and attributes okay I hope you know the basic things now guys I'm just going to copy this and I'm going to say unit 1 is done so unit 1. HTML don't worry guys I'm going to provide you the source code now guys we are going to start again with the boiler plate okay so this is we call as boiler plate any type of HTML code is going to be written inside this now guys we're going to discuss each of them one by one okay we are going to discuss these each of them one by one so this is basically a basic struct structure of HTML code okay and the first thing which you usually see is talk type so this declaration is always the first line of HTML code okay HTML document it tells the browser that the document follows the latest version of HTML okay so when you see doc type HTML the simply is an integration like HTML has different different versions latest version is HTML 5 so if you want to tell the browser that you are using HTML 5 so you have to mention it like this okay if HTML is written that means you're using latest version of HTML okay if some some older thing like HTML 1 2 something like that then you are using older version but what you always do is you do it like this you simply write doc type HTML that means you're using HTML 5 you need to tell the browser okay that I am using latest version of HTML okay that's the purpose of Doc type HTML right then the second thing is the HTML tag okay HTML tag so HTML tag basically contains your whole HTML code okay it contains your whole HTML code okay so HTML element HTML tag basically this actually together complete is an element right so HTML element wraps all the content on the page it's the root element of the HTML document everything inside this is interpreted as HTML code okay so to actually tell your browser that whatever you write is going to be HTML code you have to do it like this you have to do it like this okay you have to create HTML tag you have to close HTML tag here you need to mention the language the language in which you're going to write the code okay usually people follow the English okay so you have to just tell the language that's it and inside this you have the whole HTML code whatever you write here later on we're going to add script also so JavaScript would also be added here right similarly we're going to add CSS also so for that we have uh different different tags we can just create style tag here and we can write the CSS part here okay so you can see that everything is basically inside inside the HTML tag okay so if I just remove this everything is inside the HTML tag okay so that's why we write the HTML tag to tell the browser that we are going to write the HTML code okay so from here we started writing the HTML code then we have the head tag okay then we have the head tag let me just comment these out okay then we have the head tag okay so what's the purpose of head tag so head tag is basically a section which contains meta information about the document like you see that we have uh utf8 and different kind of things okay so basically here you can see that we have meta utf8 okay just a minute let me just read your live chat comments okay I think we don't have any other doubts perfect hi bro I just completed JavaScript what should I do to enhance my skills and can I be proficient in Gs please guide if you very uh good in JavaScript what you can actually do is you can go for reactjs okay easiest option if you think that you know everything in JavaScript you can go for reactjs but please make sure first do a lot of projects like you can make games uh tic Taco game or different different games using HTML CSS JavaScript once you feel confident that I know almost everything in JavaScript HTML C A JavaScript then jump to reactjs to brush more right okay let's continue okay so here guys you can see that head tag basically contains meta information that means information summary of your website okay kind of summary of your website okay so first line here you can see Meta Char set utf8 so it basically specifies the that document uses utf8 character encoding okay so it's a type of character encoding which you see on your keyboards like basically it it's like you're telling the browser that you have a means a b means B like that okay so it's character encoding okay if I just search more about it let me just search on search for you all here if I go and if I just search for utf8 characters okay so if you just search for it and uh utf8 Wikipedia so you can see character encoding standard and uh basically your characters are converted into this format okay so you can see that basically your website using uses this utf8 so it's a standard used by every browser so to tell the browser what kind of character each means that means one means one two means two a means a something like that okay so for that you need to tell that you're using this specific character encoding okay so there are different character encodings but mostly all browsers use utf8 okay so we need to specify what kind kind of character encoding we are using okay what kind of uh characters we are going to write right then after this guys we have meta name viewport content equals width equals device width initial scale one so it ensures that the page is responsive okay so if you see name viewport that means we are simply saying our page is responsive and by default the website takes full space of browser okay that means it does not see seem to be very short it takes full space of our browser if browser is this much wide that means if you have a uh 100 in LED screen so website would be off 100 in okay if your we if if you are watching it in a mobile so it would be around 6 in 7 in right so it simply says it take the space of the device okay take full space of the device that means take full space of the browser right initial scale 1.0 simply means by default you can see that this is normal okay this is 1.0 if I press control and uh Plus you can see it zoomed in okay so 1.0 simply means by default it would be 100% visible I don't want it 150% I don't want it visible 50% okay if I just give you an example here here you can see by default it's 100% visible okay if I just zoom in so you can see this is 150% so by default I want it visible as 100% that means fit according to the browser by default you are not zoomed it at all okay you would be zoomed at 1 X okay so yeah that's what I mean here initial scale as 1.0 then this is the name of your website whatever name you want to give okay so if I give you an example here I'm just going to write here what I'm going to write here something like uh I'll just say uh kiks for geeks okay so if I just save this and now if I go to the code okay I think I closed it right so I think I need to open it again I just close it okay so I'll just open it again with live server so you can see that this this Geeks for geks you can see that's how the title changes okay so this is what title is this is what title is so you can change the title with the help of this right Geeks for geeks that's it I hope you got this right so now guys we are going to discuss about the body tag okay we are going to discuss about the body tag so body tag is nothing but it contains all the HTML page data which you're going to write you need headings you need titles you need form you need images whatever it is you're going to write inside the body tag okay so body tag is really useful in that case right so body section contains all the visible content of the web page whatever you see on the web page is contained in the body tag text images Link videos or anything else which user sees in the website is inside the body tag that's it okay so this is the basic boiler plate which we discussed now guys we're going to discuss about some elements okay so we are going to discuss about text elements okay so I'm just going to write here text okay we're going to write here text so I'm just going to say suppose I want a heading so I'm just going to say my heading one okay so if I just save this you would simply see that if I go to my browser you would see that you're getting an heading suppose I want to get a smaller heading so what I'm going to do is instead of H1 tag we can actually use h2 tag that's it so you can see you're still getting a heading but smaller heading so in some websit you see we have a bigger heading then we have some small subsections all subsections would have some headings right so some smaller heading now you want one more heading which is smaller okay so what you can do is here I'm going to say H3 and H3 okay so let me just press alt okay alt and I'll just press wherever I want to make the change okay so H4 tag then guys we have H5 tag then guys we have H6 tag right so here you can see that we have basically six types of heading and with the example of 1 and two you might now know that only the size decreases the boldness is exactly same the size is decreasing right so if you need heading which is very small but still a heading so you can use this okay so it's very useful now there are from H1 to H6 okay not more than that we don't have H7 okay so we have from H1 to H6 so you can choose any type of format from here right so now I want a normal paragraph Okay so suppose this is the heading which I picked okay so this this is suppose The Heading which I picked I want a normal paragraph okay so I'll just say we have a text shortcut you just write lurm and you'll get a sample paragraph okay if you don't write if you don't want to write this you can write something like you can paste some text from Geeks for geeks website um let me just go to web development and let me just copy this this and uh here I'll just paste it okay so you can see that inside this P tag I have passed some paragraph okay let me just see how it looks okay so you can see this is a heading and this is a paragraph So P simply stands for paragraph tag H stands for heading okay that's it so we have a H1 tag and then we have a P tag and then we know about H2 H3 H4 H5 H6 so we know these basic text based tags right now what if guys I want to do something else okay for example I have another P tag okay I have another P tag I'm going to say hey there I am Hershel Jen okay so if I save this right now it would look something like this perfect but what I want is I want it to be bolder so what I can use is I can actually say that I would use strong tags okay so if you write SC n okay if you write strong if you write strong then you would simply see that we have a strong tag okay now one thing guys one thing guys is you know now what is the strong tag basically it's Boulder right one thing which I would like to mention is suppose if I have a P tag okay and here if I just say uh style background color equals red okay fine and I'll just say hey so you can see that it's taking the space of Full Line okay it's taking the space of Full Line okay and then we have another type of text tag which is span tag okay and I'll just give it green color for now okay so you can see span tag is taking only this much space so these are basically inline and block Elements which you would learn properly in CSS later on but yeah you must know that PTAC takes full space and span tack takes only that space which is required okay so these are some things which you would learn later on in line and block elements okay so I wanted to tell you this so span tag is another type of text based tag which we learned right now now one more thing guys is suppose uh in this P tag you can see that you have basically gotten a paragraph what I want is I want to go to next line after this okay that means after the websites I want to go to next line so what I can actually do is I can simply say BR okay so if I write BR you can see that it got jump to next line suppose if I write one more BR okay if I write one more BR right so you can see one more line has been here if I write one more BR you can see one more line is here right so basically this BR is used for jumping adding next line okay so if you write two BRS one empty line would also be added right now we have one more thing which is M okay so M simply is emphasize okay for example I would simply cut this okay and uh just if I write strong here okay if I write strong here so you can write a tag inside tag also no need to worry right so you can simply write strong here so if I write strong here you can see web programming is like this similarly if I write here database management I want to make it emphasize so em and and then database management so you can see that this is emphasize text right emphasize text that's it so you can just search more about this if you want to make it italic or emphasize if you want to make it strong you can just search about different different TXS which are basically used for it okay now guys let's continue now guys we're going to discuss about the one more thing one more thing which is I suppose I want a horizontal line okay suppose I want to get a horizontal line suppose uh after after this suppose I want to get a horizontal line so if I write HR and just close it so it's a self closing tag so now if I just go to my browser you can see you got a horizontal line so HR tag is simply for getting a horizontal line perfect perfect now I think it looks good now guys we're going to discuss the next thing right now we discuss about the text based tags okay so let me just comment these out okay right now guys we're going to discuss about the list okay list so I'm going to come here and uh I'll just simply Type L list okay so now suppose I want to create a list how can I do that so for that you need UL okay UL tag basically for storing a list we have UL tag so now in list we have multiple items so every single item is going to have the LI tag okay so I'm just going to say item one item two and item three okay so that's how you can simply create a list right so if I go back here you can see that you basically got a list right item one item two item three now guys suppose I want uh I right now you can see that you got bullet points right but I want some numbers 1 2 3 4 okay so instead of this I'll just copy this and paste it here instead of UL we have O So UL simply stands for unordered list that means with bullet points o means ordered list so you can simply see that if I go back here if I go back here you can simply see we have 1 2 3 which is ordered list right you can see that you're getting numbers now suppose uh here also you can just change it later on okay you can just uh instead of this you can display Roman numbers 1 2 3 or you can display a BC so that's up to you but you need to know the basic so yeah you know this is unordered list this is ordered list that's it okay so now guys we know what is a list right now similarly guys we are going to discuss about link tag that means the a tag okay so here I'm going to say links and images okay so suppose if I want to create a link tag kind of a uh button if I click on that button it would take me to some other website some other web page okay of my own website or for some other website okay so here I just create a a tag okay which is a pair and here we just going to say HF okay and here suppose I want to mention the URL of Geeks for geeks articles okay right I'll just paste it okay go to gfg okay so now we have a text or a button go to gfg if I click on that it would take me to this URL so inside the HF attribute you mention the URL perfect so now if I come back to my website can see if I click on go to gfg you can see that it took me to this page of Geeks for geeks okay so my website took me to some other website that is the purpose of AAG we actually create hyperlinks with the help of this hyperlinks is nothing but kind of a button if you click on that button it would take you to some other URL that's it okay so we know how to visit some other URL with the help of a text okay now we have image okay so suppose I want to show an image so we have a IMG tag okay and I'll just say that inside this you need to mention the source okay and also I have some mentioned some alt attribute why do we need an ALT attribute let me just show it why do we need an ALT attribute so suppose uh for example you are blind here for example you are blind and you want to know what's written in the the image so it's basically for disabled people okay that's it so some image okay so I'm just going to write some description about it so you can write some description of the image it helps some people use read aloud okay so read aloud would actually use this to tell the people who is blind to tell the person who is blind that hey the image represents this okay so it's really useful right so now if I talk about the SRC here you mention the path of your image okay so uh for example I want to show Geeks for geeks logo for example I want to show this image so I'll just right click and uh I'll copy this image and if I paste it here yes you can see that I have this image okay so now if I just copy this URL okay copy this URL and go to my code and here I paste this okay so if I paste this you can see that I have pasted it right now if I come back you can see and we have this okay we have this perfect so you can see now you know that how to display an image now here we have some more attributes also like for example you can make the width as 100 pixel okay and height as also 100 pixel suppose okay so it would just change your height and width in pixel wise so you can see it looks like this okay kind of it's stretchy stretchy because of some more properties which we need to add later on okay but yeah you have this okay perfect right so now we know what is the IMG tag what is Alli tag what is o tag then what we what we also discuss is the text based tags right now guys we're going to discuss about table tag okay suppose I want to create a table okay suppose I want to create a table so I will create a very simple table so for that we need a table tag that's it so right now my table looks like nothing okay because nothing is inside my table tag now suppose my table would be having the top heading sections okay so for the top heading sections we have TR okay that means label of the uh columns right so we are going to label our columns okay so this is the first row first row is usually for labeling the columns okay like here if I write th okay and if I write name okay and uh copy and paste and we have H so th is nothing but showing some kind of heading it's showing some kind of heading it's like just like a text based tag it's showing some kind of heading okay so now if I go back and you can see that you got this in bold now what happens is suppose I would mention some people in my table so for that to mentioning the data we use the TR tag okay to mention the data we are going to use the TR tag suppose the first person so for mentioning the normal text we use the TD tag okay so the first person is suppose herel Jen okay and the age of that person is suppose 30 okay suppose we have one more data I'm just going to say the other person is Ven and age is suppose 35 okay now if I come back here you can see that you simply got a table okay so that's what is a table tag which we have in HTML perfect now guys this is the table tag which you can use later on you can learn more about it how to get body boundaries and so on with the help of CSS okay but yeah this is it now guys we're going to discuss about form tag okay so suppose you want to create a form where you want to take user details like name age gender and uh you want to ask them to select a subject physics chemistry maths like that okay so how can you do that so for that we basically need a form tag okay so form tag is uh a tag which generates a form acting as container for various input elements name age gender Etc like text Fields buttons check boxes and more which we are going to discuss right so for that we have a form tag okay so form tag is here right and here you might see something in future you would need it for your backend but right now I'll just say action because nothing okay here what you want to do with when you when someone submits this form is mentioned right now we don't have anything we just have plain HTML code so we don't need to learn about this but yeah this is used when you have some kind of back end or you want to do something with the form okay so yeah action inside this you create the whole form right now if I just show you my form you can see nothing is here why nothing is here because nothing is written inside this form right so for example I have to take input name as input okay I have to take name as input later on I want to save that data into my back end into my server so I have to take name as input so I'll just say name type equals text okay and uh I'll just say placeholder equals enter your name okay let's close it okay now if I just show you can see that you have this input field whatever you want to write you can write inside this okay so inside this you can mention one more thing that is name field and it's like usern name okay so so when you want to Target this with the help of JavaScript so you would simply Target username and you would get the data written inside this that's why I've given this name okay so similarly guys you have one more thing is this was simple text which you pass in your name right suppose you want to pass passwords okay so you're just going to say the type of this would be password enter your password okay name password that's it now let's just check so you can see this is the name feied you can write the name but if you write the password you can automatically it became like a password okay so you can see or unsee it okay so that's the benefit of using these input tags now guys similarly we have checkbox okay so for example I have to create a checkbox so we have to give the type as checkbox okay and uh let's say subscribe subscribe okay and in this I would simply say uh we don't need need the name field so okay we can just we need the name field in future you might need it so just mention the name field okay subscribe and uh the value inside this you can give any value okay you can give it a value as 1 2 3 whatever value you want to give you can give it okay so this text is not related to this value okay so these are totally different so uh here after this I'm also going to mention subscribe to our news okay newslet fine so if someone clicks on this you can see it looks like I am asking the person to check on the check box so that they are subscribed to our newsletter okay that's why so whenever I click on the check box this value would be targeted okay that's why we have the value the value can be same as subscribe the value can be anything you like okay whatever value you want to send to the JavaScript or your backend right then guys we have radio button so again I'm going to copy and paste it and we have radio right radio so here I'm just going to say that name field would be containing gender for example okay value of this is suppose whenever I click on this I want to select mail okay and here I'll just pass mail okay and uh I'll just say we have a br tag here okay we have a br tag here and again I would simply say the value is female checkbox is like only one option can be selected that's why we have to give them exact same name okay don't forget this okay so now if I come back here you can see if I select male if I select female so male is gone right um one thing which I would like to do is mention BR before this okay so you can see either I select me if I select female then I select male you can see only one can be selected okay so that's the purpose of uh radio buttons okay these are called radio buttons right then guys if you want to write some long paragraph like you want to have a comment section where you can write a big paragraph So for that we have just like this one okay just like this one we have a text area okay text area tag which is again a part of form Fields let's close it it's a pair tag okay not a self closing tag so here I'll just say suppose the name would be comments I'm giving it for comments okay and suppose I want here rows as okay first of all let me just give it a placeholder placeholder as some comments here okay and if I just save this and now if I just show you you can see that you'll get some comments you can just write some comments can just increase the size if you want like this okay so if I refresh you can see by default it's getting some size if I want to change its size so how can I do that so here we can mention that we have rows how many rows does it have for example I want to mention four suppose four rows and columns I want to mention as suppose 50 okay so if I just save this and then if I show you you can see that the size actually changed right that's what is used for right perfect now we know some basic elements basic things which are used now guys we have uh some comments in the live chat let me just read that sir can you please guide how to make projects for beginners you can just simply uh think on your own for example you are a college student so you can make a personal portfolio website right uh if you have built those kind of projects then you can make a project like if you know HTML CSS JavaScript then you can make JavaScript games like uh tiaco game and so on so these are beginner levels you can make a JavaScript based calculator right if you only know HL then you can make websites like which static websites like product landing page or uh personal portfolio website I don't think so much can be done with basic HTML knowledge but yeah you can use this much knowledge you can create tables proper tables decorated tables like Excel sheet page okay you can create an Excel sheet page with proper design using simple HTML and basic CSS right so some basic projects you can just search on your own yeah you can just use chat GPT and different AI based tools to just search projects for beginners I know this much this much what projects can I make very easy okay so uh now we have some more I'm pursuing bch third year I want to be a fullstack developer please provide some best source to reach it directly uh okay overall I would say search on YouTube what's trending okay so uh few few years ago M was trending still it's trending but yeah you need to search what's the trending thing okay first you know the trending thing then you can simply find the best Mentor which you like I won't say that this guy is best this guy is not best it's someone you feel about okay you feel okay so this person has taught uh M Stack but I don't like the way he teaches so what's the point some other person has also taught mon stack but I like the way he teaches so you can go with that person so it's very simple uh you can just simply search on YouTube and find your own person okay I would suggest that okay please don't go for any recommendation okay this teacher is good this teacher is good no go with the person who you like best okay so uh I'll just deal with some more of your live comments later on let me first continue with the session we are running now with time okay right so now we know the form tag so we have discussed all the form Elements which we wanted to know one more thing is the button tag so suppose you want to submit this form so for that you need a button right we need a submit button so just going to create a button just give it text like what must be shown on this and the type of that button must must be submit so that the browser would know okay this button is used for submitting the form okay later on it would be really useful but you need to always mention the type here okay for form you need to mention the type as submit if it wasn't inside the form then you can mention the button directly but for the forms you should mention type submit even if you don't mention it that's also fine but yeah it helps better SEO website makes the website more franked higher okay if you do very small small things precisely okay so you can see that you got a submit button so if you write something and if you click submit so you can see it will basically submit right now we don't have any back end so it does not do anything just refreshes everything because nothing is written inside the action right but yeah this is some basic form elements these are some basic form Elements which you must use okay now guys we are going to discuss about okay one thing which I missed out is Select option tag okay suppose uh you have to select some options okay for example I'll just say select okay and let's close this one suppose I want to I want to have some countries I want to select one country so I'll just say name equals country just give it a name okay and here I'll just say option option here I'll just say suppose India okay copy and paste China okay so if I just save this you can mention as many options as you can so if I come back here you can see see that you got select option right perfect looks good you select China it's China if you select India it's India right that's it so these are select option tags which you can use now guys we discuss what is form we created a simple form now guys we are going to discuss about attributes okay so we have some common HTML attributes which you would see for example um if I have let me first of all close it suppose for example I come back here or maybe just uncomment this part okay so now let's see you can see right now we are able to see this okay so if I give it an ID attribute okay so first Common attribute which you would see is ID attribute and suppose I would say this is intro okay so what I can do is I can use this it attribute to Target this specific H1 tag in JavaScript and also in CSS okay so for example if I say style equals and to Target the suppose I want to give this give this uh red color Okay red color how can I do that I need to Target this attribute okay so I can simply say just write hashtag since it's it's an ID attribute so you need to write an hashtag intro and close it okay close it I'll just say color would be red okay color would be red so now you can simply see that the color is red so so basically ID attribute is used for targeting the element from wherever you target the element it would be getting the properties so from here I gave the properties this element would be targeted right that's very easy right now similarly uh suppose I want to say that we have one more attribute but first of all let me do this so here you can see I have given this ID attribute okay which is int again it's an IDE attribute but with the same value so you cannot give the same value you have to change the value okay so you can the value but never give same values for ID but suppose it was class attribute class means a group okay class means a group ID means a single element so you can give class attribute so this is second type of attribute so if I write it like this okay class as intro class as intro uh suppose I'll just say my element okay if I just paste it now here if I just say that to Target the class attribute we have class and I'll just say suppose background color is aqua okay so now guys what you would see is you would see that both the attributes are going to have this okay I did one mistake which is my element okay write the name here so my element it has a background color okay so now here you can see that both of them has a background color so if you have some common Styles which you want to give in a lot of things so you can just give them classes common class names okay that's it so we talked about ID attribute we talked about class attribute then we also talked about style attribute here okay so this is another common attribute which you use a lot which is style attribute so you can style the elements directly with the help of style attribute if you don't want to write it in the CSS you can directly style the elements in the style attribute but usually we don't do that because styles are usua