All right.
So let's talk about the anatomy of an HTML tag and break it down to its
component parts so that we can actually understand how they're structured and
how we can use them. So we've written HTML elements like so.
So here we have the words hello world
and they're in closed by an opening tag and a closing tag.
And in between those tags is the content that we want to apply that structure
to. So if you think bank to the days of marking down the manuscript,
it's exactly the same as putting down a squiggly line underneath certain words or
phrases and asking the publisher to make it bolded
to affect the structure of certain parts of the text. Now, in this case,
the publisher just happens to be our browser.
So these tags make requests to the browser
asking it to structure and display our plaintext in the way that the web
designer wanted it to be shown.
Now the other type of tag that we just saw are tags that don't have a closing
tag. They're expressed simply like so.
And these are called self-closing tags and we've seen that with the break tag
and there's a few more others that work like this also.
Now how do we find out if something requires a closing tag or is self-closing?
Well, this is where we head to the documentation again. So
if we have a look at the documentation for the heading elements,
you can see that there's this part in the table that says tag omission
and it says that both the starting and ending tags are mandatory so that you
can specify which portion of your text you want to apply this structure to.
Now, if we have a look at the br or the line break element,
you can see that under tag omission,
it says that it must have a start tag and must not have an end tag.
So this is how we find out how we write our tags. Now, while we're here,
I want to introduce you to another element called the horizontal rule or the hr
tag.
And this will allow us to create these horizontal lines above and below our
portion of text. So as you can see in the documentation under tag omission,
it also says that it must not have an end tag.
So this is also a self-closing tag.
Let's head back over to our pen so that we can add these two horizontal rules
above and below our text. So the first one is going to go here
and the last one is going to go here.
You can see that our webpage now has two horizontal lines above and below our
main portion of text. Now,
if we have a closer look at this website,
you can see that their horizontal rule is a little bit thicker than ours.
So how can we make ours look more like theirs?
Now, this is part where I show you a neat trick. On any webpage that you open in
Chrome
you can simply right click on the element that you're interested in and click
inspect in order to look at the HTML and CSS code that's being rendered in the
background by the browser. So you can see here, they've got an hr element,
horizontal rule,
but they've got also all of this going on afterwards.
What exactly is that?
Now we know that the first part of the tag is the HTML element and it's be or hr or
whatever it is that you want to use.
Now the second part inside the angle bracket or
inside our tag is new and this is called an HTML attribute and it basically
gives more information to the browser to specify modifications to that HTML
element. So in this case, we're saying that we want a horizontal rule,
but we want it in size three. Now, what does size three mean
and how do we know that we have these HTML attributes available to us?
You've guessed it. We're going back to the documentation.
Now I know I'm making a big deal about going to the documentation,
but it really, really is an important skill. Understanding
and being able to look up the documentation,
being familiar with the structure of it and where to look in order to find out
how to implement or do certain things.
If we have a look at our documentation for hr,
you can see that there's this section called attributes.
And that's what we spoke about just now. The attribute comes after the main HTML
element and is separated from the element by a single space.
In this case, the horizontal rule element has actually quite a few attributes,
including align
so you can specify whether if you want your horizontal line to align to the left
or align to the right or be centered,
you can specify the color of the horizontal rule,
you can set whether if you want the horizontal rule to have shading or not,
and you can also set the height in pixels of that horizontal rule,
which is what we saw earlier on over here. So in this case,
the reason why their horizontal rule looks different ours is because ours is by
default, only one pixel high or one pixel in size
whereas theirs,
if you inspect in the HTML, is three pixels in height and they've also specified
no shade i.e. no shading to the horizontal rule.
So if we want to make our website a seamless copy of what we see here,
then we also have to specify those attributes. So if you remember,
the horizontal rule is a self-closing tag. And so inside the tag,
we're going to make a space
and then we're going to specify the name of the attribute
which we know from the documentation to be called the size attribute,
and we're going to set it to equal three pixels.
And then we're going to specify that it is no shade i.e. no shading.
And we know all of this from the documentation.
So now once our code updates,
you can see that this brand new horizontal rule looks completely different from
what it was before and we can copy this over to the top as well
so that our horizontal rules look exactly the same as what we've got over here.
So now we've seen HTML elements that require an opening tag
as well as a closing tag.
We've also seen HTML elements that have a self-closing tag.
And finally,
we've seen that HTML elements can also have an attribute where you can specify
modifications to the default element. Now,
all we need is just to add one final tag called center to our HTML file
and we would have now faithfully copied what this website looks like.
So you can have a look through the HTML by, remember, right-clicking and
inspecting in Chrome.
And you can look through to see how they've structured the rest of the document
as well. Now, this is a good point to mention our first challenge.
So we've got this code pen now where we've been messing around with the HTML.
Now you can either save this anonymously or you can create a free account in
code pen in order to be able to access this later on.
But I want you to create a brand new pen and this pen is going to be our code
playbook. And you get to use this document as an interactive notebook
if you will and I want you to document here
all the new things that you've learned as we progress through the course.
For example, in this and the last lesson, we learned about the h1 tag.
So in our code play book,
the first thing that's going to go in is your h1 tag
and you can say that this is a level one heading created using the h1 tag
and you go ahead and close it off. And you can look through the documentation to
perhaps copy some of these code snippets over,
but make sure that whenever you're copying pasting code,
that you understand what the code does.
There is nothing worse than copying and pasting code that breaks your website
because you didn't understand what you've put in there.
So we can go ahead and then modify each of these so that when we're creating our
own websites and we want to come back to our playbook and have it as a point of
reference, then we'll be able to see easily at a glance,
all of the elements that we've used and that we've learned about before.
So my challenge to you is to create your very own code playbook and to start
keeping notes on all the things that you're learning in this course. Now,
sometimes with certain elements, for example, the line break, you won't
be able to put any text inside the line break in the same way that we've
done so for the h1 tag.
This is a point where you can use a comment instead in your HTML file.
Comments are portions of text
which are marked out to be ignored by the browser.
And they're usually places where you write notes to yourself or notes to fellow
programmers who might be looking at your code. So in HTML,
we create a comment by using the angle bracket,
a exclamation Mark, two dashes,
and then to close off the comment,
we use another two dashes and a closing angle bracket.
And everything in between here is a comment.
You can see that usually it gets highlighted in a different color and none of it
gets interpreted into the webpage.
So this is where you can put sections for your notes. For example,
self-closing tags.
You can make it into several paragraphs just by putting the closing tag at the
bottom.
And you can write notes on the elements as we come across them and keep this for
your own reference. By the time when you're ready to create your own websites,
it will be a goldmine of a resource to jog your memory on all of the lessons
that you've learned. So in the next lesson,
we're going to be building our very first website and it's going to be really,
really awesome because we're going to be using a real text editor and we're
going to be putting that website live onto the internet.
So there's all of that and more yet to come.
So I we'll see you on the next lesson.