Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:02,309 --> 00:00:04,823 In this video, we'll create a new project 2 2 00:00:04,823 --> 00:00:06,610 in Brackets and talk about 3 3 00:00:06,610 --> 00:00:10,110 the common structure of any HTML document. 4 4 00:00:12,379 --> 00:00:14,982 Let's start by creating an empty folder 5 5 00:00:14,982 --> 00:00:18,149 where we will put our first HTML file. 6 6 00:00:19,195 --> 00:00:23,520 I'll create this folder right here on my desktop. 7 7 00:00:23,520 --> 00:00:27,745 But you can create your working folder wherever you like. 8 8 00:00:27,745 --> 00:00:29,463 We'll call this one "blog post," 9 9 00:00:29,463 --> 00:00:32,987 because as I showed you before, we will start 10 10 00:00:32,987 --> 00:00:36,320 by building a simple blog post web page. 11 11 00:00:37,980 --> 00:00:40,418 I'll leave it empty and just leave it here. 12 12 00:00:40,418 --> 00:00:44,585 And now let's finally open up Brackets, just our coding. 13 13 00:00:50,546 --> 00:00:53,193 Now by clicking on this button here, 14 14 00:00:53,193 --> 00:00:56,690 we can open the folder we just created. 15 15 00:00:56,690 --> 00:01:00,777 So it's this blog post folder right here. 16 16 00:01:00,777 --> 00:01:04,376 Brackets now uses this folder as our project folder. 17 17 00:01:04,376 --> 00:01:07,092 So all files contained in this folder 18 18 00:01:07,092 --> 00:01:09,425 will be part of our project. 19 19 00:01:10,436 --> 00:01:13,083 Now we are able to create an empty file. 20 20 00:01:13,083 --> 00:01:17,250 And for that, just hit the File menu and then New. 21 21 00:01:18,210 --> 00:01:20,206 And that's it. 22 22 00:01:20,206 --> 00:01:21,206 Very simple. 23 23 00:01:22,064 --> 00:01:25,036 Now let's save it, and give it a name. 24 24 00:01:25,036 --> 00:01:27,757 File, Save. 25 25 00:01:27,757 --> 00:01:30,924 And we're going to call it index.html. 26 26 00:01:32,644 --> 00:01:36,811 So that the computer recognizes it as an HTML document. 27 27 00:01:37,998 --> 00:01:40,576 Index.html is a standard name for 28 28 00:01:40,576 --> 00:01:43,409 the main HTML file of any project. 29 29 00:01:46,056 --> 00:01:49,028 So as I mentioned before, HTML documents 30 30 00:01:49,028 --> 00:01:51,652 are described by elements. 31 31 00:01:51,652 --> 00:01:55,297 Now all HTML documents have a common structure 32 32 00:01:55,297 --> 00:01:59,454 where the HTML element is the first one, always. 33 33 00:01:59,454 --> 00:02:04,317 So we'll start with this one, HTML, and close it. 34 34 00:02:04,317 --> 00:02:07,591 And now, you see Brackets helps us here 35 35 00:02:07,591 --> 00:02:11,214 and closes the tag automatically for us. 36 36 00:02:11,214 --> 00:02:12,381 Pretty useful. 37 37 00:02:16,043 --> 00:02:18,273 Now inside the HTML element, 38 38 00:02:18,273 --> 00:02:22,081 there are always two key elements in every structure. 39 39 00:02:22,081 --> 00:02:24,440 It's the head and the body. 40 40 00:02:24,440 --> 00:02:28,109 These are the main components of any web page. 41 41 00:02:28,109 --> 00:02:31,859 So let's just put them into the HTML element. 42 42 00:02:32,822 --> 00:02:37,723 So head, and Brackets also helps us with this. 43 43 00:02:37,723 --> 00:02:41,763 It automatically recognized what we want to write. 44 44 00:02:41,763 --> 00:02:45,930 So now I just hit Return and close the tag. 45 45 00:02:46,825 --> 00:02:50,658 And like magic, the other closing tag appears. 46 46 00:02:51,682 --> 00:02:55,682 So the head and the same thing for the body tag. 47 47 00:02:58,358 --> 00:02:59,191 And save it. 48 48 00:02:59,191 --> 00:03:01,632 You can also hit Command S or Control S 49 49 00:03:01,632 --> 00:03:03,382 in a Windows machine. 50 50 00:03:05,138 --> 00:03:08,923 The head element can include a title for your web site. 51 51 00:03:08,923 --> 00:03:12,034 CSS styles, some information for the browser 52 52 00:03:12,034 --> 00:03:15,066 or for search engines and more. 53 53 00:03:15,066 --> 00:03:18,062 We'll work on all of that later. 54 54 00:03:18,062 --> 00:03:20,829 The body element is where all the visible stuff 55 55 00:03:20,829 --> 00:03:23,407 of your web page goes, like all the content 56 56 00:03:23,407 --> 00:03:27,574 such as text, links, images, lists, and many more elements. 57 57 00:03:29,458 --> 00:03:33,419 So just a very basic structure of an HTML document, 58 58 00:03:33,419 --> 00:03:36,159 but actually, there is one thing missing here, 59 59 00:03:36,159 --> 00:03:39,142 and that's the so-called doctype. 60 60 00:03:39,142 --> 00:03:42,332 The doctype declaration must be the very first thing 61 61 00:03:42,332 --> 00:03:47,092 in your HTML document, even before the HTML tag. 62 62 00:03:47,092 --> 00:03:49,259 So let's just put it here. 63 63 00:03:51,666 --> 00:03:53,082 It goes like this. 64 64 00:03:53,082 --> 00:03:54,249 Doctype... 65 65 00:03:58,444 --> 00:03:59,958 Sorry. 66 66 00:03:59,958 --> 00:04:03,625 Doctype then HTML. 67 67 00:04:05,368 --> 00:04:08,805 This is technically not an HTML element, 68 68 00:04:08,805 --> 00:04:11,545 but an instruction to the browser about what version 69 69 00:04:11,545 --> 00:04:14,703 of HTML the page is written in. 70 70 00:04:14,703 --> 00:04:17,489 So with this declaration, I just told the browser 71 71 00:04:17,489 --> 00:04:20,156 that this file will be an HTML5. 72 72 00:04:22,226 --> 00:04:25,040 And save our document again. 73 73 00:04:25,040 --> 00:04:27,004 And speaking of saving, 74 74 00:04:27,004 --> 00:04:31,004 let's install our very first Brackets extension. 75 75 00:04:32,879 --> 00:04:37,046 I will just hit this button here like I showed you before. 76 76 00:04:38,010 --> 00:04:40,512 And here clicking on the Available tag 77 77 00:04:40,512 --> 00:04:43,280 and we'll write "Autosave." 78 78 00:04:43,280 --> 00:04:46,780 This little extension takes care of saving 79 79 00:04:48,360 --> 00:04:50,519 all our files whenever we leave 80 80 00:04:50,519 --> 00:04:53,686 the Brackets up, which is very useful. 81 81 00:04:55,024 --> 00:04:56,974 So I already have it installed 82 82 00:04:56,974 --> 00:05:01,141 but you can just click here on this install button. 83 83 00:05:07,948 --> 00:05:08,781 Now we know how to create 84 84 00:05:08,781 --> 00:05:12,373 the basic structure of an HTML element. 85 85 00:05:12,373 --> 00:05:14,830 In the next video, we finally start to code 86 86 00:05:14,830 --> 00:05:18,330 some visible stuff for our first web page. 7297