 Hello, welcome to this session in the course on computer programming. In the last session, we looked at the evolution of networks and what we call network protocols. In particular, we looked at the exciting short history of how the worldwide web has evolved. We did mention HTTP as a main protocol and HTML or hypertext markup language as an important language using which we can construct web pages. In this lecture, we shall introduce ourselves to HTML. In particular, we will look at simple HTML tags. For any more information as I mentioned last time, please do look at this reference which contains a very useful description of hypertext markup language. It is an open source material, so you can download, copy, print and read at your leisure. To begin with, let me show you a page that we wish to create. Look at what it says, simple HTML page, but it is in red color and it has a particular size of font. Hello world is the next sentence here. This is in the smaller font in blue color. You will notice this is our first HTML page. Again, it has some text, but it appears differently. Color is still blue, but some part the entire sentence is in italics and some part is underlined. Here is another sentence which appears in green. Note that I can create a text document using all these texts, but now I have to somehow inform the browser that when you display this text, please display it in such a fashion that the first sentence is read, etcetera, etcetera, etcetera. This is where the hypertext markup language helps us through the various tags that it permits us to use. Please remember that marking up is a old copy editing term which people use when they were given a printout to be proofedited and there they marked up portions of the text to say that this particular portion of the text should look like this or should appear as bold, etcetera, etcetera. They use special tags to specify fonts, margins, paragraph breaks and the same terminology has been used by HTML. Please remember that HTML is about describing the look of a particular text material on the page or what is related to rendering of our text on computer screens. There are explicit formatting commands which are embedded within the document itself. The browser is incidentally an interpreter. As I mentioned, you have a C plus plus compiler which understands your C plus plus programs and executes them. Similarly, browser is an interpreter which understands all HTML tags. It can interpret those tags, can handle tables formally. There are advanced type sheets which we will look at briefly later. A pair of tags affect the contents which are enclosed. So, if I write any text here, how that text will appear will be defined by this pair of tag. A tag enclosed in less than greater than sign begins that particular effect and a slash tag again enclosed in less than greater than sign ends that effect. So, this is how any tag pair is written. The entire document is written enclosed within a special pair of tags called HTML slash HTML. There are two parts to an HTML document head and body. The head typically has title where I might write any text as title slash title as we saw closes this title and slash head closes this head. So, please note that you might have the pairs of tags within other pairs of tags and the interpretation done by the browser is then appropriately. First it will interpret this, then it will interpret the outer tag pair, etcetera, etcetera. Generally, the head is followed by body. The structure of an HTML page is typically like this. Please note that you can create all of this including the markup tags using a simple editor. In fact, the most popular editor used by people is a notepad on Windows machine or an equivalent G edit or something on Ubuntu. Anything which can permit you to edit text. You start the page by saying HTML, then you have a head is followed by a title. You have the text which will appear as the title of the page. This signifies end of that title. So, this is the second part of the pair of the tag. Similarly, slash head means head as ended. Body means body has started. You would have variety of text here as part of the body. Slash body will end the body and slash HTML will end the entire page. Please note that this indentation is primarily for the benefit of readers like us. The interpreter which is the browser does not care for this indentation unless indentation is part of a pre-formatted text as we shall see later. Tags may or may not have attributes, but if you want to specify some more information about a tag, then you can give an attribute which can contain a value. The typical method of describing a value for an attribute is to say tag name of the attribute equal to value. Then whatever text you want that particular value to be applied to and then slash tag. We shall see now how we can use all of this information to create the page that we decide to write in the first instance. But first let us look at various HTML tags which are specified. The tag pair h n slash h n defines the header. So, any text written here will appear as header. There are six levels of headers obviously related to the size of the font that is applied to the text that you write here. b and slash b contain text which will be shown as a bold face. Any text which you want in italic should be enclosed between i and slash i. Any text that you want to underline should be enclosed between the pair u and slash u. If you want to display some text in a different color, then you say div style equal to color colon red and then slash div. So, this is a component of your body which you want to be shown in red color. If you want blue, you can write blue here. If you want black, you can write black here. When you write text, the text may appear continuously in the displayed page which is interpreted by the browser. If you want to show a line break, you can just say b r slash. Incidentally, b r slash is a standalone tag. It is not a part of a pair. So, wherever you write b r slash in between any text, the subsequent text after this b r slash will appear on the next line. If you want to put some text in a separate paragraph, you will typically say p and slash p. Let us apply whatever we have seen so far to create a simple h t m l page. So, I have the h t m l page with a head title. I just say title. There is a body in body. In red color, I say simple h t m l page. Please note h 1 slash h 1 is the tag pair which contains all of this including the value of the attribute color and that is given in style. So, style color color red means the appearance of the simple h t m l page should be in red color. Deep style color color blue means the subsequent material should appear in blue. So, the word hello world will appear in blue color. Not only that, b and slash b makes it bold and there is a line break after this. This is our first h t m l page is the text that we want to appear. All of this is our will appear using the previously defined style, but because I have enclosed first in between i and slash i, all of this will appear in italic. Further, h t m l page is another component which is enclosed between u and slash u. That means h t m l page will appear as underlined. Since the entire thing is enclosed in i and slash i, the whole thing will appear as italic and slash do will end this entire component. Subsequently, I have some more text which I want to appear in green. So, I say deep style color colon green and then with all these attributes, I say hope this session gets you going. Based on our knowledge of the meaning of different tags, you can very easily interpret how all these nested tags will translate into a specific appearance and presto you get this page. So, on this slide, you see your entire h t m l document that you have created using a simple text editor. You just give the saved file name an extension dot h t m l and open it any browser. You will not see this text, but what you will see is this and that is because browser is capable of interpreting all these tags and rendering the text in the desired fashion. So, see how simple h t m l programming is. In fact, there is no programming. It is just that you are meticulously defining how different parts of your text should appear on a page. In summary, we introduced ourselves to h t m l and we examined some basic tags. Once again, I remind you for more information on the hypertext markup language, please refer to the open source resource which is part of the wiki books. Thank you for attending this session.