Original subtitles

0 All right. 1

So let's talk about the anatomy of an HTML tag and break it down to its 2

component parts so that we can actually understand how they're structured and 3

how we can use them. So we've written HTML elements like so. 4

So here we have the words hello world 5

and they're in closed by an opening tag and a closing tag. 6

And in between those tags is the content that we want to apply that structure 7

to. So if you think bank to the days of marking down the manuscript, 8

it's exactly the same as putting down a squiggly line underneath certain words or 9

phrases and asking the publisher to make it bolded 10

to affect the structure of certain parts of the text. Now, in this case, 11

the publisher just happens to be our browser. 12

So these tags make requests to the browser 13

asking it to structure and display our plaintext in the way that the web 14

designer wanted it to be shown. 15

Now the other type of tag that we just saw are tags that don't have a closing 16

tag. They're expressed simply like so. 17

And these are called self-closing tags and we've seen that with the break tag 18

and there's a few more others that work like this also. 19

Now how do we find out if something requires a closing tag or is self-closing? 20

Well, this is where we head to the documentation again. So 21

if we have a look at the documentation for the heading elements, 22

you can see that there's this part in the table that says tag omission 23

and it says that both the starting and ending tags are mandatory so that you 24

can specify which portion of your text you want to apply this structure to. 25

Now, if we have a look at the br or the line break element, 26

you can see that under tag omission, 27

it says that it must have a start tag and must not have an end tag. 28

So this is how we find out how we write our tags. Now, while we're here, 29

I want to introduce you to another element called the horizontal rule or the hr 30

tag. 31

And this will allow us to create these horizontal lines above and below our 32

portion of text. So as you can see in the documentation under tag omission, 33

it also says that it must not have an end tag. 34

So this is also a self-closing tag. 35

Let's head back over to our pen so that we can add these two horizontal rules 36

above and below our text. So the first one is going to go here 37

and the last one is going to go here. 38

You can see that our webpage now has two horizontal lines above and below our 39

main portion of text. Now, 40

if we have a closer look at this website, 41

you can see that their horizontal rule is a little bit thicker than ours. 42

So how can we make ours look more like theirs? 43

Now, this is part where I show you a neat trick. On any webpage that you open in 44

Chrome 45

you can simply right click on the element that you're interested in and click 46

inspect in order to look at the HTML and CSS code that's being rendered in the 47

background by the browser. So you can see here, they've got an hr element, 48

horizontal rule, 49

but they've got also all of this going on afterwards. 50

What exactly is that? 51

Now we know that the first part of the tag is the HTML element and it's be or hr or 52

whatever it is that you want to use. 53

Now the second part inside the angle bracket or 54

inside our tag is new and this is called an HTML attribute and it basically 55

gives more information to the browser to specify modifications to that HTML 56

element. So in this case, we're saying that we want a horizontal rule, 57

but we want it in size three. Now, what does size three mean 58

and how do we know that we have these HTML attributes available to us? 59

You've guessed it. We're going back to the documentation. 60

Now I know I'm making a big deal about going to the documentation, 61

but it really, really is an important skill. Understanding 62

and being able to look up the documentation, 63

being familiar with the structure of it and where to look in order to find out 64

how to implement or do certain things. 65

If we have a look at our documentation for hr, 66

you can see that there's this section called attributes. 67

And that's what we spoke about just now. The attribute comes after the main HTML 68

element and is separated from the element by a single space. 69

In this case, the horizontal rule element has actually quite a few attributes, 70

including align 71

so you can specify whether if you want your horizontal line to align to the left 72

or align to the right or be centered, 73

you can specify the color of the horizontal rule, 74

you can set whether if you want the horizontal rule to have shading or not, 75

and you can also set the height in pixels of that horizontal rule, 76

which is what we saw earlier on over here. So in this case, 77

the reason why their horizontal rule looks different ours is because ours is by 78

default, only one pixel high or one pixel in size 79

