2.2 Text formatting - Video Tutorials & Practice Problems

<v Instructor>Now that we've blocked out the structure</v> of index HTML. It's time to add some content to the top level tag here, this &lt;h1&gt;. I'm gonna put in a paragraph and the content will include some information about "Learn Enough." So to save some time, I'm gonna copy and paste. Let's see here. Now there's something a little nonstandard about the text I just pasted in. At the end of each line, it's actually a new line. Which is usually written as \n. And the reason for that is because of the design constraints of a book. Ordinarily, when writing HTML you don't worry about putting in new lines but if this were all one line it would just spill across and it would end up going past the right side of the browser. So I wanna show you what this would normally look like in a real project. So I'm gonna dedent this, get rid of this leading space and now I'm gonna search and replace for the new line character. This is a useful thing to know how to do. Now, the new line character is a \n but in order to match on that character you have to enable regular expression searches. So that's like this. So this is what it looks like. But we don't want to match everything in the whole document. We just want to match in the selection. So that's this here I think. Yes, only in selection. I think that, here we go. Match only in selection. Do this here. And then I'm gonna change the \n and do a space. See if this works. I don't know why that didn't work. So here, there we go. And now if you look at the left margin it's changed the numbers, instead of 11, 12. We can do command + Z. See it goes 11, 12, 13. Now I'm gonna do a redo. And these dots indicate that this is all the same line. This is all line 12. And the reason that it looks fine is because I have the Soft Wrap on. So if I toggle it off, you can see, this is basically what it would look like in the browser. If I didn't have new lines it would just go across the right side of the window. You can put in the indentation and get rid of this here. And then I can re-enable it. And there we go. So this is what I would normally do. This is what would happen if you just typed it in by hand. Let's save it and look at it in the browser. Refresh it and there we go. And so now let's start formatting this. I want to change "technical sophistication" here to be emphasized. And the way to do that is with the &lt;em&gt; tag. &lt;em&gt; for emphasis. We're emphasized. Save that, and there we go. You can see now it is emphasized. By the way, we'll be making a table of all these tags later on so there's no need to write them down or to memorize them. We'll be making a nice table of all of these tags that we're using. And in fact, that will be our reason for introducing the table tag. Something else I wanna put in is I wanna emphasize a different way with a strong text "that at least a billion people can benefit from learning technical sophistication." I would say at least a billion people, so this is &lt;strong&gt;. At least a billion people. Save that. You can see how it just pops off the page, right? If I undo this, oops. This is actually a good little object lesson. I did a command + Z to undo the closing &lt;strong&gt; tag. So this is what happens when you're missing the closing &lt;strong&gt; tag. It just makes everything &lt;strong&gt; all the way to the end of the line. All the way to the next tag. In this case, the closing paragraph tag. So let me undo this here. Right, so you can really see how effective &lt;strong&gt; is because there's sort of undifferentiated texts in this whole section here. But then once I add in the tag save and refresh, this pops right out.