1 00:00:00,630 --> 00:00:08,580 Hello and welcome to the part two of Crete in a busy hastier mode document structure. 2 00:00:09,060 --> 00:00:12,460 We are going to be using a text editor. 3 00:00:12,900 --> 00:00:17,570 And the text edit or be using is called brackets. 4 00:00:17,580 --> 00:00:22,250 I recommend you use Brackin so it's easier for you to follow along. 5 00:00:22,290 --> 00:00:30,810 In the example However if you haven't got brackets or if you've got a preferred text that it all you're 6 00:00:30,810 --> 00:00:31,720 used to. 7 00:00:31,920 --> 00:00:41,450 Please feel free to use that to open the brackets text that it'll just locate the icon. 8 00:00:41,450 --> 00:00:43,970 If you're a Mac go to your applications folder. 9 00:00:44,010 --> 00:00:46,580 If you're on windows go to programs. 10 00:00:46,620 --> 00:00:53,830 I think his CV icon for brackets just click to launch the application. 11 00:00:53,880 --> 00:01:04,410 If this is the first time you launch the brackets text editor installation it provides some sample code 12 00:01:04,530 --> 00:01:09,400 for you here just to illustrate how various parts of it work. 13 00:01:09,590 --> 00:01:10,640 But what we're going to do. 14 00:01:10,680 --> 00:01:18,950 I'm going to open up our project directory inside the text editor so I'm going to navigate to it. 15 00:01:18,990 --> 00:01:28,950 I'm going to click file folder and the folders on my desktop so I'm going to navigate to my projet for 16 00:01:28,950 --> 00:01:31,430 that which is this one here. 17 00:01:31,560 --> 00:01:33,310 This is what I want. 18 00:01:33,300 --> 00:01:38,510 I just click and will open it inside the text editor. 19 00:01:38,700 --> 00:01:47,400 So on the left pane here you can see my sub folders and my main projet folder. 20 00:01:47,400 --> 00:01:50,540 So if I expand for that here it is here. 21 00:01:50,550 --> 00:01:59,520 Got a couple of images in that folder so I'm going to create a new file and I'm going to save that file 22 00:01:59,910 --> 00:02:10,200 as an index or hastier mail any farm that's called deduct CML extension is treated as a web page or 23 00:02:10,380 --> 00:02:12,450 hastier mail document. 24 00:02:12,670 --> 00:02:23,310 Some want a good to file and click on you and you can see is giving in a new here and I'm going to click 25 00:02:23,310 --> 00:02:26,700 on save to save us. 26 00:02:27,090 --> 00:02:29,780 I'm going to save it into the root. 27 00:02:29,820 --> 00:02:42,170 This earache is a root and I'll call it index dot hastier mail and click save. 28 00:02:43,660 --> 00:02:48,310 So you can see on the title here he chose the name of the file. 29 00:02:48,320 --> 00:02:52,320 I've just created and can see ways got work on farms. 30 00:02:52,390 --> 00:02:58,840 He's got The File currently highlighted which means any file in this area is the file you're currently 31 00:02:59,080 --> 00:02:59,950 working on. 32 00:03:00,160 --> 00:03:03,120 So any code are right in here now. 33 00:03:03,130 --> 00:03:11,800 Will now be an e-mail code so that when the when I launch this with a web browser it will know that 34 00:03:11,860 --> 00:03:14,120 it's in his timal document. 35 00:03:14,170 --> 00:03:21,000 So the first thing you do in his mental comment is indicate the doctype. 36 00:03:21,010 --> 00:03:25,990 So do we do that to here less than symbol on your keyboard. 37 00:03:26,220 --> 00:03:28,140 An exclamation mark. 38 00:03:28,480 --> 00:03:31,510 And then you type in the Word doc type. 39 00:03:31,540 --> 00:03:38,730 You can make it lower case if you like it's not case sensitive and then you do a space and then in lower 40 00:03:38,760 --> 00:03:45,580 case you type in page to email and there you do a greater downside. 41 00:03:46,030 --> 00:03:53,970 So that's the very first line of code you write inside hastier mail document. 42 00:03:54,640 --> 00:03:57,420 So let's move on to the next line. 43 00:03:57,820 --> 00:04:03,550 So the next line here we are he can give a couple of spaces if you want. 44 00:04:03,550 --> 00:04:08,080 I'm going to now specify be his team I'll document. 45 00:04:08,350 --> 00:04:16,710 So you do that by again less than sign on your keyboard type hasty email and then a greater down side. 46 00:04:16,930 --> 00:04:20,760 Most tags have an aeroplane and a close in tag. 47 00:04:20,860 --> 00:04:28,000 One good thing about brackets is that it automatically also as the closing tag for you so you need to 48 00:04:28,000 --> 00:04:30,730 do just press and turn your keyboard. 49 00:04:31,020 --> 00:04:33,850 And that will separate them. 50 00:04:33,850 --> 00:04:42,950 So any code between the plane unclose in his term old tags will now be referred to as hastier mail documents 51 00:04:42,950 --> 00:04:49,190 or anything between these elements the opening and closing is treated as a web page. 52 00:04:49,270 --> 00:04:56,920 So next tab down and then we create the head section which is the head element. 53 00:04:57,010 --> 00:05:07,000 He's going to do less than sign your typing head being a greater than sign and it automatically places 54 00:05:07,150 --> 00:05:16,120 a closing element for you to just press enter till separate and in between the head element inside the 55 00:05:16,120 --> 00:05:16,920 head element. 56 00:05:17,140 --> 00:05:23,320 Here's where we're going to specify some other nested element. 57 00:05:23,840 --> 00:05:30,000 So I'm going to place some other elements between the head element in the next field. 58 00:05:30,020 --> 00:05:36,640 But before I wrap up this with you I just want to create the body element. 59 00:05:36,790 --> 00:05:46,900 So again the way you do that head to less than sine then time pimm body being a greater than sign. 60 00:05:47,040 --> 00:05:56,050 You can see automatically places close in tack and inside the body element is where will have some other 61 00:05:56,080 --> 00:05:56,630 elements. 62 00:05:56,680 --> 00:06:08,050 Any elements inside the body element is the content that the visit to the P will see any tags or element 63 00:06:08,110 --> 00:06:12,080 inside your head is shows for information purposes. 64 00:06:12,130 --> 00:06:13,560 He doesn't get displaced. 65 00:06:13,560 --> 00:06:15,190 Do deal live in a good display. 66 00:06:15,190 --> 00:06:21,870 If you have a title here the title will show when the page is rendered by the web browser. 67 00:06:21,880 --> 00:06:29,050 Just says you have the title here seen in text or email when the web browser launches this web page. 68 00:06:29,230 --> 00:06:36,070 It will have whatever title you've given to this page it will have it displayed in the web browser window 69 00:06:37,150 --> 00:06:47,380 so that's it for this part of the video in part 3 we all had more elements to the document structure. 70 00:06:47,650 --> 00:06:49,900 Thank you for watching and by now.