whereas theirs, 80

if you inspect in the HTML, is three pixels in height and they've also specified 81

no shade i.e. no shading to the horizontal rule. 82

So if we want to make our website a seamless copy of what we see here, 83

then we also have to specify those attributes. So if you remember, 84

the horizontal rule is a self-closing tag. And so inside the tag, 85

we're going to make a space 86

and then we're going to specify the name of the attribute 87

which we know from the documentation to be called the size attribute, 88

and we're going to set it to equal three pixels. 89

And then we're going to specify that it is no shade i.e. no shading. 90

And we know all of this from the documentation. 91

So now once our code updates, 92

you can see that this brand new horizontal rule looks completely different from 93

what it was before and we can copy this over to the top as well 94

so that our horizontal rules look exactly the same as what we've got over here. 95

So now we've seen HTML elements that require an opening tag 96

as well as a closing tag. 97

We've also seen HTML elements that have a self-closing tag. 98

And finally, 99

we've seen that HTML elements can also have an attribute where you can specify 100

modifications to the default element. Now, 101

all we need is just to add one final tag called center to our HTML file 102

and we would have now faithfully copied what this website looks like. 103

So you can have a look through the HTML by, remember, right-clicking and 104

inspecting in Chrome. 105

And you can look through to see how they've structured the rest of the document 106

as well. Now, this is a good point to mention our first challenge. 107

So we've got this code pen now where we've been messing around with the HTML. 108

Now you can either save this anonymously or you can create a free account in 109

code pen in order to be able to access this later on. 110

But I want you to create a brand new pen and this pen is going to be our code 111

playbook. And you get to use this document as an interactive notebook 112

if you will and I want you to document here 113

all the new things that you've learned as we progress through the course. 114

For example, in this and the last lesson, we learned about the h1 tag. 115

So in our code play book, 116

the first thing that's going to go in is your h1 tag 117

and you can say that this is a level one heading created using the h1 tag 118

and you go ahead and close it off. And you can look through the documentation to 119

perhaps copy some of these code snippets over, 120

but make sure that whenever you're copying pasting code, 121

that you understand what the code does. 122

There is nothing worse than copying and pasting code that breaks your website 123

because you didn't understand what you've put in there. 124

So we can go ahead and then modify each of these so that when we're creating our 125

own websites and we want to come back to our playbook and have it as a point of 126

reference, then we'll be able to see easily at a glance, 127

all of the elements that we've used and that we've learned about before. 128

So my challenge to you is to create your very own code playbook and to start 129

keeping notes on all the things that you're learning in this course. Now, 130

sometimes with certain elements, for example, the line break, you won't 131

be able to put any text inside the line break in the same way that we've 132

done so for the h1 tag. 133

This is a point where you can use a comment instead in your HTML file. 134

Comments are portions of text 135

which are marked out to be ignored by the browser. 136

And they're usually places where you write notes to yourself or notes to fellow 137

programmers who might be looking at your code. So in HTML, 138

we create a comment by using the angle bracket, 139

a exclamation Mark, two dashes, 140

and then to close off the comment, 141

we use another two dashes and a closing angle bracket. 142

And everything in between here is a comment. 143

You can see that usually it gets highlighted in a different color and none of it 144

gets interpreted into the webpage. 145

So this is where you can put sections for your notes. For example, 146

self-closing tags. 147

You can make it into several paragraphs just by putting the closing tag at the 148

bottom. 149

And you can write notes on the elements as we come across them and keep this for 150

your own reference. By the time when you're ready to create your own websites, 151

it will be a goldmine of a resource to jog your memory on all of the lessons 152

that you've learned. So in the next lesson, 153

we're going to be building our very first website and it's going to be really, 154

really awesome because we're going to be using a real text editor and we're 155

going to be putting that website live onto the internet. 156

So there's all of that and more yet to come. 157

So I we'll see you on the next lesson.