Hello, and welcome to week one of course three, where we're going to look at the HTML language. JavaScript wouldn't really be such a popular language without HTML. They very much go together. And so it's essential in this course, we take a look at both of them. It's all part of computational thinking to be able to use multiple different languages and see how they can work together. Okay, so in this session we're going to explore some really quite simple HTML code and we're going to use the text surface task machine framework that we saw in earlier courses. HTML is very much a page description language. It helps us to describe how to structure and layout text on a page using a concept of markup to do this. So we're going to distinguish between the content of a page and its structure, the way that content is structured and then how that actually appears to us. And we're going to focus mostly on structure and try to start learning to see that structure in our minds. So, HTML stands for hypertext markup language. So let's have a look at those different pieces. So text is right there in the middle and HTML was initially designed to be able to specify the structure of text clearly on a page. Text is underneath everything in HTML. It's the content that we're working with. HTML was developed back in the 90s when we were reading more and more text on computer screens and because it's based around text, we talk about pages HTML pages not HTML programs. It's only later on in the last 10 or 20 years that HTML has increasingly been used with languages like JavaScript, such that we end up with things that we might think of as programs, not just pages, it's called a markup language. And this is a particular style of language. So JavaScript is not a markup language, but HTML is. And the idea is that you have some underlying text and you put in little tags which specify how you want the text to appear or what should happen to that text. And so the markup is these little tags that we put in and you'll see that the tags always appear in the kind of angle brackets or less than greater than symbols. Okay, and then it's hyper, hyper is a Greek word tending to mean above more than and so this is like text more than whenever you see the word hyper, it's usually to do with that kind of modern idea. And so the idea when hypertext first came out really back in the 90s, was when it was first really popularized when the web started with Tim Berners Lee setting that up. The idea is not just one page or document, but it was linked documents, particularly with this structure. But the main idea was the idea that these documents were linked and that you could click on a piece of the document and it would take you off to some other document. And so we ended up with this huge, great structured connected world of documents. And so that's really where the hyper comes from hypertext markup language. So we're going to introduce this very slowly and to ensure you have the right underlying understanding in place, the key really here is to see the structure in the HTML code. So you might look at this page of text with its HTML tags in it and you want to be able to look at that, pick up where the tags are and see in your mind's eye what the structure of it is. Okay, and as I said, we're going to be using the text surface task machine framework again, if you remember the text surfaces, the grammatical structure of code or of a program. The task side is what the code can do for you, how it relates up to some task that you want to solve. And the machine side is kind of what that code is doing, how it actually works underneath. In this case it's going to be how those tags interact with the text of the program in order to get the result that you see. Okay, so here's the very simplest HTML page. There is no markup, there's just some text, here is some text. This is my first HTML page. You'll see you can't see any of those tags I talked about in there, no less than or greater than signs. And so this is what I meant by the underlying content of a page. Now compare this with something like JavaScript. If you want to have some content, it's like the secondary thing, you have to put special quotation marks around it. Whereas here the content is the main thing and it's the programming code, the HTML tags and the secondary bit. And so that's where you need special symbols for the tags. The less than and greater than signs. Just as in JavaScript, you needed special symbols. That was a quotation marks when you were going to have natural language and JavaScript. So the roles are reversed as it were in JavaScript. The programming code was King Orwell was top. Here it's the natural language is the key thing. From the point of view of the text surface, well, that's very simple, isn't it? It's just some natural language. And the task is, well this is how you actually get text displayed on the page. You just type it in and the machine, when the machine scans through this page, deciding how to display it in the browser. When it scans, detector just goes through character by character and it turns that into characters on the screen, and it uses whatever its default styling is in terms of font or size to do that. Okay, well, we can try this out. It's very easy to experiment with HTML, and as ever with other things that we've done, always try to predict what you think code will do before you actually run it. We're going to use Js fiddle now in this course we're going to start off using Js fiddle as a step up from the environment we were using inside Coursera. And so you can try this out, you just go to jsfiddle.net, which will give you a new blank Js fiddle. So let's just do that just now. Okay, so you can see we've got a blank fiddle there. I've set this up to make the font as large as possible so that you can see it on the video. And so you can't see the pieces around the edge of the Js fiddle, but usually you'd have the menu bar on the top with a rum button and the save button and such like as well, but, but but here we are. And what we're going to do, we're just going to be using the HTML pain. We've got HTML and JavaScript. But we'll use the HTML pain. And let's just type in some text for example, this is my first HTML page. No tags in there, nothing like that. And I'm going to press the wrong button, although you can't see me doing that off the screen. And you'll see that has appeared over in the output pain in the white pain over on the right hand side. And if you remember I said that the system will just display that with a default styling. You can see that this is using something like a times font and just a reasonable font size, perhaps font size 12 or something like that. So, that's the default styling. Okay, well that's a good start. We've got our first page written, I'd like to say there's just so much we could possibly teach you about HTML. There's there's such a lot to it and we will look at a number of different pieces, but in this particular session. I want just to help you see the structure whenever you see an HTML page, that's some text with HTML in it. So we're going to be focusing on that and that should help you whenever you're perhaps looking on the web. And finding out new HTML that you want to include in your pages. As long as you understand the structure, it'll help you to see what to do, okay. So we're going to add some markup now. And what we're going to do is we're adding a heading to the page. So we're putting some extra text in but we want the text to be in a kind of special format. And so you can see here we've got these tags, the H1 tags. And you'll see they come in pairs and so they're surrounding a piece of text. They don't always come in pairs, but very often you will see them this way. And so they signify like the start and end of an instruction on how to lay out this text. And so here this is basically saying, well we'll see. So, that's the text surface. Just to see these tags H1 is called ahead of tag. There's also H234 and those will be headings as well but of a of a smaller importance each time H1 is like the top and it's also a title tag as well, okay. You'll see that in JS fiddle when we get there. It uses coloring so that these tags stand out more and you'll see that the tags are colored red, okay. As far as the task side goes, that's easy enough. This H1 tag, it enables us to have some kind of heading style, a kind of main header style and it's going to use the default that's the structure. We're putting the structure on the document that here we want to have a heading. The particular style, although we'll see later we can change that style. It's just going to use whatever it's got as the default styling for H1. So trying to separate in your mind the idea of structure and style. So here we're just specifying what the structure of the code is. We want this page one to be in it's a heading. And as far as the machine side goes just to understand how that works. As a machine scans through the page, it's always looking for that less than sign. But that left angle bracket, it's always looking for that character. And whenever it finds one it kind of goes okay. I found a tag now and so it's going to read through the characters tills it finds until it finds the closing angle bracket. And then it's got the tag name and then it can look up inside its system to decide what to do whether it's a valid tag name. Or whatever but because it knows this one it knows H1, it's now going to read characters and put them out in the H1 style in this case the default H1 style. And it's going to carry on reading into. And it's going to be looking again for a left angle bracket when it finds one and then it sees the forward slash sign. It knows that that's so left angle bracket forward slash sign is a signal that this is a kind of closing tag. This is the end of a particular instruction. And so then it reads the H1. And it goes okay well I know I opened H1, I started doing things in this heading one style. Now I found a matching closing tag and so that then stops it. Displaying the characters it's reading in the H1 style or format and it will carry on as normal, okay. Well we can try that out as well so we'll just put in that same kind of that same kind of tag. So we're going to have a church one and it's automatically put in a closing H one tag for us. That's something that fiddle does. Sometimes it's useful, sometimes can be a bit a bit frustrating. But it does help because it makes sure you don't forget to put it in. Which is a very easy kind of programming mistake, okay. So there we are, we've now got the opening H1 tag and the closing H1 tag and some text in between. So I'll just run that and there we are. So it uses times front again, but just in a larger font size, okay. So you can see that tags defined structure and if you look around you. Almost any text that you read is structured in some way the text you can see on the slide right now is structured into a heading. And then it's got some bullets, a kind of list format. But if you read any document you'll see, it's got paragraphs, they give structure, it may have sections, chapters, so on. So tags define where that structuring should happen. And as I said it's using default styling to decide how it should look, but the tags are defining the structure, okay. And so what we have in our example is some text and it's got a heading. So it's structured into heading and then the text coming after. And so you want to sort of think about in your mind, how am I going to how am I going to imagine this? It's very important to be able to imagine this structure as you look at a page. You want to sort of see those tags give you a sense of structure in your mind. So it could be this way where you've got the idea that the page. One part, the kind heading, I ended up calling that my first page, if you remember that heading part is somehow embedded within the rest of the text. Could do it that way. Perhaps what we might do is think of it more in this kind of structured way where we've got separate pieces of text and they're all kind of linked together. And so then we've kind of got the main page which is in the just the kind of normal structure. And then but you've got a point in that text where you're kind of linked off to this. This other piece which is the header, text and this kind of linked structure of pieces is going to end up probably being more useful to you. So that's what you kind of want to try and imagine that you've got this kind of structured format with lots of little text fragments. And they're all connected all linked together in this way. Now, this is quite a simple one here. We've just got one link, but we're going to see more complicated pieces as we go. So here is one of those more complicated pieces. We've got a a list, we've got a list of items here. And so let's have a look at the text surface for a list. Well firstly we've got the same header as we had before and we've got the text, my first html page, that's fine. And then we're going to introduce this list and you can see that the text surface for a list is we have the tags ul. So ul means a unordered list. It's not going to be numbered in any particular way, it's just like bullet points, it's got a unordered list. And then we going to look for the closing tag for ul. So we kind of search our way through and our tech surface takes us down to the bottom there where we've got /ul. So the list is everything from the the opening ul tag to the closing ul tag. The inside We've got multiple matching pairs of li, that's for list item. We've got list items and some text containing ...and then closing li, closing list item. And and so we've got three list items. So there's going to be three bulleted items in this particular list. Okay, so as far as the machine side goes well, sorry, this is the task first this is going to give us a list with three items basically. This all the html you can see there the ul closing ul and the li. These are all going to give us a list with three items, and how does the machine work? Well again as it's scanning through the text in order to decide what to display on the page, we know how it does the first couple of lines but then it sees that ul tag, remember? It's always looking out for a left angle bracket, so it sees a left angle bracket then reads ul and the closing angle. And so then it's got the tag main, ul it knows about that and then it knows to expect to see li tag pairs, so list item tag pairs. And so each time it comes across an opening list item, tag it then reads the text, displaying it appropriately. Perhaps with some indentation, perhaps with a bullet of some kind at the beginning to indicate this is a list item. And then when it gets to that closing list item tag, it needs to go to the next line and start working for the next tag list item, so if there is one. Okay, well we can try that out as well, so let's just change across to that part. And Let's just put that in, okay, so it's an unordered list. So this is quite handy now to have that structuring for us. So I'll just indent this a little bit and so we've got a list item and I'm just going to keep this nice and simple. And then Just as you saw before only slightly different text again and this is the final item. Yes, that's right, okay, there we are. So now that's roughly the same structure we had, I've put slightly different text in there, the underlying content is a bit different but the structure is the same as you saw. So I'm going to run that now and there you see how that comes out. So it looks one way in the html, but then once that is processed by the machine and the phrase used is rendered. Once it's rendered onto the screen, you can see it's put in the structuring that we asked for, it uses these little round dots for the bullet items to show we've got a list item and then we've got the text in the standard font. Okay. So let's have a look at the structure for this because again it's always the structure. How can you represent or think about this? It's certainly more complicated. We've got tags nested within tags now, so we've got the tag pay ul close ul but within that we've then got the list item, opening closing tags, and we've got three of those. We've just got one file of code, one piece of text, but the tag breaks it into pieces, so let's just have a look at that. So this is sort of the structuring, we can see. We've the header in the h1 style or format. And then we've got a list and unordered list and then that contains these three items. And so if we start thinking of the structure in the same way as I was saying in the earlier slide as separate pieces of text, it's now beginning to look something more like this. So as we had before, we've got the head of text and then we've got a standard text, but now we've got a new thing, which is an unordered list, and then what does that consist of? It's got these three pieces like this, so you can see, we're starting to get quite a complicated structure. And this kind of structure is something that computing people called a tree. And we're a bit weird because it's really an upside down tree. But the idea is you start off at the kind of trunk or the root and I guess that would be the part of the tree here that's labeled normal, that's our kind of base text. And then we've got branches coming off it. So we've got the the branch to the header text and then we've got a branch to the list. And then that branches further fanning out to more branches for the three list items. And in computing we create massively complex tree structures like this, any web page is a hugely complicated tree structure of all the items, all connected together. And so you want to start seeing these pages with this kind of structure. So in your mind, you want to practice seeing that structure on on the pages. And you know, this was the same in java script when, when you look at a complicated javascript program, you have to sort of pick out from all of that text in front of you, using your tech surface skills, you pick out where the, I don't know the loops are, or the statements, the different blocks of code. You see that here. What you're going to do is you're going to look at the, as it were the text surface of the html page and you're going to see that structure underneath. Now, it's definitely easier for some people and others to see that kind of structure, but it's a skill that you can develop just by practice. So if you're finding it tricky to start with, keep working at it, because the more you practice imagining these structures in your head, the more you'll be able to see them. The brain really is a muscle. There's plenty of science underneath this to show that you can develop your ability to imagine these kind of structured items. That's a whole nother story, but very fascinating as well. Okay, well, one thing just to say here, I've been talking about the structure and the styling structure versus appearances really are two different things and the html here is primarily defining content and structure But it's not really specifying how it should actually look. It's not specifying the particular font to use or the style line spacing, the particular indentation. The browser or in the examples we've been looking at, we've just had default styling used. We've seen mostly in well, in fact, all of it just in time in a kind of times font, in a serif font and with particular font sizes preset. Now we can set those styles and you might have heard of JavaScript, html and CSS. So CSS is another kind of styling language. We're going to use some styles within the html. We're not going to go full on and look at completely separate CSS files for the styling coz it just be a bit of overload for this course. But that's another area for you to look at in the future. We'll look at enough styling here so that you can control, to some extent, things like font sizes and and defense you're using and things like that. So just to really emphasize that the html defined structure, but not exactly how things look. If you look at the code we've got here, we've got a complete copy of the code we've looked at the bottom of the page. You'll see that the content here is all the same and the tags and the structuring are all the same, but the layout of it is just all being put on one line. So whereas to help us see the structure that's going to appear on the page, we've used lime breaks and stuff like that, an indentation. We've used that in the top part of the page, in the bottom, I've just jammed it all onto one line. But the thing is as far as the machine is concerned, these are exactly the same needs to the top part, the bottom part are exactly the same. All the same information is there, we've got the same tags, we've got the same text coming between the tags or after the tags, it's all exactly same. So if we copy this code, actually I don't think I can do that right now. But if you can do this as an exercise, if you copy that code straight, in fact I can just do it here, wait a minute. Let's just go and have a look at that, just prove to you this is a case. So we're just nipping back up to the screen. I'm going to take a copy of all of this text here and put it down below and then I'm going to basically remove all of the layout that we've put in there and just turn this into a single line of code. Okay, you can see it's looking like a right mess, it's going to get longer and longer. Now it's broken into another line, right, okay, there we go. And this is true live coding, I'm trusting this is going to work. Okay, so now that's the same as we had up here, it's the same text as all of this. But it's now just appearing on a single line and it's just to show that you go and so it's just come out over here. And you can see it looks exactly the same once it's rendered onto the web page, think of this little white piece here as a web page. And so this really shows you the difference between structure and appearance. That all of these tags are defining structure, but that's not how it's going to appear. It's not going to look like it does in that page description language because it's the browser that does the kind of rendering. Okay, so some key points here just to pick up. Well you've used that tech surface task machine framework again to explore some simple html code. As I say, think of html as a page description language. At this stage it uses these markup tags, the little tags with the angle brackets random. They're embedded into the actual content. And so you want to be thinking when you look at one of these pages about distinguishing between the content and the structure that's really what's to find on the page. There is appearance associated with each one of those kind of tags, each one of the markup tags and you can control that style and how it's going to look. But we've not looked at that just yet, we've just focused on the structure. And so for you really think about seeing that structure in your mind's eye, when you look at the text in front of you. It can take a bit of practice to do that, but if you keep at, it it'll be fine. Okay, thanks.
