3.3 Divs and spans - Video Tutorials & Practice Problems

<v Instructor>Now that we've gotten a good start</v> on the tags page, it's time to add a third page to our website, which is a mock book report on the classic American whale novel "Moby Dick". The first thing we'll do is create a file for it. Remember, I'd like to use the touch command for this. And let's take a look at it. So of course, it's blank to start with. And then we're gonna fill it in. I'm gonna use a combination of keystrokes and pasting in. Let's start with the skeleton. You can use the trigger here. So the Tab trigger. And remember, we'd like to have the meta tag under the title. And then in here, we're going to add in several new elements. So one thing I'm gonna do is leave a note to our future selves. Remember that this page is especially going to lend itself to styling. So I'm gonna leave a note indicating that. This is an HTML comment, you'll see in a moment what the syntax looks like. This is just normal text. But if I use Command + /, Atom converts it to a comment. Now actually, I find it really hard to remember the exact syntax for this. It's an angle bracket and less than angle bracket, exclamation point dash dash and then dash dash greater than angle bracket. But in practice, I almost always use my editors toggle like this. So if you go back and forth, you can comment things out easily. Next, I'm gonna include a header tag. This is a tag that doesn't actually do anything in terms of the styling, but it's just a way for us to block out the structure of the document. This is especially useful when applying styling rules. It's also a way to indicate the logical structure of the document in a way that doesn't affect its appearance. We use the h1 tag and h2 tag here. Softcover Book Report so we'll call it and it's Moby-Dick or The Whale. It's the alternate title. Next, I'm gonna add in a div tag, which is short for division. You can see here the tab trigger actually asks me to include a class. We're not gonna cover that in this tutorial, but that's something you use in CSS. So a div is an abstract kind of tag. It doesn't actually do anything in terms of the appearance of the page, except to the extent that it's a block element. So it will affect the location of text. But it's used to indicate a division in the logical structure of the page. Our first div is gonna be a paragraph that describes the purpose of this page. And I'm gonna paste it in because it's relatively long. And then, because it's never wrong to include pictures of animals, even non cats on webpages, let me to put in an image of a sperm whale. We have to download this. I'll do that in a second. Remember it's a self closing tag. And then I'll put in another div indicating the main body of the book report. We've used an h1 and h2, lets put in an h3 now. And now I'm gonna include a link to the cover of the book. In fact, after this, I'll probably take a look at the page. So actually, let me paste this in here. Paste in the URL. And I'm going to include a second attribute here. I'm gonna say target equals blank. This may look familiar. If you saw the exercises, this is covered already actually. And then I'll put the image in here, notice that I can nest an image inside the tag here, which is again, something you would have seen if you've done the exercises. So let's just put it in here. We'll also have to download this. And now let's take a look at the page just to check our progress. All right, looks good. So you can see that we're missing these images. Let's download this. And I can do the other one. Let's just called moby_dick.png. All right, that looks good. Now this sperm whale image here is actually available under a license that lets us use it. And for attribution, I'm going to link to that on that page. It's actually Wikipedia. Actually, let me paste this in. So it's kind of thing that you copy and paste. Here it is. Okay, I can take a look at this. Now if I hover over it, I should see, yes, it changed to the little hand. So if I click on it, it'll take me to the page. There it is. Actually I found that Wikipedia, but it's Wikimedia, if you look carefully commons.wikimedia.org, which is a related organization. There's one thing I wanna take a look at here. It's reminded me when I scrolled past. Remember, I talked about target equals blank, that's here on this image, which is the book cover. So what that does is opens the link in a new tab. So up here, if I click on it, it takes me there. Now if I click on it, it opens a new tab. Which is often convenient. There are some people who think you should never do that. But the truth is that it's really convenient not to have to do to things like this, where you double click or right click and open in a new tab. You can always do that, but it is cumbersome. The convention that we use for the learning of tutorials is that if it's an external link, it opens in a new tab. Because that's usually what you want. The theory is that if you don't open it in a new tab automatically, the user has control, but you can get quite cumbersome. So this is a good design in my view on occasion. All right, let's go back to our page here. And right after this, I'm going to put a paragraph tag with a link to the title of the book, and the same URL here. Let's do that. All right, so let's take a look at this. Moby-Dick by Herman Melville. I know there's something subtle here. I wanna look at it more closely. You can see here, there's an extra space. This underline actually extends into the space. And that's because here, there's actually a new line after Moby-Dick. So in order to eliminate that, I have to get rid of that space. So this is one of those cases where space is not completely irrelevant when writing HTML. There is this kind of edge case. Save it and take a look. You can see there, let's just toggle that again. Look very carefully right here. See that extra little space? I'm gonna refresh it. And yeah, it changes slightly. So in this case, we actually do need to get rid of that space. The rest of it is working. And we're gonna say that Moby-Dick by Herman Melville begins with these immortal words. And this is going to be a quote from the book. And there's a special tag in HTML for this sort of thing called a blockquote. And I had no idea that there was such a tag, site tag. It's funny. You learn something, even when you're screencasting. It's required actually, in HTML5 to have a paragraph tag inside the blockquote. I learned this when I was making this tutorial, actually. So you're always learning. What do we want in here? All right, I want to call out the first line. The first sentence. It's very famous, it's Call me Ishmael. Let's see here. It's the name of the narrator. Call me Ishmael. And so what we're gonna do is put it in what's called a span. This is essentially the inline complement to div. So it's just a way of saying I'm gonna set this apart. We'll end up using it later on in this tutorial to style just the sentence inside the blockquote. And then the rest of it, I'm just gonna paste it in. It's right here. And then I'll paste in the commentary inside the div, inside a paragraph, like this. This happens sometimes and I'm not sure why. Sometimes when you paste in inside Atom, it does this strange thing with the indentation. See what happens? Yeah, so I can go to the beginning of the line and get it to work. There we go. Let's refresh and see how it looks. I need to do this here. Get back to the normal size. And I'd like to note that the dashes here are the Unicode version. So when we say UTF-8 up here, this prepares our document for the expanded character set pass just regular letters. Let's us use what's called Unicode. And before we used ampersand and then a dash, right? Let's see here it was. Right, we used to &amp;ndash. So this here, this here, and this here are both ndashes. So we could actually do this here. We can change one of them. It looks the same. See? And the reason I put this in is just to indicate that you can do both, or either. So this here is an mdash. Let me show you this. This is an &amp;mdash. And it looks the same. So this is an mdash, this is an mdash. It's a slightly wider dash about the width of an m, letter M. Which one you use is really up to you. As long as we have this character set, it's the same. But if I get rid of this, you'll see, actually, I think it'll look the same, probably. Yeah, but in Safari, it won't. So let's copy this. Right, so in this case, these dashes are broken because Safari can't handle it. So it looks like Chrome is a little more fault tolerant in this regard. But if I change them to ndashes, see? Let's just change into mdashes, these here. This will work even without UTF-8. You can see now it's working. But as long as we have the right character encoding here in our meta tag, it doesn't matter. So let's restore that. Now it works either way. All right, this is a good start. We've introduced these here, these header, div and span elements, span, which give us a way to show the logical structure of the document. And I like to have an extra space here for some reason. You know why I like that, but it just looks better to me to have a new line there. And we've seen how to nest images inside of tags and also we've introduced this target equals blank, as well as the blockquote. We wish to take a look at that. You can see how the blockquote is set in with indentation. That's a way of putting a quote in an HTML document. But otherwise, the other tags didn't actually have any visual consequences. Their use just to block out the logical structure of the document. That might not seem very useful, but divs and spans are heavily used when combined with Cascading Style Sheets. We'll see a preview of that in the final section of this tutorial when we do some inline styling.