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