Book Markup Exercise

[00:00:00]
>> Jen: What's gonna happen now here for this boot camp is that you are gonna work on some stuff on your own. Because part of learning code is working with the code by yourself, okay? You can follow along with me all day long, and you'll be just fine. But when it comes time for you to actually work through a problem by yourself, you're gonna go, wait a minute, what was that thing she said?

[00:00:21]
[LAUGH] Okay, so I want you to refer to this document that I've given you here. All the tags are in here that we covered today. You can look at this any time. There is nothing wrong with cheat sheets in code. The pros use cheat sheets all the time.

[00:00:38]
It's the only way we survive. Google is your friend, Google for whatever it is you need. You can find all kinds of documentation out there on the web. Nobody has all this stuff memorized, okay? And if you scroll to the bottom of today's lecture, in HTML, you'll see some additional stuff that I've given you here.

[00:00:56]
So first of all, here's some references, okay? So all the references that you can go and read more about this stuff. More about basic web pages, more about links, little bit more about everything. So first of all, I'd like you to mark up a book chapter. So I've given you a book chapter from long ago.

[00:01:16]
This book was published in 1922. It's out of copyright and it's a book about how to make money doing photography. So it's kind of interesting. All right, so going ahead and you'll copy off this plain old text here. And you're gonna need to mark this up somehow so it'll go on your web page.

[00:01:37]
You're going to have to give some thought as to what the right tags are for all of this text, okay? And I made some notes in here too. Like here on line 27 it says, emphasis, okay? Start your emphasis tag here and end it here, no as a no if the field is not overcrowded, all right?

[00:01:58]
There is a few of those little notes in here. But otherwise, I just want you to go ahead and take this and mark this up. So that's something you're going to work on. There's also here, some additional HTML practice. So if you go to the W3 School's website, there's some, it's like kind of like a quiz.

[00:02:16]
So to help reinforce your learning from today, you can work through these exercises here that I've listed. This is gonna cover stuff that I talked to you about here in class today. You're welcome to do more if you want, but I probably haven't talked about it. Okay, so if you don't know the answer, there's a reason why.

[00:02:34]
All right, but all of those you should be able to complete. And then, if you still need more to do, keep on working on the pages that we started here. A little bit of information about you. More information about your hobbies and your activities, okay? Just go on ahead and keep working on that kind of stuff, that's what we're going to be doing.

[00:02:53]
Are there any questions?
>> Speaker 2: I hate to use the word formatting, but I think it's accurate. When we're doing VS code I think it looks really good. I don't remember making it look quite as what I would assume as accurate-
>> Jen: Yeah.
>> Speaker 2: As it should be as far as indenting and stuff.

[00:03:11]
>> Jen: Yeah.
>> Speaker 2: Is it doing that while I'm not looking or?
>> Jen: Mm-hm, it's really nice, isn't it?
>> Speaker 2: Good, I'll just not worry about it too much.
>> Jen: Yeah, don't worry about it. It makes it nice an readable. Phew, what else, yes, Mark?
>> Mark: With the image tag, that is actually content, so should that be wrapped in a paragraph as well?

[00:03:33]
>> Jen: It can be, it doesn't have to be. It validates just fine if it's not in a tag. So it can be outside of a tag.
>> Jen: Other questions?
>> Speaker 4: If it was in a paragraph, it would just add extra space above and below right?
>> Jen: Correct, yeah, yep?

[00:03:54]
>> Speaker 5: I'm working on if you were to add a video is there like a preferred format?
>> Jen: For adding a video, we're going to cover that later in the course. Later in the course, no videos today, just pictures.
>> Mark: How do you add a comment in HTML?
>> Jen: Yes, adding a comment in HTML.

[00:04:12]
Sometimes you wanna make notes to yourself as you are working in HTML. It's really nice to be able to write yourself little notes. And so if you want to write yourself a note, it's called a comment. And so here's the way that you do it. You're gonna put in an <!--.

[00:04:32]
Okay, and that is actually, there's space in between those two things. So that's what a comment is. That's how it starts, <!--, type whatever you want in between and then --> will end it. So I could write myself a note here, remember the right file path to the image.

[00:04:57]
Okay, that is not gonna show up on your web page.
>> Jen: It will only show when you take a look at the code itself, okay? So if I go ahead and do that really quick and refresh my web page, my web page, you'll see here,
>> Jen: My comment does not show on my web page, all right?

[00:05:27]
However, before you start putting a bunch of four letter words and mean things in your comments, okay? Note that if you right-click on this web page, if you're on a PC or Cmd+click if you're on a Mac, and say view page source. You can actually view your HTML that you've written right here in your web browser.

[00:05:51]
You may not have known that that existed, okay? And here you can see your comments. And people do look at your code, and they do crazy things with comments. All right, so just be aware, be nice. [LAUGH] people can still see what you're doing, yes.
>> Speaker 6: If you were to just add a bunch of comments throughout there, would it slow down the speed of your website or would it just get skipped over?

[00:06:18]
>> Jen: There's no rendering of the comments. So typically, that's not going to put a huge drag, especially at the level that we're commenting here. There are,
>> Jen: Scripts that are designed to go through code and, quote, optimize it. That's especially true with CSS. So its called minification. It will take all of that code, take out all the spaces, take out all the comments and make it basically machine readable only.

[00:06:47]
And that will reduce file sizes and make things load a little bit faster. So you'll occasionally see that kind of thing, not so much with HTML.
>> Speaker 6: Yeah, in general, just to add on with what you're saying. HTML is fast, very, very, very, very fast. So if you add thousands of comments, it's not gonna slow down

[00:07:03]
>> Jen: It's not going to take a while.
>> Speaker 6: The big things are the the images and your JavaScript and your CSS. These kind of external assets that you're loading into your website.
>> Jen: Absolutely.
>> Speaker 6: It'll slow it down.
>> Jen: Yep, that's the things you really have to worry about.

[00:07:18]
By the way, let me show you my favorite, my favorite comment of all time, she better have left it up. This is lingscars.com. Ling is a person who rents cars in the United Kingdom. And she makes an awesome website. [LAUGH] Okay, she's coded this whole website herself. And it is absolutely phenomenal, okay?

[00:07:45]
And it goes on forever. Yeah, this is not 1998, this is 2018. And she has made $130 million on this website. So it works, okay, it's a successful site. But my favorite thing of all here is in her comments. So if you view her page source.
>> Speaker 6: [LAUGH]

[00:08:15]
>> Jen: So be aware people can see your code, okay? It's there. Sometimes they'll leave you a message, all right? So, yeah, Ling. Okay, and you can spend hours on here, you can have a ton of fun even if you never rent a car.