HTML Crash Course For Absolute Beginners

[Music] hey guys welcome to the first video of my web development for absolute beginners series this entire series is meant for anyone wanting to learn basic web design and web development and there's absolutely no prerequisites I'm teaching this course as if I'm talking to someone that's never written a line of HTML before so don't worry about having any kind of prior web development knowledge this will be an ongoing course or ongoing series and each video will focus on a different topic so in this particular video we're going to be focusing on HTML only then we'll move on to CSS and possibly some JavaScript I also want to show you how to upload a website to the Internet alright so just a couple things before we begin so I want to stress that this this course and this this video the series is for beginners okay if you've been a subscriber for a while I can almost guarantee that you're going to know everything in this video and in this year well maybe not in the series but in this video at least you know if you've been building websites and you're going to know the basics I'm doing a series like this because I don't really feel like I have a place to start on my channel for absolute beginners people that that really don't know anything about web development so hopefully my my advanced programmers that are that have subscribed to me can understand that and just know that you know this isn't going to be an ongoing thing for you know for the next 20 videos it's just this series all right also there's going to be little to no CSS in this particular video that's going to be covered most likely in the next video and just to warn you HTML without CSS is very very ugly we're not focusing on the style at all here we're focusing on HTML syntax all right so we will be sticking to html5 I don't want to confuse anybody by you know throwing in standards from HTML 4 or XHTML or any other derivative anything like that so we're going to stick to HTML 5 only so we will be working with examples we'll be building a cheat sheet but we're also going to take a look at some slides along the way all right now you're not going to learn HTML or anything for that matter in five or 10 minutes I've actually seen videos called you know learn HTML in five minutes and and that's just absolute if you're going to be a web developer you have to be patient and you have to you have to really enjoy learning because you're going to be learning even when you land a good job you're going to be learning every single day so try and be patient try to follow along I know people can get a little aggravated with videos that are over like you know 25 minutes but you know if you if you're that impatient where you can't watch an hour-long course then you're probably in the wrong profession and I don't mean to sound harsh or anything but I don't want to scare anybody down the wrong path and I really do mean that wholeheartedly alright so enough with the preference let's go ahead and get started so what is HTML it stands for hypertext markup language and a lot of people just starting out don't realize that HTML is not a programming language at any level it's a markup language for creating web pages and documents ok HTML documents one of the key elements of a programming language is logic so you can have things like conditionals where you can say if this is true then do this HTML however doesn't have any of that hTML is used to just display in format elements of a web page that may be a text paragraph or a heading a bullet list or an image or many other things it's strictly presentational just try to remember that there's no logic there's no actual programming so an example of a programming language would be JavaScript or PHP or c-sharp these are intricate languages and they're responsible for things like connecting to a database you know for like an online store or something like that user login dynamic functionality things like that now with that said that doesn't make any programming language more important than HTML in fact if you're getting into web development HTML in at least in my opinion is much more important because hTML is the building block of the web every single site that you see outputs HTML to the browser no matter what kind of advanced programming it uses on the back end all right you can build a website using just HTML and CSS CSS of course as a styling language and we'll get into that in another video but you can have just an HTML site without any any JavaScript or any PHP or anything like that it will be purely presentational you can't have like an online store or anything with just HTML but you can have a basic business website with you know information about the company and so on now it is hotter these days to get a job with just HTML and CSS knowledge but you can do it there are still companies that are that are you know purchasing websites that are strictly presentational all right so I don't want to spend too much time on this stuff so let's move on to what we actually need to get started so to get started building websites you only really need two things you need a browser to view the HTML and you need a text editor to write the HTML now don't worry about what kind of computer you have if you're on Windows Mac or Linux it doesn't matter as long as you have these two things everything that I'm doing in this in a series and then this video is completely cross-platform so for a browser can be whatever you want I'd highly suggest Google Chrome it's the fastest and in my opinion it's the best for any web developer but of course you can use Firefox or Safari even edge just please for god sakes don't use internet explorer if you're using something less than Windows 10 please download a different browser all right so you can also use any text editor you want which one and which one is up to you you could even use Windows notepad but I wouldn't suggest it you want to use something with line numbers and syntax highlighting stuff like that I'm going to be using an editor called sublime text which is available for Windows Mac and Linux so we feel free to download it I'm going to show you where and how to download it I'm using sublime text because it's very simple it's very light when I'm working with other technologies and languages I usually use something called Adam or Visual Studio code but I think that those are overkill for what we're doing here so before we move on let's go ahead and install sublime text so that we can start writing HTML alright guys so you want to go to www.hsn if you want it if you want to use something else that's fine now this program is free to try if you want to keep using it that's just buying a license if you use it without a license it doesn't have any limitations or anything like that you're just going to get a pop up every once in a while that says you should probably buy a license alright so let's go ahead and download this I'm going to click the big download button here alright so once that's done we can go ahead and open it it's just going to be a simple Staller for windows and of course you can grab this for mac or linux so let's go through this default location is fine I'm going to choose to add it to the Explorer context menu what that will do is it'll allow us to right-click on an HTML file and say open it open with sublime text so we definitely want that checked and that we're just going to install alright so it should be all set let's click finish and now we should be able to open it up I'm just going to search for it down here my search bar if it opens and let's just see right here sublime text 3 ok there's also sublime text 2 but 3 obviously is the newer version alright so this is what a text editor looks like I'm not going to go through all the features I just want to strictly focus on HTML syntax so now that we have our editor installed we can go ahead and we can start to create our HTML file so one great thing about hTML is we don't need any kind of special server or hosting company to write and test HTML you can simply create a file right on your computer you can give it a dot HTML extension and you can open it up with your browser now when your site is ready to deploy to the Internet you will need to buy a domain name you'll need a hosting package and then you'll need to upload everything to your web host ok and I'll get into that in a later video but for now we can build our site or build our cheat sheet locally without that stuff so to create an HTML file it has to have an HTML extension you can call it whatever you want you just have to end it with dot HTML this will allow it to be displayed correctly in a web browser now one thing to remember that your home page should always be called index.html if you go to a domain like let's say W W something calm and you upload a file called index.html that's the file that's going to show on that root domain ok if you upload a file let's say about dot HTML that's going to show when you go to something calm slash about dot HTML so the index file will always be the root file of the home page unless of course you're messing with server settings and you change it but by default that's that's the behavior it's going to look at index.html alright guys so we're going to go ahead and create our first HTML file now I'm going to put the in a folder so I'm going to create a folder I'm going to call this HTML cheat sheet okay and then inside that folder let's create a new file by going to new text document and we're going to call this index dot HTML okay we'll just say yes we want to change the file extension and notice that mine has a chrome icon by default because Chrome is my default browser and that's what opens up the HTML file yours may be different now if you if you're using Windows you may have an issue where you don't see the dot HTML okay if you're not seeing that what you want to do is you want to go to view options change folder and search options all right you want to go to view and then down here you want to uncheck hide extensions for known file types okay you want to make sure that's unchecked and then click apply and then you're going to see the extension and it may say something like index.html dot txt just make sure you get rid of the dot text all right I'm sure most of you know that but just in case there's people that don't alright so what we want to do now is we want to open this with sublime text so we can actually just right click and say open with sublime text let me just bring it over it opened up on a different screen and that's going to open it up you can see up in the tab it says index.html now another thing you could have done is you could just go to file open and you could find that on your computer that HTML file and open it alright so now that we have that open what I'm going to do is just type in hello world here just text no tags or anything yet and you want to make sure you save it so you can either go to file save or you can just hit ctrl s which is what I would suggest it's much quicker and then it saves okay now what we want to do is open it up so let's go ahead and let's open it up with Chrome and that's the default so all I have to do is double click and then that's going to open it up in the Chrome browser and you can see it says hello world all right so even if we put just text in here with no HTML tags at all it's still going to show the text in the browser all right now what I'm going to do is just snap this to the edge here and then we're going to just going to open up sublime text on this side and I'm going to make sublime a little bit bigger than the browser for now just so we can see everything all the code and I just want to talk a little bit about HTML tags so when HTML tag is the basic building block of any webpage different tags format the way that information and text is displayed so element names are surrounded in angle brackets are greater than and less than symbols and tags usually come in pairs one to start tag ones an end tag we look over here we have a start tag the end tag and then we have content in between all right in this example here we have about us as the content of the text and it's surrounded in h1 tags which stands for heading 1 and I'm going to get into the specific tags later on all right here's another example with a paragraph tag and we just have the text this is a paragraph now notice with the BR tag here there's no opening and close it's just one tag this is called a self closing tag and these are basically tags that don't have any content within them okay notice that the slash is actually after the element ok so BR slash it's after and this is kind this is an XHTML style so we don't really need to do this in html5 you can if you want but you can just use just simply BR okay and BR is a line break tag so it's just basically going to push it down a line and there's no reason to have any content like this inside of a line break so that's why it's considered a self closing tag alright now there's a very specific structure to an HTML document so this is a quick diagram I just want to look at you'll see that we have everything is surrounded in HTML tags we have the start and ending tag inside that we have a head area and we have a body area now the head has nothing to do with the output that's in the browser the head has things like the page title it has things like links to CSS files and JavaScript files that you want to use metadata such as the description and keywords things like that the description and keywords are actually used by search engines like Google so that it knows some more information about what's what's actually on the web page alright and then in the body we have the actual markup that's going to display in the browser so headings text images things like that now this is an example of a very simple web page notice that we have the HTML tags the head the body we also have this thing at the top this is a doctype and it's not technically an HTML tag it's just a declaration and it should always be the first thing on the web page and what this does is it tells the browser what type of HTML this is actually written in now this is the standard doctype for html5 ok let's take a look at some of the other ones so as I said this is html5 if you were using HTML 4.0 point R 4.0 1 it would have to be a doctype like this and you start getting into different different types whether it's strict or transitional and it can get very complicated same thing with XHTML I'm not going to get into that because I don't want to confuse you guys we're going to just stick with html5 just know that other doc types are a lot more complicated alright guys so we're going to get started on the structure of our HTML document so I made this bigger so there's no no doubt that you guys can see this I'm going to get rid of the hello world here and like I said the first thing we want to put in here is the doctype so we want to put an angle bracket or a less span and then an exclamation and then we just want the word doctype usually in all caps and then HTML and then the closing bracket okay so this is the official doctype for html5 after that we want to put in our HTML tags ok that's going to wrap everything now notice in sublime when I think when I put the angle bracket and then when as soon as I hit the backslash or so I'm sorry a forward slash it actually gives us the ending tag automatically so we don't have to type it out all right another thing we can do is let's say for the head tag here we can just put the text head and click tab and it will give us both the beginning and the end tag all right so just a helpful shortcut in sublime and moat and most um text editors at that alright so in addition to the head we need the body so let's go ahead and put the body tags in alright now in the head all I want is the title so let's go ahead and do that and we'll say HTML can't spell cheatsheet save that and then over here I'm going to reload and notice there's nothing in the actual browser here because we have nothing in the body but if you look at the tab you'll see it says HTML cheat sheet ok so whatever we put in the title here is going to show in this tab now a lot of times when you're building websites you're going to want to see the exact source code that's running in the browser and for that we can do a control U and this is going to show us the exact HTML that's being parsed now what we're doing here is building us just a static HTML site so it's going to look exactly like this but when you're using languages like let's say PHP where you have dynamic programming that's kind of generating the HTML for you from variables and things like that this is very helpful because you can see the exact HTML that's being parsed and you can't see it in your actual code alright so another thing that is very helpful in chrome and other browsers is the developer tools so if we hit f12 we get this little console down here and there's different things here there's JavaScript console there's networking so you can see how what pages are loading and so on there's a lot of advanced stuff here but for now we're just going to look at the elements tab which just shows the HTML we don't have anything in the body but if we did we could hover over things and it'll actually give it a highlight up here which is very helpful and you can even edit stuff down here which I might get into later all right it's not going to stick if you get it down here but it will for you know until the page is refreshed so let's go back to our body over here and we're going to start to look at some tags so we're going to start with headings now before we go into tags I just want to mention comment so with HTML you can have these comments with the less than exclamation and then two hyphens and then let's give it just a comment we'll just say this is where our headings are going to go and then we want to end the comment with devil - and then greater than now this is not going to be parsed by the browser if I save this and reload you're not going to see it show up here because it's a comment ok it's treated as it's just for the the developer to see all right now when it comes to headings there's six different tags we can use we have H 1 through h6 all right so let's go ahead and put an h1 in here and I'm just going to say heading 1 and save and let's reload and notice that it gives it a bigger text ok so the browser by default has some core styling in it and an h1 is going to make the text bigger it's also going to add some padding around the edges so that you know but the next piece of content will be pushed down a little all right so that's an h1 and that's the biggest heading there is ok so let's take a look at an h2 so we'll say heading 2 and save that and you'll see that it's a little smaller notice the padding in between the two alright so what I'll do now is just copy this and let's do 3 4 5 6 ok so this will be an h3 4 5 & 6 this will be 3 4 5 & 6 and we're just going to change these as well all right now I want you guys to have this to look back on if you need it whoops 2 3 4 5 & 6 all right so let's go ahead and save and reload the browser and you'll see the different sizes of the headings now you can change the sizes of these texts through CSS which you know we're going to get into probably in the next video of the series where we can change the font we can change the size whatever you'd like you could even make all these headings the same size through CSS all right so the next thing we're going to look at our paragraphs so to put a comment here we'll say paragraph and a paragraph is just P okay it's just a P tag now I'm going to give you a little hint in sublime if you ever want to generate dummy text which is just kind of just sample text to use for development you can actually just type in larom the word larom and then tab and that's going to give you some lorem ipsum now if you wanted a certain amount of words like let's say we wanted 10 words you could say warm 10 tab oops I guess you can't do that in sublime I actually haven't used sublime in a while I usually use atom or visual studio code and you can do that there I'm not sure why it doesn't work here but anyways we'll just generate some text and we'll save that and a paragraph just like the headings has some default styling okay so for one for one it has a display block which means it's a block level element so if we were to take another paragraph and go ahead and paste that in and reload you'll see that it's automatically on a new line it also has some margin okay it has I believe one eeehm of margin or one M and M is a measurement in CSS just like pixels except it's used for more responsive stuff so if we hit f12 and look at the developer tools I'm just going to make this a little bigger and we look down in elements now you can see we can hover over everything and it'll show us it up top and if we look at the paragraph here and I just click on it over here you'll actually see any CSS or any styling that is associated with this particular paragraph or whatever tag we're hovering over and when you see this user agent stylesheet this is the default browser styling so you can see a paragraph is displayed as a block so it's block level and then it actually has some default margin now I'm not going to talk about margin and padding and stuff too much in this video because this is strictly HTML margin and padding is CSS okay so this is going to be very little to no CSS in this video but just know that margin is spacing around the element okay and you'll see that there's this before and after is actually the top and bottom so that's why you see this space right here it's actually 1m okay or 1 a.m. which is a measurement in CSS so we do have margin on the top and bottom by default okay and then zero pixels on the start and end which is the left and right of the paragraph and it even gives us a little diagram here you'll see we have the power graph and if you look up in the body it shows it highlighted padding which there isn't any border and then the margin and you actually see the margin highlighted up above okay so this is really helpful again I couldn't imagine doing web development without without the chrome tools now tags can either be in line or block level element so inline tags or inline elements do not start a new line when you use okay they take only the necessary with they need block level elements however start a new line and they take the full width of that line so if this is confusing don't worry about it I will give you some examples block level elements include tags like div heading or heading sorry h1 through h6 paragraphs form inline elements includes spans images links and I'm going to go over all this stuff in a little bit but just know that some tags are block level some are inline so let's go into our paragraph here and I'm going to add some other tags here okay and these are all going to be inline they're not going to make us start a new line when we use them so let's take a look at strong ok so strong is basically you want to surround something and say that this text should be strong in some way now by default it's going to be bold so if we save this and I reload you'll see that the text we surrounded the strong tags with is actually going to be bold by default but that doesn't necessarily mean that it has to be bold you can grab on to this from within your CSS and you can change the font size you can make it italic whatever you want to do just know that it's a semantic tag for for making the text stick out ok and this is usually this will usually replace the old bold tags which are not semantic at all and not recommended anymore okay same thing with e/m okay so ii m is for emphasized okay so let's surround this text right here with e/m and we'll save and reload and again by default it's going to be hopelessly put to space there by default it's going to be italic okay so you'll see right here but again you can grab on to this in CSS and you can change it to whatever style you want it just basically means that this part of the the document should be emphasized so this text should be emphasized alright so now let's take a look at links so what I'm going to do is I'll go let's go to the second paragraph here and let's say we want to wrap this text in a link to go to either another page on our site or an external website so a link is actually an a tag so let's say a and we're going to give it an attribute I'm going to talk attributes in a second okay but let's surround this text here all right and then if I save that and reload notice over here we now have this text as a link now the href attribute is going to be the location that we want this link to open and this could be either local it could be let's say if we had an about dot HTML page on our site or it could be external so if we want to put HTTP will say google.com and if I save that we go over here and we click on that link it's going to open google.com now notice it opens it on the same page usually when you have an external website you don't want the user to just leave your site like that so what you could do is you could add another attribute called target and one of the values for this is underscore blank and that's going to open up a new tab with this site so if we save reload and click this notice that Google opens on a new tab and we still have our site right here okay so it stops the user from having to leave your site okay and you usually only want to use target blank if it's an external site if you're going to another page on your website you don't want that to happen you don't want all these tabs opening up when you're just navigating the site so all HTML tags can have something called an attribute or multiple attributes and what they do is they provide more information about a certain element for instance the href provided in the link we just did we created an a tag with an href and what the href does is as you saw is it opens up or directs it to a certain location a certain website link okay we also provided the target attribute which is not required but it still allowed us to make it so that the link opened in another tab all right now attributes are always placed at the start tag and they're always formatted as key value pairs okay the actual attribute itself such as href our target as we saw that's the key and then whatever the value is all right so we have the attribute name or the attribute key and then the value now the value is always going to be in quotes you can use double quotes or single quotes I would suggest double quotes because that's that's usually what's used that's most popular alright guys so let's get back to our HTML so we're going to go below the paragraphs that we just created and now I'm going to show you something called a list okay so there's basically two kinds of Lists as an unordered list and an ordered list so let's start with an unordered list which is a UL tag so in the UL we need to have list items okay a list is basically like a bullet point a bullet point list so each list item is going to have an li tag and then in here we can put whatever we want let's just put the text list item 1 okay and then I'm just going to copy this and we'll go ahead and we'll put four of them in so say let's tie them one two three four and doesn't matter what you put inside here well let's go ahead and save that and reload and notice that we have bullet points now for our list items it also adds some default padding notice that this is pushed over by default and if we go ahead and open up our chrome tools and exit to make it a little bigger there we go so over here let's hover over ul and you'll see that there's actually some default styling from user Asian style sheet which is the basically just the browser default so it's displayed as a block okay it has a list style type of disk which you can change within the CSS if you want to have a different kind of bullet point it adds some margin okay actually yeah it adds margin before and after one one M and then also adds 40 pixels of padding on the start which is the left okay so it pushes it over 40 pixels and of course you can overwrite this from within your CSS if you want to change that you can also remove the bullet points you can do whatever you want as far as styling but that's we're not getting into that just yet alright so that is an unordered list now we also have an ordered list which is an oil tax so what I'll do is just copy this and I'm just going to change it to an oh L instead of a ul okay we'll save that reload and notice that the ordered list now gets rid of the bullet points and replaces it with the numbers okay so it'll automatically add numbers to your list now unordered lists are usually what's used for website navigation when you see a nav bar up at the top that's usually just an unordered list it's just styled so that the elements float you know float to this to the right they're displayed inline and it has some really nice background colors and things like that but the H as far as the HTML goes it's usually just a simple list all right so next thing we're going to look at our tables so let's put a comment here and we'll just say table so it's going to be a table tag all right and there's quite a few tags that go into building a table so we have a table and then we have a head an area for the heading and then an area for the table body so we say tea head okay and then we're going to have tea body now in the heading is where we're going to put the row that has like you know if we're going to have a name email and age column alright so these will be the headings of each columns so we're going to put a TR okay TR is table row and then each heading is going to have a th tag alright so this will be let's say name we'll put another one this will be email and let's say age okay so these are the headings now if I save this and reload this is what it's going to look like by default now I'm going to do something here because I don't want you guys to have to keep looking at the bottom of the screen so what I'm going to do is just put in a div right here with a style attribute you don't have to do this I just want to move this stuff down I'm just going to put a margin top of 500 pixels all right and that's just going to make it so that I can put this so you guys can look in the middle now not at the bottom alright so back to our table we have our tea head with our table row and our headings now we want another TR okay and this time we're not going to use th because these aren't headings anymore this is actual data so we're going to use TD okay so let's say we want to name just put my name and then we'll put another TD with an email we'll just say Brad add something calm and then we'll put age put 35 save that reload and now we have some data inside of our table okay and you're most likely going to have more than one row so what I'll do is copy that oops paste it in two times and let's just change the name up here we'll say John Doe say 45 and then change this will say Sara Williams and flips will make her 25 all right so we'll reload and now we have a couple names and again this is going to look very ugly because we're not we don't have any CSS whatsoever it's just HTML markup okay and this is what a default table looks like now the way that we build HTML websites has changed along the way along the past few years okay we used to use tables to actually create website layouts for instance you have a sidebar and then the main area and then another sidebar and that could actually be a table with a couple columns that is not recommended anymore you don't want to use tables for anything for your layout you want to use tables for tabular data only so if you have like a list of customers with their names and info like this that's fine to use a table but do not use it for your layout you want to use CSS for your website layout all right that that's very 1999 ish to use tables for layouts okay and there's there's little rules like that that they're not enforced by the browser per se or by the technology but it's just there's a right and a wrong way to do things and I'm a big advocate for you know doing things differently and not everyone not being the same but just some things are just wrong and using tabular using tables for for a layout is wrong all right so now we're going to move on to forms okay which you see a lot of on the internet now the important thing to know about forms is that with HTML we can create the actual look of the form but we can't add functionality to the forum with HTML for instance a login form you can build the actual look of the form of HTML but to actually make it function you need to have something like PHP or some other programming language with dynamic functionality all right so we're only covering the look of the form so we're going to put in a form tag all right now usually with a form you'll see an attribute called action and that's going to basically submit the form to a certain page for instance a PHP page so let's say it was going to go to a file called processed PHP on our server and maybe that would be a newsletter form or a register form something like that you'll also see method and Method is usually going to be post or a form this meaning that we're making a post request to the server and posts are used to do things like add data to a database stuff like that it's it's it's pretty secure as opposed to get which is going to submit it and with a get request you'll actually see the data filled in in the URL and it's not very safe but it's fine for things like search things where you're not actually adding data or something to a server alright but that's a lot more advanced we're not going to get into that now ok I will leave this here but just know that this is this has to do with more advanced server-side programming so in our form let's go ahead and let's add a label ok so we're going to have a couple inputs we're going to put a label for I would say first name all right and then under that let's put an input tag so an input is going to have an attribute called type because there's a lot of different inputs this is actually going to be a text input okay which is probably the most common and then the name attribute has to do with again server-side programming if we were submitting this to a PHP file this name attribute is how we would grab the value of this form that's submitted ok so it's not going to make any difference to us what we put here but I'm just going to put first - name alright so let's go ahead and save that reload and this is what we get now this is awfully close to the table so I'm going to do is put a line break here usually two separate things like this we would use CSS but I'm not getting into CSS yet so let's just put a line break that's going to push it down a little bit all right we also have an HR tag which I haven't talked about yet which is a horizontal rule and that gives us kind of a line in our brows in our page so if I reload you'll see we now have a line that goes across the page I'm just going to put another BR under it as well all right so just separates allows us to separate things so let's create another field here on our form let's do a last name so what I'll do is copy this and let's just change this to last name name last name actually you know what usually what I do here is use camel case so we'll go like this instead of the - camel case is basically starting it with a lower case and then every other word every word after that is going to be upper case so now we have a first name and a last name if I reload you'll see it down here now labels and inputs of both inline that's why they're on the same line here and they only take up the amount of width that that element takes up usually you'll have form form fields you know on separate lines so what I'm going to do is wrap them in a div because remember divs are block level elements so that'll actually put it on the next line look alright so let's do that and then we'll put a div here wrap that around both the label and the input okay so now if we reload now they're on separate lines they're still pretty close together like I said we would use CSS to add some padding there but I'm just going to put a line break in between the two okay all right so let's look at some of the other types of field now you may want an email let's put a line break there so for email you could of course use text just change this you could use text but with each with html5 we now have a type that we can use called email and that'll actually add a little bit of validation without having to add any JavaScript to anything if we try to submit our form and it's not a valid email address and we have the type of email it's going to give us a little error that pops up all right so you want to use type email when you're dealing with an email address all right so let's say let's copy that and let's put let's say message so what I want to do here is I want to use a text area which is kind of like a bigger text input so for that we don't actually use an input tag there's an actual text area tag okay so we'll go like that and usually your text area if you're submitting to you know to a server-side file you'll have a name so we'll call it message all right we'll save that reload and now we have a text area okay and you can actually make it bigger and smaller with this little control here another field that that you'll see quite a bit is a select list okay so for that I'm just going to copy this div so let's say this is I don't know we'll just say gender I guess so let's say we want a select list to choose either male or female so we'll put a select we'll give it a name of gender okay now each select is going to have and it's going to have a couple options so that'll be the option tag and then usually you'll have a value associated with each option so let's say male okay and then the actual text to be displayed will go in here like that all right so let's save that's coming copy that and just to be politically correct we'll go ahead and do another so this will be female and this will be other all right so if we save that and reload now we have a little select list with male/female other for gender all right now we have a couple other few of field types that I want to show you but I'm just going to paste these in because they're kind of running out of time here so I'm going to go right under this div and I'm going to paste in a couple more so this is actually a number type so we're putting an age here with the type of number and it has a name and then I also added a value here because we can also add a predefined value to our inputs all right and then we also have the type of date okay so this is actually a date selector and these are these are html5 okay so these are both html5 standards so let's save that and reload and now if you have a number and actually has these arrows where we can switch we can make the number go up and down and then the date you'll see we have this date selector okay now like I said we can have a value we can put a value to anything we want here now before html5 if you wanted to have like for instance we'll put a value here and we'll just say let's say we wanted to say enter first name okay and reload usually you know before each shell five we would have to do this I'm going to use JavaScript to make it so that when we clicked in here this would go away okay and that was that was a real pain in the ass so with html5 they actually added a placeholder that we could use here okay so we'll say placeholder equals into first-name and now you'll see that it's grayed out and if I click in here we can actually replace it okay so that that made things a lot easier so the last thing we would need for the form is an input button so let's go down to the bottom here and what I'm going to do is put in an input and we're going to say type submit okay and we'll give it a name of submit and it's also going to need a value which is going to be the actual text of the button which will be submit all right so we'll reload and now we have a submit button okay it's going to put it's going to actually get submitted to processed PHP because that's what we put in the act of the forum but that doesn't actually exist okay now we can also have buttons outside of forms so let's go under the form I'm just going to put a comment here and there's a button tag okay so we'll put a button tag here and we'll just say click me now this isn't going to do anything if we reload it's going to show the button but it's not going to do anything because in order to hook up a button to actually do something you need to use JavaScript okay so what you would do is you would add an event like click equals and then you have some function but we're not going to get into that that's something for another video okay we're just focusing on HTML here and as you can see HTML isn't doesn't really do much as far as you know functionality and dynamic that that's why it's not a programming language it's a markup language that's just used to display stuff on the screen and then use other languages like JavaScript to make it dynamic alright so the next thing I want to look at our images or the image tag okay so for images we're going to use an IMG tag and this is actually a self closing tag we don't need to do slash image or anything like that you see it doesn't even sublime text doesn't even do it for us automatically alright now an image tag by itself means nothing because it doesn't know what image to load so let's go ahead and grab an image just going to search for sample image we'll grab this bird here okay whoops I mean to do that we'll just save it and I'm going to save it into where is this I think it's on my desktop yeah HTML cheat sheet and let's uh let's save it as just sample dot jpg all right and then what we'll do is go to our image and we'll say source ok source attribute and we're going to set this to the name of the image which is sample dot jpg all right and then we'll go back to our HTML reload and now we have the image now the reason it the reason it knows where to look is because this is actually in the same folder as our index.html so we don't have to put any folder names or anything here so what I'm going to do is open up our folder and you can see that it's in the same file in the same directory so usually when you build websites you'll have a folder called images or IMG or something like that and then you'll have your images inside there now if I reload we're going to it's not going to show the image because it doesn't it's looking in the root here but it's really in the images folder so what we would have to do is change the location here to go to images slash sample JPEG and we reload and now it's back all right now with images you should also use an alt attribute and basically what this does is if it can't find the image it's going to display whatever text is here so let's just say my sample image okay now if I if I save and reload we're not going to see any difference but if for some reason it can't find the image let's just change the name and save and reload now you'll see that it'll display the text so you see you have a way to kind of show what this image is even if it doesn't even if it doesn't load or it can't find it all right let's just change that back all right now there's also a width and height attribute you can use an HTML usually I would suggest using CSS to do this stuff but it is available so let's say we wanted this to be say 200 pixels and reload it'll change it to 200 pixels notice that images are also inline that's why it's not on a new line so what I'm going to do here is just put a line break have to put it up I put it below the image all right and notice that the height is set to auto okay so the height is Auto so the image still looks good but if you wanted to change the height up you could do that as well so let's say change it to 50 and reload and it'll distort it but it will change it to what you set it to but I'm just going to keep the height I'm just going to get rid of the height so it's Auto now if you wanted to you could wrap a link around the image let's put an A here alright and then you could actually point to the location of the image so we'll just grab this put that in the href and reload and now if I click on the image it's going to open it up in the browser okay browsers don't just open up HTML files they can open up other types such as an image all right so we're almost done with the basic HTML tags and I want to move on to html5 semantic tags but last thing I want to show you is quotations okay so we have different quotation elements we can use so it's a quotation and those are blockquote abbreviate and cite okay so let's start with blockquote and this is usually used just for that for some kind of quote so let's put in a blockquote tag and this takes an attribute called site and this is going to be from you know from where the quote comes from let's say it comes from traversing mediacom and we'll just put some sample text in here I'll say LARM tabs and we'll save that and you'll see that it does add a little bit of styling it gives it some padding and pushes it to the middle a little bit it's not going to show the actual site okay if we look at the source code it will so if we go down right here you'll see it does show it here all right and you can style this however you want from within CSS we also have the abbr tag or abbreviation tag so let's say we have a paragraph here and we'll say the I'll say the www is awesome all right now this we all know stands for World Wide Web so what I'm going to do is just wrap this in an ad BR tag and we're going to give it a title and we'll say World Wide Web okay so it's used for abbreviations so let's go ahead and save that reload and now notice that it has an underlined if we go when we hover it it'll show us the full the full title okay we also have a site tag AC ite so let's put another paragraph here and let's say HTML crash course by Brad Travis II okay and then we'll just wrap HTML crash course in a site tag okay we'll save that reload and it gives us this italic style here alright and it lets its semantic to let the browser know that this is something that's being cited alright so those are the basic HTML tags and elements now what I want to do is talk a little bit about html5 semantic tags so the html5 semantic tags clearly describe their meaning to both the browser and the developer so if we look over here these are the tags that were added and this is kind of a diagram of what you would use these for okay you use them to kind of lay out your website so if header which obviously would be the header usually have your logo things like that your social media links then we have the nav tag which would be your nav bar section okay section would describe like the copy text or something like that on your home page or whatever and then if you have like a blog you could have an article tag around each post in the blog a side has to do with just like sidebar content alright and then you have the footer which is going to be your you know your copyright or your your privacy policy links things like that okay so html5 created these tags to kind of structure your document even further alright guys so what we're going to do is we're going to create a new HTML page and we're going to use these html5 semantic tags map out our page so let's go to let's see HTML cheat sheet folder we have our index page where I'm going to create a new text document and I'm going to call this blog blog dot HTML okay so we'll say this is kind of a you know like a blog blog page or a news page something like that so let's open that up with sublime text just bring that over alright and just like with the index page we need to have our doctype our HTML head tags things like that now with sublime text is actually a shortcut we can do and that's to do HTML tab and it'll give us kind of a default structure so just a nice little shortcut now in the title let's just say we'll just say my blog alright we're going to add some other stuff in the head in a little bit as well but let's go ahead and start with our html5 semantic tags so first thing we're going to do is have a header alright and in the header we're just going to have an h1 and we'll just say my website okay again this is going to look very ugly because they're not using CSS but just structurally you want to have your header at the top all right then what we'll do is have a section okay so this would be like the the main area of the web of the page so if this were like an about page we could have a couple paragraphs about the company or whatever this is a blog blog page so what we're going to do is we're going to have some article tags and then in each article will be each blog post okay so let's go ahead and put in h3 here that would be that the title will just say blog post one alright and then another attack that I haven't showed you yet is the small tag and small is usually used for like create dates things like that just like sub content so let's just stay posted by Brad on July 17 okay so let's save that and take a look real quick so we're going to go up here in our browser and we're going to just change index.html to blog dot html' all right that's what it's going to look like and by default the small tags will actually make the text smaller so let's put the actual post which will put it inside of a paragraph so I'm going to type larom tab gives us some sample content all right and then usually on your main blog page you'll have more than one article what I'm going to do is I'm going to give this a class of post okay so each article will have a class of post and then let's just copy this and we'll just paste in a couple more okay this one will be blog post two and blog post three all right so if we save that reload now we have a couple of blog posts you may also have a link at the bottom of each one that goes to the full the full post so let's just put put an a tag and it would go to something like you know post dot HTML or something like that and then we'll say read more okay and then let's just copy that go one here and here all right and since a paragraph is a block level element it's going to go on to the next line even though an a tag is in line since the one before is a block level it's going to push it to the next line now you may want to have some kind of sidebar on your page with like let's say the blog post categories so what we'll do is go outside of the section and we're going to put an aside or a side whatever you want to call it okay and then in here let's say these are categories so we'll put an h3 will say categories and let's put a UL with some allies with some links so let's say this we'll just put these two go to a number sign which basically just means the same page we're on it's not going to go anywhere so we'll say category one will copy that and we'll say category two and three and we'll save it reload and now we have our categories now usually you'd use CSS to probably float these to the side rather than have them down here but that's something we'll get into later all right now usually when you have some kind of navigation you want to use the html5 nav tags so what we would do is just surround the UL in the navs okay and we can grab onto this within the CSS and style it if we want and then finally we're just going to have the footer so let's go outside of the aside and put in a footer tag and we're just going to put a power graph we'll say copy right now within HTML you also have these entities you can use our symbols and there's different codes for each one so for a copyright we can do ampere stamp copy semicolon and that will give us a copyright symbol all right we'll say 2017 and we'll just say my website okay we'll save it reload and now we have copyright 2017 my website as our footer all right now sometimes you may have more than one header and footer so it's a good idea to give these an ID or a class so in this case I'm going to give it an ID of just main header okay the same thing with the footer down here we'll give that an ID of main footer because some people might actually use for instance that the title of a blog post the title and date and stuff they might wrap that inside of a header it doesn't necessarily mean it has to be your your your main website header okay now I really don't want to get into CSS in this video but I will add just a couple simple styles to the header all right now when you're adding CSS usually you want to put in an external file but you can put it up in the in the head area inside of a style tag okay and you can let it know that this is going to be CSS this is not required the type you don't have to have this but sublime actually puts it by default and then in here let's say we want to grab on to the ID of main header so when ideas represent is represented with a number sign okay so we'll say id main - header I'm not going over this thoroughly because we will do this in the next video but for the main header let's say we want we want to align the text to the center let's say we want to add a background color of black okay since the background is black let's change the text color which is just going to be color and we'll change that to white and then I'm just going to add a little bit of padding around everything so we'll say 10 pixels so I'll save that reload and now we have a little website header all right we want to grab on to the footer remember we gave it an ID of main footer and all I'm going to do with that is just text aligned to the center and we'll just make the font size a little bigger all right don't worry about learning these styles yet we're going to go over all of this in the next video so let's save it reload and now our footer is centered all right the last thing I'm going to go over is the meta tags that you can use in your head area okay so when Google indexes your website or your webpages it's going to look at the description and it's going to look at your keywords things like that so let's go right under the title here and let's put in a meta tag now meta tags are going to have a name attribute so we're going to say this is the description of our page and then it's going to have a Content attribute which will be the actual content so let's just say awesome blog by traversing media okay so that's our description and then we can also add keywords so that would be another meta tag with the name of keywords okay it's going to have content and the content is going to be a comma separated list so we'll say web design web design blog web dev blog you might put your company name stuff like that alright and if we save that there's not going to be any difference from here if we look at the source code control you you'll see that now that stuff is added here and Google will actually look at that stuff when it scans your web site so the last thing I want to do is just link the two pages together teach eat and the blog area so what I'll do is put a link in the blog page see we'll go right under the header here and we'll just put to put an a tag and that's going to go to index.html and let's just say go to index all right so if we reload we have this go to index I click that that'll bring us here now let's go to index.html and we'll go to the very top right under the body and let's put an a tag and we'll say go to blog dot HTML and the text will say go to blog and then let's just put an HR underneath ok reload and now we can switch back and forth to our pages and that's how navigation is put together alright guys so I think we're going to stop here all that all this markup will be in the description allow the link to download the zip file hopefully you learned something from this and you enjoyed it like I said at the beginning of the video of yours if you're a subscriber of mine you probably already know all this stuff if you if you've watched the whole thing that's awesome thanks for that and that's it please subscribe if you like this I do you know much more advanced stuff so you'll learn much more and leave it a like if you liked it if you didn't like it go ahead and leave it a dislike and I will see you in the next video

Channel: Traversy Media

Views: 5,040,810

Rating: 4.9609041 out of 5

Keywords: html, html for beginners, html tutorial, html tutorial for beginners, learn html, html crash course, html5, html css

Id: UB1O30fR-EE

Length: 60min 42sec (3642 seconds)

Published: Mon Jul 17 2017