The absolute basics of HTML, CSS and JavaScript

okay so we're going to run through the absolute basics of what you need to know to be able to create websites using HTML CSS and JavaScript so let's get started I have here a completely empty folder and within this I want to put some kind of HTML file but to get started I'll just create a folder which I'll randomly named as website okay I'll open up this folder and in here now we want to put our HTML files and are supporting CSS and JavaScript files now just open your favorite editor in this case I'll use sublime text too and I'll drag in the whole folder into sublime so that I can get this tree where I can browse the files that I want to work with so I'll just fullscreen sublime so the first thing I'll do is that I have this empty file now and what I will do is just I will save this as index.html and you'll notice that now I now have this index.html file within the website folder so the thing with an HTML file is that it's just another text file it's just another file with the extension dot HTML so if you have a file which has the extension doc or docx that's a file that word understands so it's a convoluted text file that only word can open now an HTML file is a file that contains HTML that any text editor can open because it's just text but if you give a browser an HTML file then it will render a render it as a webpage so let's get started in actually creating the file the first thing we need to do is to supply a doctype now in explaining dog types we could make this quite convoluted but I'll just sort of glance over this and saying that this is due to the history of for example the browser Wars where HTML has been around for quite some time and browsers have decided to implement different features of HTML allow different types of things being done in HTML consequently we've come to the point where we need to specify what kind of standard we're following when we're creating the HTML document again glancing over this if you just specify this you just say doctype HTML then are actually exclamation point doctype HTML then what we're going to do is create a document that corresponds to the standard of html5 so before you find another reason to actually worry about this just ignore it for now and use doctype HTML so the first thing we'll do is that we'll just specify that this is a HTML document by creating the element HTML so in HTML we work with what is called elements so this is an element and this is a tag so this is the opening tag HTML and this is the closing tag HTML together they for the element of HTML this is the root node of the tree and an HTML document now what do I mean when I say tree well HTML documents are trees so we could say something like the root node of the document is HTML under under the root node of HTML or like the root of the tree we could put a branch which is called head and again under the root node of HTML we could put another branch which would be body so head and body are now referred to as children of the root node HTML within head we could put something like title which would then be a child of head which is a child of HTML so title now is not nested within body but body is only nested directly under HTML so head and body are sort of on the same level of nesting and these are siblings and now under body we could for example put h1 which is a header and we could put a P tag which is for a paragraph so now P and h1 are siblings and P is a child of body and h1 is a child of its parent body and body is the child of HTML so this is how we build HTML documents but this was just pseudocode what we actually write is something like this so this is the same thing again I have HTML and within the element HTML I put the head element as a sibling to the head element I put the body element so now we have two notes we have the root node and then we have the head node and we have the body node and within this I can put different stuff so let me just put title here uh my super fine website and close up title so you can see now that I'm doing this in two ways on line 3 I'm opening head and closing it on line 5 however on line 4 here I'm opening title and writing the contents of the title on the same line and then closing on the same line now these are both valid stop and think about this for a minute and consider why this is not valid note how I'm using indentation to show what is nested within what here we're opening a head here we're closing head here we're opening title and here we're closing title this is very hard to indent because it's incorrectly formatted because we're opening something we're opening a child which is titled within head but we're closing it outside of of head which doesn't make any sense so I need to close title in here again this could be written like so doesn't really matter but for the sake of brevity I'll just put it like this so what we have now is the absolute minimum that you would need to create it create an HTML document under the standard html5 if you try to do anything less than this you won't actually conform with the stand so if we save this now I'll go back to the folder and you can see that my index.html file has this little website symbol so if I double click it I'll open it in a browser and you can see here in the top that the title that I put in was my superfine web site and it shows up here in the tab however apart from this title you can see that we have nothing but an empty page so let's now actually put something into some content into this page so we talked about the h1 element before or the h1 tag so let's put something like this is my awesome title too much is awesome today so let's actually put this in as well there is the P element or the the paragraph tag this is a para that can end okay so having a look at this so what you can see now is that we get this title which by default has a larger font than this paragraph so we now have two tags like we have the h1 tag and we have the paragraph tag let's just quickly look at what happens if we input another paragraph this is so we have two P tags we'll look at this again and you can see that the first paragraph is on one line of the second paragraphs on another line so you can think of this as something like a paragraph in your regular text editor whether you're using word or OpenOffice or pages so whenever you hit enter this is like creating another paragraph tag a lot of people are taught to do something like this this is another paragraph of text and this is another line of X let's have a look at this here we are in the same paragraph but we are breaking the text of this paragraph so we are breaking on to another line because we have a paragraph tag and the paragraph and the ending paragraph tag here so the paragraph sort of encapsulates these two lines where in in these two lines we have this BR tag right which stands for break so paragraph and break so what this break tag would correspond to in a text editor is something like pressing shift enter in a lot of the text editors which means that you're sort of creating a fake paragraph you're breaking onto a new line but you're still in the same paragraph so generally if you're just working with text ignore this idea of BRS unless that's actually what you want to do and then just end the paragraph and and create a new one so now we have three lines of text the use of the BR tag opens up an interesting question where the BR tag was just one tag was just like an opening tag without a closing tag that gives us the understanding that there are elements that are built up of opening tags and closing tags and then there are self closing tags such as BR or HR which stands for horizontal rulers so saving this and having a look horizontal ruler just pulls a line from the left to the right just across the page right and if you think about this a horizontal ruler it doesn't really make any sense to have an opening and a closing for a horizontal ruler because a line is always a line you cannot really put anything into a line another tab which behaves this way is the image tag so I'll just grab an image from the awesome service which is called place kitten so if I do this I input the tag IMG and then give it the source of this URL then we get this awesome cat image right and if you think about this again it doesn't really make any sense to do something like this to close the image because what would I put here right the image is the image what would I put here so putting something inside an image is not a concern of HTML it's a concern of like an image editing program so image is also one of these tags that are self closing this however also brings up an interesting question what's up with this SRC equals ba ba ba ba ba this is the idea of attributes all of this is an attribute for the IMG tag so what we're saying is that if we if we delete this for a moment and think about we have an IMG tag right we say there is an image at this location in the page but if we just say this it doesn't really make any sense the browser goes okay there's an image but where's the image how can I find the image so we need to specify the SRC the source of the actual file so we're saying I had the IMG tag there I have an image and this is where you can find the image so this is the known as the property and this is known as the value so we specify this general form we specify some kind of property for the tag and say that this property equals some kind of value and generally we put this in quotation marks so that the HTML parser is not confused about what part belongs to the value okay but what if I wanted to put like a border around this image now in the old days what people would do is that they would add another attribute another property to the IMG tag and say something like border equals five you can try this out we can see that we actually get a border however we've sort of come to the point now where we realize that adding a border is actually a visual concern and this brings us in to the point where we need to discuss what is the concern of HTML and what is the concern of CSS so things we're talking about today is HTML and we're talking about CSS and we're talking about JavaScript so hTML is the markup language HTML defines the tree of the document what are the contents of this document HTML can be seen as of the entry point of this website CSS is the style of the website meaning what does it look like right what colors are there where are things positioned etc etc and JavaScript can be seen as the interactivity to some extent I mean you can achieve some interactivity just using HTML but the things that people do with JavaScript today are just absolutely crazy so you can see JavaScript as the as any more kind of complex interactivity that you do with the website without having to reload the page so how are these then connected well again the HTML can be seen as sort of the entry point of the website so what happens is that you load the browser loads the HTML file and the HTML file will point to a CSS file and point to a JavaScript file and then pull the contents of these files in and load them into the browser so that we can execute whatever styles are in whatever styles are in the CSS file and whatever code is in the JavaScript file so let's look at how we do this more concretely I'll just go into head and add the link tag and I'll just say link rel stylesheet HRF for like hyper reference and then I'll just assume I have a folder which is called style sheets and then I'll just say slash main dot CSS so I'm assuming I have this file which if you look at the source tree here I obviously don't so saving this file and going into the browser reloading I've removed the border before but now nothing happens because we don't actually have that CSS file what we could do to make this a bit interesting now I'm in chrome here but generally now all of the browser's have some some kind of developer tools probably this it originated from Firebug but I may be wrong on that so I'll just right-click and say inspect element to bring up the developer tools and then if I go to network to the network tab here and then reload the page what you can see is that the network tab now captures all of the requests that this page does so what first is that we get the index.html file and then we hit the point where we wanted to get the main dot CSS file but you can see this is red and you can see that the status that this is failed because obviously we didn't find the file because the file didn't mix it and then just out of curiosity we can see that we also get this place get an image file which is the the cat image up here so obviously now we need to actually add the CSS file so I assumed it was in a style sheets directory and the file name was main dot CSS so I'll just right click here and go new folder and create a folder called style sheets and right-click on this folder and go new file and I'll just directly save this as main dot CSS so expanding this tree you can now see that we have main dot CSS within the folder stylesheet switches within the folder website which is where index dot HTML resides so reloading this page now having a look at the network tab we can now see that we get a success for main dot CSS so we're actually loading in the file but nothing happens because there is no content within this main dot CSS file so let's just do something very basic here so that we can understand what CSS does so I'll just type in body and I'll say background : red let's refresh super red okay so let's briefly talk about CSS so what CSS does is that you define a selector I pick body which will look for something in your HTML file so if we say body here what we'll hit is that we'll hit this body here we'll hit this body tag here I would have typed h1 we would have hit this h1 if I would have typed P for paragraph we would have hit this P this P and this P so it's general for all of them but now I'm just saying body and we'll hit body then we have the same idea of having keys and values we have a property and we have a value so we're saying that we want the background property to : be read this is shorthand for saying background color red so of course I could say blue that would get blue so actually you would define these as something like this is how you regularly define colors using hex values or you can actually define colors using the RGB function so like 25 25 25 being another color or you could do that giving it an specifying RGB a which is RGB plus alpha so it's like saying red twenty-five green 25 blue 25 and then an alpha point 5 which would be half transparent so then we get the same color but semi-transparent anyways so when we say red it's just that some of these colors are predefined into words so then we can change the value but we could also change the key so we could instead of saying background we could actually say color now what that does is that it instead of changing the background color it changes the text color so now all the text within the page is red this brings us into the interesting point of cascading within styles so we said that the the color of body is red however body is here and since P is a child of body and h1 is a child of body and this P is a child of body then the rule saying that the color should be red cascades down from body into H on an into PE etc now this goes for some of the styles but not all of them so now we know how to connect CSS but then let's just do one more final thing which before we wrap this up we also want to connect the JavaScript so we do the same thing as here we do the same thing as with the stylesheet we make a connection within the headlock saying that we want to load a JavaScript file actually let me make a quick brief pause there and just talk about why we put this into the head block so please recall what I said before about the minimal tree of standards conforming html5 document is that we need to have HTML we need to have head and the head needs to define a title and then we need to have body this is the minimal document I'm sorry actually also we need doctype here and now the interesting thing to talk to talk about is why do we have head and why do we have body and what did we define in head and what do we define in body these are the two children of HTML we shouldn't define any other children directly under HTML we should define stuff either under head or under body right so the thing is under head we put like meta Compton and under body we put all the actual content right so under head we put the content about the content and under body we put the actual Conte so if you consider yourself doing a blog post right the blog post resides under body however under the head this is where we put the links to the style sheets and JavaScript files and maybe even some meta tags defining what kind of tags would apply to this document so sort of telling search engines what kind of content our page contains or we could define language I these are the kind of things that we would put into head however in body we would just put all the content all the stuff so in some sense as the rule of thumb this is the stuff about the page and this is the actual page this is the visual content okay so this is why we put the stylesheet within the head block so back to the JavaScript what we do is that we would just define another tag which is script and we'll say SRC and I'll assume again we have a folder which is Java scripts and I'll just say main JIS and then I need to close the script tag so please do note here that the javascript file is main dot j s I dot J is because it's a JavaScript file the stylesheets file is main dot CSS because it's a CSS file and of course this could be this could be whatever and this could be something different it's just that I chose these names because these are names I use sometimes so now we're loading in main J's let's just quickly go into the browser and look at the network's tab again and we can see now that we're trying to load in main J's but it fails on line 6 of HTML which is this line so what we'll do is that we'll just create the Java scripts folder JavaScript and in this folder out create a file which I'll save and call main J's so now we actually have a file we'll save that reload again and we can see that it now successfully loads so let's now do something interesting in this because for example just do console.log hello world from javascript this is something that you wouldn't want to put into any kind of public web site but console.log is something that we as developers can use to debug our pages to understand what's happening our javascript going back to this page moving to the console tab and then just reloading the page we can now see hello world from javascript so if we close this developers tab refresh again this console log statement sort of seems to do nothing because it's just something that we use as developers if we would use something that would be actually sensible for the user hello and welcome to mine about kiddos huzzah I'll close developer tab refresh the page and we now get this JavaScript alert whenever the page is loaded because as soon as the page loads we load our JavaScript and the JavaScript defines this alert call and this is the text that we put into the alert call so now we've successfully connected the JavaScript and you have all the power of the JavaScript I'll just comment out this line so that we won't be bothered by that annoying alert again so the very very very last thing I want to show you that I just briefly mentioned was the fact that you can put scripts and you can put style sheets directly into the HTML document now in 9 out of 10 cases if naughty more you want to put your resources in separate files so doing what we're doing here is a good idea generally it's a good idea but for you to have a deeper understanding of this I do want to show you that if we do add a separate script tag here open it up and then close it down everything between these two are actually considered to be JavaScript so we could say alert and then blow from inline JavaScript if I could type correctly and then run this we do get hello from inline JavaScript so we're running JavaScript directly from the HTML document which means that we could ignore loading this external file so we'll just remove that refresh again and we're still getting this alert but again the point of doing this is that in any non-trivial web site you have more than one HTML file which means that you would need to duplicate JavaScript between HTML files sometimes so these are not true these are preferences and if you're doing a one-pager than yes I mean you could of course do this but even if you're doing a one-pager I assume it would be sensible to rock your JavaScript in a separate file and then of course now we did this for JavaScript but you could also do this for CSS so if we would put a style tag here open up the style tag and close the style tag then everything between this opening tag at this closing tag is considered to be CSS so now if I would write a style for body and say something like background is blue save this and reload then the background color is now blue and the same thing goes for here if you have multiple HTML pages you generally have some kind of styles that you'd want to reuse between pages so doing this is not really a good idea and you could even do it worse than this what we could do is that we could add style as an attribute on an actual element so now we have h1 here for example then we could add the style property and give it some kind of value and the value here would be CSS so then we could say color for example and say green I'll say this refresh the blue color in the background disappeared because I've removed the style statement from the head but you can see now that the title is now green whereas these paragraphs are still red so so the color green style here applies directly on this h1 so this is known as inline styles and again I would HIGHLY advise against doing this unless you have a very specific understanding of why you are doing it so I think that sort of wraps up all the stuff that I wanted to get covered in this screencast and hopefully now you've gotten some kind of introduction and ready to conquer the world of HTML javascript and CSS thank you very much

Channel: Christopher Okhravi

Views: 449,993

Rating: 4.9157705 out of 5

Keywords: html, css, javascript, websites, basics, tutorial, screencast, introduction to html

Id: wrdR5Su_Stg

Length: 24min 20sec (1460 seconds)

Published: Thu Sep 26 2013