Html5 and its tags

Views:
 
Category: Entertainment
     
 

Presentation Description

No description available.

Comments

Presentation Transcript

Html5 and its tags:

Html5 and its tags Deepak Surjit & Group

Slide 2:

Certificate of Originality This is to certify that the presentation on HTML5 and It’s Tags submitted to Punjab School Education Board, Mohali in partial fulfillment of the requirement for the award of the Metric class, is an original work carried out by Deepak Belbase with Roll no. 1211733036 under guidance of Mr. Vipan Paul Guru. The matter embodied in this presentation is a genuine work done by the student.

New Markup Elements :

New Markup Elements Tag Description <article> For external content, like text from a news-article, blog, forum, or any other content from an external source <aside> For content aside from the content it is placed in. The aside content should be related to the surrounding content <command> A button, or a radiobutton, or a checkbox <details> For describing details about a document, or parts of a document <summary> A caption, or summary, inside the details element <figure> For grouping a section of stand-alone content, could be a video <figcaption> The caption of the figure section <footer> For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information <header> For an introduction of a document or section, could include navigation <hgroup> For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings

New Markup Elements :

New Markup Elements <mark> For text that should be highlighted <meter> For a measurement, used only if the maximum and minimum values are known <nav> For a section of navigation <progress> The state of a work in progress <ruby> For ruby annotation (Chinese notes or characters) <rt> For explanation of the ruby annotation <rp> What to show browsers that do not support the ruby element <section> For a section in a document. Such as chapters, headers, footers, or any other sections of the document <time> For defining a time or a date, or both <wbr> Word break. For defining a line-break opportunity. Tag Description

New Media Elements :

New Media Elements Tag Description <audio> For multimedia content, sounds, music or other audio streams <video> For video content, such as a movie clip or other video streams <source> For media resources for media elements, defined inside video or audio elements <embed> For embedded content, such as a plug-in

The Canvas Element :

The Canvas Element Tag Description <canvas> For making graphics with a script

New Form Elements :

New Form Elements Tag Description <datalist> A list of options for input values <keygen> Generate keys to authenticate users <output> For different types of output, such as output written by a script

New Input Type Attribute Values :

New Input Type Attribute Values Type Description tel The input value is of type telephone number search The input field is a search field url The input value is a URL email The input value is one or more email addresses datetime The input value is a date and/or time date The input value is a date month The input value is a month week The input value is a week time The input value is of type time datetime-local The input value is a local date/time number The input value is a number range The input value is a number in a given range color The input value is a hexadecimal color, like #FF8800

HTML5 <button> Tag input :

HTML5 <button> Tag input <!DOCTYPE HTML> <html> <body> <button type="button">Click Me!</button> </body> </html>

HTML5 <button> Tag output :

HTML5 <button> Tag output

Input Type – email input :

Input Type – email input <!DOCTYPE HTML> <html> <body> <form action="demo_form.asp" method="get"> E-mail: <input type="email" name=" user_email " />< br /> <input type="submit" /> </form> </body> </html>

Input Type – email output:

Input Type – email output

Input Type – range input:

Input Type – range input <!DOCTYPE HTML> <html> <body> <form action="demo_form.asp" method="get"> Points: <input type="range" name="points" min="1" max="10" /> <input type="submit" /> </form> </body> </html>

Input Type – range output:

Input Type – range output

Video Format HTML tags input:

Video Format HTML tags input <!DOCTYPE HTML> <html> <body> <video src ="movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video> </body> </html>

Video Format HTML tags output:

Video Format HTML tags output

Video Format HTML tags input:

Video Format HTML tags input <!DOCTYPE HTML> <html> <body> <video width="320" height="240" controls="controls"> <source src ="movie.ogg" type="video/ ogg " /> <source src ="movie.mp4" type="video/mp4" /> <source src =" movie.webm " type="video/ webm " /> Your browser does not support the video tag. </video> </body> </html>

Video Format HTML tags output:

Video Format HTML tags output

All <video> Attributes :

All <video> Attributes Attribute Value Description audio muted Defining the default state of the the audio. Currently, only "muted" is allowed autoplay autoplay If present, then the video will start playing as soon as it is ready controls controls If present, controls will be displayed, such as a play button height pixels Sets the height of the video player loop loop If present, the video will start over again, every time it is finished poster url Specifies the URL of an image representing the video preload preload If present, the video will be loaded at page load, and ready to run. Ignored if "autoplay" is present src url The URL of the video to play width pixels Sets the width of the video player

Thanks:

Thanks

authorStream Live Help