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