And welcome back!
In the last section we talked about the world wide web and the Internet and what the differences were
and then I promised you that we'd finally talk about some HTML, CSS, and Javascript.
So I've been vaguely referencing these files and just told you that they're simple text files for now
but what are they specifically.
Well initially if you remember we had Tim Berners-Lee, who created the very first website and this
Website uses
HTML, and HTML -
that's the first file over here, is a way for us to just write text on websites and these text on web
sites can also have these things called hyperlinks that can link to other parts of the website.
So that's what happened in 1991. 1991, we had a way for us to share documents and this can link to another
website,
another file, another research paper. But, as you can see it wasn't the prettiest.
So in 1995 - 1996 two technologies came into being.
One was CSS and one is Javascript.
Now what did they allow you to do?
Well CSS solved the problem of, well this is nice and all, but wouldn't it be nice if we had some visual
aspects we can toy around with this website, make it look pretty and then Javascript said, well you know
ideally we'll be able to have something like this website where you know I can click over here I can
'Shop Now', I can put in my credit card and get these fancy slippers and I can do all these interactive
things with my website.
So let's play around with this and try and incorporate from this basic HTML file to add some CSS, and
Javascript to this page.
The way we're going to do that is we're going to go into 'View', 'Developer', and 'Developer Tools'. you must
- you might remember this from our previous lessons.
So once you click on that you'll get this pop up at the bottom of the screen, for some of you might be
on the right side but it doesn't matter you'll get both things.
And we've seen this before and if you look at the top over here it says 'HTML'.
And that's it.
HTML is this, it's this file that has this weird syntax that describes how this web page should look in
text.
You can see over here, it says 'The World Wide Web'.
These are just text. On the right side,
over here, you'll see something called styles. So styles will actually let you add styles to the website,
as the name suggests and that's what CSS is.
If we click on 'HTML' here and actually, let's click on 'body' without knowing any CSS or anything, if we define
something like color, semicolon, and then let's go 'blue', it changes the text color to blue. Chrome lets you
play around with websites and actually inject some CSS into this HTML. Without knowing any CSS,
we can kind of play around, type in a letter and it will have a dropdown. So let's see over here if we
can do 'background-color', lets make it in our press tab and to do 'red', make the website really, really,
well, frankly, pretty ugly. But thats CSS right here - we've just added some CSS to this basic website.
Let's turn this red color off, because it is not pretty.
OK.
So HTML, text, and links, CSS, pretty colors.
Now how can we add some Javascript?
So remember we have three files over here.
Javascript came along and said these are great.
You know we have these beautiful text websites that link to other pages and we have CSS that, its, you
you can make websites really, really pretty.
But would it be nice to have some interactivity to have drop-down menus to make websites like they
are now, interactive.
We can actually do this again with the developer tools.
If you click on 'Console' over here, without knowing any bit of Javascript, for now, we're just going to
show you a simple Javascript line, and we're going to type in 'alert' and let's say "hi there!!!",
and I press enter and look at that.
We just made the very first website ever made, interactive with Javascript.
Now obviously this doesn't do anything, but hopefully this shows you where we were before
in 1991 to where we are now, websites that are interactive, full of Javascript CSS and of course HTML.
See you in the next one, bye.