0 1 00:00:00,500 --> 00:00:07,170 All right. So let's talk about the anatomy of an HTML tag and break it down to its component parts 1 2 00:00:07,470 --> 00:00:12,150 so that we can actually understand how they're structured and how we can use them. 2 3 00:00:12,180 --> 00:00:15,490 So we've written HTML elements like so. 3 4 00:00:15,510 --> 00:00:24,210 So here we have the words Hello World and they're enclosed by an opening tag and a closing tag and in 4 5 00:00:24,200 --> 00:00:29,870 between those tags is the content that we want to apply that structure to. 5 6 00:00:29,900 --> 00:00:35,790 So if you think back to the days of marking down a manuscript it's exactly the same as putting down 6 7 00:00:35,820 --> 00:00:43,230 a squiggly line underneath certain words or phrases and asking the publisher to make it bolded to effect 7 8 00:00:43,230 --> 00:00:45,870 the structure of certain parts of the text. 8 9 00:00:45,870 --> 00:00:49,770 Now in this case the publisher just happens to be our browser. 9 10 00:00:49,770 --> 00:00:57,720 So these tags make requests to the browser asking it to structure and display our plain text in the 10 11 00:00:57,720 --> 00:01:00,540 way that the web designer wanted it to be shown. 11 12 00:01:00,540 --> 00:01:06,370 Now the other type of tag that we just saw are tags that don't have a closing tag. 12 13 00:01:06,480 --> 00:01:12,300 They're expressed simply like so and these are called self closing tags. 13 14 00:01:12,300 --> 00:01:18,170 And we've seen that with the break tag and there's a few more others that work like this also. 14 15 00:01:18,240 --> 00:01:24,060 Now how do we find out if something requires a closing tag or is self closing? 15 16 00:01:24,060 --> 00:01:27,810 Well this is where we head to the documentation again. 16 17 00:01:27,960 --> 00:01:33,960 So if we have a look at the documentation for the heading elements you can see that there's this part 17 18 00:01:34,380 --> 00:01:42,870 in the table that says ‘Tag omission’ and it says that both the starting and ending tags are mandatory 18 19 00:01:42,960 --> 00:01:50,130 so that you can specify which portion of your text you want to apply this structure to. 19 20 00:01:50,130 --> 00:01:56,720 Now if we have a look at the br or the line break element you can see that under ‘Tag omission’ 20 21 00:01:56,820 --> 00:02:02,340 it says that it must have a start tag and must not have an end tag. 21 22 00:02:02,340 --> 00:02:05,820 So this is how we find out how we write our tags. 22 23 00:02:05,820 --> 00:02:13,710 Now while we’re here I want to introduce you to another element called the horizontal rule or the hr tag 23 24 00:02:14,250 --> 00:02:20,220 and this will allow us to create these horizontal lines above and below our portion of text. 24 25 00:02:20,340 --> 00:02:26,640 So as you can see in the documentation under ‘Tag omission’ it also says that it must not have an end 25 26 00:02:26,640 --> 00:02:27,300 tag. 26 27 00:02:27,300 --> 00:02:31,310 So this is also a self closing tag. 27 28 00:02:31,480 --> 00:02:37,510 So let's head back over to our pen so that we can add these two horizontal rules above and below our 28 29 00:02:37,510 --> 00:02:38,340 text. 29 30 00:02:38,350 --> 00:02:40,210 So the first one is going to go here 30 31 00:02:42,840 --> 00:02:49,740 and the last one is going to go here so you can see that our web page now has two horizontal lines above 31 32 00:02:49,800 --> 00:02:52,440 and below our main portion of text. 32 33 00:02:52,440 --> 00:02:59,130 Now if we have a closer look at this web site you can see that their horizontal rule is a little bit 33 34 00:02:59,130 --> 00:03:01,710 thicker than ours. 34 35 00:03:01,710 --> 00:03:05,450 So how can we make ours look more like theirs? 35 36 00:03:05,460 --> 00:03:10,540 Now this is the part where I show you a neat trick. On any web page that you open in Chrome, 36 37 00:03:10,620 --> 00:03:18,240 you can simply right click on the element that you're interested in and click Inspect in order to look 37 38 00:03:18,330 --> 00:03:25,200 at the HTML and CSS code that's being rendered in the background by the browser. So you can see here 38 39 00:03:25,230 --> 00:03:32,450 they've got an hr element, horizontal rule, but they've got also all of this going on afterwards. 39 40 00:03:32,760 --> 00:03:35,590 So what exactly is that? 40 41 00:03:35,610 --> 00:03:44,790 Now we know that the first part of the tag is the HTML element and it's br or hr or whatever it 41 42 00:03:44,790 --> 00:03:46,550 is that you want to use. 42 43 00:03:46,560 --> 00:03:55,710 Now the second part inside the angle bracket or inside our tag is new and this is called an HTML attribute 43 44 00:03:55,950 --> 00:04:05,040 and it basically gives more information to the browser to specify modifications to that HTML element. 44 45 00:04:05,040 --> 00:04:11,540 So in this case we're saying that we want a horizontal rule but we want it in size three. 45 46 00:04:11,550 --> 00:04:18,040 Now what does size three mean and how do we know that we have these HTML attributes available to us? 46 47 00:04:18,060 --> 00:04:21,440 You've guessed it. We’re going back to the documentation. 47 48 00:04:21,840 --> 00:04:27,690 Now I know I'm making a big deal about going to the documentation but it really really is an important 48 49 00:04:27,690 --> 00:04:34,440 skill, understanding and being able to look up the documentation, being familiar with the structure of 49 50 00:04:34,440 --> 00:04:41,430 it and where to look in order to find out how to implement or do certain things. 50 51 00:04:41,460 --> 00:04:46,890 So if we have a look at our documentation for hr you can see that there's this section called 51 52 00:04:47,040 --> 00:04:50,840 attributes and that's what we spoke about just now. 52 53 00:04:50,970 --> 00:04:58,750 The attribute comes after the main HTML element and is separated from the element by a single space. 53 54 00:04:58,800 --> 00:05:05,670 In this case the horizontal rule element has actually quite a few attributes including align so you 54 55 00:05:05,670 --> 00:05:12,150 can specify whether you want your horizontal line to align to the left or align to the right or 55 56 00:05:12,150 --> 00:05:16,730 be centered. You can specify the color of the horizontal rule. 56 57 00:05:16,770 --> 00:05:21,420 You can set whether you want the horizontal rule to have shading or not. 57 58 00:05:21,570 --> 00:05:29,160 And you can also set the height in pixels of that horizontal rule which is what we saw earlier on over 58 59 00:05:29,160 --> 00:05:29,580 here. 59 60 00:05:30,150 --> 00:05:37,080 So in this case the reason why their horizontal rule looks different to ours is because ours is by 60 61 00:05:37,080 --> 00:05:46,080 default only one pixel high or one pixel in size whereas theirs if you inspect in the HTML is three pixels 61 62 00:05:46,080 --> 00:05:53,220 in height and they've also specified no shade i.e. no shading to the horizontal rule. 62 63 00:05:53,250 --> 00:06:00,510 So if we want to make our website a seamless copy of what we see here then we also have to specify those 63 64 00:06:00,630 --> 00:06:01,710 attributes. 64 65 00:06:01,710 --> 00:06:05,940 So if you remember the horizontal rule is a self closing tag. 65 66 00:06:05,940 --> 00:06:11,940 And so inside the tag we're going to make a space and then we're going to specify the name of the attribute 66 67 00:06:12,240 --> 00:06:16,600 which we know from the documentation to be called the size attribute. 67 68 00:06:16,650 --> 00:06:22,680 And we're gonna set it to equal three pixels and then we're going to specify that it is no shade i.e. 68 69 00:06:22,710 --> 00:06:27,230 no shading and we know all of this from the documentation. 69 70 00:06:27,240 --> 00:06:33,390 So now once our code updates you can see that this brand new horizontal rule looks completely different 70 71 00:06:33,390 --> 00:06:34,890 from what it was before. 71 72 00:06:35,220 --> 00:06:42,120 And we can copy this over to the top as well so that our horizontal rules look exactly the same as what 72 73 00:06:42,120 --> 00:06:43,680 we've got over here. 73 74 00:06:43,680 --> 00:06:50,210 So now we've seen HTML elements that require an opening tag as well as a closing tag. 74 75 00:06:50,220 --> 00:06:54,520 We've also seen HTML elements that have a self closing tag. 75 76 00:06:54,540 --> 00:07:01,440 And finally we've seen that HTML elements can also have an attribute where you can specify modifications 76 77 00:07:01,710 --> 00:07:03,810 to the default element. 77 78 00:07:03,810 --> 00:07:11,190 Now all we need is just to add one final tag called center to our HTML file and we would have now 78 79 00:07:11,190 --> 00:07:14,730 faithfully copied what this web site looks like. 79 80 00:07:14,730 --> 00:07:22,050 So you can have a look through the HTML by, remember, right clicking and inspecting in Chrome and you 80 81 00:07:22,050 --> 00:07:26,640 can look through to see how they've structured the rest of the document as well. 81 82 00:07:26,640 --> 00:07:28,510 Now this is a good point to mention 82 83 00:07:28,530 --> 00:07:30,930 our first challenge. 83 84 00:07:30,930 --> 00:07:35,640 So we've got this code pen now where we've been messing around with the HTML. 84 85 00:07:35,640 --> 00:07:40,740 Now you can either save this anonymously or you can create a free account in Code Pen in order to be 85 86 00:07:40,740 --> 00:07:48,230 able to access this later on. But I want you to create a brand new pen and this pen is going to be our 86 87 00:07:48,230 --> 00:07:54,500 code playbook and you're going to use this document as an interactive notebook if you will. 87 88 00:07:54,500 --> 00:08:00,470 And I want you to document here all the new things that you've learned as we progressed through the 88 89 00:08:00,470 --> 00:08:01,750 course. 89 90 00:08:01,760 --> 00:08:06,920 So for example in this and the last lesson we learn about the h1 tag. 90 91 00:08:07,040 --> 00:08:13,910 So in our code playbook the first thing that's gonna go in is your h1 tag and you can say that this 91 92 00:08:13,910 --> 00:08:22,090 is a level one heading created using the h1 tag. 92 93 00:08:22,160 --> 00:08:28,490 Go ahead and close it off and you can look through the documentation to perhaps copy some of these code 93 94 00:08:28,490 --> 00:08:35,300 snippets over but make sure that whenever you're copying pasting code that you understand what the code 94 95 00:08:35,330 --> 00:08:36,200 does. 95 96 00:08:36,200 --> 00:08:41,570 There's nothing worse than copy and pasting code that breaks your website because you didn't understand 96 97 00:08:41,660 --> 00:08:43,370 what you've put in there. 97 98 00:08:43,370 --> 00:08:48,680 So we can go ahead and then modify each of these so that when we're creating our own websites and we 98 99 00:08:48,680 --> 00:08:54,920 want to come back to our playbook and have it as a point of reference then we'll be able to see easily 99 100 00:08:54,980 --> 00:08:59,750 at a glance all of the elements that we've used and that we've learnt about before. 100 101 00:08:59,930 --> 00:09:07,970 So my challenge to you is to create your very own code playbook and to start keeping notes on all the 101 102 00:09:07,970 --> 00:09:10,180 things that you're learning in this course. 102 103 00:09:10,250 --> 00:09:17,070 Now sometimes with certain elements for example the line break you won't be able to put any text inside 103 104 00:09:17,070 --> 00:09:21,600 the line break in the same way that we've done so for the h1 tag. 104 105 00:09:21,680 --> 00:09:26,310 This is a point where you can use a comment instead in your HTML file. 105 106 00:09:26,450 --> 00:09:34,970 Comments are portions of text which are marked out to be ignored by the browser and they're usually 106 107 00:09:34,970 --> 00:09:41,550 places where you write notes yourself or notes to fellow programmers who might be looking at your code. 107 108 00:09:41,600 --> 00:09:51,140 So in HTML we create a comment by using the angle bracket, an exclamation mark, two dashes, and then to close 108 109 00:09:51,140 --> 00:09:58,190 off the comment we use another two dashes and a closing angle bracket and everything in between here 109 110 00:09:58,490 --> 00:10:05,630 is a comment. You can see that it usually gets highlighted in a different color and none of it gets interpreted 110 111 00:10:05,810 --> 00:10:07,380 into the web page. 111 112 00:10:07,430 --> 00:10:15,200 So this is where you can put sections for your notes for example self closing tags, you can make it into 112 113 00:10:15,200 --> 00:10:20,840 several paragraphs just by putting the closing tag at the bottom and you can write notes on the elements 113 114 00:10:21,050 --> 00:10:25,370 as we come across them and keep this for your own reference. 114 115 00:10:25,370 --> 00:10:31,250 By the time when you're ready to create your own Web sites it will be a goldmine of a resource to jog 115 116 00:10:31,250 --> 00:10:34,010 your memory on all of the lessons that you've learned. 116 117 00:10:34,250 --> 00:10:40,340 So in the next lesson we're going to be building our very first web site and it's going to be really 117 118 00:10:40,340 --> 00:10:45,140 really awesome because we're going to be using a real text editor and we're going to be putting that 118 119 00:10:45,140 --> 00:10:47,480 web site live onto the Internet. 119 120 00:10:47,480 --> 00:10:50,480 So there's all of that and more yet to come. 120 121 00:10:50,480 --> 00:10:52,580 So I will see you on the next lesson.