Transcript from the "Book Markup Solution" Lesson
[00:00:00]
>> Jen Kramer: So moving on here. Here's the book chapter. That's the way mine looks, not that looks really have a whole lot to do with this, okay? But it looks kind of like that. And, so I wanted to show you my code and talk to you about what I did and why.
[00:00:18]
Now, there are some right and wrong answers to this, but there's also a whole lot of gray area when it comes to writing code. A lot of this is very subjective. And so what I tell my students is, if you can justify why you did what you did, maybe I'll buy into your argument.
[00:00:38]
Because sometimes, this markup depends on what you're trying to communicate. So here's the way I did it in mine. So we start with our h1, what's it all about? That's kind of the chapter title, and so that gets a heading tag. Then we have a whole bunch of paragraphs, or anyway, two of them.
[00:01:00]
And then we're gonna go here to our first quote. Now, there were a lot of dashes that were involved here, I was trying to set that off on the page, so that your eye was drawn to it, and you would know what I was talking about. I took those dashes out.
[00:01:13]
If you left them in, that's fine too. And, so here I have the block quote. And this is the way I mark that up. So I have a block quote going around the whole thing. I have the actual question, the actual thing that's being said. This book is a practiced or practical up to the minute, answer to the question, how can I make my camera work profitable?
[00:01:33]
And then I have the citation. And there's actually two parts to this citation, we have the man's name and then we have what he's doing for work. And I've divided those using a tag that I didn't introduce in class today, but some of you may be familiar with.
[00:01:46]
It's the br or the line break tag. And so, the line break tag is designed exactly for this kind of purpose where you would expect some of this information to be on different lines, okay? And we would expect the person's name to be separated from their job title.
[00:02:05]
You could potentially put it all on one line, that wouldn't be a problem at all. But if you took out that br, like that, and had this all on one line, that's just fine. It's not a problem at all. But, I thought it might work better if I put those on separate lines, but also within the cite tag, okay?
[00:02:28]
That is we scroll along, we have some more paragraphs, some more paragraphs. And then we have, as in this paragraph as it says, read what Waldon Fawcett says, himself a success at selling his photographs. So we have a sentence that's leading into a quote, right? We're reading what Waldon Fawcett had to say.
[00:02:47]
So here is our quote. Once again that's a block quote, and then I think I had you put in some emphasis text. I use the m tag here, so that it's just sort of emphasized. But if you had strongly emphasized, you wanted to make that decision to use the strong tag here, you heard it as like, this is really strong and powerful, that's okay.
[00:03:10]
The strong tag would have worked here as well. Either of those it's just fine, okay? Then we have a paragraph here, and then we go on to our next quote, because this is, here is what one prominent writer says about it, right? So we're quoting somebody again. So here's our block quote.
[00:03:28]
Once again, there's a paragraph inside of that, but notice that there's no citation here, okay? No citation. We just have the block quote around the paragraph, okay? And as we keep on scrolling, we have another paragraph. Then we have, is the field overcrowded? I felt that was strongly emphasized, regular emphasis would have been okay too.
[00:03:50]
So either the strong or the tag. Going down a little further, we have our next paragraph. I did making and selling, I did those both as regular models of emphasis, if you did them as strong, that would be okay too. I think stylistically speaking, it would have been kind of awkward if you were making one level of emphasis and selling a different level of emphasis, I just think that's not natural.
[00:04:16]
Technically, you would've been perfectly correct, but I think stylistically you probably wanna keep them at the same level of emphasis.
>> Jen Kramer: Then we have our big ordered list, right? We had all those numbers in the parenthesis, so you can just take those right on out. The browser will put those in for you, as part of its styling of this document.
[00:04:37]
So all you have to do now is just say, the ordered list, and here's all of the individual list items. Take out all those numbers in parentheses. And we have another paragraph, and another paragraph, and another paragraph, and another paragraph. Down here towards the bottom, I'm at line 64 now.
[00:04:58]
We have hard work, being emphasized down here at the bottom. And another paragraph, and then we had this last paragraph, which can be, I think a little bit confusing. So clearly, this is a citation of this particular book, right? So somehow we're crediting who the book is, and the title, and the author, and the publisher.
[00:05:20]
But what is actually the citation of all of that? So the way I marked it up was I said that the actual making your camera pay by Frederick C Davis, copyright 1922, Robert M McBride and company, New York. That's really the whole citation, right? If you are writing a research paper and citing this book, that is what you would put in your references at the end of your paper, that whole thing.
[00:05:42]
So, I've put the side tag around that part of it. You may have put the cite tag around the entire and called the whole paragraph, a citation, and that's probably okay too. I might be over thinking it, okay? But I think either of those would be okay. But think about, let us again, since this is HTML, and we're thinking about what we're trying to convey, in this case, I'm just conveying that this citation is really just the citation, rather than some of the extra book around this.
[00:06:13]
And then of course at the end we have the full book is available online and I put a link into the Gutenberg Project. And, there is a target equals blank, there at the end of the link. You didn't have to have that, but I went ahead and put it in since it's going to a cite that's not this one.
[00:06:32]
Mark, you had a question?
>> Mark: Yeah, from online, Elena suggests putting the last paragraph in a footer tag?
>> Jen Kramer: A footer tag. Yes, that would be a great option also, Elena haven't talked to you about footer tags, yet at this point in time?
>> Jen Kramer: But, I mean shockingly, I did not tell you about every HTML tag today.
[00:06:54]
I know you're really surprised to hear that. There are a whole lot of HTML tags that are out there, including a header tag. We talked about the head tag today, head and body, but there's also a header tag. The header tag is all about like, the top bar of the website, like cite identity and stuff.
[00:07:12]
We'll go through some of this later in the course. But the footer tag would definitely work here, that would be perfectly acceptable. You could put the footer tag around this, and then put everything else inside of your paragraph [COUGH] within the footer.
>> Jen Kramer: So it would wind up looking like this.
[00:07:32]
Great point Elena, nice.
>> Elena: So would there be a reason to put in the paragraph tag within the footer if you don't have like more than one paragraph? That seems redundant right there.
>> Jen Kramer: It seems redundant to say both footer around the paragraph. Well, footer is kind of this this area of the website and then this is actually a paragraph of information.
[00:07:51]
So I'm trying to convey both of those things, so I'm using both of those tags. Yes.
>> Speaker 4: Please scroll up to, it's like four paragraphs up, it says, and how does it pay? That's how it starts.
>> Jen Kramer: And how does it pay. And how does it pay? Yep?
[00:08:05]
>> Speaker 4: So, there's quotes in there, but we're not blockquoting at all? There's no reason to.
>> Jen Kramer: That's a good question. These are very short quotes. So, technically speaking, I don't think I would use the blockquote tag for this. You could,-
>> Speaker 4: [LAUGH] Yeah, It does check it up slightly odd when it shows on the website.
[00:08:27]
>> Jen Kramer: It looks really odd in terms of its formatting.
>> Speaker 4: Yeah, it does.
>> Jen Kramer: There's another tag called q, believe it or not, that is perfect for this kind of situation. And we could use q to go around these quotes. So q is a topic I'm gonna talk to you about later in the course, there is the concept of block versus inline elements.
[00:08:49]
Inline elements are those that are right in line with the text, like your links, your strongs, your ems. In other words, we put those tags in and the text just continues to flow on, right? As opposed to something like,a block quote or a paragraph, where it pulls on out and it's its own thing in space.
[00:09:08]
So q is a tag that is designed to go inside of a paragraph just like this. It's not as a meaningful as a block quote, in terms of pulling it out and featuring it prominently on the page. But if you wanted to put a q tag around this, I think that would be acceptable.
[00:09:25]
Great point, and of course I didn't introduce you to that tag today either. As one of the more obscure ones, it's very seldom gets used. Yes, Jenna.
>> Jenna: Third and fourth paragraph. There as Waldon Fawcett says, can you use like a cite around that because he's gonna say something and then-
[00:09:52]
>> Jen Kramer: Okay.
>> Jenna: I mean, I guess, I'm wondering the reasoning on that, and then I was also thinking about just if it has quote, should we be putting those quotes there every time? Or the q, I'm sorry, the q tag.
>> Jen Kramer: It sort of, well it depends.
>> Jenna: [LAUGH]
[00:10:13]
>> Jen Kramer: It depends.
>> Jenna: That's the way I was doing it.
>> Jen Kramer: Yeah. So here in the case of this blockquote, we wouldn't use the q tag at all. You've used blockquote, so you don't need to put the q tag in. This is not part of a paragraph, this is a separate, here is a big thing that Waldon Fawcett said.
[00:10:30]
I did not put the cite tag up around Waldon Fawcett, and I actually have to think on that a little bit.
>> Jenna: It's just spelt like it's saying styles, it makes me think-
>> Jen Kramer: Yeah.
>> Jenna: It should be there.
>> Jen Kramer: Yeah, he is the person who said it, so yeah, I mean, I totally see your logic and reasoning, I would actually have to read up on the cite tag to determine if that's, yeah.
[00:10:56]
>> [INAUDIBLE]
>> Jen Kramer: Yeah.
>> [INAUDIBLE]
>> Jen Kramer: Yeah, cuz usually I've seen the cite tag used directly tied to the quote, as opposed, this is kind of separated in space. So let me do some more reading on that and see.
>> [INAUDIBLE]
>> Jen Kramer: Yeah, yeah. I mean, and this is what I'm talking about, where the art comes into HTML, like, what is really the right answer?
[00:11:17]
We can talk about it, we can have that debate, okay? Other comments, questions online, here in person?
>> Speaker 6: Paragraphs and citations seems to do the same thing, they both the display texts. Is it a matter of how they do it, or?
>> Jen Kramer: Where exactly are you talking about?
[00:11:35]
>> Speaker 6: I mean, just the two tags, the paragraph tag and the citation tag.
>> Jen Kramer: Yeah?
>> Speaker 6: They're both display tags, right? So can you interchange to them, or?
>> Jen Kramer: No, they're not interchangeable, a paragraph is a paragraph, so like, these are paragraphs of text. We would not put the cite tag here.
[00:11:53]
This would be totally wrong. Does that make sense as to why that is?
>> Speaker 6: Yeah.
>> Jen Kramer: Yeah, cuz this is, we're not citing anything here. We would wanna leave that as a paragraph, cuz that's clearly just a paragraph of information. Yeah, so they're not interchangeable. Other questions? Yeah?
[00:12:13]
>> Speaker 7: Do the lines, like the, I don't know what they're called, but those lines three lines on the side, the indentation I guess, do they matter or are they just stylistic to help us?
>> Jen Kramer: Great question. So, they are stylistic here so you can read your code. And they're helpful cuz, if you noticed, like, let's look at something complicated like this block quote thing here.
[00:12:33]
See, we can easily find the beginning and the end of the tag. We can easily find the the paragraph here and the citation that they're inside of this block quote. So it becomes much easier to read your HTML and understand how things fit together. So I think that's pretty much it, though we needed a talk about here in terms of the book chapter, in terms of images, and getting images ready for the website.
[00:12:57]
We'll be moving on to CSS very shortly.