1 00:00:00,660 --> 00:00:04,560 Hello and welcome to this lecture in this lecture. 2 00:00:04,560 --> 00:00:11,250 We are going to be creating the structure for our app using hasty e-mail. 3 00:00:14,520 --> 00:00:22,340 So I have got my text editor open I am inside the index dot HMO file which is what I've highlighted. 4 00:00:22,410 --> 00:00:27,570 So this is where we'll create the structure for the app. 5 00:00:27,750 --> 00:00:35,070 The way this is gonna work what I'm going to do rather than you watch me type the code I would pre write 6 00:00:35,070 --> 00:00:42,250 the code and then explain what I have done all I want here. 7 00:00:42,300 --> 00:00:48,060 I have got a line of code here which is known as the declaration. 8 00:00:48,090 --> 00:00:52,370 This basically is the first thing you do in an HMO document. 9 00:00:52,470 --> 00:01:02,580 What this does is it notifies the web browser that the page they are about to view is in hasty AML five 10 00:01:03,030 --> 00:01:03,720 document 11 00:01:06,090 --> 00:01:09,300 line two and line four. 12 00:01:09,390 --> 00:01:12,030 They are hasty AML tags. 13 00:01:12,030 --> 00:01:15,690 So that's where the actual CML begins. 14 00:01:15,690 --> 00:01:23,010 So the content between these two tags here is what will be the HMO content. 15 00:01:23,190 --> 00:01:33,540 So in between this Haiti AML tags we will nest or the tax that will together build up the H2 CML content 16 00:01:35,580 --> 00:01:40,380 line to here just is the beginning of the HMO tag followed by the land. 17 00:01:40,380 --> 00:01:44,910 This is an attribute and the value is EHR which means English. 18 00:01:45,030 --> 00:01:54,000 So with attributes you need to enclose the values in quotes and every tag most tags should have an opening 19 00:01:54,270 --> 00:02:02,610 and closing the closing tag you can tell by the forward slash before the tag is closed. 20 00:02:02,610 --> 00:02:09,920 I have added some more code which is the head tag from line three here to line seven. 21 00:02:10,080 --> 00:02:15,840 You can see they are paired because you've got the dotted line under the closing and under the big opening 22 00:02:15,840 --> 00:02:16,200 tag. 23 00:02:16,710 --> 00:02:23,610 So this is the head tack most of the tags on information within the hair tag is not visible within the 24 00:02:23,610 --> 00:02:24,370 browser. 25 00:02:24,450 --> 00:02:32,640 That means visitors can't see them the only there for information purposes are also to help with search 26 00:02:32,640 --> 00:02:33,620 engines. 27 00:02:33,630 --> 00:02:34,010 All right. 28 00:02:34,020 --> 00:02:42,180 So inside the head hotel we've got a few member tags with attributes attached. 29 00:02:42,180 --> 00:02:49,770 So the first line on line for there we've caught the meta tag and we've got a motor car set the car 30 00:02:49,770 --> 00:02:54,290 set is the attribute and the value is UTF Dash 8. 31 00:02:54,290 --> 00:03:01,030 It's basically the type of encoding that is used in most web browser. 32 00:03:01,050 --> 00:03:07,800 So it's most characters are supported by the UTF Dash 8 is an encoding type. 33 00:03:07,800 --> 00:03:15,270 Line 5 here we've got a meter with a attribute of name the name. 34 00:03:15,270 --> 00:03:22,770 Basically it's the attribute and the value is viewport viewport basically refers to the screen size 35 00:03:23,160 --> 00:03:24,240 of any device. 36 00:03:24,240 --> 00:03:31,530 So what is saying here is that these this website or this app is adaptable to any screen size. 37 00:03:31,540 --> 00:03:38,010 So regardless of what device you're using to view you be able to fit it to the screen size. 38 00:03:38,010 --> 00:03:40,840 That's basically what I'm a five a C. 39 00:03:42,150 --> 00:03:42,960 OK. 40 00:03:43,110 --> 00:03:49,920 You can see the content you see the content equals to be with equals a device minus with. 41 00:03:49,950 --> 00:03:56,160 So basically what they're saying here is that regardless the content can be viewed regardless of the 42 00:03:56,160 --> 00:03:58,170 device with. 43 00:03:58,680 --> 00:03:59,010 OK. 44 00:03:59,040 --> 00:04:05,760 So whether the screen is small or large you can scale it and the initial scale here is 1.0 says here 45 00:04:05,760 --> 00:04:13,320 user scalable Yes I am as a user can scale or resize this screen to fit the app. 46 00:04:13,560 --> 00:04:14,140 OK. 47 00:04:14,340 --> 00:04:15,880 Line 6 here is this. 48 00:04:15,900 --> 00:04:18,110 This is if you have any reference for your style. 49 00:04:18,150 --> 00:04:19,910 This is where you need to include it. 50 00:04:19,920 --> 00:04:27,430 So this style it here plus the reference I've put here to this style shit. 51 00:04:27,810 --> 00:04:36,750 So I have had it the final chunk of code for the body tax or from line eight to line 15. 52 00:04:37,170 --> 00:04:41,820 So the body tag style from line 8 and in between the body tag. 53 00:04:41,820 --> 00:04:51,220 I have also nested some of the tag of missed out the closing body tag. 54 00:04:52,330 --> 00:04:52,920 OK. 55 00:04:53,070 --> 00:04:55,540 So that's the closing tag. 56 00:04:55,540 --> 00:04:56,640 I just say that. 57 00:04:57,160 --> 00:04:58,020 OK. 58 00:04:58,080 --> 00:05:05,940 So in between the body tag I have got all the nested tags so we've got the div the DB basically is used 59 00:05:05,940 --> 00:05:12,450 to divide a section of a page and I've given it an I.D. attribute equals to wrapper. 60 00:05:12,450 --> 00:05:17,190 The idea is useful because we use that to target that deed. 61 00:05:17,580 --> 00:05:25,960 During our CSA styling line 10 here basically is and hate one head in tag with a title to do list. 62 00:05:26,370 --> 00:05:28,590 Eleven is the input. 63 00:05:28,590 --> 00:05:31,670 This is where we will actually type the task. 64 00:05:31,770 --> 00:05:37,270 We want to do and I've given it an I.D. with a value of task. 65 00:05:37,290 --> 00:05:41,700 Again we'll use this idea for styling purposes later. 66 00:05:41,700 --> 00:05:48,920 I've also attached a button next to the input and the button I have given the button and I.D. is equal 67 00:05:48,950 --> 00:05:53,640 to and so this is where the button will click to add the task. 68 00:05:53,640 --> 00:05:56,300 Once we've done the input okay. 69 00:05:56,610 --> 00:06:01,660 And I've given the idea and attributes as well we'll use that to style as well. 70 00:06:01,890 --> 00:06:06,810 And here this is how you write a comment in Haiti AML. 71 00:06:06,810 --> 00:06:09,210 If you don't want it anything with a comment. 72 00:06:09,300 --> 00:06:11,090 The web browser will ignore. 73 00:06:11,340 --> 00:06:19,360 So you do a left angled bracket quote exclamation dash dash and then double dash and then right angle 74 00:06:19,360 --> 00:06:20,060 bracket. 75 00:06:20,200 --> 00:06:26,290 You can see is almost grayed out so anything with that the web browser will not run that piece of code. 76 00:06:26,300 --> 00:06:27,570 All right. 77 00:06:27,660 --> 00:06:32,910 Line 13 of creating another div here with div I.D. to dos this day. 78 00:06:32,910 --> 00:06:36,660 Here is where the to dos will be listed. 79 00:06:36,750 --> 00:06:40,950 Once we have set it up properly they'll be listed inside this div. 80 00:06:40,950 --> 00:06:41,860 All right. 81 00:06:41,900 --> 00:06:43,160 Line eleven. 82 00:06:43,200 --> 00:06:44,430 We've got a script tag. 83 00:06:44,470 --> 00:06:47,880 So this is where we will this javascript file created. 84 00:06:47,880 --> 00:06:54,240 Here we are making reference to it inside our CML document to any script. 85 00:06:54,240 --> 00:06:54,930 All right. 86 00:06:55,080 --> 00:06:58,670 Which would be the script file would be reference from here. 87 00:06:58,790 --> 00:06:59,120 All right. 88 00:06:59,130 --> 00:07:02,420 So that's it for our HMO document. 89 00:07:02,520 --> 00:07:09,570 If I just say that I think I have already and let's run it so we can see what it looks like. 90 00:07:09,660 --> 00:07:11,630 So this is the project folder. 91 00:07:11,670 --> 00:07:20,630 I just open it up and double click to run the ECMO so we can see what the hasty email looks like. 92 00:07:20,670 --> 00:07:24,060 Let's just minimize that a bit. 93 00:07:24,060 --> 00:07:24,450 All right. 94 00:07:24,480 --> 00:07:27,150 So this is what our page looks like at the moment. 95 00:07:27,150 --> 00:07:30,880 This is where we're at the task and will input the task. 96 00:07:30,900 --> 00:07:32,970 And this is where we'll add it. 97 00:07:32,970 --> 00:07:41,730 So that's it for the structure in our next lecture will be building or styling this content to make 98 00:07:41,730 --> 00:07:44,650 it look a bit prettier using CSX. 99 00:07:44,670 --> 00:07:45,540 That's it. 100 00:07:45,540 --> 00:07:46,650 Thanks for watching. 101 00:07:46,650 --> 00:07:47,310 Bye for now.