HTML5 with examples
-
Upload
gopivthmk -
Category
Technology
-
view
2.854 -
download
1
description
Transcript of HTML5 with examples
![Page 1: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/1.jpg)
- <code>Gopinath T.M</code>
![Page 2: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/2.jpg)
HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.
WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.
![Page 3: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/3.jpg)
The canvas element for drawingThe video and audio elements for media
playbackBetter support for local offline storageNew content specific elements, like article,
footer, header, nav, sectionNew form controls, like calendar, date, time,
email, url, search
![Page 4: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/4.jpg)
Document
DOM
HTML 5
text/html
XHTML 5
application/xhtml+xml
![Page 5: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/5.jpg)
HTML Older version Code<img src="path/to/image" alt="About image" /
> <p>Image of Mars. </p>.HTML5
<figure><img src="path/to/image" alt="About image" /><figcaption><p>This is an image of something interesting.</p></figcaption>
</figure>
![Page 6: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/6.jpg)
HTML Older Version Code.<link rel="stylesheet"
href="path/to/stylesheet.css" type="text/css" /><script type="text/javascript“
src="path/to/script.js"></script>HTML5
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>
![Page 7: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/7.jpg)
HTML Older Version We need to add some client side script to
make the things happened.HTML5
<ul contenteditable="true"><li> Break mechanical cab driver.
</li><li> Drive to abandoned factory<li> Watch video of self </li>
</ul>
![Page 8: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/8.jpg)
Color date datetime datetime-local email File with multiple file selection. month number range Search Tel time url week
![Page 9: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/9.jpg)
HTML Older Version Code. <form action="" method="get">
<label for="email">Email:</label><input id="email" name="email" type=“text" /><button type="submit"> Submit Form </button> </form>
HTML5 <form action="" method="get">
<label for="email">Email:</label><input id="email" name="email" type="email" /><button type="submit"> Submit Form </button>
</form>
![Page 10: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/10.jpg)
HTML Older VersionWe need to required some client side script to
validate the things.HTML5
<form method="post" action=""><label for="someInput"> Your Name: </label><input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required><button type="submit">Go</button></form>
![Page 11: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/11.jpg)
HTML Older VersionWe need to add some client side script to make the
things happened.HTML5<form method="post" action="">
<label for="someInput"> Your Name: </label><input type="text" id="someInput" name="someInput" placeholder=“Enter your name" required><button type="submit">Go</button></form>
![Page 12: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/12.jpg)
HTML5<audio autoplay="autoplay"
controls="controls"><source src="file.ogg" /><source src="file.mp3" /><a href="file.mp3">Download this
file.</a></audio>
![Page 13: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/13.jpg)
<video controls preload><source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" /><source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /><p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p></video>
![Page 14: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/14.jpg)
![Page 15: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/15.jpg)
<form action="" method="post"><label for="username">Create a Username: </label> <input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required><button type="submit">Go </button></form>
![Page 16: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/16.jpg)
<h3> Search Results </h3><p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>
![Page 17: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/17.jpg)
LocalStorage - stores data with no time limit<script type="text/javascript">
localStorage.lastname="Smith";document.write(localStorage.lastname);</script>
SessionStorage - stores data with one time session<script type="text/javascript">
sessionStorage.lastname="Smith";document.write(sessionStorage.lastname);</script>
![Page 18: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/18.jpg)
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);</script>
![Page 19: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/19.jpg)
http://html5test.com/
![Page 20: HTML5 with examples](https://reader038.fdocuments.net/reader038/viewer/2022102921/5404849e8d7f729b768b47d1/html5/thumbnails/20.jpg)
www.developersnacks.com