HTML & CSS Crash Course Tutorial #2 - HTML Basics

okay then gang so now we hopefully understand the basics of what hTML is all about now I'd like to take a little bit of a deeper dive and explore a few of the different tags available to us to create these different websites so I've got open here the index dot HTML file from the last video and I'm going to right click and make sure I've got this open with the live server over here so right click open with live server and we should be able to see that now in the browser awesome ok so we've already seen these these are paragraph tags denoted by a P so we have the tag opening and closing at the end with the content inside it so we'd use a paragraph tag for most kinds of text on a page now the next tag I'd like to show you is something called a strong tag so what I'm going to do is surround this thing right here with a strong tag so if I say strong like this and then I'm going to cut this and paste it after ninjas then this right here is inside the strong tag and what a strong tag does is make something bold it means it's important in the eyes of the browser so if I save that in preview we can see that this is now bold awesome now another kind of tag a bit like strong that we can use is the PM tag so I'm going to surround this page word with eeehm like so and this basically means emphasize something and what the browser does when it sees something inside the e/m tag is it italicize --is that so if i save it and preview then we can see this is now in italics okay so one other that I'm going to do over here and that is the small tag so let me just do that first of all small the opening and closing tags surrounding this word first so I'll paste that in there and this means make this word a bit smaller now the difference is not overly noticeable but if you look closely you can see that this word is ever so slightly smaller maybe if i zoom it a little bit more you can notice that difference a little more so a very subtle effect okay so there's a few simple tags that we can use to give some basic kind of structure to our content now the next kind of tags I'm going to show you the heading tags now we have six different types of heading tags and they're represented by six different numbers one being the strongest and the biggest and six being the least important if you like so what I'm going to do is create the h1 tag so that means heading one and this is seen in the eyes of the browser as the most important heading so if I say something like heading one over here and save it then we're going to get a nice big heading like that nice and bold and big now I said we have six different types so if I do h2 and then heading two I'm also going to go to the next line and do h3 and h4 while I'm here so heading 3 and heading 4 and you just saw something then I did that was to say the tag name like h4 and then press tab that's just a little shortcut available to us inside of es code so if I hit a paragraph tag I could just type P and then tab and that creates this or if I wanted a stronger tag I just type strong tab and it creates that's how you could form it so that's nice so anyway these headings and let me save that and preview over here and you can see that these are getting smaller the larger the number so the larger the number the less important it is and that might seem like counterintuitive because you think a larger number is more important but it's not heading 1 or h1 that's the most important heading in the eyes of a browser and h6 which is the last one we can go down to that is the least important so you might use this for the site title and you might use this forest section in a webpage this for an article heading this for a sub navigation inside the article etc so then there are some different headings that we can use very simple tags again the next thing I'd like to show you is what's known as a ul and this stands for unordered list now inside the UL we don't just write random text like this we act we write a series of different tax and they are Li tax and each Li is a single list item so this UL unordered list is a wrapper for Li tax and inside the Li tags themselves we could say something like Yoshi and then I'll do another Li tag below that with Luigi inside it and then below that will say told I'm going to save this and preview and now we can see we can have this list right here with these little points or circles next to them so that is a UL unordered list and it's unordered because there's no 1 2 3 4 etc they're just bullet points but if I change this to an oh L that stands for ordered list and that actually puts numbers in front of them so we have 1 2 3 4 etc now now I'm going to change that back to ul by controls ed in twice or 3 times rather and save that so that's how we can do lists using HTML so another tag that we can use is the div tag and I know these are coming thick and fast at you by the way all of these different tags but don't worry you don't need to remember them all a good web developer is not made by remembering tags or remembering CSS styles later it's made by understanding so as long as you're understanding what I'm doing that's the important point if you ever need to remember something Google is your best friend I use it all the time because I'm constantly forgetting things so don't worry if you don't remember them all I don't expect you to there's going to be loads of practice later under the course with all of these different tags and you will eventually start to remember probably 70 or 80% of them anyway the div tag so this stands for division and it's normally used to divide content into sections or group together and contain other elements which belong together for example on this we could essentially have three sections we could have this as a section this as a section and this as a section so what we could do is surround all of those in details because they're their own divisions if you like so I could say give up here and then I'm going to cut that and paste at the bottom over here and remember we indent stuff like this just for readability so that is now it's on section inside a div tag a division I could do the same thing here so div and I'm going to come to the bottom and paste that in div right here and I'm going to highlight all of that and press tab to move it in and then I'll do the same thing down here div and paste this at the bottom like so highlight all of this and scoot it in so that is a div they just kind of mark out different sections if you'll I can group them together inside a single element or division so this actually has no visual effect over here nothing's going to change all we're doing is grouping things together and these will come in handy later on when it comes to using CSS and reaching into our HTML to try and get hooks to different elements these will come in handy then so we'll see more of them in the future but since the release of html5 semantic tags which will also see later they're not needed as much now so you're probably going to see the use of this fade slowly and slowly as time goes on but people do still use them quite liberally now another thing you're also going to see inside HTML documents is the span tag so if I do a span down here and just write something inside it I could say I am a span tag like so and preview it over here and it says I am a span tag a bit like a paragraph tag but they don't behave the same way and we'll see why later on but span tags are basically a way to add a CSS or JavaScript hook into a part of text or HTML and we're going to see that in action later on in the course for now just know we can also use these span tags to surround content as well now all of these different elements that we've seen so far they've been comprised of an opening tag and a closing tag opening closing opening closing etc but some elements are made up of only one tag with no content jammed in between them an example of this is the so let me show you this I'm going to come to this thing over here and place the BR tag just before spun right there and what this does is cause a line break so oops it's going to enter on to the next line inside the browser so if I save that and preview we can see right here where we place the BR it goes to a new line so that's what the BR tag does and it doesn't need a closing tag like /b art like so because there's no content inside it all it needs is a single tag we only have opening and closing tags generally when we need to put content inside them so that's one type of tag which doesn't have a closing tag and another type is the HR tag so I could come down here and say HR that stands for horizontal rule and if I save this in preview we can see down here we have this gigantic line at the bottom it's a rule it separates content now also with these tags where they don't have a closing tag you might see some people do one of these inside the tags themselves that makes them self closing and we used to have to do this but we don't have to do this anymore with the html5 specification the current specification of HTML but I just wanted to make you aware in case you see that in other people's code so then another example of a tag that doesn't have a closing tag is the image tag so I'm going to say image like so now this itself is not going to do much in the browser in fact nothing shows at all and that's because we've not said what image that we want to actually show in the browser now to tell the browser that we have to use what's known as an attribute now an attribute is just something inside attack inside the angle brackets which gives more information to the browser about that tag so the attribute that we need in this case is a source attribute and that source attribute is going to tell the browser which image that we want to show in the browser so we set the source equal to something and that's going to be in either double or single quotes right here so this source has to be a path to the image that we want to use now I'm just gonna drag an image over here into the file tree that I want to use nice little nature and what I'm going to do is provide the path to that file relative to this file so that is just ninja dot PNG so now this image should show in the browser if I save it and scroll down over here we can see that ninja right there now I said that the path right here has to be relative so imagine now that instead of the image being right there we had a folder called image and we put all of our images inside this folder which a lot of people do when the creating websites now obviously this wouldn't work we wouldn't see this down here just an empty placeholder and that's because this doesn't exist we're looking for a ninja right here but the path now is inside the image folder so we need to say image forward slash ninja and that would work that means go inside image folder then get ninja inside that image folder so if we save it and preview now it works now if you're using the file protocol at the top and that was just double-clicking on an HTML file in your file explorer so it opens up in a browser then this way of working is going to be absolutely fine using relative URLs but if you're using a local server you could also add a forward slash they start to represent the roots of the project the root of this folder and then do the path from there right now it doesn't really matter which one we use so I'm just going to use relative paths like this so let's save it everything still works now another attribute that we should probably add to an image tag is going to be the alt attribute and that is going to be a value which will be used by screen readers which don't show images and it's basically a text representation of the image so we use this alt attribute to describe the image so things like screen readers so I'm just gonna say a picture of a ninja okay so we just do that for accessibility reasons really so that's not going to have any visual effect over here nothing changes it's just for accessibility okay so some other tags we have attributes like these things over here are at anchor tag and anchor tags are used to create links to or the pages or other websites so for example I could come up here to the top and inside the first div I'm going to now nest another tag which is going to be an anchor tag now if I press a and tab it creates that and it also creates this href attribute so this stands for hyperlink reference and it basically means what website do you want to go to when the user clicks the text inside this anchor tag so I'll just say something like HTTPS w-w-w dot the net ninja don't cut it you okay awesome website and I'll say the net ninja web site all right so if I save this now and preview and go to the top notice we have this link right here it's styled different automatically by the browser to look like a link so we know to click it and if I click it then it's going to go to this website over here so what if I want to create a link to another page on my website well first of all we'll need to create that page so I've got a new file and call this about dot HTML and then inside here what I'm going to do is just copy all of this stuff inside here ctrl a then ctrl C to copy go inside about and paste this in I'm going to delete a lot of this stuff here and I'm going to replace it all with an h1 and say about us okay so this is the about page really exciting stuff and now what I could do is another anchor tag down here which is going to link to that page and again I need to provide a relative path right here so relative to index it's in the same directory I can just say about HTML and that's where this anchor tag is going to link to so I can say about page right here save that and if I go to about page now it's going to go to this page right here so that's how we link between different pages inside a website so then let's have a look at some other different tags that accept attributes so the next one I'll show you is going to be a blockquote tag and this is basically used to quote something from another source or another website so I could say something like we are all in the gutter but some of us are looking at the stars and then over here I could add an attribute which is going to be site and this is going to be where we got this information on this quote from what was the original source so I could say something like HTTP www.and then Oscar Wilde site comm ok so that's how we cite another author or another person and add it into a block well now if we look at this in the browser it's going to look like this down here pretty simple and all it does is basically indent it to the right a little bit from the edge of the page that's how the block wall tag does now I'm going to show you one more attribute that we can use and that is going to be on AP tag down here and inside I'll just say style me like so and then the attribute is going to be style now we're venturing into CSS right here so don't worry too much about this right now I'm just giving you a very light introduction to this right here so inside here we can style what this looks like using a bit of CSS syntax I'm just gonna say color is going to be orange and again don't worry about what this looks like right now we're going to talk about all of this later on I'm just showing you this style attribute so this right here is going to make this text orange in the browser and if we come down here we can see that so these are a load of basic elements inside HTML and with everything we've learnt here you could probably create a full web page with just these tags now there's one more thing I'm going to show you actually and that is how to create comments inside an HTML page because sometimes we like to put headings above something to describe some content for us as a developer but the comments don't show up in the browser so when a developer views your code they can see your comments but not when they view in a browser so for example I could come down here and do a comment to say spun tag below and save it if I view this in a browser we don't see that but over here as a developer we can see this so a comment in HTML starts much like a normal tag then we have an exclamation mark then two dashes then the actual comment then two dashes again then a closing angle bracket now we can also use comments to comment out certain sections of code so if I wanted to I could add a comment right here like this I take the closing bit and paste it at the end of here and now we're coming to now this code so if I save it we're not going to see that span tag inside the browser anymore if we inspect though we should still be able to see that span tag right here okay but it's not showing in the browser because we've commented it out so that's sometimes good for testing out your code in a browser if you want to take chunks out and then put them back in and a shortcut for this if you want to say comment out a big block of stuff is to highlight it all then press ctrl and /and that comments all of that chunk out do the same thing again to uncomment it okay so that my friends everything that I've shown you so far in this video is probably now enough to make a very simple HTML document or a web page so we've learned some of the most common HTML tags a paragraph tag an anchor tag UL li image div and more and we've also seen what attributes inside these tags are there extra information about those tags for example we have a source attribute for images to say where the image is kept the path to that image we also have the href for anchor tags which says to the browser where we want to go when a user clicks on that link we have the site for block quotes and we have the alt for image tag so we've seen those as well and there's more attributes that we're going to use in the future not just these ones this was just a bit of an introduction to them we've also looked at how to leave comments on a page to either to comment out a bit of code if we don't want it to appear in the browser or just to add little instructions to ourselves or other developers when we're previewing the code so that's all the basics covered in the next video I want to take this one step further and start to look at forms in HTML

Channel: The Net Ninja

Views: 126,815

Keywords: html, css, html tutorial, css tutorial, html and css, html crash course, css crash course, crash course, tutorial, html for beginners, css for beginners, web development for beginners, web dev for beginners, web dev tutorial, html & css crash course, html basics, html introduction, html lessons

Id: mbeT8mpmtHA

Length: 19min 51sec (1191 seconds)

Published: Tue Jul 09 2019