Html5 ppt

1. 0 HTML 5 By : Rahul H. Gupta

4. 3 HTML Basics elements • HTML tags are used to label the pieces of a page contents like : heading, paragraph, table. • A tag looks like: <Name of tag> content goes here... </Name of tag> (Opening tag) (Closing tag) • Example: <html> </html> (Tag for Document start) <body> </body> (Tag for Body of page) <p> </p> (Tag for paragraph) <table></table> (Tag for creating a table) <a> </a> (Tag for link) Copyright 2016 Fujitsu India GDC

5. 4 HTML Basics elements (Cont.…) <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Copyright 2016 Fujitsu India GDC • Declaration defines this document to be HTML5. • html element is the root element of an HTML page. • Head element contains meta information about the document. • title element specifies a title for the document. • body element contains the visible page content. • h1 element defines a large heading. • P element defines a paragraph.

6. 5 HTML Attributes • All HTML elements can have attributes. • Provide additional information about an element. • Always specified in the start / opening tag. • Attributes usually come in name=“value” manner. like: height=“142”, src=“w3schools.jpg”. Example : <img src="w3schools.jpg" width="104" height="142"> Copyright 2016 Fujitsu India GDC

7. 6 HTML Attributes (Cont.…) Copyright 2016 Fujitsu India GDC Attribute Description alt Specifies an alternative text for an image, when the image cannot be displayed disabled Specifies that an input element should be disabled href Specifies the URL (web address) for a link id Specifies a unique id for an element src Specifies the URL (web address) for an image style Specifies an inline CSS style for an element title Specifies extra information about an element (displayed as a tool tip)

8. 7 HTML Formatting • Some times we need to specify that the written text is important. HTML Formatting provides this feature. Here is the list of elements used for formatting: <element> - Description - (Example) • <b> - Bold text - (This text is bold) • <strong> - Important text - (This text is strong) • <i> - Italic text - (This text is italic) • <em> - Emphasized text - (This text is emphasized) • <mark> - Marked text - ( ) Copyright 2016 Fujitsu India GDC This text is marked.

9. 8 HTML Formatting (Cont.…) • <small> - Small text - (This is normal text but this text is small text.) • <del> - Deleted text - (This is deleted text.) • <ins> - Inserted text - (This text is inserted.) • <sub> - Subscript text - (Normal text ) • <sup> - Superscript text - ( Normal Text) Copyright 2016 Fujitsu India GDC Subscripted text Superscripted text

10. 9 HTML Images • Images are being widely used in web pages now-a-days. • All social, educational and E-commerce are using images. • Syntax: • src (source) = Defines the link/url for image being used. • Alt (alternate text) = Defines alternate text for the image in case image is not displayed. • style (style attributes) = Defines style attributes. Like: width, border etc. Copyright 2016 Fujitsu India GDC <img src=“url of image” alt=“alternate text” style=“width: width; height: height;”>

11. 10 HTML Table (Cont.…) • HTML table is defined with the <table>…</table> tag. <th> - Tag for table heading. <tr> - Tag for table row. <td> - Tag for table column. • A table has following properties: Border, padding, text-align, span, id. • The <td> elements are the data containers of the table and data may be text, images, lists, other tables, etc. Copyright 2016 Fujitsu India GDC

12. 11 HTML Table (Cont.…) Copyright 2016 Fujitsu India GDC Tag Description <table> Defines a table <th> Defines a header cell in a table <tr> Defines a row in a table <td> Defines a cell in a table <caption> Defines a table caption <colgroup> Specifies a group of one or more columns in a table for formatting <col> Specifies column properties for each column within a <colgroup> element <thead> Groups the header content in a table <tbody> Groups the body content in a table <tfoot> Groups the footer content in a table

13. 12 HTML Iframes • An iframe is used to display a web page within a web page. • HTML iframe is defined with the <iframe> tag • iframe can be used as the target frame for a link. • Syntax: • Iframes can be nested like other HTML elements. Copyright 2016 Fujitsu India GDC <iframe src="URL"> </iframe>

14. 13 HTML Graphics • Shapes can be drawn in a HTML web page using graphics. • The HTML <canvas> element is used to draw graphics. • A canvas is a rectangular area on an HTML page. • Syntax: • By default, a canvas has no border and no content. Copyright 2016 Fujitsu India GDC <canvas id="myCanvas" width="200" height="100"></canvas>

15. 14 HTML Forms • The HTML <form> element defines a form that is used to collect user input. Form elements are: text fields, checkboxes, radio buttons, submit buttons, and more. • <input> element is the most important form element. • The action attribute defines the action to be performed when the form is submitted. Copyright 2016 Fujitsu India GDC Type Description <input type="text"> Defines a one-line text input field <input type="radio"> Defines a radio button (for selecting one of many choices) <input type="submit"> Defines a submit button (for submitting the form) Syntax: <form> form elements </form>

16. 15 Form Input Attributes • The value attribute specifies the initial value for an input field: • The read-only attribute specifies that the input field is read only (cannot be changed): • The maxlength attribute specifies the maximum allowed length for the input field: Copyright 2016 Fujitsu India GDC <form action=""> First name:<br> <input type="text" name="firstname" value="John"> </form> <form action=""> First name:<br> <input type="text" name="firstname" value="John" readonly> </form> <form action=""> First name:<br> <input type="text" name="firstname" maxlength="10"> </form>

