HTML Tutorial For Beginners | Learn HTML In 30 Minutes | Designing A Web Page Using HTML | Edureka

[Music] hi folks my name is Aria and I welcome you all to this HTML tutorial so today we are 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 berners-lee was putting together his first elementary browsing and authoring system for the web he created a quick little hypertext language 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 Silver's 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 of HTML now this is also called an HTML boilerplate so firstly an HTML boilerplate 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 a 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 which specifies the title for the document and can be seen 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 these 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 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 say your file as a dot 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 HTML demo and now we're just gonna 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 gonna be saying that it's a HTML type then you just fit in your HTML boilerplate I'm gonna tell my title is gonna 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 gonna have an h1 which says this is just some text let's save this this is gonna 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 going to a 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 create ok 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 doctype element so the doctype 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 doctype declaration is not case-sensitive ok so this is what HTML actually looks like now before we move further with some HTML coding I want to make ya'll 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 Eddie record and thirdly javascript is for making your page much more dynamic if you're clicking on a button your posts are being actually submitted that's all being done by JavaScript and if L want to learn about JavaScript we also after you tolerance 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 it's also change them here at 6 h5 @ 4 3 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 at 6 being smallest okay so that was about headings now we have some other tags also that I want to make Cal aware of so there's a 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 webpage and this is what they look like so this is what a paragraph looks like ok 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 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 you have to do is give the source now this can be ninetails dot PNG that's the name of our image let's go back to our page let's reload it ok 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 in 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 yet now we have a much smaller ninetieth of them now suppose you don't have a picture you can also put an alt tag so just 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 let's suppose I misspelled the name of my image and now you'll see something like that out there so they were 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 slash BR and then there will be a line break between this world Elanco and laborious so let's save that let's cancel this out okay so now Alam ko and laborious 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 yup now lorem is bold you can also for making things bold you can use a strong tack and now that's it this is also 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 done 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 well this is small let's do that so this text is big while this is smaller 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 well this is small now you can also put in horizontal lines inside your HTML I have to say is HR and that'll put in horizontal line out there right like that you can always put the width and height out here so wit there's no reason to put a height because it's not there and width is gonna 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 Eddie Rica now we can put some text like say this is a link to a website save that spirit here and now this will take us to add you record Co 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 will take us to re-record oh okay you can also add lists into your HTML page so there are two types of Lists one is an ordered list so ordered lists 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 gonna be the things that you are going to list out so these could be anything that you're listing out you could list all your favorite dogs you can list out your favorite chocolate so 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 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 an h2 out here these are some of my favorite dogs let's say I love some words I also love corgis love Huskies 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 would just make this an unordered list so we could also have unordered lists so this is how you create an unordered list you just go ul and then you put in your list items so I'm gonna say so let's put an h2 again and these are some of my favorite heroes in DotA 2 so list item this is gonna be let's see I really love like sheriff e and then let's put in some other heroes like storm spirit invoker 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 read my lines and let's see so now it's properly showing so these are some of my favourite heroes in DotA 2 you can also put in images in these list items so suppose we were put in some images of shadowfiend storm spirit 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 that's a shadow fiend it's going to the images let's find something small like let's say it's 300 X 300 okay so this looks like a nice cartoonish trigger so you 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 shadowfiend you can also put in some styling or some attributes like it's a width is gonna be 100 pixels and height it's gonna be 100 pixels so let's save that now and now it's much smaller image of shadowfiend 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 can also have a div tag in the beginning and this could contain the header so these tags will contain the head of 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 photo 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 a div an ID so IDs and classes are actually used to select stuff or an HTML page when you're styling so to understand more about IDs check out our CSS to Todd that give this ID form our 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 understands the elements of a form firstly we need an input so first input will be of type text let's say its name is gonna be first name and we'll have a placeholder I sound like this say aria and we will always be requiring so if you say required that means somebody will if he is actually in putting 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 Aria ok so we also need labels so let's go ahead and create one so label so for first name and this is gonna say first name that's gonna have a colon so now there's a label called first name now we can do this for last name also so let's control-c control-v so it's gonna be last it's going to be last and this is also going to be last and you wanna put a placeholder for pause and this is also a required field so now we have a last name where this placeholder we can submit stuff into that now form also takes in two important attributes I forgot it mentioned 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 dot 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 that's also create an input type so input will be type of radio and it's 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 four and you want to give him the name out here so let's put in that so gender male save that and let's write male out here so let's save that now and let's see what it looks like so now we have this thing called male we can check it and we can uncheck it now let's create for female also and others so let's see it's call this female and it's gonna be of type choice too now we have male yeah female if you see we can actually select both of them or all of them so that's not something we 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 Hado 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 a gender choice save it now you either go male or 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 I'll just go ahead and copy that spread out here let's say it's a 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 pair and a placeholder and set of a value and it's going to be something like that's for XYZ at rate email calm now we have this thing going on so let's change this label to email and let's change label to email too now we have a single and we can type in our email and we also need to type in a password for registrations let's call this password 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 an Icee 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 taking emails and passwords in a forum now there are some other stuff that I want to show you so let's dive right into that 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 firstly let's give this a name and it's called this birthday or a skull is two months now we'll also need a label for this scray labels so a label is four months it's called a birthday now our select can have various options so basically we put it in a bunch of options out here that's the option now we need 12 options actually that's three that's six that's nine that's 12 leave these out the serene and my lines now our options are gonna 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 the default value of January now you can also mitigate that by putting in another option called default 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 you get all these different values now instead of just making it blank you could say that this could see month it's another stays 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 forum also needs a button to submit so let's go and create that also let me show you another type of input so that's the input and the type will be check box and the name will be agree and let's put a label for this a four agree and I agree to all the conditions of the form now we will have this thing going and we have a checkbox you can check it we could uncheck it something like that then all we need is an input and on an input we rather need a button say button and you say submit and you also have to give this a tight so this is gonna 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 it 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 just reload and make this blank save it yeah so our tables are created with table tags your table and tables have table data okay so we can also create tables in HTML for that feed table tag in our 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 breed so th dog and you can say the dog house has a name and breed so this has created tables headed on 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 fortunes row you say TR and in every row you will have to put in some table data so for that you use the table data tags a 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 this column stoner and stoner was a street dog so let's just keep the breed a street okay so that was one table dish 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 shabam he has a dog called Goldie and it's a retrieval and then I also have this friend called ayushman yeah the dog called Duke and it's husky and then there's this guy called yan he has a dog called monster well it's a pug yeah so now we have successfully created a table and you guys you guys can see dog owners are Aria sugar marshmallow and each on their name of the respective dogs is total goalie Duke and monster and it breeds a street retriever husky and pug so that's how you create a table now with CSS you can add a border to the stables let me show you how that's done with a little bit of CSS since this Tyler let's say text CSS now out here you could just some little styling let's say let's give our table a border of 1px solid now our table will have a bottle and we can also give td's a bottle and you know they're gonna 1px solid lack two so now everything has a bottle and our table looks much neater yep so that's how you create a table in HTML ok 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 gonna be explaining the styling part but we are gonna 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 licking a stylesheet all you have to say sounds like this and then we go ahead and copy my style sheets the desktop we're doing a stuff in HTML demo let's copy this here right now I blog dot CSS it's gonna be here now let's go and start creating our blog so firstly let's put everything inside a div no this is gonna 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 gonna have a class called date and we're gonna be putting in the date so let's say our date is gonna be October 24th 2018 now let's say we haven't heading so let's say Vancouver my favorite city then let's put in some paragraphs because every article needs a paragraph for paragraphs you're just gonna be filling it with some lorem ipsum 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 a 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 HTTP double double double eddie record dot go now we are gonna use an image for actually making it clickable so we already have an image that's called image one dot jpg so that's there let's also put an alt tag out here just in case it doesn't load up so alt and say Vancouver image now let's put in some other paragraphs so now lorem ipsum 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 its image if you click on this image and take us to Eddie wrecker site so we go to edit wrecker if you click that image that's our another article into this just make it a little longer so let's copy down the stiff so let's change the date first because let's say we post it on the next day as she is title also 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 you know this nice-looking blog post going on it has this horizontal line we have some code out here and that's how you can do stuff with HTML okay so guys that brings us to the end of 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 I hope you have enjoyed listening to this video please be kind enough to like it and you can comment any of your doubts and queries and we will reply them at the earliest do look out for more videos in our playlist and subscribe to any rekha channel to learn more happy learning

Channel: edureka!

Views: 465,444

Keywords: yt:cc=on, html tutorial for beginners, html tutorial, html, html 5, html5 tutorial, html (programming language), html for beginners, learn html, html basics, introduction to html, html tutorials for beginners, html5 tutorial for beginners, how to create website using html, web page using html, html coding, html web page design, html css tutorial, html tags, web development tutorial, html course, html training, web development training, html edureka, edureka

Id: 88PXJAA6szs

Length: 29min 30sec (1770 seconds)

Published: Mon Oct 29 2018