Adding Paragraph & List Markup

[00:00:00]
>> Jen: If we take a look at our text up here in our web page. What do you think the function of that text is? Describe it if you were, yeah?
>> Speaker 2: An introduction?
>> Jen: It's kind of an introduction. And those are two what's?
>> Speaker 2: Paragraphs.
>> Jen: They are paragraphs, aren't they?

[00:00:18]
They're paragraphs, we have a tag for that, okay? So we need to mark this up with the right tag. So we're gonna go ahead and we're gonna put in the tag and that tag is called P, okay? P for paragraph, so the paragraph starts with the P, in the angle brackets, those angle brackets are on your keyboard.

[00:00:40]
In my case they're next to the letter M, and the question mark down there on the bottom row, and not to hit the shift key in order to get them. So that's paragraph, and then you close it. It's called closing a tag with the slash sign in front of the paragraph at the end, okay?

[00:00:58]
So as we put this in, our coded editor is actually being very nice in helping us. You see how it gives us both the opening and the closing tag together, right next to each other? Because, normally the way we'd write this is we'd actually put in the tag and then we'd write our text, in which case this would be nicely placed.

[00:01:18]
But since we already wrote our text, now what we're gonna need to do is we're gonna need to move our tags around. So that they properly go around our code there, did it work? Everybody good? Okay, go ahead and save your page and refresh.
>> Jen: Now, I just said HTML stands for the Hypertext Markup Language.

[00:01:45]
It stands for identifying elements of our document, right? So why did my browser put a space in between here so it looks like two paragraphs? Anybody have any idea, yeah?
>> Speaker 3: It's because we put separate tags on them?
>> Jen: It's a great idea.
>> Speaker 3: [LAUGH]
>> Jen: But no, actually not.

[00:02:09]
There's nothing in the world that says the paragraphs should look this way. That's 16 pixel size times new roman font, because engineers picked the ugliest version of fonts that they can possibly pick, all right? And it was the engineers who decided that this is the separation of the distance between these two lines.

[00:02:31]
And in fact, your web browser has a style sheet of its own, it's your browser's style sheet. And so the formatting, formatting that we see here in our web browser is a figment your browser's imagination. Okay, the actual HTML itself has no formatting associated with it, but this is what your browser thinks that it should look like.

[00:02:52]
>> Speaker 4: Is it gonna put that space only at the bottom of the paragraph or at the top and the bottom?
>> Jen: It puts the space at the top and the bottom of the paragraph which is, we actually have, it's hard to see here because on the projector, but maybe on the screen in front of you, you can see a little bit of space between.

[00:03:09]
That bar at the top of the page and the rest of it, that little bit of space, that's part of the paragraph, great question, okay. You've learned your first tag, you've built your first web page, great job.
>> Speaker 2: Yay.
>> Jen: Yay.
>> Speaker 2: [LAUGH]
>> Jen: Every page needs a title, doesn't it?

[00:03:25]
Okay, so let's go ahead and put in a title, and there is a tag for that too. This is the heading tag and there are six of these. The heading tag is h one, okay. And of course there's h two, h three, h four, h five, h six, and we can put up here, All About Me, because it's always all about me, right?

[00:03:55]
Save that, refresh that in your browser. Once again, the absolute ugliest possible text possible. It's the way we roll, good. How about some of the things? I'm going to make a list. Okay, so there's couple kinds of lists. The one we're gonna look at first is this one, which is ULUL.

[00:04:32]
Anyone wanna take a guess of what that stands for?
>> Speaker 5: [INAUDIBLE]
>> Jen: An ordered list, okay? In other words, this is a list of stuff in no particular order. You could take all of this stuff and you could throw it up in the air and it comes down and you pick it up again, and it doesn't matter what order it's on, right?

[00:04:50]
It's not like say, a list of directions and instructions in which case it matters, what's first, what's second, what's third, okay. Anyone want to take a guess at what that's called?
>> Speaker 4: Ordered list?
>> Jen: An ordered list.
>> Speaker 4: [LAUGH]
>> Jen: And guess what the tag is called?
>> Jen: Yeah, we're really lucky and it's in English speakers for HTML.

[00:05:10]
Yeah, we're really lucky. Okay, so this indicates that this is going to be a list, inside of this we're going to have a what?
>> Speaker 2: A list item?
>> Jen: A list item, L-I, a list item. Playing music, okay. So that's one of my hobbies. And maybe I should actually start this off with a heading, right?

[00:05:37]
Anyone wanna take a guess what heading tag I should use to say? I'm gonna say something like my list of hobbies? What should I use?
>> Speaker 6: H two?
>> Jen: H two, yeah, because I already have h one, right? This is further down on the page. H one is the most important thing, so it's the big one at the top.

[00:05:55]
There's only one of them, typically, on a web page. There are some rules that may change that a little bit, but for your purposes there's only one on the page and we can then go into the next heading. This is H2. My fine hobbies. Okay, so now I've got a UL, and I've got an LI playing music, hiking, travel,

[00:06:36]
>> Jen: Like I said, it's a very short list.
>> Jen: Teaching, whoops, LI,
>> Jen: Teaching,
>> Jen: Okay, and when you refresh the page, you should see something like this, how's that?