1 00:00:00,140 --> 00:00:01,700 OK we'll come back. 2 00:00:01,710 --> 00:00:06,630 So now is the time where we finally get to start actually writing some code and we're going to start 3 00:00:06,720 --> 00:00:09,320 by talking about HCM out in the next unit. 4 00:00:09,450 --> 00:00:13,530 We're going to cover a lot of different parts of it to him how we're going to learn by the end how to 5 00:00:13,530 --> 00:00:18,600 write simple age to him old documents when understand the difference between closing and self-closing 6 00:00:18,600 --> 00:00:24,360 tags tagged with the attributes you want to definitely use M.D and a lot which you've already seen. 7 00:00:24,360 --> 00:00:29,580 And at the very end I'll give you an image of a Web site and you should be able to write the corresponding 8 00:00:29,580 --> 00:00:30,500 H.T. amount. 9 00:00:30,810 --> 00:00:33,650 So translate an image to actual code. 10 00:00:34,080 --> 00:00:38,170 So we're going to start by talking a little bit about the history of HDMI. 11 00:00:38,550 --> 00:00:41,700 So again it stands for hypertext markup language. 12 00:00:41,700 --> 00:00:48,720 Think back to that first introduction to front end video HDMI out is the structure and content of a 13 00:00:48,720 --> 00:00:52,690 page not the styling not the interactivity just the structure and content. 14 00:00:52,830 --> 00:00:59,730 Back in the academic community in the year 1989 early 1990 there's not exactly a hard start date to 15 00:00:59,730 --> 00:01:04,010 age Timo but in that time basically people were exchanging papers. 16 00:01:04,050 --> 00:01:09,930 Giant thesis papers and scientific documents technical documents and they all have very specific formatting 17 00:01:09,950 --> 00:01:10,220 . 18 00:01:10,560 --> 00:01:16,920 But when they're being exchanged there was no way to actually send that formatting across the Internet 19 00:01:16,920 --> 00:01:17,370 . 20 00:01:17,370 --> 00:01:21,670 So what I mean is let's say you wanted to have a paper that looked like this. 21 00:01:21,690 --> 00:01:25,560 And this is a style guide that I found on writing scientific papers. 22 00:01:25,560 --> 00:01:27,680 So let's just take the abstract section. 23 00:01:27,900 --> 00:01:31,100 So your abstract looks like there's a heading here. 24 00:01:31,260 --> 00:01:33,390 It's a little bolded and bigger text. 25 00:01:33,600 --> 00:01:39,900 We've got this sort of introduction to one part of the abstract and then a bunch of bullet points. 26 00:01:40,260 --> 00:01:43,010 We've got italicised and bolded text. 27 00:01:43,140 --> 00:01:47,130 And then it looks like a link to another part of the paper. 28 00:01:47,550 --> 00:01:50,310 And then lastly we've got some nested bullet points. 29 00:01:50,460 --> 00:01:53,830 So this information if I wanted to send this to somebody. 30 00:01:54,090 --> 00:01:56,040 But all that I could send is text. 31 00:01:56,160 --> 00:02:00,420 So I can't send an image of this I can't send like the actual structure of it. 32 00:02:00,430 --> 00:02:07,600 All I can send is some text so that might look something like this. 33 00:02:07,620 --> 00:02:14,520 The problem is how do I take this text here which is the same text as over here in Hadaway in code the 34 00:02:14,520 --> 00:02:15,960 structure. 35 00:02:16,350 --> 00:02:20,420 How do I say this abstract which actually don't have here. 36 00:02:20,550 --> 00:02:26,890 But if I added that in how would I say this is bold and bigger text and so is function. 37 00:02:27,090 --> 00:02:33,090 And there's a bullet point right here and another bullet point right here. 38 00:02:33,090 --> 00:02:35,590 So that is what each team lets us do. 39 00:02:35,640 --> 00:02:40,650 It lets us take text in content and just by writing some other text on top of it. 40 00:02:40,650 --> 00:02:42,930 It lets us specify exactly. 41 00:02:42,930 --> 00:02:44,730 This is a heading this is bold. 42 00:02:44,730 --> 00:02:46,140 This is a italicized. 43 00:02:46,230 --> 00:02:48,900 This is a link and that last part. 44 00:02:48,900 --> 00:02:51,360 Link is actually really important. 45 00:02:51,870 --> 00:02:57,570 Thats where the name comes from Hypertext Markup Language because each T.M. allows us to create hyperlinks 46 00:02:57,720 --> 00:03:01,200 and linking documents together is really important. 47 00:03:01,200 --> 00:03:06,600 Many scientific papers are going to be referencing other scientific papers footnotes and all sorts of 48 00:03:06,600 --> 00:03:07,520 citations. 49 00:03:07,640 --> 00:03:13,110 H tim l facilitated that and made a really big impact and then basically caught on. 50 00:03:13,110 --> 00:03:15,210 People realized it's pretty simple. 51 00:03:15,210 --> 00:03:20,700 It's not a very intimidating thing so moved kind of away from purely academic situations to kind of 52 00:03:20,700 --> 00:03:23,850 broader use all the way up to my space. 53 00:03:23,860 --> 00:03:29,070 Few remember my space or if you ever had a myspace you could actually edit your profile just by writing 54 00:03:29,160 --> 00:03:29,780 HDMI. 55 00:03:29,970 --> 00:03:34,830 So there are people who are absolutely not technical and they were still able to write H T M L and C 56 00:03:34,830 --> 00:03:39,450 Ss to add some interesting features to the page to make some customized visuals. 57 00:03:39,720 --> 00:03:40,270 OK. 58 00:03:40,380 --> 00:03:41,760 So let's keep that in mind. 59 00:03:41,760 --> 00:03:46,030 We have this giant thing of text that we want to be able to encode some structure. 60 00:03:46,050 --> 00:03:52,560 And I want to say this is bold or this is a bullet point and so on. 61 00:03:52,840 --> 00:03:57,060 Tim L allows us to do that using H.T. tags. 62 00:03:57,060 --> 00:04:02,250 So what we basically do is we take some content in the middle and we sandwich it between an opening 63 00:04:02,250 --> 00:04:03,870 tag and a closing tag. 64 00:04:03,990 --> 00:04:11,310 This lets me specify specific parts of the page or of the paragraph for the content that I can say right 65 00:04:11,400 --> 00:04:16,970 in between these two tags is a bold right between these two is a link right between these two is italicized 66 00:04:17,010 --> 00:04:18,620 text and so on. 67 00:04:18,630 --> 00:04:22,830 So I'll show you that we could go through here and decide OK. 68 00:04:22,860 --> 00:04:29,580 This is going to be a heading on our page and we'll wrap it in an H1 tag which we haven't introduced 69 00:04:29,580 --> 00:04:30,360 yet. 70 00:04:30,360 --> 00:04:31,430 We will get there. 71 00:04:31,530 --> 00:04:36,560 But for now let's just specify that this is the largest heading on our page. 72 00:04:36,930 --> 00:04:40,440 The next thing we might want to do is go ahead and make this bolded here. 73 00:04:40,710 --> 00:04:46,140 So the way that we make things bold there's a few the simplest one is to wrap it in something called 74 00:04:46,200 --> 00:04:48,420 a B.Tech to say that it's bold. 75 00:04:48,450 --> 00:04:52,160 For those of you who know him l the tag is actually on its way out. 76 00:04:52,320 --> 00:04:56,920 It's being deprecated which means that you're basically you're not supposed to use it anymore. 77 00:04:56,940 --> 00:04:58,260 It works just fine. 78 00:04:58,260 --> 00:04:59,070 There is an alternative. 79 00:04:59,080 --> 00:05:01,120 We'll discuss in a little bit. 80 00:05:01,210 --> 00:05:04,910 Likewise I might want to make something let's say a separate paragraph. 81 00:05:04,920 --> 00:05:09,940 So I wanted to add some spacing between this line and the next line. 82 00:05:10,020 --> 00:05:15,090 So I add a paragraph and what that will do is whatever's between these two tags goes on its own line 83 00:05:15,120 --> 00:05:18,170 and has basically returned on either side. 84 00:05:18,660 --> 00:05:25,440 So as you can see the general rule applies to all the tags that we've seen or we had an H1 or bold tag 85 00:05:25,440 --> 00:05:26,660 or a paragraph tag. 86 00:05:26,910 --> 00:05:29,130 Don't focus on the tags himself just yet. 87 00:05:29,130 --> 00:05:33,610 We're going to have plenty of videos discussing individual ins and outs of all the tags. 88 00:05:33,720 --> 00:05:40,960 But again remember this pattern we have tag name starting tag name closing some content in between. 89 00:05:41,370 --> 00:05:47,100 OK so the next video we're now going to actually make a new real Tim efile not just a scientific document 90 00:05:47,190 --> 00:05:49,060 some text but a real file. 91 00:05:49,170 --> 00:05:51,770 And we're going to open it in the browser and actually see the age T.M.