So now we're going to talk a little bit more detail about how HTML works. It's just some more of the things. And again, I'm not trying to make you an expert. So the first thing to talk about is the fact that there are two basic parts to any HTML document. There is the HTML tag. That, in effect, scopes out. The DOCTYPE talks about the different versions of HTML. I think a lot of people are starting to just not even put DOCTYPE out but you might. HTML tag is the whole body. I mean, the whole document. And then there is kind of like an HTTP. There is some metadata in the document that doesn't actually show up but describes the document. We load CSS in here. Do other things. And then the body is actual visible stuff. I'm not going to show all this in every one of my examples, but understand that a page itself is supposed to be bracketed in an HTML tag with head material which is metadata and the page content that is in the body tag. You'll also notice as you start creating HTML files that there are some files that are special. So if you have like a URL that points to a directory like blah blah blah blah blah slash ABC, which is just a folder, and ABC is a folder, then inside this folder there might be a special file like index.html, index.htm, or index.php. And so, this is part of that Apache web server. It has a configuration that says, if someone navigates to a folder, go look up a particular default. And usually, index.htm these days is the most common one. Index.html is kind of old. In the old days there was like a la-di-da, the Unix people had more than three-character suffixes. And so, this was like the cool Unix people. And this was the non-cool Windows people. But now Windows can have longer suffixes and so everyone just gave up and uses index.htm most of the time. So you'll probably build most of your files that are HTML files with a .htm suffix. Of course, later we'll make PHP files that dynamically allowed code to run and dynamically generate HTML. And that's something that we will do in an upcoming lecture. But there is a way when you're using a web server like Apache, which means you're in a browser that's localhost or, you know, blah blah blah, then Apache, when you go to a folder, goes and gets the file name as the default view of that folder. So you can also put multiple files in a folder and so you have kind of this index, in this case index.htm which is kind of the file that is shown to the browser if the folder is navigated to. And other HTML files which you can link between these. And then, perhaps, even image files that are in the same folder. And so, like I said, you can have all these tags. HTML has all these tags that allow you to mark up and they start and they stop, and you put bold. And then these basically show bold, or italics, or whatever. Now, the other thing is that none of the newlines, or the blank lines, or the end lines inside the HTML actually matters. Unless you work extra hard. The browser wants, as you resize the width, it resizes these things. So this is not exactly precise presentation that says, put the letter a in the upper left hand corner and put the word the here, and put the word developer there. No. We basically allow within paragraphs the wrapping to happen dynamically. And so, this allows us, depending on if this is a really tiny screen, or a large screen, or maybe you've got a bunch of windows open on your computer, a lot of HTML will rewrap automatically. Now, with CSS you can do things like put solid margins on things. And some folks like to build web sites that don't wrap. That's actually a stylistic argument, but this is not a design class. For now, unless you do otherwise, content will be wrapped dynamically. Tags have beginnings and end. So anything in less than, greater than pair, is a tag. And a start tag, an end tag is basically the same name as the start tag with a slash. And so, this is like start bold, end bold. And it applies to the text in between those tags. Another thing you can have is attributes on tag. These are called attributes. They're key value pairs, so this is an image tag. And so, this is also a self-closing tag because this basically says, wherever at, put this image here wherever we're at. And where do you get the source? Well, that is the image files sitting in the same folder that's going to show up in this image. So these are attributes. You can add more. You don't have to just have one of them, you can have as many attributes as you like. You also need to be able to put in things like less than and greater than because, in effect, you're writing code. So HTML is very simple programming. It's very declarative programming. It's relatively easy. You can look at it and go, Oh, I kind of get what that's doing. But in this programming language less than is like code. And greater than is code. So how do you do this? Well, we've got these things called HTML entities. And ampersand is also a special character but it's used to escape these HTML entities. And so, ampersand less than semi-colon becomes less than. Ampersand greater than colon becomes greater than. Oh, what about ampersand? Ha ha. Well, we got that too. Ampersand &. And then there's some other fun things, and you can put special characters and smiley faces, and various things like ampersand, heart, semi-colon, go look up all these things. These are called HTML entities. I actually like these little arrow guys because then I don't have to have images for arrows. I just say, hey, be an arrow, a left arrow, an up arrow, or a right arrow, or a down arrow. And that just our browsers will show you that. And that's really just a character. And of course, for kids these days you can make emojis. So emoji is also, many emojis, even have these kinds of things in them and so it's cool. Who knows, eventually we will find that these old characters, 100 years from now, what, that's like when ancient people used to write on cave walls. We only talk in emoji now. But who knows what will happen. OK. HTML comments. Any programming language needs to have some kind of a mechanism to have comments. Less than, exclamation, dash dash. This is the beginning of comment. And then dash dash greater than is the end of comment. These can go across multiple lines. And this basically is something that shows up in the HTML source but has no effect on the HTML output. And if you're a programmer you know that comments are sometimes there to say something. Or sometimes you use it to comment something out, like you comment this out by putting less than exclamation dash dash, and then dash dash question mark. And then all of a sudden, this sort of ceases to exist except you really didn't want to delete it, you wanted to suppress it because you're testing something. So you can use comments either for annotations for future developers. I once saw an organization that basically had less than exclamation dash dash. A big thing in their web page was, if you are reading this, you might be the kind of person that wants to apply for our job at our company. Here is the URL for our job application. So it's like, Oh, who's viewing the source of this HTML page? And if you're that kind of person, or running it in developer console, then maybe you're the kind of person who wants to work for our company. So people put all kinds of secret things. The University of Michigan page at one point had a comment in it that had a big block M in letters, written out in letters. And so, that's just like an Easter egg. So sometimes people put Easter eggs inside their HTML comments. But we're just programmers. You can put Easter eggs in if you want. OK. So let's talk about links because H-T-M-L stands for HyperText Markup Language, and hypertext is links to other things. And so, that's the whole idea. And literally, these hypertext links are like why search engins work, it turns out. I mean, without hypertext links there would be no search engines. It's great for navigation but it's even greater for search engines, because search engines effectively look at the links as the way to a, discover content and b, the way to determine which content is more or less relevant. And so, it is really a very, very, very important stuff. And so, when you build pages, the pages that you link to, you're creating collective knowledge. Each web site that you build that connects to other web sites, in effect, contributes to the collective knowledge. So there's one tag that allows you to do links, called the anchor tag. And that's the a for anchor. And it has an attribute. So a, and then href is the attribute. Remember, this is the tag, href equals, and then attributes have to have double quotes, and then you can say a URL. And what you're basically saying, and this is the text so there's a beginning tag and an end tag. This is the end of the beginning tag, not the end tag. This is the end tag. So between the beginning anchor and the end anchor is the text that's going to be highlighted. And you'll notice that because I haven't used CSS, it's styled as blue, because I haven't clicked it yet, and underline. So blue and underline. And says, when I click it. Now, this is a piece of software. In this case it's Chrome and it's a browser. And this software is running on your computer and you're moving your mouse around, and it somewhere in there click. Then it looks at this and says, Oh, what did you mean to do? And that's where the request response cycle which we talked about in an earlier lecture happens, ok? But that's an anchor tag. How you say this text is supposed to be highlighted and upon click go to this place. These links can be relative or absolute. And so, if we're in a particular folder and don't put the whole HTTP, you can put just the relative which is a file in the same folder. And so, we can go back to the first page. I clearly have clicked on this because it's now purple. The default styling for better for worse. Again, you have to go back 20 years to realize why we do this by default. If it's purple and underlined, it's a link that has been clicked on before. Part of that was keep on going and explore new parts of the world wide web. That was back when the world wide web was small enough that we tried to get you to go places. Now you go places. Now all of us go places without really thinking too much. And so, these are just two example anchor tags. They're anchor, the start tag. That is the start tag. This is an end tag. And then this is an attribute in that. And we can either have a relative or absolute link. So images are another part of this. Actually, if you go and you can find perhaps the original arguments whether or not images were supposed to be inlined or not in, I don't know, 92, 93, 1992, 1993. There was an argument that we shouldn't have images on the same page as text, and it used to be that all images would open up in a new window. And that was a fierce argument, and images within the text won. And so, the image tag. I probably should put a slash here. I missed that slash. The image tag is sort of like the anchor tag, has text that it starts and ends. And so, the image tag is like a character. It's more like a character. And so, you say images can be right in the middle of text and so this is like images can be right in the middle of text. So you can think of this as grab this little tiny image and stick it in the text, and it just reflows. And if you change the width of this, it would reflow everything and away you go. Now, you can actually, if you think of the image like a super special awesome character, small, medium, or large. I put this image in the middle of an anchor text. So here's the start anchor tag, here's the end anchor tag, and the clickable thing is this little link. So you can go do this and play with this code on code images.htm. You click on that thing and it will go to lists.htm. So you're just going back and forth. And all this stuff is up there and you can play with all of these URLs at web applications for everybody dot com. This is a list. It's another thing to talk about. So lists of things. There's a couple of different kind of lists. There's lists with numbers and lists with bullets. We do a lot of lists. And again, we're helping things like Google figure out semantically what this page is about. This is somehow some roughly equivalent set of stuff. And so, this is going to be an unnumbered list, that's what the UL means, which means it's going to have bullets. And so, unnumbered list and then LI, to slash LI. And so, LI is that list item and so that's just telling you when to put the bullets in and when to break the justification. Now, you see that I also have a paragraph tag. And that's because the default styling of list items does not put any white space in between things. And so, the paragraph says put some white space. So this white space here is coming from the paragraph, not the list tag. And so, if you just do this, you can do it without the paragraph tag, but you won't get this whitespace and it look kind of whatever. So it look kind of tight. And so, the rest of this is just HTML, some anchor tags, etcetera, etcetera, etcetera. This whole little sample stuff is so you can click back and forth and view source. Usually, you right-click and view source. And you can see this from that page. That's one of the wonderful things about HTML. It's, however clever someone was in making an HTML page, you can always view source. You might have to turn it on in developer mode so that you can view the source of the web page but it's really, really useful, because you can see everybody's cool tricks. Tables are an important part of HTML for tabular data. In the old days, I know I keep going back to the old days, in the old days tables were used for graphic layout. But that was super tacky. Now we use the CSS for graphic layout. That's the next thing we're going to talk about. But turns out that there are still tables. And so, tables are like grids or spreadsheets, and it's just a set of markup patterns that tell us how to mark up tabular data. And so, we start with a table tag and end with a table tag. And the table has a series of rows. One, two, three rows. Civic's not showing up down here. And so, there's a header. There's actually a T head that I probably should have put in there. And the first row is this header row and there's a TH, and an end TH. And that's basically making a little grid. You can control with CSS the width of these things, otherwise, it's actually just like it's resizing these things, it resizes these as well and finds ways to fit them on the screen. Now, this is all small so we're not really overloading it. But if I made one of these things super long, it would expand these things dynamically. And again, with CSS you get a lot more control over this. And then now we have a row of data that TD stands for table data, slash TD. So that's one little grid item, one little grid item, one little grid item, grid item, so those are the grid items. So tables are pretty easy to do. But you only use them when you really have a table of data. When you have a table of data, like a bunch of rows, or courses, or all the students in a course, or something, you want to use a table because then that is the most semantically accurate way of representing the markup for a table data. And so, you can play with this sample code, go to Web applications for everybody dot com slash codes slash HTML. If you set it up, you can go here, and you can right-click, and you'll see a thing that says, inspect element. And you can go find it down here and look at this. And you can play around and over the course of this course we will learn more and more about this developer console. But for now, we're just playing with the source code. And again, if you've got it set, you can also do a right-click view source, and then it'll pop up in another tab the actual source. And so, the source is pretty much exactly what the web server sent back to us. And we'll later realize that this is the actual document object model which is the thing that you're viewing. And for simple pages, the document object model and the source are one and the same. But after a while when we start fooling around and change the document object model in javascript, we will see situations where this stuff changes but this stuff does not. But we're kind of getting ahead of ourselves. And so, there's a view source, view this, and there is the inspect element view. You will learn to use both of those at the right times. And so, that's a zoom through HTML. It started out as a beautifully elegantly simple. I mean, it would go back to Tim and Robert. And it's so beautifully elegant and simple made by engineers who were limited in their resources. And then what we've done is, without really throwing it away, we've just evolved it to be super beautiful, and super flexible World Wide Web Consortium. And many others have really made HTML and CSS a powerful, powerful formatting mechanism that's very easy to use and extremely flexible with a high degree of control. So up next we're going to talk about CSS and cascading style sheets.
