HTML Tutorial For Beginners | Learn HTML | Designing A Web Page Using HTML | Edureka Rewind

Key Takeaways

hi folks my name is Arya and I welcome you all to this stml tutorial So today we're going to learn all about HTML so without wasting much time let's Dive Right In so the idea behind HTML was a modest one when Tim burner Lee was putting together his first Elementary browsing and authoring system for the web he created a quick little hypertext language that that would serve his purposes he imagined dozens or even hundreds of hypertext formats in the future and smart clients that could easily negotiate and translate documents from servers all across the internet now HTML stands for hypertext markup language and it is a standard markup language for creating web pages and web applications it is used to describe the structure of the web pages using a process called markup now HTML mostly constitutes of elements and these elements are the blending blocks of any HTML page and are represented by tags now let me just give you a brief introduction to the structure now this is also called an HTML boiler plate so firstly an HTML boiler plate begins with the HTML tags which tells the browser that this is an HTML page and this is where it begins from next comes the head tag which contains most of the meta information about the document the head tag normally also contains the link to the styling sheets the fonts that you might be using on your web page and even the JavaScript that you might be using now the head tag also has the title element specifies the title for the scene as a text on the tab that you open on a browser now next comes the body tag which mostly contains the content that is visible to the viewer of your page and this contains elements like H1 tags or paragraph tags which are known by P tags and they make up the mass of your content Now to create an HTML page there are a few steps so firstly you need to open any sort of text editor it could be notepad++ notepad Sublime Text or even Visual Studio code you have the freedom to use what whatever text editor you want next you have to write up some HTML code that you want to show on your web page and then you just save your file as a HTML and to open the file all you have to do is just view it on your browser now let me just give you a quick demonstration on how that is actually done if you still not understood that so let us create a folder first so let's call this folder s HML demo and now we're just going to use Sublime Text because that's my favorite text editor out here all you have to do is create a new file and I'm going to be saying that it's a HTML type then you just fit in your HTML boiler plate I'm going to tell my title is going to be my first web page and that is the title of our web page now let's put in some content into this so it's going to have an H1 which says this is just some text let's save this this is going to be saved into our HTML demo so let's open it let's save it as index.html now once you've saved it all you have to do to view it is go into your folder and just open it on your browser so as you guys can see the title is written out here on the tab and this is our H1 that we just created okay so that's how you basically create an HTML page so let's move on now there are some elements that I want to tell you all about which is very important so first is the dock type element so the doc type declaration represents that the file you're working is a document type and helps the browser to display web pages correctly and it only appears once at the top of the page before any HTML tag and the doc type declaration is not case sensitive okay so this is what HTML actually looks like now before we move further with some HTML coding I want to make you all aware that a web page is fundamentally made up of three constituents the first is HTML the second is CSS or cascading style sheets and the third is Javascript now HTML will only give the structure of the web page it has nothing to do with the styling while CSS is completely responsible for how beautiful your web page looks what colors you're using as the background how your images are actually lined up and all those sorts of things to learn more about CSS you can always refer to our CSS tutorial on the same page of Ed recer and thirdly JavaScript is for making your page much more Dynamic if you're clicking on a button are being actually submitted that's all being done by JavaScript and if you all want to learn about JavaScript we also have tutorials for that and you can surely check them out okay so now let's go ahead and create some elements and see how they look like on an HTML page so let's go back to our HTML page so this is what an H1 looks like so let me just copy this down now and let me show you all the types of headings that HTML provides us it's actually H1 through H6 so H2 H3 H4 H5 and H6 let's also change them here H6 H5 H4 H3 2 now let's save it let's go ahead and reload our page so this is how the different types of headings look like this is H1 being the biggest and H6 being the smallest okay so that was about headings now we have some other tags also that I want to make you all aware of so there's the P tag first so P normally stands for paragraph now paragraph is basically what it looks like and it normally contains random text or paragraphs of your web page and this is what they look like this is what a paragraph looks like okay so that was all about adding a paragraph So how do you add images so you can simply add image with the image tag and all you have to say say is a source now I already have a beautiful picture of a Pokemon that I really loved as a kid so let me just copy that down into the folder okay so now that we've copied down our image into our folder all we have to do is give the source now this can be n tales. PNG that's the name of our image let's go back to our page let's reload it okay now you can also put in attributes like height and you could say the height is going to be 7 or 500 pixels and then you can also put an attribute called width and say that's also going to be 500 pixels yeah so that changes the height and width of your image you can also make it smaller by saying something like 100 pixels so let me just show you that save it let's reload it and yeah now we have a much smaller Ninetails out there now suppose you don't have a picture you can also put an all tag so this will say there was supposed to be an image here so let's save that now you will not be able to see the alt tag because our image is working but suppose I misspell the name of my image and now you'll see something like that out there so there was supposed to be an image out here so it's showing the alternate thing right we can also have line breaks in our HTML so you do that simply by saying slbr and then there will be a line break between this word alamco and laboris so let's save that let's cancel this out okay so now alamco and laboris are on different lines we can also make stuff bold so suppose you want to make this first word bold so you can go b/b and that'll make it bold yep now lurm is bold you can also for making things bold you can use a strong tag and now let's say this so bold and now this is also bold comes up right there then you can change the size of text so let's just create some other text so it not so that it doesn't get cluttered up so we have tags like big and we also have tags like small so let me just show you the difference this text is Big while this is small let's do that so this text is Big while this is small so let me just put a line break here save that let's also put a line break here and now let's put back our image yeah this text is Big while this is small now you can also put in horizontal lines inside your HTML all you have to say is HR and that'll put in horizontal line out there write like that you can also put the width and height out here so width there's no reason to put a height because it's not there and and width is going to be something like 70% you could say 70% and you have a line that goes 70% through the screen next we can also put in links into our HTML so suppose you want to go to a site so let's say you want to go to Ed reca now we can put some text like say this is a link to a website let's save that put it here and now this will take us to ua. go yep so that's how it works you can also put links on images so suppose we were to remove this text out here copy this image from here and just put it out here now if we were to click on the image it'll take us to. okay you can also add lists into your HTML page so there are two types of lists one is an ordered list so ordered list are numbered lists and you can put in list items like this so let's put in a bunch of list items okay so let's type in some text so this is a random list so list items are actually going to be the things that you're going to list out so these could be anything that you're listing out you could list out your favorite dogs you could list out your favorite chocolates or anything like that let me just show you what that looks like let's go back to our page and this is what it looks like so as you guys can see we have a list out here which says this is a random list list this is a random list and just to make it a little more creative let's go and put in some stuff like that so firstly let's put in hed2 out here these are some of my favorite dogs let's say I love samou I also love corgis I love huskys and I also love golden retrievers so now we'll have an actually good list out here so these are some of my favorite dogs now if I were to just make this an unordered list so we can also have unordered list so this is how you create an unordered list you just go ul and then you put in your list items so I'm going to say so let's put in H2 again and these are some of my favorite heroes in Dota 2 so list item this is going to be let's see I really love playing Shadow Fen then let's put in some other Heroes like storm spirit invoca and let's say Templar Assassin let's save that and let's see so these are some of my favorite heroes in Dota 2 now if you see our H2 is kind of indented that is because we have put it inside our list now if you were to just cut it out and put it outside let's Reit my lines and let's see so now it's properly showing so these are some of my favorite heroes in Dota 2 you can also put in images in these list items so suppose we were to put in some images of Shadow fi and storm sprit you would just put an image out here and you would put the source now I don't really have images but you can also put in the URL of images so let me just show you how to do that so let's see Shadow fiend let's go into the images let's find something small like let's say 300X 300 okay so this looks like a nice cartoonish figure so we open this image in the new tab and we copy down this link so you can see the source is this link let's save it let's see if it shows up yep and now this thing shows up just outside shadow fiend you can also put in some styling or some attributes like you say width is going to be 100 pixels and height is going to be 100 pixels so let's save that now and now it's a much smaller image of Shadow fan now we have other types of tags also so these are called div tags so div tag stands for division so to divide your page into separate parts you could say this will contain the footer so footer tags are normally coming in the end now you could also have a div tag in the beginning and this could contain the header so these tags will contain the header this is so let me just put in some header so this is the header and this is the footer so this is the header headers always come on top and this is the footer now you can also create forms using HTML so let's go ahead and create one so our form is going to be called a registration form okay so now let's put our form and a div first of all so let's give our div an ID so IDs and classes are actually used to select stuff on an HTML page when you're styling so to understand more about IDs check out our CSS tutorial let's give this ID form or registration form rather then let's go into our div and create a form our form will always stay inside our form tags now that we have done that let's understand the elements of a form firstly we need an input so first input will be of type text let's say its name is going to be first name and we'll have a placeholder like sound like this say ARA and we will always be requiring it so if you say required that means somebody will if he's actually inputting stuff into the form this is a mandatory field okay so let's save that and see so now we have a registration form called ARA okay so we also need labels so let's go ahead and create one so label so for first name and this is going to say first name and it's going to have a colon so now there's a label called first name now we can do this for last name also so let's contrl c contrl v so it's going to be last this going to be last and this is also going to be last and we want to put a placeholder for Paul and this is also a required field so now we have a last name with this placeholder we can submit stuff into that now form also takes in two important attributes I forgot to mention so one is the action and the other is a method now action is something that will happen when you submit this form so you can run a script something like script.php but for now that's for another session okay now there are other types of inputs so let's see let's create another div now suppose you want to input the gender also so let's see let's first create a label and let's also create an input type so input will be type of radio and this is going to be called gender male and let's also give us a value of Choice One save it now you want to label and you want to give it the attribute for and you want to give it the name out here so let's put in that so gender male save that and let's write mail out here so let's save that now and let's see what it looks like so now we have the syn called mail we can check it and we can uncheck it now let's create for female also and others so let's see let's call this female and this is going to be of type Choice two now we have male we have female but if you see we can actually select both of them or all of them so that's not something we want want right so let's make this choice three let's make this other okay now we have a gender submission going on so male or it's female or it's other now we can't really select everything so how do we actually solve that so let's give them all the same name so we can call it gender Choice save it now you either go male or you go female or you go other you can't really select the same thing so that's how you make that happen okay now let's look into some other types of input types we can take in so let's create another div suppose you want to take in the email address so let's go ahead and copy that spit out here let's say so label for let's see first of all we need to change this type to email and we will also give this a name of email let's put in a placeholder instead of a value and it's going to be something like let's put XYZ atate email.com okay now we have this thing going on so let's change this label to email and let's change this label to email too now we have the sing going and we can type in our email and we'll also need to type in a password for registrations let's call this password let's also make this password the type is going to be password and let's remove a placeholder because passwords don't really have placeholders save that and now you see when you type in a password you can't really see anything that's how you make a form that inputs a password okay so that was how you takeen emails and passwords in a form now there are some other stuff that I want to show you so let's Dive Right into that so so let's create another div okay so first of all we need a select tag so select tags are used for making selections so let me show you how that works so firstly let's give this a name and let's call this birthday or let's call this the month now we'll also need a label for this let's create a label so our label is for month let's call it birthday now our select can have various options so you're basically going to put in a bunch of options out here let's see option now we need 12 options actually that's three that's 6 that's 9 that's 12 delad these out just Reen my lines now our options are going to have values so our value will be something like fine so let's say Jan Feb March April May June July August September October November and December and you could say January out here February let me just create this quickly March let's save this now let's see what this looks like so we have this birthday thing and it has all the months in there okay now out here if you see it already comes with the default value of January now you can also mitigate that by putting in another option called default so let's put another option or so now that we have an option let's give this a value zero and let's say selected disabled now if you reload this there's nothing but you get all these different values now instead of just making it blank you could say that this could say month so now says month and you could create something similar for days also so for days you need to create 30 of these and I hope you get the logic of creating this thing now now our form also needs the button to submit so let's go and create that also let me show you another type of input so let's say input and the type will be check box and the name will be agree and let's put a label for this a for agree and I agree to all the conditions of the form now we will have this thing going and we have a checkbox we could check it we could uncheck it something like that then all we need is an input and order an input we rather need a button say button and you say submit and you also have to give this a type so this is going to be of type submit so once that's done we see this button and we can submit it so if you go and submit you'll see please fill out this field because it's a required field and that's all that is there forms so that's how you create a form in HTML you can also create tables in HTML so let me show you how to do that let's reload and make this blank save it yeah so our tables are created with table tags your table and tables have table datas okay so we can also create tables in HTML for that we need table tag now table comes with the table header first of all so this will contain all your table headers so suppose you were creating a table for dogs and the breeds so th dog and you can say the dog also has a name and breed so this has created a table header now so let me just show you what that looks like so now we have the dog name and breed now we can just simply go in and put in some table rows so put in that row you say t R and in every row you'll have to put in some table data so for that you use a table data tag so TD so let's say our dog is called so let's make this rather dog owner name right so I had a dog and my dog's name was Stoner let's call him Stoner and Stoner was a street dog so let's just keep the braid a street okay so that was one table dat row save it now we'll be needing multiple table rows so let's just copy that paste it multiple times so let's say my friend shubam he has a dog called Goldie and it's a retriever and then I also have this friend called aayushman you has a dog called Duke and it's Husky and then there's this guy called ishan he has a dog called Monster but it's a buug yeah so now we have successfully created a table and as you guys can see dog owners are Arya shabam aishman and ishan their name of their respective dogs is Stoner goalie Duke and monster and the breeds are Street retriever Husky and pug so that's how you create a table now with CSS you can add a border to the table let me just show you how that's done with a little bit of CSS so let's say style let's say text SL CSS now out here you could just do some little styling let's say let's give a table a border of 1 PX solid black now our table will have a Bott and we can also give TDS a border and and there're going to have one PX solid black to so now everything has a border and our table looks much neater yep so that's how you create a table in HTML okay guys so now it's time I actually show you how HTML can be really polished sometimes so let's go ahead and create a blog so for this blog I've already created the CSS out here so I'm not really going to be explaining the styling part but we are going to be creating our blog so let's go ahead and see how that looks like so first of all let's delete everything let's create a page now so let's call this blog now we'll be linking our stylesheet out here so for linking our stylesheet all you have to say is something like this and then me go ahead and copy my Styles sheets the desktop we doing a stuff in HTML demo let's copy this here right now our blog. CSS is going to be here now let's go and start creating our blog so firstly let's put everything inside a div now this is going to have a class called post because I've used the class to actually style some stuff now that's done so let's have another div so this is going to have a class called date and we're going to be putting in the date so let's say our date is going to be October 24th 2018 now let's say we have an heading so let's say Vancouver my favorite City then let's put in some paragraphs because every article needs a paragraph So for paragraphs you're just going to be filling it with some lpsum now our paragraph will have a class called quote okay now let's reload and see what is being made okay so if you guys can see our blog post is coming up now we can also add some images to our blog post so let's say let's add a link first so we link to https www. ed. go now we are going to use an image for actually making it clickable so we already have an image it's called image 1. jpg so that's there let's also put an ALT tag out here just in case this doesn't load up so alt and say Vancouver image now let's put in some another paragraphs so another Laura myum and some more paragraphs I guess because this is a Blog so let's make it look like a Blog save that and let's also give it a horizontal line to make it look neat save this let's load it okay so we have this nice looking article and it has this image if you click on this image it'll take us to edir our site so we go to Eda if we click that image let's add another article into this just to make it a little longer so let's copy down this div so let's change the date first because let's say we posted on the next day let change the title so the my second blog post save it let's remove the image from this one to make a little different yeah so now if you see we have this nice looking block post going on it has this horizontal line we have some quote out here and that's how you can do stuff with HTML okay so guys that brings us to the end of this this HTML tutorial I hope you had fun learning with me to how to code with HTML you can also learn more about web development from our CSS tutorial and JavaScript tutorial and until next time goodbye that