HTML Text Markup

[00:00:00]
>> Now that we have our basic styling setup for the whole website, we are ready to move on to working with some text. We've written a lot of styles that pertain to text, so let's get some styling in place. So here in chapter 2, working with text what we are going to do is work on just this first part of the web page.

[00:00:19]
Just the common part of the webpage. So your name is your name, you do something and there's some details associated with that, and we need to put a comment in the background. That is what we're going to be doing in this next chapter. And you can refer to this picture at any point in time along the way.

[00:00:37]
So we're going to start here with our beginning codepen. If you click on the link here at the top. And you can fork it to your account. And let's start up here at the very top of the document. So this is gonna follow a pattern that you're going to see over and over and over again.

[00:01:01]
The first thing that we always do is we write our content for the website. We actually don't care what this looks like. We're just going to have this open to our HTML window and we are going to write in here what we want to say. That is always our first step.

[00:01:17]
Second step, we mark up this text once we've actually written what we want to say with the appropriate HTML. And then the third part is that we style it with CSS. Now, in reality, you'll wind up going back and forth a little bit between HTML and CSS as you do this.

[00:01:34]
But this is a good basic pattern that you can use on any website or anything else you ever build, write your content first, then mark it up with HTML, then style it with CSS. And by the way, then you add on all the JavaScript to make it do anything that's beyond what HTML and CSS can do.

[00:01:56]
That is the appropriate way to put these web pages together. So if you take a look at what you've got here. It just says, hi, my name is, your name. I, whatever you happen to be doing for work, you're teaching something, you're coding something, you are doing whatever it is that you do for whomever you're doing it or perhaps you're looking for a job.

[00:02:19]
So I'm gonna give you two minutes, go through here and fill out this with your own information, okay? Just take out the things that are in the brackets and put in your own information. Let's take a look then, just I'm gonna refer here once again to my design, that is in the course website.

[00:02:40]
You can take a look at that at any point in time to see what it is that we are going to be coding here. And let's look at our text again. So what is the most important part of all of the stuff that we have here on the screen?

[00:02:56]
What would you consider to be the the text that is the most important and the biggest focus?
>> The first line?
>> Could be the first line. Anybody else have any other opinions? What do you think, Lia?
>> Probably the second line.
>> You like the second line.

[00:03:22]
Okay, so this depends, honestly this depends, what is it that you wanna emphasize about your particular website. This doesn't have anything to do with what is gonna be biggest or boldest or strongest. What is the biggest focus of this particular story and that particular item we are going to mark up with, in this case h2.

[00:03:45]
Now, h2, to me, it's I teach the web because I think that's the most important part. If you prefer to make your first line h2, that's totally fine too. I think you can make an argument for that. Why h2 and not h1? I'll answer that question for you.

[00:04:02]
h1 would be the most important thing on the web page. And that's actually the name of the website. That's not included here in the introduction. If you remember looking at the site at the beginning, we actually had a logo in the upper left-hand corner. That will eventually be marked up with h1.

[00:04:17]
There's only one h1 on the web page. So after that, what is the second most important thing on the page? There's actually probably a few of those. This particular item is going to be the second most important thing on the page. So I'm gonna mark that up with an h2.

[00:04:33]
What about the rest of these things here. What would you call this if you were writing an English paper.
>> Paragraphs.
>> You'd call them paragraphs. What do you think? They look like paragraphs, don't they? All right, let's mark ' up as such. This is the way HTML really works.

[00:04:51]
Hey, look, it's a paragraph. Let's mark it as a paragraph. So that's one of the things that you may wanna do. Another thing you may wanna do is you may want to include some links here inside of your documents. So for example, I'm the Director of Learning Design and Technology at AnnieCannons.

[00:05:08]
Perhaps I want to link to my employer. So I may want to put in a link here. So I'm going to say, a href="https://annie cannons.org". And I'm also gonna add target="_blank" Annie Cannons. And maybe I want another one of these for Frontend Masters. Now, it's also possible that you, maybe you don't have any links that you want to include here and that's totally fine too if you'd prefer not to include links.

[00:05:51]
You can just hang on a second while the rest of us put in some links here, if that's something that we wanna do. So here, this is Frontend Masters. All right, now what I always tell people do as soon as you put in a link, the next thing you wanna do is test it.

[00:06:13]
So if you pull this on over here to the side, make sure that you click on those links. Make sure they open in a new window, make sure they load the webpage that you're expecting to load, okay? So yep, there's AnnieCannons, and when I click on Frontend Masters, there's Frontend Masters.

[00:06:31]
So that is all working exactly correctly. If they're not working correctly, you may need to go back and revisit your URLs, okay. How is everybody doing so far? Okay, cool, all right. So now the next thing that I wanna do. Now that I have my content in place, and I have the basic markup in place, usually what we're gonna wanna do in web design is group all of this stuff together.

[00:06:55]
So if we're gonna create a section like this, we're going to want to include some HTML elements that go all the way around that thing. And these days I've moved to including two of those elements. So I'll show you how I tend to mark these things up now.

[00:07:12]
Let me take my comment out. I'm gonna add a section with a class of intro because that's what this is. And we're using the section element because it's a section of the webpage. Here we go, all right? And if this is looking a little bit hard to read for you, one of the nice things that CodePen has, in the little down arrow here right next to the HTML, if you click on that, you can say Format HTML, and that'll do the indenting for you.

[00:07:55]
The other nice thing that's there is the Analyze HTML feature. If you click on that, it will do a check for you and make sure your HTML is formed in the correct way. You've not made up a bunch of tags. You've closed things, that kind of thing.