1 00:00:02,220 --> 00:00:03,850 So let's get started 2 00:00:03,850 --> 00:00:06,800 and let's create our first website. 3 00:00:06,800 --> 00:00:09,330 And as you learned in the last lecture, 4 00:00:09,330 --> 00:00:13,780 that means that we basically now create our first HTML page 5 00:00:13,780 --> 00:00:17,450 because that in the end then is our website. 6 00:00:17,450 --> 00:00:19,420 It's the instructions for the browser, 7 00:00:19,420 --> 00:00:21,230 which the browser executes. 8 00:00:21,230 --> 00:00:24,290 Later, we might add more HTML pages 9 00:00:24,290 --> 00:00:26,120 because websites can be made up 10 00:00:26,120 --> 00:00:28,570 of more than one HTML page. 11 00:00:28,570 --> 00:00:31,490 But to get started, we're going to create one. 12 00:00:31,490 --> 00:00:35,390 Now here, I'm in an empty folder on macOS. 13 00:00:35,390 --> 00:00:38,650 As I said, you can also follow along on Windows or Linux. 14 00:00:38,650 --> 00:00:39,920 It does not matter. 15 00:00:39,920 --> 00:00:43,440 You just need some empty folder anywhere on your system. 16 00:00:43,440 --> 00:00:46,910 For example, on your desktop, create a new folder there, 17 00:00:46,910 --> 00:00:48,120 give it any name you want. 18 00:00:48,120 --> 00:00:50,350 And in that folder, 19 00:00:50,350 --> 00:00:53,010 we now want to create a new text file. 20 00:00:53,010 --> 00:00:57,430 Now I'm going to show it us for both macOS and Windows. 21 00:00:57,430 --> 00:00:58,930 Well, let me start with macOS. 22 00:01:00,060 --> 00:01:03,570 On macOS we can simply open up the text edit app, 23 00:01:03,570 --> 00:01:05,820 which is pre-installed, 24 00:01:05,820 --> 00:01:08,623 and there, I will create a new document. 25 00:01:10,200 --> 00:01:12,660 Now, this document might start 26 00:01:12,660 --> 00:01:15,420 in this rich text mode as it is for me, 27 00:01:15,420 --> 00:01:19,320 which you can tell by these strange things at the top here, 28 00:01:19,320 --> 00:01:20,920 simply click on format, 29 00:01:20,920 --> 00:01:24,680 make plain text or use the short cut you see here. 30 00:01:24,680 --> 00:01:27,950 We need a plain text document 31 00:01:27,950 --> 00:01:29,660 with no rich formatting, 32 00:01:29,660 --> 00:01:31,990 with no built in styling for the text. 33 00:01:31,990 --> 00:01:33,723 We need plain text. 34 00:01:34,930 --> 00:01:37,390 Then we can save this file, 35 00:01:37,390 --> 00:01:41,190 and save it to this empty folder you created. 36 00:01:41,190 --> 00:01:46,190 And then let's name it index.html, 37 00:01:46,420 --> 00:01:50,750 replace the .txt extension with .html 38 00:01:53,720 --> 00:01:56,010 Now, the name in front of the extension, 39 00:01:56,010 --> 00:01:58,810 index here, is generally up to you, 40 00:01:58,810 --> 00:02:00,920 and you can pick any name you want, 41 00:02:00,920 --> 00:02:04,470 but index is kind of a convention in web development 42 00:02:04,470 --> 00:02:08,600 for the main HTML document of your website. 43 00:02:08,600 --> 00:02:10,360 So for your main entry point 44 00:02:10,360 --> 00:02:12,540 for your starting page for example, 45 00:02:12,540 --> 00:02:15,620 you choose index as a name. 46 00:02:15,620 --> 00:02:19,365 And therefore we'll name this file index HTML. 47 00:02:19,365 --> 00:02:21,240 Save this. 48 00:02:21,240 --> 00:02:25,070 Then here confirmed this warning and use HTML. 49 00:02:25,070 --> 00:02:29,743 And we now got this HTML document added to this folder. 50 00:02:30,990 --> 00:02:34,200 Now on Windows, it's basically the same, 51 00:02:34,200 --> 00:02:36,500 make sure you have some empty folder, 52 00:02:36,500 --> 00:02:38,410 for example on your desktop. 53 00:02:38,410 --> 00:02:40,940 And then simply create a new text document 54 00:02:40,940 --> 00:02:43,040 by right clicking in there, 55 00:02:43,040 --> 00:02:47,160 choose New, entering this new text file. 56 00:02:47,160 --> 00:02:48,550 And here again, 57 00:02:48,550 --> 00:02:52,610 make sure you name this text file index.html 58 00:02:57,050 --> 00:03:00,470 Now, depending on your computer configuration, 59 00:03:00,470 --> 00:03:03,550 this might not really change the file extension 60 00:03:03,550 --> 00:03:07,460 because you might have file extensions disabled. 61 00:03:07,460 --> 00:03:08,750 If that's the case, 62 00:03:08,750 --> 00:03:13,110 make sure you enable them by clicking on the View menu 63 00:03:13,110 --> 00:03:16,500 in the Windows Explorer and check the box 64 00:03:16,500 --> 00:03:19,293 next to file name extensions. 65 00:03:20,511 --> 00:03:23,620 And once you did that, you should see the file extension 66 00:03:23,620 --> 00:03:25,910 of the text file you created. 67 00:03:25,910 --> 00:03:30,450 And if it's not .html and just .html, 68 00:03:30,450 --> 00:03:34,240 make sure you change it to .html 69 00:03:34,240 --> 00:03:36,850 It should not be .txt 70 00:03:36,850 --> 00:03:40,210 It should not be .html.txt, 71 00:03:40,210 --> 00:03:41,170 nothing like that. 72 00:03:41,170 --> 00:03:43,780 It should end with .html 73 00:03:43,780 --> 00:03:47,573 so that you have an index.html file there as well. 74 00:03:48,910 --> 00:03:52,320 Now, once you got that index HTML file, 75 00:03:52,320 --> 00:03:54,550 you should open it in an editor. 76 00:03:54,550 --> 00:03:59,010 So on macOS, I still have this text editor open, 77 00:03:59,010 --> 00:04:00,660 if you don't have that, 78 00:04:00,660 --> 00:04:02,880 right click on the file 79 00:04:02,880 --> 00:04:05,480 and choose open with TextEdit.app 80 00:04:07,610 --> 00:04:09,100 On Windows, 81 00:04:09,100 --> 00:04:11,800 also make sure you open it with a text editor 82 00:04:11,800 --> 00:04:13,600 by right clicking on it. 83 00:04:13,600 --> 00:04:16,700 And then also open it with Notepad 84 00:04:16,700 --> 00:04:19,500 so that you open this file for editing 85 00:04:19,500 --> 00:04:21,572 with a raw text editor. 86 00:04:26,070 --> 00:04:28,652 Now, once you did that, once you have that file open, 87 00:04:28,652 --> 00:04:32,940 we can start writing some HTML code in there, 88 00:04:32,940 --> 00:04:34,840 and I'm going to do this on macOS here, 89 00:04:34,840 --> 00:04:38,090 but it's exactly the same code on Windows. 90 00:04:38,090 --> 00:04:41,110 In that index HTML file, 91 00:04:41,110 --> 00:04:45,763 we want to add smaller than sign, then h1, 92 00:04:47,010 --> 00:04:48,950 then greater than sign. 93 00:04:48,950 --> 00:04:50,963 And then Hello World! 94 00:04:52,484 --> 00:04:57,153 and then smaller than, forward slash, h1, greater than. 95 00:04:58,970 --> 00:05:03,260 This is our first piece of HTML code. 96 00:05:03,260 --> 00:05:07,370 This strange syntax here, with the angle brackets, 97 00:05:07,370 --> 00:05:09,500 that is HTML code. 98 00:05:09,500 --> 00:05:12,160 To be precise, we call this thing here, 99 00:05:12,160 --> 00:05:15,890 this h1 thing, a HTML tag. 100 00:05:15,890 --> 00:05:19,700 The HTML language has a bunch of tags. 101 00:05:19,700 --> 00:05:21,460 They are all standardized. 102 00:05:21,460 --> 00:05:24,270 You can't come up with your own ones, of course, 103 00:05:24,270 --> 00:05:27,100 because the browser needs to be able to understand them, 104 00:05:27,100 --> 00:05:30,630 and they give different instructions to the browser. 105 00:05:30,630 --> 00:05:32,720 The h1 tag, for example, 106 00:05:32,720 --> 00:05:35,800 gives the browser the instruction that the content 107 00:05:35,800 --> 00:05:38,230 between the tags, 108 00:05:38,230 --> 00:05:41,610 between the so-called opening and closing tag, 109 00:05:41,610 --> 00:05:45,070 that the content between those tags should be treated 110 00:05:45,070 --> 00:05:49,340 as a main heading, so as a title. So to say. 111 00:05:49,340 --> 00:05:51,460 Just as in a Word document, 112 00:05:51,460 --> 00:05:54,563 you might have a main title on top of your document. 113 00:05:55,610 --> 00:05:56,730 So once you edit this, 114 00:05:56,730 --> 00:05:59,370 make sure you save the file with a shortcut, 115 00:05:59,370 --> 00:06:02,290 or by going to File, Save. 116 00:06:02,290 --> 00:06:04,040 And once it is saved, 117 00:06:04,040 --> 00:06:06,210 you should be able to double-click it 118 00:06:06,210 --> 00:06:09,370 to automatically open it in the browser. 119 00:06:09,370 --> 00:06:10,900 If that does not work, 120 00:06:10,900 --> 00:06:14,320 if it's not getting open in the browser automatically, 121 00:06:14,320 --> 00:06:18,250 you can always Open With, and then select a browser there, 122 00:06:18,250 --> 00:06:20,163 in my case, Google Chrome. 123 00:06:26,030 --> 00:06:29,160 And this now gives me this page, 124 00:06:29,160 --> 00:06:32,520 and I'm zooming in a bit here so that this is bigger. 125 00:06:32,520 --> 00:06:35,060 So here we see Hello World! 126 00:06:35,060 --> 00:06:38,640 And if we right click, enter the browser here, 127 00:06:38,640 --> 00:06:40,600 we can view the page source. 128 00:06:40,600 --> 00:06:43,490 So the source code the browser evaluated 129 00:06:43,490 --> 00:06:45,590 for bringing this to the screen. 130 00:06:45,590 --> 00:06:49,820 And here we see this HTML code, which we wrote. 131 00:06:49,820 --> 00:06:53,230 And that's our first very basic website. 132 00:06:53,230 --> 00:06:55,100 If we wanted to, 133 00:06:55,100 --> 00:06:58,050 we could now take this HTML file, 134 00:06:58,050 --> 00:07:00,420 upload it on some rented server, 135 00:07:00,420 --> 00:07:02,610 and see it out there in the web. 136 00:07:02,610 --> 00:07:06,400 Now we might not want to do that because the use 137 00:07:06,400 --> 00:07:09,270 of this website is kind of limited, I would argue. 138 00:07:09,270 --> 00:07:11,510 But still it's our first website, 139 00:07:11,510 --> 00:07:15,070 and day of an important first step. 140 00:07:15,070 --> 00:07:17,400 Now, if we quickly come back to this website, 141 00:07:17,400 --> 00:07:18,700 as we loaded it, 142 00:07:18,700 --> 00:07:20,960 it's interesting to take another look 143 00:07:20,960 --> 00:07:23,400 at the browser address bar. 144 00:07:23,400 --> 00:07:26,110 In the first course section, 145 00:07:26,110 --> 00:07:29,500 you'll learn that there you enter the address of a website, 146 00:07:29,500 --> 00:07:33,520 the domain or IP address, typically the domain. 147 00:07:33,520 --> 00:07:35,940 Here, we have neither of the two things 148 00:07:35,940 --> 00:07:39,770 instead in the end here I have the path to that file, 149 00:07:39,770 --> 00:07:41,740 to that website file. 150 00:07:41,740 --> 00:07:44,030 The reason for that is simply 151 00:07:44,030 --> 00:07:47,310 that at the moment we have no server at all. 152 00:07:47,310 --> 00:07:51,190 We're just opening this HTML file with the browser, 153 00:07:51,190 --> 00:07:52,460 which the browser, 154 00:07:52,460 --> 00:07:55,450 since it is a tool for displaying HTML code, 155 00:07:55,450 --> 00:07:56,720 is able to do. 156 00:07:56,720 --> 00:07:59,440 So that is something you can do locally on your machine. 157 00:07:59,440 --> 00:08:02,180 You can open HTML files with a browser, 158 00:08:02,180 --> 00:08:04,390 and it will display like a website, 159 00:08:04,390 --> 00:08:05,950 treat it like a website. 160 00:08:05,950 --> 00:08:07,370 But this page, 161 00:08:07,370 --> 00:08:11,160 this HTML page at the moment is not being served 162 00:08:11,160 --> 00:08:12,390 by some server. 163 00:08:12,390 --> 00:08:16,490 That's why we have neither an IP address nor a domain here 164 00:08:16,490 --> 00:08:18,320 in the browser address bar. 165 00:08:18,320 --> 00:08:20,480 That's just something I wanted to point out. 166 00:08:20,480 --> 00:08:23,910 Soon enough we will have a local development server, 167 00:08:23,910 --> 00:08:26,083 but at the moment we don't have that yet.