Download to read offline
Uploaded byCollaboration Technologies
Introduction to HTML5
The document provides an overview and introduction to HTML5, including its new features and tags. It discusses topics such as getting started, page structure, new tags like <header> and <footer>, multimedia additions like canvas and SVG, CSS3 features, forms, and interactions. The document also provides code examples for HTML5 features like canvas text, SVG circles, drag and drop, transitions, transformations, and embedding audio. It concludes with information about the company providing the presentation.
Introduction to HTML5
- 1. Introduction to HTML5 www.collaborationtech.co.in BengaluruINDIA Presentation By Ramananda M.S Rao
- 2. Content Content Overview & Features GetStarted Structure of a Web Page HTML 5 New Tags Canvas shims, fallbacks, and polyfill Parallax Scrolling SVG CSS 3 Basics Background, Colors and Fonts Shadows and Gradients Styles, Layout & Navigational Aids Multi-columns, flexible box or grid layouts Web forms and controls Text Effects Transitions Animations Transforms Drag N Drop Key Frames User Interface www.collaborationtech.co.in
- 3. Content Content Multimedia Media Queries Images andGallery Charts and Gauges Geo Location History API’s File API’s Typography Infographics Web Accessibility Web DOM Events Server Send Events Message API’s Web sockets Web Workers Web App Cache Web Storage Web Database Web RTC About Us www.collaborationtech.co.in
- 4. Overview and Features HTML5 is a W3C specification that defines the fifth major revision of the Hypertext Markup Language (HTML). One of the major changes in HTML5 is in respect to how HTML addresses Web applications and solve compatibility problems that affect the current standard, HTML4. Multimedia - Using HTML5 audio and video, WebRTC, Using the Camera API and Track and WebVTT. HTML 5 has created tags to support those elements of the page. <section> - to define sections of pages <header> - defines the header of a page <footer> - defines the footer of a page <nav> - defines the navigation on a page <article> - defines the article or primary content on a page <aside> - defines extra content like a sidebar on a page <figure> - defines images that annotate an article www.collaborationtech.co.in
- 5. HTML5 - NewTags (Elements) <article>: Represents an independent piece of content of a document, such as a blog entry or newspaper article <aside>: Represents a piece of content that is only slightly related to the rest of the page. <audio>: Defines an audio file. <canvas>: This is used for rendering dynamic bitmap graphics on the fly, such as graphs or games. <command>: Represents a command the user can invoke. <datalist>: Together with the a new list attribute for input can be used to make comboboxes <details>: Represents additional information or controls which the user can obtain on demand <embed>: Defines external interactive content or plugin. <figure>: Represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document. <footer>: Represents a footer for a section and can contain information about the author, copyright information, et cetera. <header>: Represents a group of introductory or navigational aids. <hgroup>: Represents the header of a section. www.collaborationtech.co.in
- 6. HTML5 - Canvas It can be used to draw graphs, make photo compositions or do simple (and not so simple) animations. Example: CanvasText f<!doctype html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50); </script> </body> </html> www.collaborationtech.co.in
- 7. HTML5 - SVG Example:SVGCircle <!doctype html> <html> <body> <svg width="200" height="200"> <rect x="10" y="20" width="100" height="80" stroke="red" fill="#ccc" /> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke- width="8" /> </svg> </body> </html> www.collaborationtech.co.in
- 8. Drag N Drop <!doctypeHTML> <html> <head> <style> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <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> <p>Drag Collaboration image into the logo:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="Logo.jpg" draggable="true" ondragstart="drag(event)" width="300px" height="69px"> </body> </html> hj www.collaborationtech.co.in
- 9. HTML5 - Transitions <!doctypehtml> <html> <head> <title>basic animation</title> <style> a{display: block;width: 300px;line-height: 100px;height: 100px;text-align: center;font-size: 50px;font-family: sans-serif;font-weight: bold;color: black;border: 10px solid black;text-decoration: none;transition: all 1s;-ms-transition: all 1s;} a:hover{color: red;} </style> <script src="js/prefixfree.js"></script> </head> <body> <a href="#"> HOVER ME </a> </body> </html> www.collaborationtech.co.in
- 10. HTML5 - Transformations <!doctypehtml> <html> <head> <style> div {width:100px;height:75px;background-color:red;border:1px solid black;} div#div2 {transform:matrix(0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.5,- 0.5,0.866,0,0); /* IE 9 */-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ } </style> </head> <body> <div>Hello. This is a DIV element.</div> <div id="div2">Hello. This is a DIV element.</div> </body> </html> www.collaborationtech.co.in
- 11. Multimedia Audio: <!doctype html> <html> <title>audio example</title> <head></head> <bodybgcolor="lightblue"> <audio controls > <source src="audio/a1.mp3"> <source src="audio/a2.mp3"> </audio> </body> </html> www.collaborationtech.co.in
- 12. Follow us onSocial Facebook: https://www.facebook.com/collaborationtechnologies/ Twitter : https://twitter.com/collaboration09 Google Plus : https://plus.google.com/100704494006819853579 LinkedIn : https://www.linkedin.com/in/ramananda-rao-a2012545 Instagram : https://instagram.com/collaborationtechnologies YouTube : https://www.youtube.com/channel/UCm9nK56LRbWSqcYWbzs8CUg Skype : facebook:ramananda.rao.7 WhatsApp : +91 9886272445 www.collaborationtech.co.in THANK YOU
- 13.