Hello, and welcome to Web Applications for Everybody. In this screencast, we're going to play with some of the sample code, and you can either download it and play with it on your own computer, or you can look at it in your text editor. Or if you just want to browse it, you can browse it here, and take a look at the version that I'm using. It's really been intended that you look at this in the Developer Tools. And so you can do things like say, inspect element. And so here we are, this obviously will be a little more valuable even when you're doing CSS, but you can see the Document Object Model. Now the interesting thing here is, it shows something I'm always talking about is the difference between the Document Object Model and the source code. So this is the Document Object Model, it's kind of stylized. If you look at the source code, you have to say View Page Source. And so the source code, this is literally exactly what's in the file. And if you go look at this file in a text editor, you will see this. And if you're looking at it here, it doesn't quite look exactly the same and some things have been done a little bit differently. They kind of got this extra stuff, and this is after the browser has looked at it. When we start talking about JavaScript and changing some of this dynamically, you'll see this part is the Document Object Model. But the source never changes, the source is what was originally downloaded when the server sent this back to us. So, let's take a basic look at this, I'll hide this unless I need it. I'll go back and forth between the source, so we have our basic document, HTML with a head tag and a body, and then a header. And of course, here's our header. We're using default styling, and paragraphs are an important part of things. You can squeeze this up as much as you want, white space sort of doesn't matter, so this white space kind of doesn't here. The fact that this has got extra space, it doesn't much matter. And so you can see an anchor does strong tag that leads to a boldness. Let's just go ahead and look at here in Inspect. Go down here and we'll find like a strong tag, that's the bold. We got an emphasize tag, and if you look a little farther, you'll see there is a anchor tag, which is the whole anchor tag is this whole tag from the a to the /a list.htm. That's where we're going to go if we click on this text right here and so you can see. Now this is a relative link, and it turns it into an absolute link. And that's because the browser knows where we're at, and so it prefixes everything up to that to the relative link. That's nice, because if we look in folders, we will see that these folders are all here. Here let me go find you that folder, it's pretty deep in my, Later, this will all make wonderful sense to you. I do a lot of stuff with web. Code, HTML, okay, so here we have, after all that, here we have the files, right? And so this is index.htm, and index.htm is right there and list.htm. So if I click here, I'll go to list.htm, and that will pull this other file up. And so these guys are all in the same folder together, which is means that, I can use relative links to go moving between them. A tag that's really becomes more important especially is, when we were talking about writing codes inside htm on showing people code is the pre tag. And so the pre tag, and you can just say Inspect to hop right down to where the pre tag is. The pre tag respects spaces, so all these spaces happen, the newlines happen. And it also shows in a monospaced font. And you can change all these things once we get to CSS. But pre tag, when we're printing debug out from, not in files like this, but when we're running code, sometimes it's good to print debugging out in pre tags. So let's go to the next page. And so here's a whole series of things we're going to play with. This is a unnumbered list. This whole thing is an unnumbered list from top to bottom. So when I highlight this, you see the whole beginning to end of the list. Then each item in the list has a start and end li tag, right? Down, down, down, and also here's this, we should learn about tables, and there's a href, there's another relative link. And so this is sort of my jumping off page to get to all those other things, right, learn about tables, etc., etc. And so you can see these, we probably use just to take a look at the source code of this page. And so that's the source code that I typed in, and you can see the li tags, the p tags. I'm putting p's inside of lis to get space. Let's see if I can sort of show you that. So if you look at this, and you look at the li tag, the li tag is that and the paragraph is what actually creates the vertical and horizontal space, right? So that orange that you're seeing that's paragraph, there's a space that the paragraph tag has preset. So that's how I do that. Putting paragraphs and hrefs, and so that's what this all looks like. So, let's take a look at special characters. And, so this is an interesting thing because it's not really what came out, because less than requires < but it's kind of processing that. So let's take a look at the source code to this one, because that'll be more instructive. So <, >, &. This is an & in HTML, and then just the letters amp; semicolon's not special, there are only really three special characters less than, greater than, and ampersand. And you can put all kinds of fun stuff, clubs, hearts, and diamonds, some arrows, stuff like that. What's nice is browsers just have these built in, although they're not necessarily the sexiest or coolest things. I think what happens when I go back on this link is I go back to the list. So that's just special characters. And you'll notice that, the default styling, it says we've seen this one, and this is how the web worked 1,000 years, no, back in the 90s. As you sort of, it's kind of nice that it's turning purple. And you'll notice that Google does this as well, when you're doing Google searches. It actually lets the links change color after you've visited them. So let's take a look about links, we look at links, I'll view the source of this guy. Absolute link, a href, right, then /a. This is the clickable text, right, between the beginning tag and the ending tag, the attributes are on the beginning tag. Another attribute that you can add, and I do it all the time, is target=_blank and basically is the way we say, open this up in a new tab. So you'll do this pop up in a new tab, and so, that's where that one goes when it pops up. And so you can decide whether or not you want this to go in the same page back, or in a new page. And then I've gotta close the tab to get back and then I'll go back. because that's just a relative link to list.htm so I can go back and look at the next thing. Let's take a look at how images are represented. So this is just a paragraph that has an image in it. Right, so it's a paragraph, but there's the image. Source equals medium.jpg, if you look in my folder. If you look at my folder, you see the image right there, medium.pmg. You don't see the suffix because Mac is trying to hide it from me. And so that's just, you see the space here and here. The image doesn't have any space. We could add some in CSS later, but the paragraph is what's adding the s space. And we have just the regular old paragraph. Not supposed to use the center tag, we'll get to the how to center stuff, so that's what that is saying right there. And you can have an image that's right in the middle, so you see where that image is. I think of images, if they're right in the middle of text, they're like a giant character. And so that's how that works. And you could even stick an image as the thing inside of a link. So here's the anchor tag, it's that bit right there, and then the anchor tag body is an image. And so if I click on that, it's going to go back to list.htm. You notice these all go back to list.htm, so I can work on the next thing, right? Tables, again, you're not supposed to use tables for laying out, like, blocks of text which we used to do. We used to do things like use tables to draw borders around things, which we'll see in CSS, but now that's totally verboten. And you're supposed to look at tables in a way that they're nice and pretty. So let's do a view source here. So let's see, there's our table our /table and a table row. Now let's take a look at the DOM. So apparently, I didn't put T-body, we were supposed to put it T-body in there. And I didn't do it. Bot this is the DOM. The DOM put it in, that's put in by the parsing. And so clearly, I made a little mistake in my HTML, because I didn't put a T-body tag, and so that was added by the browser. As it was parsing reading through this like, we forgot this T-body, so just like slapped one in for me. And I think the mistake is, this is my header row and I think that should be like a T-head, so there I go, bad HTML, that's the story of my life. And I've got the rows, and you'll notice that the DOM is kind of prettier, so sometimes I do this. The DOM is indented nicely, so this really isn't the source code, this is the data that represents this visual, right. It is the thing that you are seeing, but it read this from the file or from the server, parsed it and produced the Document Object Model. I only say that about a million times. Okay, so back we go to the lists. We're making pretty good time. So here's some really bad HTML, I'm going to view source on it. And again, you'll see sort of the difference between the Document Object Model. When you're debugging these things, you will have to sometimes view source. Sometimes Document Object Model will be the only way to debug it, and sometimes view source. So this is the one that's got bad stuff, like h1 is uppercase, this paragraph tag is not terminated. This UL tag is uppercase, this LI is not terminated. I don't have double quotes here. So there's a series of mistakes that I've made in this HTML, but It looks pretty good. And you'll notice in the Document Object Model, it's fixed all that, each one is lowercase. The p tag is finished. There are double quotes, meaning, the Document Object Model is not just your HTML source code. It's like the sensible parsed pretty version of the HTML source code. This UL tag, these LI tags are now done, the UL is lowercase, everything is lowercase. So it's like, I'll take care of your mess, I'll patch up and fix your HTML, and then I'll display it for me and make sense of it The Document Object Model is not the same. It is sort of like a sweet, awesome better version of it. But this is what changes that. So let me just show you something how I can change the Document Object Model. Let's see, let me see if I can change this text. I change the Document Object Model, that changes. So I'm actually, but that didn't change the source code here, the source that it was retrieved to produce it, but I can change the Document Object Model. And later in the class, we will write code that will actually change the Document Object Model. So we'll just change this. We will call this, be going to lists, Yet again. So I can change the Document Object Model. So you see it changed it, so when we change Document Object Model, what we see in the browser changes, but the source doesn't change. Did I say that enough times? So let's click on this, and go back to lists. Okay so, some HTML can be broken so badly, so that it doesn't render at all. Whoops, that didn't work so well. I'll do a View Source on it. And then, I will let you figure out why this doesn't work, why this doesn't show? You take a look at the source, you figure it out. I hope this has been helpful to you, see you on the net. [MUSIC]
