Subtitles of the Movie

Obviously as this is a web publishing course, you’re going to have to have some knowledge of what HTML is. That doesn't mean that you’re actually going to have to know how to code in HTML but you’re at least going to have to know what it is, so that’s what this module is for. HTML stands for hypertext markup language, so it's obviously some kind of language. What kind of language? Well it is a page description language, in other words it's a language used to describe how text and images in a file are to appear on screen or on paper, typically on screen. So imagine you have a whole bunch of things that you wanted to display on screen, you have some text, you have some buttons, some images, some pictures and so on. You need to have it laid out somehow. You say well I want the words over there, I want those words to be bold, I want that particular word to be red, those three words underlined that picture is going to go on the top left corner and so on. What you need is a language, a universal language that's well understood all around the world you can use to describe how a program should layout your file. It’s not strictly speaking a programming language, you can actually put programming inside it in little scripts, which we’ll have a look at later when we talk about Javascript and VBScript but HTML is not really a programming language. It's a description language, a layout language, HT in HTML is the same ht as in http, hypertext, that's what the ht stands for is a term meaning text that contains live references or links as we usually know them to other documents. So in other words, it's a document that you can click on a part of a document and it will take you to another document. HTML is one sort of hypertext, another sort of hypertext that you may be familiar with is the windows help system. Remember the old help files that come with Windows? You can usually pull up a help file and there is a little help text in there and some of the words are underlined in green and you can click on those and you get to another help section, that's hypertext as well although it’s not HTML. Also it’s very, very important that you understand this sort of technical fact about HTML. An HTML file contains nothing but text. I know that you’re quite used to looking at a page on the screen that's got many pictures in it and so forth. You say well the HTML file has obviously got those pictures in it as well, no it doesn't. The HTML file itself is just text and if there are pictures that are displayed on the screen, those are stored in separate files and they’re referenced in the HTML file. I'll show you an example of that, before I do please understand that when you go to your web, your browser, your client and you type in the name of the HTML document, it goes and retrieves that document, as it is retrieving that document, as that document is arriving back at the browser, it’s looking through that and discovering that there are actually references to other files, namely say pictures that also need to be retrieved from the web server, so the web client, your browser then connects to the web server a second time and a third time and a fourth time to retrieve all the pictures in the original HTML document, so you can have several connections to the web server going simultaneously all downloading pictures or something else, anyway let’s have a look at an HTML document, let’s have a look at the HTML itself. Okay, I’ve just whipped up a quick HTML document just to show you some of the salient features of HTML. Here it is, as it would be displayed in a browser. Internet Explorer in this case. Some things to notice, we have a picture nice picture of a dog, we have got some bold text up here which you might want to call a heading but in fact it’s not a heading even though it looks like a heading we've got, up here we've got what we call title of the document which I’ve just called sample document. We've got a link which takes us to www.dog.com and we’ve got some underlined text which is not actually a link at all, it’s just underlined text, that's that text right there, we've got some red text, its not a link either, its just some text that I’ve decided to make red and the rest of it is just text. Okay, let’s have a look now at the HTML source behind that and see what it looks like. Here is the HTML source, notice that I’ve got it opened in notepad, which is a very, very simple program. You do not need complex programs in order to edit HTML, more about that in a moment. So, here is our HTML document, they often start with the tag, anything inside the angular brackets is called a tag and they often start with the tag HTML and they often start after that with another tag that we call the head tag and everything between the head tag and the close head tag is known as, well, the header and then anything inside the body tag, is the end of the body tag is known as the body, now this is not going to be a HTML tutorial so I don't need you to remember all this, I just want you to notice things like there is a picture right here, all of that is a reference to a picture. img stands for image and the source of the image is a picture called dog.gif. So I’ve obviously got a file on my hard disk somewhere called dog.gif and it is showing me that. It's saying that this picture is aligned left that the width on the screen is 105 pixels and the height is 135 pixels. This is layout information, where it’s being laid out, what size it is, where it's positioned and we’ve got some more layout information here. We've got the word brown is underlined, that's the u tag and we've got font color equals red there and so dog, the word dog, as you can see in the middle there is red, this text up here between the ‘b’ tags, the ‘b’ and the ‘slash b’, ‘b’ stands for bold so that text is displayed bold. Let’s go back just quickly now to the other one, you can have a look at that again. Okay, so this is bold and this is that picture aligned left as we can see in that believe it or not is going to be a 105 pixels from there to there, a 135 pixels from there to there. Underline brown, red, word dog and there is my link there, www.dog.com. Let’s have a look at how links look in HTML, the code because when you think about that, it’s probably the most important part, that's what makes it hypertext the fact you can have a link there. Let’s have a look at that. Okay, here is the link from there to there. A link is an ‘a’ tag ‘href’, which is the hypertext reference is this http.dog.com and in the word is actually just the word link, that's the only thing that's actually live if you like. So that is all just one big ‘a’ tag. Okay, so you can see that there’s tags within tags within tags but the most important thing I want you to notice is that it is all text, there are no images in the document. There are references to images but there are no actual images. I’ll show you another way that you can examine the HTML code anytime you want to, go to some website such as Microsoft's website. Okay, so here is Microsoft's website, now if I want to have a look at the HTML code in this page which is ms.htm, I can simply go view, source. Let’s do that, I’ll click on that now and here we are. Obviously theirs is substantially more complex than mine; scrolling through it you can see there’s a lot of stuff that doesn't look immediately obvious as to what it is, but that's not particularly important at the moment because I don't need you to understand HTML in order to understand this course nor do I need you to understand Microsoft's code. I just wanted to show you that it was there. You can see similarities between the code that I showed you before but it is obviously more complex here. Now the implication of what I just did is that you can pull up any website on the Internet, and this is quite important, I suggest that you in fact do this, if you go to a website and you think yeah I like the way they did that, I really like that effect or I like that particular layout you can simply go into the view menu as I did in my browser and go view source and you can see how they did it, you can also copy and paste their code. As long as you’re copying and pasting the techniques and not actually their copy writed information, then that's probably not a bad thing to do. Probably every web publisher in the world at the moment is guilty at some stage of copying and pasting somebody else's HTML code to make theirs work the way they want it to. I’m certainly not suggesting that you copy Microsoft's homepage and make it your own but you can certainly if you like just examine certain individual parts of their website and examine how they did it and copy just those little bits and do the same thing or a very similar thing on your page. We’re going to look at a related topic next called HTML editors.