1 00:00:00,600 --> 00:00:04,080 Hello and welcome to this lecture in this lecture. 2 00:00:04,470 --> 00:00:11,220 We are going to be creating the structure for our app, using hate HTML. 3 00:00:14,490 --> 00:00:17,480 So I have got my text ready to open. 4 00:00:17,490 --> 00:00:21,930 I am inside the indexed HMO font, which is what I've highlighted. 5 00:00:22,380 --> 00:00:27,030 So this is where we'll create the structure for the app. 6 00:00:27,690 --> 00:00:29,460 The way this is going to work. 7 00:00:29,760 --> 00:00:37,440 What I'm going to do rather than you watch me type the code, I will write the code and then explain 8 00:00:37,800 --> 00:00:39,030 what I have done. 9 00:00:41,200 --> 00:00:47,610 Line one here I have a line of code here, which is known as the declaration. 10 00:00:48,060 --> 00:00:51,960 This basically is the first thing you do in an HTML document. 11 00:00:52,350 --> 00:01:02,580 And what this does, it notifies the web browser that the page they are about to view is in his HTML5 12 00:01:02,970 --> 00:01:08,910 document, line two and Line four. 13 00:01:09,330 --> 00:01:11,700 They are paste HTML tags. 14 00:01:11,970 --> 00:01:15,180 So that's where the actual HTML begins. 15 00:01:15,630 --> 00:01:22,590 So the content between these two tags here is what will be the HTML content. 16 00:01:23,130 --> 00:01:33,510 So in between this HTML tags, we will nest. other tags that will together build up the HTML content 17 00:01:35,490 --> 00:01:40,300 line to here just is the beginning of the Haytham of Tag, followed by the link. 18 00:01:40,350 --> 00:01:44,730 This is an attribute and the values here, which means English. 19 00:01:44,970 --> 00:01:52,080 So with attributes, you need to include the values in quotes and every tag. 20 00:01:52,080 --> 00:01:54,960 Most tags should have an opening and the closing. 21 00:01:54,960 --> 00:02:00,690 The closing tag you can tell by the forward slash before the tag is closed. 22 00:02:02,520 --> 00:02:09,000 I have added some more code, which is the head tag from Line three here to line seven. 23 00:02:10,020 --> 00:02:15,840 You can see they are paired because you've got the dotted line on the closing and under the big opening 24 00:02:15,840 --> 00:02:16,170 tag. 25 00:02:16,650 --> 00:02:17,970 So this is a head tag. 26 00:02:17,970 --> 00:02:24,120 Most of the tags or information within the hash tag is not visible within the browser. 27 00:02:24,390 --> 00:02:26,430 That means visitors can't see them. 28 00:02:27,630 --> 00:02:33,090 They they're only there for information purposes and also to help with search engines. 29 00:02:33,540 --> 00:02:41,670 Alright, so inside the hash tag, we've got a few meta tags with attributes attached. 30 00:02:42,120 --> 00:02:49,860 So the first line on line for there, we've got the meta tag and we've got a comment, a concept because 31 00:02:49,860 --> 00:02:54,130 it is the attributes and the value is UTF eight. 32 00:02:54,150 --> 00:03:03,210 It's basically the type of encoding that is used in most web browsers, so it's most characters are 33 00:03:03,210 --> 00:03:05,430 supported by the UTB. 34 00:03:05,430 --> 00:03:08,430 Dash eight is an encoding type line five. 35 00:03:08,430 --> 00:03:15,240 Here we've got a meta with a attribute of name their name. 36 00:03:15,250 --> 00:03:18,870 Basically, it's the attribute and the value is viewport. 37 00:03:19,290 --> 00:03:24,270 Viewport basically refers to the screen size of any device. 38 00:03:24,270 --> 00:03:31,530 So what is seen here is that the this website or this app is adaptable to any screen size. 39 00:03:31,530 --> 00:03:37,920 So regardless of what device you're using to view, you'll be able to fit it to the screen size. 40 00:03:37,950 --> 00:03:40,380 That's basically what I'm five p saying. 41 00:03:42,120 --> 00:03:44,410 OK, you can see the content here. 42 00:03:44,880 --> 00:03:49,920 The content equals to the weight inclusive device minus width. 43 00:03:49,920 --> 00:03:56,160 So basically what they're saying here is that regardless, the content can be viewed regardless of the 44 00:03:56,160 --> 00:03:58,050 device with. 45 00:03:58,620 --> 00:04:02,310 OK, so whether the screen is small or large, you can scale it. 46 00:04:02,310 --> 00:04:07,260 And the initial scan his 1.0 says here use scalable system. 47 00:04:07,290 --> 00:04:13,320 As a user, I can scale or resize the screen to fit the app. 48 00:04:13,530 --> 00:04:15,830 OK, Line six, here is this. 49 00:04:15,840 --> 00:04:19,470 This is if you have any reference to your style sheet, this is where you need to include it. 50 00:04:19,860 --> 00:04:25,980 So this style sheet here, plus the reference I've put here to the stylesheet. 51 00:04:27,780 --> 00:04:32,790 So I have heard that the final chunk of code for the body tag. 52 00:04:32,790 --> 00:04:36,720 So from line eight to line 15. 53 00:04:37,140 --> 00:04:41,760 So the body tag style from lane eight and in-between the body tag. 54 00:04:41,760 --> 00:04:49,470 I have also nested some of the tag I've missed out the closing body tag. 55 00:04:52,560 --> 00:04:52,920 OK. 56 00:04:53,040 --> 00:04:54,530 So that's the closing body tag. 57 00:04:55,440 --> 00:04:56,580 I just say that. 58 00:04:57,090 --> 00:04:57,540 OK. 59 00:04:58,020 --> 00:05:00,000 So in between the body tag on. 60 00:05:00,080 --> 00:05:07,820 Have got other nested tags, so we've got to dig the deep basically is used to divide a section of a 61 00:05:07,820 --> 00:05:12,080 page and I've giving it an ID attribute equals to wrapper. 62 00:05:12,410 --> 00:05:21,320 The idea is useful because we use that to target native Chewie and ask this styling line 10 here. 63 00:05:21,380 --> 00:05:25,610 Basically, it's an H1 head in tag with a title to do list. 64 00:05:26,270 --> 00:05:28,100 11 is the input. 65 00:05:28,550 --> 00:05:31,610 This is where we will actually type the task. 66 00:05:31,700 --> 00:05:37,160 We want to do and I've given it an I.D. with a valley of Tusk. 67 00:05:37,190 --> 00:05:41,210 Again, we'll use this idea for styling purposes later. 68 00:05:41,600 --> 00:05:46,400 I've also attached a button next to the input and the button. 69 00:05:46,400 --> 00:05:49,520 I have given the pertinent ID equals to add. 70 00:05:49,940 --> 00:05:57,290 So this is where the bottom will click to add the task once we've done the input, OK, and I've given 71 00:05:57,290 --> 00:05:58,670 the idea and attribute as well. 72 00:05:58,910 --> 00:06:00,890 We'll use that to style as well. 73 00:06:01,790 --> 00:06:09,080 And here this is how you write a comment in HTML if you don't want anything with a comment. 74 00:06:09,230 --> 00:06:17,600 The web browser will ignore so you do a left angle bracket, quote, exclamation dash dash and then 75 00:06:17,600 --> 00:06:21,710 double dash and then write down go bracket so you can see almost grayed out. 76 00:06:21,710 --> 00:06:25,820 So anything with that the web browser will not run that piece of code. 77 00:06:26,330 --> 00:06:34,880 All right, the line 13 of created another div here would divide to dos this div here is where the to 78 00:06:34,880 --> 00:06:36,200 dos will be listed. 79 00:06:36,650 --> 00:06:40,610 Once we've set it up properly, they'll be listed inside this Steve. 80 00:06:40,880 --> 00:06:43,160 All right, line 11. 81 00:06:43,160 --> 00:06:48,200 We've got a script tag, so this is where we will this JavaScript file created here. 82 00:06:48,770 --> 00:06:55,640 We are making reference to it inside our HTML document, so any script will write what would be the 83 00:06:55,640 --> 00:06:58,190 script file would be reference from here. 84 00:06:58,760 --> 00:07:02,060 All right, so that's it for this HTML document. 85 00:07:02,480 --> 00:07:05,690 If I just say that, I think I have already. 86 00:07:05,960 --> 00:07:08,630 And let's run it so we can see what it looks like. 87 00:07:09,620 --> 00:07:11,630 So this is the project folder. 88 00:07:11,630 --> 00:07:17,250 I just open it up and double click to run the HTML. 89 00:07:17,270 --> 00:07:19,550 So we can see what the hitman looks like. 90 00:07:20,630 --> 00:07:22,970 I just minimized that a bit. 91 00:07:23,960 --> 00:07:27,120 All right, so this is what our page looks like at the moment. 92 00:07:27,140 --> 00:07:32,210 This is where we are the task and will input the task, and this is where we'll add it. 93 00:07:32,900 --> 00:07:41,720 So that's it for this talk show in our next lecture will be built in or styling this content to make 94 00:07:41,720 --> 00:07:44,240 it look a bit prettier using CCIs. 95 00:07:44,600 --> 00:07:45,200 That's it. 96 00:07:45,500 --> 00:07:46,520 Thanks for watching. 97 00:07:46,550 --> 00:07:47,330 Bye for now.