Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:00,590 --> 00:00:02,359 And welcome back! 2 00:00:02,360 --> 00:00:07,039 In the last section we talked about the world wide web and the Internet and what the differences were 3 00:00:07,040 --> 00:00:12,620 and then I promised you that we'd finally talk about some HTML, CSS, and Javascript. 4 00:00:12,770 --> 00:00:19,249 So I've been vaguely referencing these files and just told you that they're simple text files for now 5 00:00:19,250 --> 00:00:21,680 but what are they specifically. 6 00:00:21,980 --> 00:00:29,249 Well initially if you remember we had Tim Berners-Lee, who created the very first website and this 7 00:00:29,250 --> 00:00:30,460 Website uses 8 00:00:30,490 --> 00:00:33,150 HTML, and HTML - 9 00:00:33,240 --> 00:00:40,669 that's the first file over here, is a way for us to just write text on websites and these text on web 10 00:00:40,670 --> 00:00:47,400 sites can also have these things called hyperlinks that can link to other parts of the website. 11 00:00:47,740 --> 00:00:56,349 So that's what happened in 1991. 1991, we had a way for us to share documents and this can link to another 12 00:00:56,350 --> 00:00:56,990 website, 13 00:00:57,010 --> 00:01:02,220 another file, another research paper. But, as you can see it wasn't the prettiest. 14 00:01:02,410 --> 00:01:08,280 So in 1995 - 1996 two technologies came into being. 15 00:01:08,290 --> 00:01:11,690 One was CSS and one is Javascript. 16 00:01:11,800 --> 00:01:13,470 Now what did they allow you to do? 17 00:01:13,660 --> 00:01:21,549 Well CSS solved the problem of, well this is nice and all, but wouldn't it be nice if we had some visual 18 00:01:21,550 --> 00:01:28,630 aspects we can toy around with this website, make it look pretty and then Javascript said, well you know 19 00:01:28,660 --> 00:01:35,079 ideally we'll be able to have something like this website where you know I can click over here I can 20 00:01:35,080 --> 00:01:43,569 'Shop Now', I can put in my credit card and get these fancy slippers and I can do all these interactive 21 00:01:43,570 --> 00:01:44,700 things with my website. 22 00:01:45,320 --> 00:01:53,859 So let's play around with this and try and incorporate from this basic HTML file to add some CSS, and 23 00:01:53,860 --> 00:01:55,420 Javascript to this page. 24 00:01:55,550 --> 00:02:02,770 The way we're going to do that is we're going to go into 'View', 'Developer', and 'Developer Tools'. you must 25 00:02:02,800 --> 00:02:06,290 - you might remember this from our previous lessons. 26 00:02:07,760 --> 00:02:13,319 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 00:02:13,320 --> 00:02:17,100 on the right side but it doesn't matter you'll get both things. 28 00:02:17,130 --> 00:02:21,720 And we've seen this before and if you look at the top over here it says 'HTML'. 29 00:02:21,960 --> 00:02:22,490 And that's it. 30 00:02:22,590 --> 00:02:30,479 HTML is this, it's this file that has this weird syntax that describes how this web page should look in 31 00:02:30,480 --> 00:02:30,870 text. 32 00:02:30,871 --> 00:02:33,170 You can see over here, it says 'The World Wide Web'. 33 00:02:33,180 --> 00:02:35,609 These are just text. On the right side, 34 00:02:35,610 --> 00:02:43,860 over here, you'll see something called styles. So styles will actually let you add styles to the website, 35 00:02:44,010 --> 00:02:46,300 as the name suggests and that's what CSS is. 36 00:02:46,320 --> 00:02:55,640 If we click on 'HTML' here and actually, let's click on 'body' without knowing any CSS or anything, if we define 37 00:02:55,670 --> 00:03:06,389 something like color, semicolon, and then let's go 'blue', it changes the text color to blue. Chrome lets you 38 00:03:06,390 --> 00:03:14,440 play around with websites and actually inject some CSS into this HTML. Without knowing any CSS, 39 00:03:14,460 --> 00:03:19,769 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 00:03:19,770 --> 00:03:28,050 can do 'background-color', lets make it in our press tab and to do 'red', make the website really, really, 41 00:03:28,650 --> 00:03:35,769 well, frankly, pretty ugly. But thats CSS right here - we've just added some CSS to this basic website. 42 00:03:35,770 --> 00:03:39,260 Let's turn this red color off, because it is not pretty. 43 00:03:39,670 --> 00:03:40,060 OK. 44 00:03:40,210 --> 00:03:46,050 So HTML, text, and links, CSS, pretty colors. 45 00:03:46,110 --> 00:03:47,840 Now how can we add some Javascript? 46 00:03:47,850 --> 00:03:51,530 So remember we have three files over here. 47 00:03:51,630 --> 00:03:54,230 Javascript came along and said these are great. 48 00:03:54,270 --> 00:04:01,199 You know we have these beautiful text websites that link to other pages and we have CSS that, its, you 49 00:04:01,200 --> 00:04:03,389 you can make websites really, really pretty. 50 00:04:03,390 --> 00:04:08,279 But would it be nice to have some interactivity to have drop-down menus to make websites like they 51 00:04:08,280 --> 00:04:09,698 are now, interactive. 52 00:04:10,460 --> 00:04:13,939 We can actually do this again with the developer tools. 53 00:04:13,940 --> 00:04:19,760 If you click on 'Console' over here, without knowing any bit of Javascript, for now, we're just going to 54 00:04:20,030 --> 00:04:28,030 show you a simple Javascript line, and we're going to type in 'alert' and let's say "hi there!!!", 55 00:04:30,900 --> 00:04:35,190 and I press enter and look at that. 56 00:04:35,230 --> 00:04:42,309 We just made the very first website ever made, interactive with Javascript. 57 00:04:42,310 --> 00:04:47,940 Now obviously this doesn't do anything, but hopefully this shows you where we were before 58 00:04:48,810 --> 00:05:01,340 in 1991 to where we are now, websites that are interactive, full of Javascript CSS and of course HTML. 59 00:05:02,460 --> 00:05:03,800 See you in the next one, bye. 6571