1 00:00:00,690 --> 00:00:09,180 Hello and welcome to this lecture in this lecture we are going to be creating the structure for our 2 00:00:09,180 --> 00:00:11,790 app using hitched PML. 3 00:00:12,870 --> 00:00:15,740 So this is our blank page CML. 4 00:00:15,750 --> 00:00:21,580 I've already written the hasty AML code for this for this project. 5 00:00:21,580 --> 00:00:29,520 So what I'm gonna do I'm gonna actually copy the code in and then explain each of the each line of code 6 00:00:29,520 --> 00:00:31,120 step by step. 7 00:00:31,200 --> 00:00:36,320 There'll be a lot easier than you watching me type. 8 00:00:36,320 --> 00:00:36,770 All right. 9 00:00:36,780 --> 00:00:40,540 This is the hasty e-mail for our project. 10 00:00:40,590 --> 00:00:42,930 So let me explain the code. 11 00:00:43,470 --> 00:00:50,690 So line 1 here is the very first thing you have to indicate in an page Tamil DOCUMENT. 12 00:00:50,790 --> 00:00:57,900 THIS IS THE DOC type which in which tells the web browser that the documents you are about to display 13 00:00:58,320 --> 00:01:01,130 isn't hasty e-mail five document. 14 00:01:02,310 --> 00:01:04,420 So that's what line 1 does. 15 00:01:04,740 --> 00:01:09,810 Line 2 is the beginning where the document naturally starts. 16 00:01:09,810 --> 00:01:19,310 So it begins with a hate UML tag and in between inside the tag I've added an attribute called Lang Basically 17 00:01:19,330 --> 00:01:22,550 that tells a browser what language this is. 18 00:01:22,560 --> 00:01:29,150 So the value is English which I specified with e when specify an attribute. 19 00:01:29,160 --> 00:01:33,900 You need to enclose the value in quotes as I've done here. 20 00:01:34,440 --> 00:01:40,590 So every tag most tags have an opening and closing tag. 21 00:01:40,590 --> 00:01:50,730 So this is the whole plane HMO tag on line to get the start of the Hey CML document line 22 is the end 22 00:01:50,730 --> 00:01:57,630 in tag which shows that anything between the heftier mouth tags is going to be rendered by the web browser 23 00:01:57,710 --> 00:01:59,860 as an hate e-mail document. 24 00:01:59,880 --> 00:02:03,810 That's what that means. 25 00:02:03,810 --> 00:02:12,040 Line three to line 12 is the head tank inside the head tag. 26 00:02:12,090 --> 00:02:21,180 You have various tags the information in the head tag is not visible you can't see it but the search 27 00:02:21,180 --> 00:02:31,170 engine uses that information to display data or to serve a request that someone's looking for. 28 00:02:31,170 --> 00:02:39,980 So we've got a few meter tags here inside the head and also notice how higher indented each of the code. 29 00:02:40,020 --> 00:02:42,000 So it tells you that the head 30 00:02:44,640 --> 00:02:54,780 and the body are children of a CML tag the metal tags are children of the head tag the link is a child 31 00:02:54,840 --> 00:02:56,140 of the head tag. 32 00:02:56,200 --> 00:02:58,410 Let me bring that up a bit. 33 00:02:58,410 --> 00:03:05,450 Also the page one tag all these ones are children of the body. 34 00:03:05,580 --> 00:03:11,950 So the indentation indicates who the parent is. 35 00:03:12,000 --> 00:03:16,610 All right the metal tag basically used for information purposes. 36 00:03:16,830 --> 00:03:21,160 This murder car set here basically the the. 37 00:03:21,220 --> 00:03:29,730 It's it's an attribute and the value is UTF 8 UTF Dash 8 basically is the standard Unicode and is all 38 00:03:29,730 --> 00:03:35,760 the characters that we're going to use are going to be readable by most or all web browsers so this 39 00:03:35,760 --> 00:03:42,550 UTF is a standard code that is title here indicates the title. 40 00:03:42,600 --> 00:03:52,320 So in case this title will show up on the web pages launched the maiden name here this again is another 41 00:03:52,320 --> 00:04:02,380 attribute where you can specify the value of description where and the to tag to attributes here what 42 00:04:02,400 --> 00:04:09,450 is the name for this metal tag which values description and then there's another idea here called content 43 00:04:09,990 --> 00:04:16,350 and the value is the name of my app or what my app does. 44 00:04:16,350 --> 00:04:22,650 So it's useful for these search engines in case someone's looking for an app that does something like 45 00:04:22,650 --> 00:04:31,800 that that will guide them to this page the meta tag on line seven hands call value an attribute of name 46 00:04:32,220 --> 00:04:33,540 and value of viewport. 47 00:04:33,540 --> 00:04:42,480 This basically enables this page to be viewed by any device either a mobile device or a tablet regardless 48 00:04:42,480 --> 00:04:49,760 of the screen size it will adapt to fit that screen size that's basically what this is. 49 00:04:50,070 --> 00:04:55,570 And the content here again the width equals to the device minus with. 50 00:04:55,770 --> 00:04:58,260 And then this is the initial dash skill. 51 00:04:58,290 --> 00:05:00,650 So this is the zoom you can zoom. 52 00:05:01,460 --> 00:05:08,770 So the initial zoom starts with one and then you can zoom to scale to your relevant screen size. 53 00:05:08,810 --> 00:05:10,820 Basically that's what this is. 54 00:05:10,820 --> 00:05:11,220 OK. 55 00:05:11,240 --> 00:05:17,450 So that without the line seven it would be difficult to view this page on any device. 56 00:05:17,450 --> 00:05:21,010 So you can only probably views on a standard screen. 57 00:05:21,020 --> 00:05:28,990 But with this it will adapt to any screen size that is used to view this web page line. 58 00:05:28,990 --> 00:05:35,390 Ed here is just a link to the style sheet I'll be using which is a style sheet here. 59 00:05:35,390 --> 00:05:37,820 So that's just a reference to the link. 60 00:05:37,880 --> 00:05:39,980 So that's the end of the ad section. 61 00:05:39,990 --> 00:05:42,840 Dan let's move over to the body search. 62 00:05:42,890 --> 00:05:44,620 This is a body section here. 63 00:05:44,750 --> 00:05:52,640 Any content in the body section is the only content that you can see or visitors can see when they visit 64 00:05:52,790 --> 00:05:53,500 the page. 65 00:05:53,510 --> 00:06:01,100 So the visible content of a web page is inside the in between the body inside the body tag. 66 00:06:01,140 --> 00:06:04,970 I've specified some child elements here. 67 00:06:04,990 --> 00:06:12,080 So child tags I've got a hate one tag basically is ahead in tag and this is a text will show up in the 68 00:06:12,080 --> 00:06:16,910 tag and then I've got an input tag thus giving it an idea he. 69 00:06:16,920 --> 00:06:25,850 This idea I will use later for styling the value of the idea here is ACR which is short form for string 70 00:06:26,420 --> 00:06:34,100 and then I've gone on the value inside that this input will be I've given it the value of blanks or 71 00:06:34,100 --> 00:06:35,040 not won't be tablet. 72 00:06:35,060 --> 00:06:41,780 If I wanted to include a text I will place that in between these quotes here but I wanted to be blank. 73 00:06:41,780 --> 00:06:43,850 So I just let the quotes there. 74 00:06:44,450 --> 00:06:46,430 And then the type is a text. 75 00:06:46,430 --> 00:06:51,400 So what I want to go in here is a text as well specified here. 76 00:06:51,710 --> 00:06:55,850 I've created another div here which will act as an output. 77 00:06:55,880 --> 00:07:07,080 So whatever is typed in here will output to the deep here and given the div idea of the value output. 78 00:07:07,190 --> 00:07:16,880 So this div here will show the output that has been inputted inside this inside this input box here. 79 00:07:17,120 --> 00:07:20,720 I've also created a button on line 17. 80 00:07:21,110 --> 00:07:23,130 So this is how you create a button. 81 00:07:23,130 --> 00:07:26,420 I've given the button an I.D. equals two. 82 00:07:26,570 --> 00:07:37,130 But Beatty in notice attributes always have to have their values in quotes in between the button tag. 83 00:07:37,200 --> 00:07:45,650 I've added a hash to tag to display the text that the button will display and then I have closed the 84 00:07:45,650 --> 00:07:47,130 button tag there. 85 00:07:47,180 --> 00:07:47,810 All right. 86 00:07:47,810 --> 00:07:51,880 To notice I have embedded two separate tags in one here. 87 00:07:52,520 --> 00:07:55,160 And notice how I have closed them properly. 88 00:07:55,180 --> 00:08:02,660 I've closed the page two first here before closing the button because a button came first. 89 00:08:02,960 --> 00:08:08,720 And then the script of either the script just before the closing potty tag is always good to insert 90 00:08:08,720 --> 00:08:14,570 your script there so that the page fully loaded before your script is executed. 91 00:08:14,570 --> 00:08:20,180 All right so this javascript here this is where it will reference it from. 92 00:08:20,630 --> 00:08:24,290 So that's it for our app structure. 93 00:08:24,290 --> 00:08:25,580 This is the duck. 94 00:08:25,610 --> 00:08:29,600 This is the code to create the app structure. 95 00:08:29,660 --> 00:08:33,950 So I just click on save to make sure it is safe and click save all. 96 00:08:34,520 --> 00:08:37,550 So that's the structure for the app Don. 97 00:08:38,060 --> 00:08:39,680 That's it for this lecture. 98 00:08:39,800 --> 00:08:41,030 Thank you so much. 99 00:08:41,030 --> 00:08:41,870 Take care. 100 00:08:41,870 --> 00:08:43,200 Bye for now. 101 00:08:43,220 --> 00:08:46,830 Any questions please do not hesitate to ask. 102 00:08:46,880 --> 00:08:48,530 I'll be more than happy to help.