1 00:00:00,210 --> 00:00:03,750 Hello, and welcome back to a very exciting section. 2 00:00:03,780 --> 00:00:04,620 Why is it exciting? 3 00:00:04,630 --> 00:00:11,340 Well, we finally get to code and we're going to start off by learning HTML and then finally building 4 00:00:11,340 --> 00:00:13,050 our very first website site. 5 00:00:14,190 --> 00:00:20,940 In order for us to get started, we need to set up our environment and we do that by let's open up Google 6 00:00:20,940 --> 00:00:24,720 Chrome and we're going to search for sublime text. 7 00:00:25,560 --> 00:00:29,620 This is a text editor that's a lot of developers use. 8 00:00:29,640 --> 00:00:31,810 I myself have used it for years. 9 00:00:31,830 --> 00:00:32,850 Absolutely love it. 10 00:00:33,210 --> 00:00:36,050 In your day to day job, you'll use something like this. 11 00:00:36,060 --> 00:00:37,770 I highly recommend sublime text. 12 00:00:38,400 --> 00:00:45,270 If you have a Mac, the version over here, if you have a PC running windows, you'll have the download 13 00:00:45,270 --> 00:00:46,290 link for Windows. 14 00:00:46,770 --> 00:00:50,820 So for me, I'm going to download for the Mac. 15 00:00:51,630 --> 00:00:56,490 And you can see here it's downloaded and I can drag it to my applications folder if I want. 16 00:00:56,850 --> 00:00:58,650 And where you can double click. 17 00:00:59,580 --> 00:01:03,360 And if this is your first time down on a sublime text, you get something like this, Steve. 18 00:01:03,780 --> 00:01:05,489 Give it permission to load. 19 00:01:05,940 --> 00:01:06,910 And there you go. 20 00:01:06,930 --> 00:01:09,060 We have sublime text. 21 00:01:09,810 --> 00:01:11,490 Now what is a text editor? 22 00:01:12,330 --> 00:01:18,360 A text editor is a program that allows us to write code. 23 00:01:18,510 --> 00:01:25,140 You can see over here on the right hand side of sublime text that it just says plain text so I can type 24 00:01:25,140 --> 00:01:26,370 anything that I want. 25 00:01:26,640 --> 00:01:35,090 And there's nothing much different than if you wrote this in word or a text file, but the power with 26 00:01:35,100 --> 00:01:39,480 a text editor, especially something like sublime that's geared towards coding. 27 00:01:39,690 --> 00:01:46,980 If you click on plain text here, you'll have a whole bunch of options of what type of code you're writing. 28 00:01:47,310 --> 00:01:49,710 So in our case, we're doing HTML. 29 00:01:50,070 --> 00:01:55,350 So if I click on HTML, nothing changes, except for the bottom part over here. 30 00:01:56,280 --> 00:02:01,320 But now if I type something, well, everything looks the same. 31 00:02:01,650 --> 00:02:03,690 But if I start typing a.m.. 32 00:02:04,890 --> 00:02:07,830 Well, actually recognize it and help with syntax. 33 00:02:08,070 --> 00:02:10,800 So here now if I write HTML. 34 00:02:11,770 --> 00:02:12,280 Look at that. 35 00:02:12,910 --> 00:02:14,530 Get a nice little color completion. 36 00:02:15,790 --> 00:02:22,250 So for us, for now, we're going to be writing all you can see over here that there's different options. 37 00:02:22,270 --> 00:02:26,230 There's where is it, there's excess JavaScript. 38 00:02:26,230 --> 00:02:27,280 We'll we'll learn later. 39 00:02:27,280 --> 00:02:30,010 So we're going to be using sublime text for this for now. 40 00:02:30,880 --> 00:02:35,670 Click on HTML and let's write our very first web page. 41 00:02:36,160 --> 00:02:42,800 In order for us to have a web page, we write a HTML, which stands for Hypertext Markup Language. 42 00:02:42,970 --> 00:02:44,160 So bear with me here. 43 00:02:44,170 --> 00:02:45,490 This is going to be new. 44 00:02:45,640 --> 00:02:50,200 But keep in mind that this is exactly what every single -- page has. 45 00:02:50,230 --> 00:02:55,450 These are the set of rules that all HTML files must follow, and it goes like this. 46 00:02:55,570 --> 00:03:02,170 We define a doc type, and don't worry, I'll get into what that means in the next video. 47 00:03:03,500 --> 00:03:09,620 Then we have HMO and we close these Stags HMO. 48 00:03:10,310 --> 00:03:13,850 The second part, we have a head and a closing head. 49 00:03:14,750 --> 00:03:18,170 You can see over here some patterns forming. 50 00:03:18,380 --> 00:03:22,740 Don't worry, I'll get back to these tags and explaining what they do in a bit. 51 00:03:23,630 --> 00:03:26,750 And then we also have body. 52 00:03:27,990 --> 00:03:31,770 And then closing tax and finally here in the head. 53 00:03:33,020 --> 00:03:34,340 We have something called. 54 00:03:35,160 --> 00:03:35,910 A title tag. 55 00:03:36,670 --> 00:03:36,930 OK. 56 00:03:37,860 --> 00:03:44,460 So this over here is the rule that every single extremophile must follow. 57 00:03:44,940 --> 00:03:51,510 Just looking at this right now without knowing any HMO, you can get an idea of what everything means. 58 00:03:51,510 --> 00:03:54,450 So HMO were defining that. 59 00:03:54,600 --> 00:03:55,590 This is an HMO. 60 00:03:56,460 --> 00:04:02,760 We're saying that this is the head of the HMO with the title, and we're saying that this is the body 61 00:04:03,240 --> 00:04:04,140 of the HMO. 62 00:04:04,830 --> 00:04:06,390 So let's try something here. 63 00:04:06,420 --> 00:04:07,710 Let's save this file. 64 00:04:09,420 --> 00:04:10,920 And we're going to save it. 65 00:04:10,980 --> 00:04:12,180 Let's do desktop. 66 00:04:13,830 --> 00:04:16,620 And we're going to call it index DOT. 67 00:04:17,100 --> 00:04:21,779 You can see that it's already completed the HTML syntax for us safe. 68 00:04:22,470 --> 00:04:24,930 And we have an index stuck in my file here. 69 00:04:25,350 --> 00:04:29,940 Let's drag this all the way down to our Google Chrome and open it up. 70 00:04:30,060 --> 00:04:35,580 And while nothing happens, but let's add a bit of text to it. 71 00:04:36,000 --> 00:04:41,460 So in the title, I'm going to say my first web site exclamation mark. 72 00:04:42,060 --> 00:04:44,280 And then in the body, I'm just going to put. 73 00:04:46,040 --> 00:04:48,260 Hello there. 74 00:04:49,560 --> 00:04:51,120 OK, so if I say this. 75 00:04:54,530 --> 00:05:00,770 And just to show you from now on, I'm going to be doing commands to save just a little bit faster. 76 00:05:01,220 --> 00:05:03,860 And now if I refresh this page. 77 00:05:05,630 --> 00:05:11,450 I have hello there, and you can see the power over here of what we just did. 78 00:05:11,840 --> 00:05:13,220 We have hello there. 79 00:05:13,550 --> 00:05:15,710 As the text, which is. 80 00:05:16,860 --> 00:05:23,130 In the body, and then we also have my first website as the title. 81 00:05:23,310 --> 00:05:29,220 And you can see over here in the file that we're referencing and that HTML on my desktop. 82 00:05:30,260 --> 00:05:36,890 So we can see here that we have HMO, we have the head, which we haven't really talked about yet, 83 00:05:36,890 --> 00:05:39,800 but we see that the titles in the head kind of like a header. 84 00:05:40,100 --> 00:05:45,740 And then we have the body, which by looking at this, we can assume that it's whatever shows up onto 85 00:05:45,740 --> 00:05:51,770 the web page before we expand on this and make it a little bit prettier because now it's just simple 86 00:05:51,770 --> 00:05:52,160 text. 87 00:05:52,340 --> 00:05:58,520 I want to reiterate the fact that what we've just done is very similar to what a server does. 88 00:05:59,090 --> 00:06:06,290 If we go back to our mock ups here, you remember that when we enter Google.com, the servers send us 89 00:06:06,290 --> 00:06:12,920 an email fallback when we move the index slot HDMI file all the way down to Google Chrome. 90 00:06:13,340 --> 00:06:14,320 That's what we just did. 91 00:06:14,330 --> 00:06:21,980 We mimicked a server and we gave it to the browser to load up the e-mail file. 92 00:06:21,980 --> 00:06:26,060 And because browsers are built to know what a simple files are. 93 00:06:26,660 --> 00:06:30,590 It can read the syntax and say, OK, yeah, this is the nature man. 94 00:06:30,920 --> 00:06:36,200 OK, you want my title to be my first website and you want my body to say hello there? 95 00:06:37,100 --> 00:06:37,700 That's perfect. 96 00:06:38,330 --> 00:06:43,340 These are the default H.M. rules that you'll see all the time. 97 00:06:43,640 --> 00:06:47,810 It is a little bit confusing at first, but this is it. 98 00:06:47,820 --> 00:06:51,180 You just have to remember that there is a tag. 99 00:06:51,410 --> 00:07:01,280 So an actual tag, a head tag, a title tag, a body tag, and these tags usually have an opening and 100 00:07:01,280 --> 00:07:01,850 a closing. 101 00:07:02,360 --> 00:07:06,770 There's some exception to this rule, and we'll get into that a little bit later on in the videos. 102 00:07:07,160 --> 00:07:08,720 But just remember this for now. 103 00:07:09,110 --> 00:07:14,060 So I want you to try creating your very first website and seeing how it works. 104 00:07:14,300 --> 00:07:20,060 And once you're done with that, I want to show you that sublime text actually has a nice shortcut, 105 00:07:20,060 --> 00:07:22,920 so you don't have to keep writing those tags over and over. 106 00:07:22,940 --> 00:07:27,410 So the way you do that is you type in a stamp now and then press the tab key. 107 00:07:28,530 --> 00:07:30,000 And it loads all this up for you. 108 00:07:30,120 --> 00:07:35,370 OK, so now that we've done this, I want you to go off and create your very first website. 109 00:07:35,550 --> 00:07:36,790 I know it's very, very simple. 110 00:07:36,810 --> 00:07:40,770 You can put whatever you want in the title and you can put whatever you want in the body. 111 00:07:40,950 --> 00:07:45,450 And in the next video, we're going to start expanding on our first website. 112 00:07:45,960 --> 00:07:46,920 I'll see you in the next one. 113 00:07:47,310 --> 00:07:47,640 Bye bye.