HTML Tutorial for Beginners - Learn HTML in 30 Minutes

hey what's up guys it's clever techie in this video I'd like to show you how to code in HTML so we can start creating websites now before we begin let me show you something here I have created some files that are going to be using in the video like these backgrounds diagrams an HTML cheat sheet and some images that I'm going to be using here in this video and I've gone ahead and packed up all these files in a zip file and if you go to clever techie comm forward slash HTML - video you'll enter your email and then the system will automatically send you that file so if you want all these files go ahead and do that ok let's get started here first of all I'm going to be using notepad plus plus to code in HTML and I just created a new file here and I'm gonna go ahead and save that file as and when you're doing this with a notepad or not put plus plus or whatever make sure you choose all types and then your page name I named page 1 that HTML and now we can open that page in whatever browser we want I'm gonna do Chrome and and so here on the right hand side we're gonna see how the interpreted HTML code looks like alright so what the heck is HTML let me show you here real quick so HTML all it is is a bunch of tags and this is what tags look like you got a tag name surrounded by these angle brackets that's your opening tag then you got a closing tag which is the same thing and it's going to have exactly the same name as the opening tag with the exception that is going to have a forward slash right in front of the tag name so that's your closing tag the content like the text images links and whatever goes in between the opening and a closing HTML tag now if we combine the whole thing together with an opening closing tag and the content in-between we get what is called an HTML element all right let's start coding some HTML here let me show you some examples of the tags okay so if I just type some random text here for example this is my first website ever it's going to be about baby animals at the same time I'm going to learn how to code HTML this is very cool exclamation mark okay so if I just refresh this page here in chrome I'll get exactly the same text so nothing's going on yet okay so let me give you an example right now if I use this tag called strong on this first sentence you can see that this first sentence has been bolded so what so what that strong tag did to this sentence is just formatted as bold and that's what strong tag is supposed to do another example is a e/m tag which stands for emphasize and all it does is makes text italic so the second sentence here it became italic and if I wanted to for example underline the fact that this is my first website I can do an underline tag with au and that will underline the word first so you can see how you can use these HTML tags to format your text and you can use other HTML tags within within these tags inside of them so we get like a nested effect okay so this is a basic idea what the HTML tags are now if you notice here we have I put these sentences on three different lines but if we look at the browser it's all like one sentence especially if I expand it like this you can see how the whole thing is on one single line so in HTML you gotta use a tag called ER if you want to have the text to head it stands for the breaking line and if you want to have your sentence show up on the next line this is the tag you used you use now if you notice this tag it's a unique tag because it's called an empty M empty HTML element because there's no content that goes inside of this tag and so it also doesn't have a closing tag so it's just one opening and closing tag in one and it's self closes with a forward slash in between inside the tag that's why it's also called itself closing tag there's only a few of those another example is a horizontal rule tag and all it does it creates a horizontal line just like you see here another tag that I'm going to cover is the image tag IMG and those are the only three self-closing tags and I know of and you're probably not going to run into others but if you do you know what they are now okay so those are the self closing tags and another exception to the standard HTML opening and closing rule is the comment and this is a comment comments are basically for for the coder for the programmer to understand the code better so I can say strong tag stands for bold you know and this is how we do it we use the same angle brackets but it starts with the exclamation mark with two dashes and we close the tag with just two dashes without the exclamation mark and the young new angle bracket so that's another exception to the rule and that's pretty much it now let's see where we are here okay so I'm not a set of tags that you're going to encounter a lot is called the heading tag called h1 now h1 is going to be your biggest heading then there's h2 and as they go up in number the heading is going to become smaller and smaller you'll see what I mean here in just a sec I'm just going to do this up to h4 and say something like welcome to my hobby pet site and then I'm just going to copy this text and put it in between these tags refresh the page and as you can see the biggest heading as the h1 the second is h2 h3 and then H 4 so it goes all the way up to h6 and it becomes smaller and smaller as it goes down so this is it really useful tag for setting up your headings on your website now there's also something called nested HTML tags and these are tags like for example an unordered list tag ul and let's just put some text inside of it like kitten and elephant and piglet and if i refresh the page here as you can see created like a tab space here but it doesn't really do anything by itself so in order for this to work we need what is called a list item inside the UL tag I'm just going to copy this list item tag to the other ones and don't forget to close it and just going to copy and paste now we got three list item items inside of our unordered list tag and as you can see this is a created a bulleted list and this is called an unordered list in HTML so you can see how it's nested it's like the UL tag and then there's Li tags inside of it okay so if I did a Oh L that would be an ordered list and now we change to one two three which is an ordered list just a numbered list that's all it is okay so those are the nested HTML tags now okay before moving on to more tags let me show you how a typical HTML page actually looks like okay so here's the structure of every HTML page that you're going to see first of all you got your HTML tag and this is the main tag that defines the HTML document and all the other tags live inside of it after that we got a head tag and just remember for now that inside the tag is where you put your title tag and title is going to show up as a title of your webpage now inside the tag inside the head tag we also have stuff like JavaScript CSS meta info and other stuff that you include like external scripts and CSS stuff like that but don't worry about it right now just remember about the title goes inside a head and after the head we got the body and this is the visible visible part of the web page and most hTML is going to live here and that's where we're going to be putting all of our HTML ok this is the structure and I'm just going to update this document here too to correct the structure because right now we don't have the HTML tag so I'm going to create that all that is going to go in between then I'm going to create the head tag with a title tag inside of it just like that and also the body tag and all of this HTML is going to be inside this body tag okay and I'm also going to put some kind of a title right now you can see like here's a page one that HTML which is not a title at the site so I'm going to say best baby animals ever refresh the page and now this is showing up as a title just like we want okay that's the structure of HTML and the title tag now now let's get into the attributes okay so what attributes do here I got a this little picture here to illustrate it a little bit better okay so we got a tag name inside the tag name we put an attribute name followed by the eco sign and finally we put the value of the attributes inside the double quotes okay let me show you an example so you guys understand what I mean here so for example if I wanted to change my my size background color I can use an attribute called BG color and I can set it to any color I want like light blue save this file refresh the page boom the collar has been set to light blue so just like in the diagram we got the attribute name followed by the equal sign and inside the double quotes we got the value now certain attributes will only apply to specific HTML tags but some attributes will also apply to other tags like the BG color can apply to other tags like I have like I'm showing here in my cheat sheet the BG color can apply to body table table sell in table row and I'll get into it in a little bit okay so what else let's see you introduced the font tag ok well another thing you can do here is for example if you wanted to change the color something of the your text you would use a font tag and a font tag has a attribute name called color you can set that to blue or 8th now red set it to red and if I wanted to just do this whole sentence close the font tag and now the second one is going to be red okay so those are attributes now instead of using these color names as as actual words like light blue red we can also do something cool for example let me show you something here let's go to a website called w3schools and have my URL just gonna paste it here now here you if you go to this URL w3schools com4 slash college photo slash colors underscore picker ASP and pick a color any kind of color for example I'm just gonna take this pink color well I pick this purple here you're going to see this value which starts with a pound symbol if you copy this value and like as you change the color obviously the value is going to change so pick any color you want copy this value it starts with a pound tag and you can put this inside this value for color and that's going to be exactly your color so that's how you can use what is called hex values to basically choose any kind of color you want instead of coming up with color names like light purple and some other names which might not be even HTML values this is like the sure way to do it alright so I just wanted to show you this that part okay our body can also have a different attribute called the background and if we wanted to set our background as a picture instead of instead of a color we can do this you can use the background attribute and then since I have my backgrounds here inside this BG folder I would have to specify where it's located so I'm going to be using clouds that jpg so for the value I'm gonna set BG clouds that jpg so you can see how this works here my patients inside of this root directory here but the clouds background lives inside the BG folder so when I go to it the clouds that jpg is right there so that's why we're specifying BG forward slash clouds that jpg which is the full path to our clouds that jpg background and now i refresh the page and you can see all these cool clouds all right now I already explained how we can have multiple attributes apply to different kind of tags now let me introduce a tag called image IMG and this is how we insert images into our Paige so you start with IMG and the attribute is SRC which stands for source equals and then we self close this image tag because there's no content that goes inside of it and for the path we also specify where this image is located in this case I have this image inside of my IMG folder and I'm going to use this cute kitten here kitten that jpg so IMG's photo slash kitten that jpg and i refresh the page and I have my kitten showing up here and I'm going to insert that BR tag so the tags so the text goes on the next line okay so that's an image tag now while we're still on the paths let me also introduce a link tag and the way you create link is by using an a tag which stands for anchor and this tag has its own attribute called href and we can create two types of links for example we can link to another website like I'm going to link to this URL here I'm just going to copy and paste this whole URL here and if you're going to be linking to another website make sure you start with HTTP and then type the full address of whatever URL or website you want to link to otherwise it's not going to work now inside the a tag you also want to enter some text like go to animal center to adopt a kitten and then of course don't forget to close the a tag and now I have this link shown up here and if I click on it it's going to open this page where you can look at all these pictures of cute little kittens all right so if you notice this link also opened in the same tab and if I wanted to pour this link to open in another tab there's a attribute for that called target target equals blank and if we test the page now and click on the link you can see how it opened in another tab so here what I did is basically created another attribute inside the a tag and you can place with these attributes anywhere inside the tag as long as they're followed by the equal sign and the value and an all HTML tags can have multiple attributes like for example the image tag also has its own attributes like besides SRC it has an alt attribute and for the alt attribute we can say kitten and for title is another attribute you can say now now what the alt attribute does is in case the image is not found like I'm gonna make it so it's not found on purpose here this is the words is going to show up here kitten and if I go back here and fix that and then the title is going to show up when you roll the mouse over the image so as you can see it's saying now now okay so those are multiple attributes can be applied to the same HTML tag to achieve all kinds of different results and all the attributes do is modify the way the HTML tag behaves so we can set all kinds of different values and change all kinds of different elements of our webpage now let's move on here and lastly I'd like to show you guys tables okay and I've created a diagram for that as well let me show you real quick actually before we do that let me show you another type of link it's what I wanted to do first okay it so if I wanted to link to another page on my site I would create the first of all let's create another page file new and I'm gonna save file as page to that HTML and I'm just gonna copy this whole thing so I don't have to type it again and pretty much delete everything inside the body tag and I'm just going to leave everything else alone here and here I'm just going to say something like I am GSoC equals IMG elephant we're going to put an elephant picture on this page and let's see if that works I'm just going to go to this page now page 2 okay I got my elephant picture here because I have that picture inside the IMG folder and now we're going to name the title elephant refresh the page now this page is called elephant okay so from page one we can now link to page two by simply specifying where page two is located which pick and page two lives inside the same directory so we can just link to it in the in this way page two HTML visitor my friend elephant and close the a tag so for the href instead of specifying you know a full URL like that I just said page two because it's already on our computer so now if i refresh first of all let's create another br tag here so it's more neatly organized and if I click on it here it goes right to page two where our elephant lives pretty cool right okay those are the links and finally I want to show you guys how to create tables now this is what a typical table looks like let's open it up here okay so you got a table tag you got a closing table tag inside the table tag two types of tags called TR and a TD now the TR stands for table row and as you can see there's only two rows one and two so the one row is in green color and the other row is in another green green color below the first row okay got a little bit confused here and inside our rows we got a table cells now every table row has two table cells within it and these are shown as in orange and I just created this diagram for you guys so you can understand it better because it can be a little bit confusing at first because you know there's a lot of tags that make up the whole table structure so you got the whole table is blue table rows are green and the table cells are going to be in orange and inside the table cells is where the actual content goes now let's create the actual table so you'll see what I mean here okay so I'm just going to create the table cell here be a below my h4 tag let's say table close table right away then I'm going to put the TR which is a table row close it I'm going to put another TR close it and then within the first table row I'm going to put two table cells and close them as well so we have exactly what I just showed you in the diagram and I'm just going to copy all these I don't to type them again and also we can use a an at should be called border equals black actually border equals one and now you can see how tiny this table is because having to put in any content inside of it so now we're going to put some content for example I'm going to put animal names inside of these puppy leopard and kitten so now that I put all these names here you can see the table okay that's pretty much it for the table another thing cool thing about the table is you can make it bigger or smaller by using cell padding and cell spacing attributes cell padding is going to expand the actual space around the text just like you see here and cell spacing is going to increase exactly what it says is going to increase which is the cell space cell spacing as you can see there's cell spacing between those cells now now I finally I want to show you the BG color attribute and how it can be applied to the table basically if you if we take a look here at our cheat sheet again we can see how the BG color can be applied to body table table cell and table row so we can have all these different elements of the table in different color okay so for example if I set the table BG color to say light green our whole table is going to be light green because we haven't specified what kind of background we want for the row or the cell now if I wanted the first row to be something other than light green can say maybe like yellow now as you can see the whole row became light yellow I want to just do yellow because it's kind of looks white here okay so there you go now if I wanted to apply to individual cell I can do the same exact thing and say something like what other color is there you're just gonna go back here choose light pink or not white pink white purple copy the value and insert it here and bam now we have so basically BG attribute can be applied to all different kinds of to all kinds of different elements within the table and I think this is it just keep playing around with HTML and have fun and eventually you'll just realize how easy it is because this is all it is it's a bunch of tags and attributes with values and as you play around with it you're going to get used to it and all this code is going to be really easy to understand and I'll be I'll be putting out another video on CSS where we're going to get into some really cool stuff on how we're going to be styling websites and make it look really nice and please go to clever tech EECOM to subscribe to the newsletter and you'll get updates when I release HTML guides which are basically going to be similar guys like this but in HTML format but they're going to have advanced techniques you guys are also going to receive new videos chichis diagrams and other updates I hope you guys enjoyed this video please like share and subscribe and thank you very much for watching

Channel: Clever Techie

Views: 442,323

Keywords: html tutorial, learn html, web development for beginners, html for beginners, html coding, html tutorial for beginners, learn html for beginners, learn html in 30 minutes, html for beginners tutorial

Id: hrZqiCUx6kg

Length: 29min 4sec (1744 seconds)

Published: Tue Mar 08 2016