 Hello, welcome to this session in the course on computer programming. In the last session we introduced the hypertext markup language and examined some very basic tags. Today we shall see some more features of html which permit us to produce less or which permit us to display images and most importantly which permit us to define what is known as hyperlinks. A hyperlink is nothing but a text on which if you click you will be taken to another page indicated by that link that is why it is called a hyperlink. For example, the reference material shown here itself is a hyperlink. Let us look at lists, images and hyperlinks in that order. Let us look at how we can prescribe an ordered list. Typically an ordered list is enclosed in the tags O L and slash O L. The tag O L can be used to further define what type of ordered list that we want. So, that type can be any one of 1 capital I small i small a capital A etcetera. What it means is that my list could be either a numbered list 1 2 3 4 or Roman capital 1 2 3 4, Roman small 1 2 3 4, alphabetical A B C D F J and capital alphabet A B C D etcetera etcetera. So, this defines the type of the numbering that I want in my list. I can also prescribe a starting point which merely defines the starting point in that particular sequence. For example, if I say O L type A start 4 that means ordinarily the list items would be listed as A B C D E F, but because I have said start equal to 4 the list will start with D instead of A. Incidentally individual items of the list are enclosed in L I slash L I. Here is an example I want to put while for do while as 3 entries in an ordered list Roman 1 2 3 I simply say type is equal to I. Please note I am not saying start because the default is 1. Here is another example type equal to A start equal to 3 where I put the same words while for do while, but notice how they appear. They appear as C D E and that is because the start point is written as 3 whereas the type is an alphanumeric ordered list. There is another example of ordered list in which I can include additional features such as a red color such as alignment of the whole material in the center etcetera. This would permit me to change the style of appearance of my list. The main list here as you can see is written here in terms of so many things we shall see exactly how that will appear. So, here is the ordered list example of which the html code we just saw and this is how that ordered list will appear. So, if you want to construct a page like this notice that it is not a fixed text. For example, if I want to add one more item which should appear as a fourth item I do not need to change the complete page format. I simply include that as an additional item here as li slash li and automatically it will appear as ordered list D. This is the advantage of using the ordered list tags. You can also have an ordered list the simplest example is a bulleted list where you can put different types of bullet. So, here is you can look at it on your own very simple the disk type, the square type, the circle type or the types of bullet. The default is this and you can have an ordered list comprising of these bullets. So, here is an example of unordered list which shows bullets is another unordered list UL which is using type circle. So, you will see this. This is including this unordered list into a larger specification of the document which says something like unordered list style is color is red you want it align centered etcetera. When you write a stable page like this, this is the page and this is how it will look like. So, topics in C plus plus comes as a header and the unordered list comes in this fashion. Once again I will say if I want to add or remove any element of this list I do not have to edit the whole page. I simply go to the respective list path and either add a list item or remove a list item. There is also a notion of a definition list which does not have either bullets or numbered. I will not spend time on this. You can look at the details. Suffice it to say that I can define a definition list which will appear like you see a series of definitions in a text book on physics for example. Just let us look at the example here. Here is an example of definition list this complete html page and this page will be rendered by the browser in this fashion. So, look at what appears here. This is also a list, but this is called a definition list. Having looked at various ways in which to display list let us look at a very very important facility in html namely the facility to prescribe hyperlinks. That is I want to display a text, but if I click on that text then I should automatically go to another web page which may be on some other server. Now we know that web pages are always defined by their URL. For example, https slash slash n wikipedia.org slash wiki slash html is actually URL of a web page. Now I want to display some text and while displaying that text I want to display a particular portion such that if someone clicks on that portion I will be automatically redirected to this page. The way to do it is to use what is known as href the tags used are a and slash a. So, when you say after a href equal to URL then if you click on the text which will be displayed here you will be diverted to that URL. In short this tag pair defines a hyperlink it could be a local or a remote file and text sort of becomes a hotspot. If you click on that hotspot suddenly you will be diverted to that particular new page. Here is an example of an html page which uses a hyperlink. Let us look at this. So, if I write this as an html file store it as a dot html file as a text file and open it in browser this is what it will look like. So, you can notice here file slash slash c colon slash user something something because this is from the directory on my computer and it is rendering this particular html file with this text being shown here. However, this text is not a dead text it is a live text it is a hotspot. If I click on this hotspot this page will simply be replaced by a page which is given by this hyperlink and you can see this hyperlink appearing here and this particular page appearing here. Notice how beautiful and simple it is to actually create a document which can link to multiple documents at very well designated places in your own large document. This is how complex documents can be interrelated and interconnected. In fact ability to specify hyperlink and ability to specify hotspots when clicked to show that page with the hyperlink is a very very central and critical facility of html. Having seen hyperlinks we notice that if a hyperlink points to an image which is stored somewhere else it will automatically be loaded and displayed whenever you click on that hyperlink. However, if I want to display an image which is locally stored on my desk there is a special feature available which provides an IMG tag. In this IMG tag you can define the source location of that image. Notice the word URL actually means the filename and extension of that image. You can also prescribe an alternate text for example if image is to be displayed and while it is taking some time to display when you hover with your mouse on that area you will be able to see the text that you have written here. You can define the style in which you can specify the width and height in terms of number of pixels npx and npx. Here is an example image src flower 1 dot jpj or purple flower style equal to width to 70 pixels and height 199 pixels. This will display the image of a purple flower which is stored in the local desk because src equal to flower 1 dot jpj means that it should be present in the current directory. Here is an interesting example of treating an image itself as a hyperlink. Look at this specification image src flower 2 dot jpj alt desi etcetera, etcetera describes exactly how a local image should be loaded. However please note that it is not appearing as a standalone thing but it is in fact appearing where the text would have appeared for a hyperlink. Notice how hyperlink is prescribed ahref this is this followed by some text followed by slashe. Now if you are clicked on that text you would have gone to this particular page. In this example we are seeing that an image itself is being used as a hyperlink. If I click on this image I will go to that page. Let us see how it looks like. So, when I write this htma script and make a browser interpret it I will actually see these two images. The first one is a static image which is loaded here. The second one is however a hotspot because it appears as part of this hyperlink specification. If I click on it then I will be taken to the commons wikipedia dot o r g wiki with the desi flower dot jpj. You can see how such features can be combined to create beautiful and yet very properly organized text documents which can be linked to hundreds of meaningful pieces of information. In summary in this session we have looked at lists, we have looked at images and we have looked at hyperlinks. But let me conclude this final session on markup languages by saying that there is far more to markup languages than what this introduction gives you. However I can assure you that if on your own you read the entire hypertext markup language material from wiki books you will be able to create many more complex pages and complex organizations. At the height of it is the javascript programming language which has become now a central part of html. I hope some of you at least will go forward and study that material as well. Thank you for attending this session.