Original subtitles

1

And welcome back!

2

In the last section we talked about the world wide web and the Internet and what the differences were

3

and then I promised you that we'd finally talk about some HTML, CSS, and Javascript.

4

So I've been vaguely referencing these files and just told you that they're simple text files for now

5

but what are they specifically.

6

Well initially if you remember we had Tim Berners-Lee, who created the very first website and this

7

Website uses

8

HTML, and HTML -

9

that's the first file over here, is a way for us to just write text on websites and these text on web

10

sites can also have these things called hyperlinks that can link to other parts of the website.

11

So that's what happened in 1991. 1991, we had a way for us to share documents and this can link to another

12

website,

13

another file, another research paper. But, as you can see it wasn't the prettiest.

14

So in 1995 - 1996 two technologies came into being.

15

One was CSS and one is Javascript.

16

Now what did they allow you to do?

17

Well CSS solved the problem of, well this is nice and all, but wouldn't it be nice if we had some visual

18

aspects we can toy around with this website, make it look pretty and then Javascript said, well you know

19

ideally we'll be able to have something like this website where you know I can click over here I can

20

'Shop Now', I can put in my credit card and get these fancy slippers and I can do all these interactive

21

things with my website.

22

So let's play around with this and try and incorporate from this basic HTML file to add some CSS, and

23

Javascript to this page.

24

The way we're going to do that is we're going to go into 'View', 'Developer', and 'Developer Tools'. you must

25

- you might remember this from our previous lessons.

26

So once you click on that you'll get this pop up at the bottom of the screen, for some of you might be

27

on the right side but it doesn't matter you'll get both things.

28

And we've seen this before and if you look at the top over here it says 'HTML'.

29

And that's it.

30

HTML is this, it's this file that has this weird syntax that describes how this web page should look in

31

text.

32

You can see over here, it says 'The World Wide Web'.

33

These are just text. On the right side,

34

over here, you'll see something called styles. So styles will actually let you add styles to the website,

35

as the name suggests and that's what CSS is.

36

If we click on 'HTML' here and actually, let's click on 'body' without knowing any CSS or anything, if we define

37

something like color, semicolon, and then let's go 'blue', it changes the text color to blue. Chrome lets you

38

play around with websites and actually inject some CSS into this HTML. Without knowing any CSS,

39

we can kind of play around, type in a letter and it will have a dropdown. So let's see over here if we

40

can do 'background-color', lets make it in our press tab and to do 'red', make the website really, really,

41

well, frankly, pretty ugly. But thats CSS right here - we've just added some CSS to this basic website.

42

Let's turn this red color off, because it is not pretty.

43

OK.

44

So HTML, text, and links, CSS, pretty colors.

45

Now how can we add some Javascript?

46

So remember we have three files over here.

47

Javascript came along and said these are great.

48

You know we have these beautiful text websites that link to other pages and we have CSS that, its, you

49

you can make websites really, really pretty.

50

But would it be nice to have some interactivity to have drop-down menus to make websites like they

51

are now, interactive.

52

We can actually do this again with the developer tools.

53

If you click on 'Console' over here, without knowing any bit of Javascript, for now, we're just going to

54

show you a simple Javascript line, and we're going to type in 'alert' and let's say "hi there!!!",

55

and I press enter and look at that.

56

We just made the very first website ever made, interactive with Javascript.

57

Now obviously this doesn't do anything, but hopefully this shows you where we were before

58

in 1991 to where we are now, websites that are interactive, full of Javascript CSS and of course HTML.

59

See you in the next one, bye.