17. 16 HTML5 Introduction • HTML5 is the next major revision of the HTML standard superseding HTML 4.01. • HTML5 is a standard for structuring and presenting content on the World Wide Web. • New Semantic Elements : These are : <header>, <footer> & <section>. • Canvas : Allows two-dimensional drawing using JavaScript. • Audio & Video : You can embed audio or video on your web pages. • Geolocation : Allows visitor to share his physical location with web application. • Drag and drop : Drag and drop the items from one location to another location on a the same webpage. Copyright 2016 Fujitsu India GDC

18. 17 HTML5 New Elements Copyright 2016 Fujitsu India GDC Tag Description <article> Defines an article in a document <aside> Defines content aside from the page content <details> Defines additional details that the user can view or hide <dialog> Defines a dialog box or window <figcaption> Defines a caption for a <figure> element <figure> Defines self-contained content <footer> Defines a footer for a document or section <header> Defines a header for a document or section <main> Defines the main content of a document

19. 18 HTML5 Semantic Elements • A semantic element clearly describes its meaning to both the browser and the developer. • Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content. • Examples of non-semantic elements: <div> and <span>, Tells nothing about its content. Copyright 2016 Fujitsu India GDC Semantic Description <section> A thematic grouping of content, typically with a heading <article> An article should make sense on its own. E.g.. Forum post, Blog post ,Newspaper article <header> The specifies a header for a document or section <footer> Should contain information about its containing element. <nav> Defines a set of navigation links. <aside> Defines some content aside from the content it is placed in (like a sidebar).

20. 19 HTML MEDIA • Sound, Music, Videos, Movies, and Animations on the web is Multimedia. • Multimedia elements (like audio or video) are stored in media files. • The file extension tells the type of a file. • Popular file formats are: MP4, JPEG, FLV etc. Copyright 2016 Fujitsu India GDC

21. 20 MEDIA FORMATS Copyright 2016 Fujitsu India GDC MPEG .mpg .mpeg MPEG. Developed by the Moving Pictures Expert Group. Not supported in HTML5. AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Plays well on Windows computers, but not in web browsers. Flash .swf .flv Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers. Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5. WebM .webm WebM. Developed by the web giants, Mozilla, Opera, Adobe, and Google. Supported by HTML5. MPEG-4 or MP4 .mp4 MP4. Developed by the Moving Pictures Expert Group. Supported by all HTML5 browsers. Recommended by YouTube. Format File Description

22. 21 Video • Before HTML5, a video could only be played in a browser with a plug-in (like flash). • The HTML5 <video> element specifies a standard way to embed a video in a web page. • Syntax : Here is the syntax… • Browser support: Copyright 2016 Fujitsu India GDC Browser Chrome Internet Explorer Mozilla Firefox Safari Opera Mini Supported version 4.0 9.0 3.5 4.0 10.5 <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

23. 22 Audio • The HTML5 <audio> element specifies a standard way to embed audio in a web page. • Browser support is same as video. • Syntax: Here is the syntax… • Audio media types: Copyright 2016 Fujitsu India GDC File Format Media Type MP3 audio/mpeg Ogg audio/ogg Wav audio/wav <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

24. 23 YouTube Videos • In previous method of playing video you might have to convert videos to different formats to make them play in all browsers. • Converting videos to different formats can be difficult and time-consuming. • The easiest way to play videos in HTML, is to use YouTube. • YouTube will display an id (like XGSy3_Czz8k), when you save (or play) a video. • Syntax: Copyright 2016 Fujitsu India GDC <iframe width="420" height="315" src="https://www.youtube.com/embed/XGSy3_Czz8k"> </iframe>

25. 24 HTML API’s • Drag and drop is a very common but very important feature. HTML 5 provides you the feature. • Browser supported: • To use this feature one must have basic knowledge of JavaScript and CSS Copyright 2016 Fujitsu India GDC Browser Chrome Internet Explorer Mozilla Firefox Safari Opera Mini Supported version 4.0 9.0 3.5 6.0 12.0

26. 25 HTML Drag & Drop Copyright 2016 Fujitsu India GDC <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document . getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true” ondragstart="drag(event)" width="336” height="69"> </body> </html>

27. 26 JavaScript • JavaScript makes HTML pages more dynamic and interactive. • JavaScript can change HTML content, Attributes and Style of a web page. • <script></script> tag is used to place JavaScript code. • Syntax: Copyright 2016 Fujitsu India GDC <script> function MyFunction1 { …statements… } function MyFunction2 { …statements… } function MyFunction3 { …statements… } </script>

28. 27 CSS C S S Cascading Style Sheets • CSS describes how HTML elements are to be displayed on screen, paper, or in other media. • Syntax: • CSS can be added to HTML elements in 3 ways: Inline - by using the style attribute in HTML elements Internal - by using a <style> element in the <head> section External - by using an external CSS file Copyright 2016 Fujitsu India GDC <h1 style="color : blue;">This is a Blue Heading</h1>

30. 29

Html5 ppt

Html5 ppt

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados(20)

Similar a Html5 ppt

Similar a Html5 ppt(20)

Último

Último(20)

Html5 ppt