 Good morning to you all. In this session, I am going to tell you something about HTML5. Basically, HTML5 is a new standard for your HTML. Using HTML5, we can develop a very good applications for the animation based on animation, based on some storing data and so on. We will see one by one what kind of the application we can develop with the HTML5. First, we will see some small introduction about HTML5 when it is developed and how it is developed. Now, HTML5 will be the new standard for the HTML. HTML basically stands for your Hypertext Transfer Protocol. And HTML5 is a cooperation between the W3C and WHATWG. What is this W3C and WHATWG? This WHATWG was working with the web form and application. Basically, this particular organization, these two are the organization, first of all. And this first, WHATWG is working with the web forms and the some applications. W3C was working with the XSTML 2.0 and they have collaborated in 2006 and they have developed this STML. Now, we will see some rules for HTML5. So in this, new features should be based on your HTML, then the CSS and the JavaScript. And in this, we have reduced the lots of things for the external plug-ins. Like flash plug-ins we require when we want to play some animated things or when we want to play some videos at that time. In HTML5, we reduce this flash kind of things. Now in this, we have a better error handling and then more markup to replace scripting. HTML5 should be device independent. Like as I can say, some of the features like in Akash Tablet for the HTML5 is supported. You can because the Akash Tablet has a Chrome browser. So this Chrome browser is supported all HTML5 features. And but because of the specification, HTML5 is not specified yet. So there are some browsers not supporting the some of the features of your HTML5. And another is rules like keep the development process should be visible to all, means to the public also. Now we will see some basic tags for your HTML5. So new tags the introduced in HTML5, that is you can see there is an article, there is a command, figure, aside, details, summary, head and footers. There are lots of new tags we have in HTML5. So I will tell you the one by one exactly what is used of HTML, this tags. So basically article we will use here to define an article. That aside is what aside we will use to define content aside from the page content. Then there is a detail, detail define the additional detail that the user can value or user can hide or show the data. Then summary is define the heading of the detail tag. The next tag that is header, header will give you the detail about your page, the header of your page or the section, the main section of your page. Then footer it will also define like it will give you the information, show you the information about the footer of your document or footer of your section. So we will see some simple example based on this tags. Now other new things we have in this HTML5 that is media elements. So here you can see we can directly play audio using the audio tag. Then we can directly play the video using video tag. We can give the some sources also using the sources tag. And there is another feature that is canvas. We can draw the canvas like rectangle, oval, circle, this kind of thing and we can fill the color in this particular using this canvas tag. And another elements we have that is based on form. So this some tags, these some tags are introduced in your form element that is data list, then key gen, output, all these tags involved in your, introduce new tags introduced in your form element. And some of the tag they have removed from like from the HTML4 and we have not, we are not, we will not, we should not use this tags for the HTML5. Those are you can see the app later there, then base font, then big center, DIR, extras like there are lots of tag they have removed from the HTML5. Now using HTML5 we can design the simple this kind of layout. The header part is there, I have designed a very good page based on this, using this some basic structural tags. So we will see how we can design also, we will see the code also. So first you can see that the header, using the header tag we can design header. Then navigation bar using the navigation tag, we can nav tag, we can use, we can give the navigational bar to your page. Then for the main information we can use section. Then for the sidebar to separate your, aside your, some content from your main information. So we can use a side tag. And you can see there is an institutional, means here we can use as a footer. So I can show you the page I have designed in this. This is exactly your header I have designed. This is your header, my blog is a header. Then the, I have used the header tag to design this my blog. Navigational you can see there is a home about us, then the application. Then section tag is will give the main information about your page. And you can give some footer here. I have not mentioned footer, but you can give some footer here using footer tag. So we will see this page. You can see here, my blog I have the same page I have designed with the help of some basic tags of HTML5. So as I said this my blog I have designed using the header. And there is a home, this is home about us, application and contact have designed using your navigational tag, that is nav tag. And then we have used this h group means there is some h group, what is that h group tag is used to group the header tag means h1, h2 and h3 in this section. And here the main information I have used here the section tag. So this is exactly the very simple page I have designed with the structural HTML5 tags. We will continue with the other application, we will continue with this page. I have removed the some section tag and after that I have put it according to that like if there is some video, how to play video I have included that particular code into this particular web pages. So this web page will be the common to all our application. Now we will move to another slides. So this is the I show I have shown you that structural element example, it is not visible because here I have given some link. Now there is some important tag we have to we should know about the in HTML5 that is detail then the summary and then the progress. This detail and summary this both the tags we can use to hide and show the information into your page. We will see the some important this important tags for the HTML5. I have designed one application based on this. You can see I have designed a very simple page here based on detail and summary. So when I click on this particular link so whatever the hidden information I will get here after clicking me after clicking in this particular link. Now how we can do this based on this tag only this much of line of tag we can design this particular operation. We can give this particular thing based on this 4 line of 4, 5 line of your tags. And the next is the progress. Progress bar is will show you the view the completion progress of your task means when you are downloading something so you will get some progress bar that with the green line it will come 1 by 1, 1 by 1 and it will show you the completion of your downloaded particular download file. So we will see that application how we can implement in this HTML file. Later on for using if we want to use this particular progress bar we have to write some JavaScript code or we have to give some another we have to implement another application means we have to write some another code based on some middleware languages. So here we have some progress type based on this we can give that progress bar so we will see how we can use that. So this is the another simple application if I will click on this it will start that it will show the progress. You can see my progress bar so if I want to stop so I can click on this to stop this application means that progress again we can I have given this till 250. So it will load till 250 numbers. Now so here to implement this I have used some HTML and some basic code from the JavaScript. From the HTML this much of line I have used for the HTML and this much of code I have used for JavaScript. So you can see how much powerful is your HTML 5. Basically I have not used the main text like videos and all but with the help of the basic text we can implement this kind of we can use this kind of features in HTML 5 pages. So these are the basic tags and important for the HTML 5 and it is new tags in for the HTML 5 introduced new tag in the HTML 5. Now we will move to another so there is now we will start with the media elements. Here to play some video or audio we have some separate tags directly we can play video audio using this video and audio tags. So here I have played one simple video using video tag. You can see this video tag I have given the some width and attributes like width height and control. Control means your media controller like play pause and all those kind of controls we will get using this attribute. Now there are some sources like if you want to play that particular movie or video you have to use this source tag. So we will see the simple application using this three line four line of code we can implement we can play one video. So here I have got one video like for the Ragnikanth so when I am clicking on this start playing and so to play this video as I said I have used only this much of tag. This is exactly the very simple video I have some dot ogg format for to we have to use some ogg format or mp4 format to play this videos. There are some format like there are some browser they are not supporting this kind of for this video tag as I can say like a firefox but if you have a updated version of firefox so this particular application you can play in your HTML5 tags in HTML5. This is the way we can play video and as I said using this I can show you the code also only this much line of code I have written to play this video you can see this much line of code all other like I have used to design and all the page designing and all but to play video we have to write this much line of code. So this is the very simple way to play video in your HTML5 before that like if you want to play video then you have to use javascript or jsp or another middleware languages or we have to use some scripting languages. Now another good and important tag is that is we will see some format this you can see here we have some format supported like video format and browser support like what kind of format like one particular browser is supporting you can see in this you can zoom at this so in this you can see google chrome 6 plus is supporting all kind of formats of your videos so and firefox there is no mp4 we cannot play mp4 file and like webm file we can play webm in the sense is web media files we can play and this means firefox and with the google chrome but google chrome is supporting all kind of video formats remove that now. Now this is the canvas element using the canvas tag you can design this kind of rectangle circle or another rectangle on that you can feel the gradient color or normal color you can feel in this canvas element so to draw the canvas we can write this much of code to draw one particular one simple canvas then if you want to draw some line then you have to use the two method we have in this that is move to we have move to and the line to this move to define the starting point to the of the line and line to define the ending point of the line so starting point in the senses like this you can say and line so line to will be start from the ending point okay and we have some very good things we can draw using canvas that is text gradients images we can implement using canvas tag in html 5 then there is also very important and very interesting topic that is drag and drop we use in this html 5 we can drag some object one place to another we can drag some object from one place to and drop we can drop that particular object into another place so I can show this demo like there is someone demo suppose there is one logo I have used here from the source I can drag this logo from here to in this particular block and this two blocks are canvas I have draw two rectangle canvas and I am going to take this hold this particular logo I am going to drop into this particular rectangle okay show you the application based on this you can see here this is my object I am going to I can drop here also I can drop here or we can drop in this particular section so I will drop here and if I want to drop take this particular object to another rectangle so I can also drop here so drag and drop is also possible into your html 5 code so here I have given the link where you can find a very good example based on drag and drop and another tags that is www.w3school.com and html 5 then these are the some tags we have to give and we have to implement some method to drag and drop in this okay to drag and drop we have to use little bit scripting to for the drag and drop to implement the drag and drop operations we have to write some little bit scripting to perform the drop function again we have to write for the drag we have to implement some another method then for the dropping we have to use different method so using this little bit scripting we can perform our drag and drop operation now there is one more interesting topic that is file API this file API in the senses we can upload file and we can like we can read the file from your system and we can store the file into your system using this file API this file API is very good like you can like as you have implemented in java or jsp to read file from the desktop or from the server so those thing you can implement with this file API so in this html file API allow developer to interact with the local system on the client side and using this particular method you can use this file that a file there is a file and their file list and file leader all these are your some methods you have to use to use to implement some file operations so this but what this particular file will do it provide the read only information such as name type size and last modified date means it will it when I will use file so it will give me the the information about a file it will give the name of the file the size of the file and when we have last modified that particular file then file list why we will use this so file list is contain the list of all file object when handling selection of the multiple file when I want to select a multiple file at that time we require file list means at that time we found to select three file at that time I can use file list then there is a file reader to read file we will use file reader so we will see the simple example based on file here in this you can see I am going to choose one file so that file I am going to choose that file any file I can choose suppose this is my file rtf so I will just open this when I am going to when I open click on the open button so I will get the information about the file so the file name is this then the type of the file it is a MS word file okay and the size of the file and when we have last modified that file that information will get then the next is to choose multiple file selections I can choose this and that after that I can choose this also two file I have selected and you can see this two file I have selected then read this file so I can get this information whatever the content you have in your read file will get that information this particular block so this way we can use file API okay so how we can implement that using one line of code we can get one file if you want to select multiple file we can use this line of code to implement so you take multiple files now we can there is also some interesting API that is MathML MathML is here we can implement some mathematical formulas or we can use some we can implement some matrix okay so using mat tag so this much line of code will implement this particular this particular thing so we will see how like we will see the one simple application based on math tag so look you can see here this is for the matrix and it is not supported this this particular math tag is not supported by Chrome so we can open this with the Firefox you can see now this kind of matrix I want to show so for that I have used this much of code to show this kind of sorry this kind of matrix so with the help of math tag we can implement this kind of matrix as I saw you the matrix presentation example then we have some interesting topic in this that is this is not related with the actually like I cannot show you the code because we are running very late so I can show you the simple example based on this HTML5 and the CSS CSS your cascading style sheet so I have a two application to encourage you to implement and learn this HTML5 okay one application I have sliding I can slide some images there are some button I can slide one if I want to go to directly four slides so I can directly go to four slide or if I want to go to the one by one then I can use this button there is a simple application means the simple web page we have in HTML5 we can develop in HTML5 for the sliding and this particular thing is implemented with the CSS plus HTML5 there is no scripting language in this another beautiful and very interesting application that is you cannot like you cannot say here like we have used HTML5 and CSS but truly we have used as we have implemented like the guy implemented way Kumar using this HTML5 and CSS so this kind of thing you can implement in your HTML5 using HTML5 and CSS so let's see the summary like what we have covered video format drag and drop canvas file API browser supports of video formats and these are the some references from where I have learned those things I'm gonna got that examples and this slides already uploaded in your GitHub or Moodle from there you can download this thank you